import React, { useState, useEffect, useRef } from 'react';
import { useAuth } from '../context/AuthContext';
import { AuthModal } from './AuthModal';

interface HeaderProps {
  currentView: 'home' | 'workspace' | 'my-filings';
  onNavigate: (view: 'home' | 'workspace' | 'my-filings') => void;
  selectedCity: string;
  onSelectCity: (city: string) => void;
  unreadNotifications?: number;
  filingsCount?: number;
}

export const CITIES = [
  'Delhi (NCR)',
  'Bengaluru',
  'Mumbai',
  'Chennai',
  'Hyderabad',
  'Kolkata',
  'Pune',
  'Ahmedabad',
  'Jaipur',
  'Chandigarh',
];

export const Header: React.FC<HeaderProps> = ({
  currentView,
  onNavigate,
  selectedCity,
  onSelectCity,
  unreadNotifications = 2,
  filingsCount = 0,
}) => {
  const { user, loading, signOut, sendVerificationEmail, reloadUser } = useAuth();
  const [showCityMenu, setShowCityMenu] = useState(false);
  const [showNotificationMenu, setShowNotificationMenu] = useState(false);
  const [showProfileMenu, setShowProfileMenu] = useState(false);
  const [showAuthModal, setShowAuthModal] = useState(false);
  const [authWorking, setAuthWorking] = useState(false);
  const [verifSent, setVerifSent] = useState(false);
  const [verifError, setVerifError] = useState<string | null>(null);

  const cityMenuRef = useRef<HTMLDivElement>(null);
  const notificationMenuRef = useRef<HTMLDivElement>(null);
  const profileMenuRef = useRef<HTMLDivElement>(null);

  const handleSendVerification = async () => {
    setVerifError(null);
    setVerifSent(false);
    try {
      await sendVerificationEmail();
      setVerifSent(true);
      setTimeout(() => setVerifSent(false), 5000);
    } catch (err: any) {
      setVerifError(err?.message || 'Could not send verification email.');
    }
  };

  const handleCheckVerification = async () => {
    try {
      await reloadUser();
    } catch (err) {
      console.warn('Could not reload user status:', err);
    }
  };

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      const target = event.target as Node;
      if (cityMenuRef.current && !cityMenuRef.current.contains(target)) {
        setShowCityMenu(false);
      }
      if (notificationMenuRef.current && !notificationMenuRef.current.contains(target)) {
        setShowNotificationMenu(false);
      }
      if (profileMenuRef.current && !profileMenuRef.current.contains(target)) {
        setShowProfileMenu(false);
      }
    };

    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        setShowCityMenu(false);
        setShowNotificationMenu(false);
        setShowProfileMenu(false);
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    window.addEventListener('keydown', handleKeyDown);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, []);

  const handleSignOut = async () => {
    setAuthWorking(true);
    try {
      await signOut();
      setShowProfileMenu(false);
    } catch (err) {
      console.error('Sign-out error:', err);
    } finally {
      setAuthWorking(false);
    }
  };

  return (
    <>
      <header className="bg-white/95 backdrop-blur-md border-b border-[#E2E8F0] sticky top-0 z-50 transition-all duration-200">
        <div className="flex justify-between items-center w-full px-4 sm:px-8 md:px-10 max-w-[1280px] mx-auto h-16">
          {/* Brand & City Selector */}
          <div className="flex items-center gap-4">
            <button
              onClick={() => onNavigate('home')}
              className="font-headline text-[22px] font-bold text-[#0F172A] flex items-center gap-2 tracking-tight group text-left cursor-pointer"
            >
              <span className="material-symbols-outlined fill text-[#006c4a] text-[26px] group-hover:rotate-[-6deg] transition-transform duration-200">
                gavel
              </span>
              <span>CaseLoop</span>
            </button>

            <div className="hidden md:flex items-center gap-2">
              <div ref={cityMenuRef} className="relative">
                <button
                  onClick={() => setShowCityMenu(!showCityMenu)}
                  className="flex items-center gap-1.5 px-2.5 py-1 bg-[#F1F5F9] hover:bg-[#E2E8F0] text-[#475569] hover:text-[#0F172A] rounded-full border border-[#CBD5E1] text-[12px] font-medium transition-colors cursor-pointer"
                  title="Change jurisdiction location"
                >
                  <span className="material-symbols-outlined text-[15px] text-[#64748B]">location_on</span>
                  <span>{selectedCity}</span>
                  <span className="material-symbols-outlined text-[14px] text-[#94A3B8]">arrow_drop_down</span>
                </button>

                {showCityMenu && (
                  <div className="absolute left-0 mt-1.5 w-44 bg-white rounded-lg shadow-lg border border-[#E2E8F0] py-1 z-50 animate-in fade-in zoom-in-95 duration-150">
                    <div className="px-3 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-[#94A3B8] border-b border-[#F1F5F9]">
                      Select Jurisdiction
                    </div>
                    {CITIES.map((city) => (
                      <button
                        key={city}
                        onClick={() => {
                          onSelectCity(city);
                          setShowCityMenu(false);
                        }}
                        className={`w-full text-left px-3 py-1.5 text-[13px] flex items-center justify-between hover:bg-[#F8FAFC] transition-colors ${
                          selectedCity === city ? 'font-semibold text-[#006c4a] bg-[#F0FDF4]' : 'text-[#334155]'
                        }`}
                      >
                        {city}
                        {selectedCity === city && (
                          <span className="material-symbols-outlined text-[16px] text-[#006c4a]">check</span>
                        )}
                      </button>
                    ))}
                  </div>
                )}
              </div>
            </div>
          </div>

          {/* Clean Single Navigation Link */}
          <nav className="flex items-center gap-3 sm:gap-6">
            <button
              onClick={() => onNavigate('my-filings')}
              className={`text-[13.5px] font-medium transition-colors cursor-pointer flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg relative ${
                currentView === 'my-filings'
                  ? 'text-[#006c4a] font-bold bg-[#F0FDF4]'
                  : 'text-[#64748B] hover:text-[#0F172A] hover:bg-[#F8FAFC]'
              }`}
            >
              <span className="material-symbols-outlined text-[18px]">folder</span>
              <span>My Filings</span>
              {filingsCount > 0 && (
                <span className="text-[10px] font-bold px-1.5 py-0.2 bg-[#006c4a] text-white rounded-full">
                  {filingsCount}
                </span>
              )}
            </button>
          </nav>

          {/* Notifications & Profile */}
          <div className="flex items-center gap-3">
            <div ref={notificationMenuRef} className="relative">
              <button
                onClick={() => setShowNotificationMenu(!showNotificationMenu)}
                className="text-[#64748B] hover:text-[#0F172A] flex items-center justify-center w-9 h-9 rounded-full bg-[#F1F5F9] hover:bg-[#E2E8F0] border border-[#CBD5E1] transition-colors relative cursor-pointer"
                title="Notifications"
              >
                <span className="material-symbols-outlined text-[18px]">notifications</span>
                {unreadNotifications > 0 && (
                  <span className="absolute top-1 right-1 w-2 h-2 bg-[#D97706] rounded-full ring-2 ring-white"></span>
                )}
              </button>

              {showNotificationMenu && (
                <div className="absolute right-0 mt-2 w-80 bg-white rounded-xl shadow-xl border border-[#E2E8F0] p-3 z-50 animate-in fade-in duration-150">
                  <div className="flex justify-between items-center pb-2 border-b border-[#F1F5F9] mb-2">
                    <span className="font-headline font-semibold text-[14px] text-[#0F172A]">Filing Alerts</span>
                    <span className="text-[11px] text-[#059669] font-medium bg-[#059669]/10 px-2 py-0.5 rounded">2 Active</span>
                  </div>
                  <div className="flex flex-col gap-2">
                    <div className="p-2.5 bg-[#FEF3C7]/60 border border-[#FDE68A] rounded-lg text-[12px]">
                      <div className="font-semibold text-[#92400E] flex items-center gap-1">
                        <span className="material-symbols-outlined text-[14px]">timer</span>
                        Statutory Clock Notice
                      </div>
                      <p className="text-[#78350F] mt-0.5">Agency response required within 18 statutory calendar days.</p>
                    </div>
                    <div className="p-2.5 bg-[#F0FDF4] border border-[#DCFCE7] rounded-lg text-[12px]">
                      <div className="font-semibold text-[#166534] flex items-center gap-1">
                        <span className="material-symbols-outlined text-[14px]">cloud_done</span>
                        Firebase Real-time Storage
                      </div>
                      <p className="text-[#14532D] mt-0.5">Your filings are synced automatically with zero data loss.</p>
                    </div>
                  </div>
                </div>
              )}
            </div>

            {loading ? (
              <div className="w-8 h-8 rounded-full bg-slate-200 animate-pulse"></div>
            ) : user ? (
              <div ref={profileMenuRef} className="relative">
                <button
                  onClick={() => setShowProfileMenu(!showProfileMenu)}
                  className="flex items-center gap-2 px-2 py-1 rounded-full border border-[#CBD5E1] hover:border-[#94A3B8] bg-white transition-all cursor-pointer shadow-xs"
                  title="Account Settings"
                >
                  <img
                    alt={user.displayName || 'User'}
                    className="w-7 h-7 rounded-full object-cover border border-[#E2E8F0]"
                    src={
                      user.photoURL ||
                      'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150&auto=format&fit=crop&q=80'
                    }
                  />
                  <span className="hidden sm:inline text-[12px] font-semibold text-[#1E293B] max-w-[90px] truncate">
                    {user.displayName?.split(' ')[0] || 'Citizen'}
                  </span>
                  <span className="material-symbols-outlined text-[14px] text-[#94A3B8]">expand_more</span>
                </button>

                {showProfileMenu && (
                  <div className="absolute right-0 mt-2 w-64 bg-white rounded-xl shadow-xl border border-[#E2E8F0] p-3 z-50 animate-in fade-in duration-150">
                    <div className="flex items-center gap-2.5 pb-2.5 border-b border-[#F1F5F9]">
                      <img
                        src={
                          user.photoURL ||
                          'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150&auto=format&fit=crop&q=80'
                        }
                        alt="User"
                        className="w-9 h-9 rounded-full object-cover border border-[#E2E8F0]"
                      />
                      <div className="overflow-hidden">
                        <div className="font-semibold text-[13px] text-[#0F172A] truncate">
                          {user.displayName || 'Citizen User'}
                        </div>
                        <div className="text-[11px] text-[#64748B] truncate">{user.email || 'citizen@caseloop.app'}</div>
                      </div>
                    </div>

                    {user.email && (
                      <div className="mt-2 p-2 rounded-lg bg-[#F8FAFC] border border-[#E2E8F0] text-[11.5px]">
                        <div className="flex items-center justify-between">
                          <span className="font-medium text-[#475569]">Email Status</span>
                          {user.emailVerified ? (
                            <span className="inline-flex items-center gap-1 text-[#059669] font-semibold bg-[#DCFCE7] px-2 py-0.5 rounded-full text-[10.5px]">
                              <span className="material-symbols-outlined text-[13px]">verified</span>
                              Verified
                            </span>
                          ) : (
                            <span className="inline-flex items-center gap-1 text-[#D97706] font-semibold bg-[#FEF3C7] px-2 py-0.5 rounded-full text-[10.5px]">
                              <span className="material-symbols-outlined text-[13px]">pending</span>
                              Unverified
                            </span>
                          )}
                        </div>

                        {!user.emailVerified && (
                          <div className="mt-2 pt-2 border-t border-[#E2E8F0] flex flex-col gap-1">
                            <button
                              onClick={handleSendVerification}
                              className="text-left text-[#006c4a] hover:underline font-semibold flex items-center gap-1 cursor-pointer"
                            >
                              <span className="material-symbols-outlined text-[14px]">forward_to_inbox</span>
                              {verifSent ? 'Verification link sent!' : 'Send Verification Email'}
                            </button>
                            <button
                              onClick={handleCheckVerification}
                              className="text-left text-[#64748B] hover:text-[#0F172A] flex items-center gap-1 cursor-pointer text-[11px]"
                            >
                              <span className="material-symbols-outlined text-[13px]">refresh</span>
                              Check status after verifying
                            </button>
                            {verifError && (
                              <p className="text-[11px] text-[#DC2626] mt-1 leading-snug">{verifError}</p>
                            )}
                          </div>
                        )}
                      </div>
                    )}

                    <div className="mt-2 flex flex-col gap-1 text-[13px]">
                      <button
                        onClick={() => {
                          onNavigate('my-filings');
                          setShowProfileMenu(false);
                        }}
                        className="w-full text-left px-2 py-1.5 hover:bg-[#F8FAFC] rounded text-[#334155] flex items-center gap-2 cursor-pointer mt-1"
                      >
                        <span className="material-symbols-outlined text-[16px]">folder</span>
                        <span>My Cloud Filings ({filingsCount})</span>
                      </button>

                      <div className="border-t border-[#F1F5F9] my-1"></div>

                      <button
                        onClick={handleSignOut}
                        disabled={authWorking}
                        className="w-full text-left px-2 py-1.5 hover:bg-[#FEF2F2] rounded text-[#DC2626] font-medium flex items-center gap-2 cursor-pointer transition-colors"
                      >
                        <span className="material-symbols-outlined text-[16px]">logout</span>
                        <span>{authWorking ? 'Signing Out...' : 'Sign Out'}</span>
                      </button>
                    </div>
                  </div>
                )}
              </div>
            ) : (
              <button
                onClick={() => setShowAuthModal(true)}
                className="group relative inline-flex items-center gap-2 px-4 py-2 rounded-xl text-[13px] font-semibold text-white bg-[#0F172A] hover:bg-[#1E293B] active:scale-[0.98] border border-slate-700/60 shadow-sm hover:shadow transition-all duration-200 cursor-pointer overflow-hidden"
              >
                <div className="w-1.5 h-1.5 rounded-full bg-[#10B981] group-hover:scale-125 transition-transform duration-200"></div>
                <span>Sign In</span>
                <span className="material-symbols-outlined text-[16px] text-slate-400 group-hover:translate-x-0.5 group-hover:text-white transition-all duration-200">
                  arrow_forward
                </span>
              </button>
            )}
          </div>
        </div>
      </header>

      <AuthModal
        isOpen={showAuthModal}
        onClose={() => setShowAuthModal(false)}
      />
    </>
  );
};