Frontend/src/components/Header.tsx

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)}

      />

    </>
  );
};