import React, { useState } from "react";
import { Menu, X, Landmark, Compass, FolderClosed, MessageSquare, LogOut, User, Globe } from "lucide-react";
import { translations } from "../translations";

interface HeaderProps {
  currentPath: string;
  onNavigate: (path: string) => void;
  savedCount: number;
  compareCount: number;
  clientUser?: { name: string; email: string } | null;
  adminUser?: { email: string; role: string } | null;
  onLogout?: () => void;
  lang: "en" | "id";
  onToggleLang: () => void;
}

export default function Header({ 
  currentPath, 
  onNavigate, 
  savedCount, 
  compareCount,
  clientUser,
  adminUser,
  onLogout,
  lang,
  onToggleLang
}: HeaderProps) {
  const [mobileOpen, setMobileOpen] = useState(false);
  const t = translations[lang];

  return (
    <header className="sticky top-0 z-50 bg-[#FDFCFB]/80 backdrop-blur-xl border-b border-[#EEECE6]/50 w-full transition-all duration-300">
      <div className="flex justify-between items-center w-full px-5 md:px-[80px] py-5 max-w-[1440px] mx-auto">
        {/* Brand Logo */}
        <button
          onClick={() => {
            onNavigate("/");
            setMobileOpen(false);
          }}
          className="font-serif text-2xl font-light tracking-[0.08em] text-[#1A1A1A] hover:text-[#C5A572] transition-colors duration-500 cursor-pointer text-left focus:outline-none flex flex-col"
          id="nav-logo"
        >
          <span className="font-serif font-extralight text-2xl leading-none">L U N I A R</span>
          <span className="font-sans text-[8px] font-bold uppercase tracking-[0.3em] text-[#C5A572] mt-[3px] leading-none">{t.brandName === "LUNIAR ESTATE" ? "ESTATE ARCHIVES" : "ARSIP ESTATE"}</span>
        </button>

        {/* Desktop Navigation */}
        <div className="hidden md:flex space-x-12 items-center">
          <button
            onClick={() => onNavigate("/")}
            className={`relative font-sans text-[11px] font-semibold uppercase tracking-[0.2em] py-1 cursor-pointer transition-colors duration-500 select-none ${
              currentPath === "/"
                ? "text-[#C5A572]"
                : "text-[#555555] hover:text-[#C5A572]"
            }`}
          >
            <span>{t.home}</span>
            <span className={`absolute bottom-0 left-0 h-[1.5px] bg-[#C5A572] transition-all duration-500 ${currentPath === "/" ? "w-full" : "w-0 hover:w-full"}`}></span>
          </button>
          
          <div className="relative group">
            <button
              onClick={() => onNavigate("/luxury-villas-bali")}
              className={`relative font-sans text-[11px] font-semibold uppercase tracking-[0.2em] py-1 cursor-pointer transition-colors duration-500 flex items-center gap-1 select-none ${
                ["/luxury-villas-bali", "/apartments-jakarta", "/houses-surabaya", "/commercial-property-bandung"].includes(currentPath)
                  ? "text-[#C5A572]"
                  : "text-[#555555] hover:text-[#C5A572]"
              }`}
            >
              <span>Portfolios</span>
              <span className="material-symbols-outlined text-[10px] transition-transform duration-300 group-hover:rotate-180">keyboard_arrow_down</span>
              <span className={`absolute bottom-0 left-0 h-[1.5px] bg-[#C5A572] transition-all duration-500 ${["/luxury-villas-bali", "/apartments-jakarta", "/houses-surabaya", "/commercial-property-bandung"].includes(currentPath) ? "w-full" : "w-0"}`}></span>
            </button>
            <div className="absolute left-1/2 -translate-x-1/2 mt-2 w-56 bg-[#FDFCFB]/95 backdrop-blur-xl border border-[#EEECE6] shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50 py-3 rounded-none">
              <button
                onClick={() => onNavigate("/luxury-villas-bali")}
                className="w-full text-left px-5 py-2.5 text-[10px] font-semibold uppercase tracking-[0.15em] text-[#555555] hover:text-[#C5A572] hover:bg-[#F5F3EF]/50 transition-all duration-200 cursor-pointer"
              >
                {t.villas} <span className="font-serif italic lowercase text-[11px] font-normal tracking-normal text-[#C5A572] ml-1">(Bali)</span>
              </button>
              <button
                onClick={() => onNavigate("/apartments-jakarta")}
                className="w-full text-left px-5 py-2.5 text-[10px] font-semibold uppercase tracking-[0.15em] text-[#555555] hover:text-[#C5A572] hover:bg-[#F5F3EF]/50 transition-all duration-200 cursor-pointer"
              >
                {t.apartments} <span className="font-serif italic lowercase text-[11px] font-normal tracking-normal text-[#C5A572] ml-1">(Jakarta)</span>
              </button>
              <button
                onClick={() => onNavigate("/houses-surabaya")}
                className="w-full text-left px-5 py-2.5 text-[10px] font-semibold uppercase tracking-[0.15em] text-[#555555] hover:text-[#C5A572] hover:bg-[#F5F3EF]/50 transition-all duration-200 cursor-pointer"
              >
                {t.houses} <span className="font-serif italic lowercase text-[11px] font-normal tracking-normal text-[#C5A572] ml-1">(Surabaya)</span>
              </button>
              <button
                onClick={() => onNavigate("/commercial-property-bandung")}
                className="w-full text-left px-5 py-2.5 text-[10px] font-semibold uppercase tracking-[0.15em] text-[#555555] hover:text-[#C5A572] hover:bg-[#F5F3EF]/50 transition-all duration-200 cursor-pointer"
              >
                {t.commercial} <span className="font-serif italic lowercase text-[11px] font-normal tracking-normal text-[#C5A572] ml-1">(Bandung)</span>
              </button>
            </div>
          </div>

          <button
            onClick={() => onNavigate("/about")}
            className={`relative font-sans text-[11px] font-semibold uppercase tracking-[0.2em] py-1 cursor-pointer transition-colors duration-500 select-none ${
              currentPath === "/about"
                ? "text-[#C5A572]"
                : "text-[#555555] hover:text-[#C5A572]"
            }`}
          >
            <span>{t.about}</span>
            <span className={`absolute bottom-0 left-0 h-[1.5px] bg-[#C5A572] transition-all duration-500 ${currentPath === "/about" ? "w-full" : "w-0"}`}></span>
          </button>

          <button
            onClick={() => onNavigate("/contact")}
            className={`relative font-sans text-[11px] font-semibold uppercase tracking-[0.2em] py-1 cursor-pointer transition-colors duration-500 select-none ${
              currentPath === "/contact"
                ? "text-[#C5A572]"
                : "text-[#555555] hover:text-[#C5A572]"
            }`}
          >
            <span>{t.contact}</span>
            <span className={`absolute bottom-0 left-0 h-[1.5px] bg-[#C5A572] transition-all duration-500 ${currentPath === "/contact" ? "w-full" : "w-0"}`}></span>
          </button>

          {clientUser && (
            <button
              onClick={() => onNavigate("/client-desk")}
              className={`relative font-sans text-[11px] font-semibold uppercase tracking-[0.2em] py-1 cursor-pointer transition-colors duration-500 select-none ${
                currentPath === "/client-desk"
                  ? "text-[#C5A572]"
                  : "text-[#555555] hover:text-[#C5A572]"
              }`}
            >
              <span>{t.clientDesk}</span>
              <span className={`absolute bottom-0 left-0 h-[1.5px] bg-[#C5A572] transition-all duration-500 ${currentPath === "/client-desk" ? "w-full" : "w-0"}`}></span>
            </button>
          )}

          {adminUser && (
            <button
              onClick={() => onNavigate("/admin-console")}
              className={`relative font-sans text-[11px] font-semibold uppercase tracking-[0.2em] py-1 cursor-pointer transition-colors duration-500 select-none ${
                currentPath === "/admin-console"
                  ? "text-[#C5A572]"
                  : "text-[#555555] hover:text-[#C5A572]"
              }`}
            >
              <span>{t.adminConsole}</span>
              <span className={`absolute bottom-0 left-0 h-[1.5px] bg-[#C5A572] transition-all duration-500 ${currentPath === "/admin-console" ? "w-full" : "w-0"}`}></span>
            </button>
          )}
        </div>

        {/* Action button panel */}
        <div className="hidden md:flex items-center space-x-6">
          {/* Language Switcher BUTTON */}
          <button
            onClick={onToggleLang}
            className="flex items-center gap-1.5 border border-[#EEECE6] hover:border-[#C5A572] px-3 py-1.5 text-[9px] font-sans font-bold uppercase tracking-widest text-[#555555] hover:text-[#C5A572] transition-all duration-300 rounded-none cursor-pointer"
            title="Saran Bahasa / Switch Language"
          >
            <Globe size={11} className="text-[#C5A572]" />
            <span>{lang === "en" ? "EN" : "ID"}</span>
          </button>

          {/* Saved properties count badge */}
          <button
            onClick={() => onNavigate("/luxury-villas-bali")} // navigates to catalog & opens saved block
            className="relative font-sans text-xs uppercase tracking-wider text-[#555555] hover:text-[#C5A572] transition-all duration-300 cursor-pointer flex items-center justify-center p-2 rounded-full hover:bg-[#F5F3EF]/40"
            title="Saved Properties"
          >
            <span className="material-symbols-outlined text-[20px]">bookmark</span>
            {savedCount > 0 && (
              <span className="absolute top-1.5 right-1.5 bg-[#C5A572] text-white text-[8px] font-sans font-bold w-3.5 h-3.5 rounded-full flex items-center justify-center animate-pulse">
                {savedCount}
              </span>
            )}
          </button>

          {/* Comparison sheet badge */}
          <button
            onClick={() => onNavigate("/luxury-villas-bali")} 
            className="relative font-sans text-xs uppercase tracking-wider text-[#555555] hover:text-[#C5A572] transition-all duration-300 cursor-pointer flex items-center justify-center p-2 rounded-full hover:bg-[#F5F3EF]/40"
            title="Compare Properties"
          >
            <span className="material-symbols-outlined text-[20px]">compare_arrows</span>
            {compareCount > 0 && (
              <span className="absolute top-1.5 right-1.5 bg-[#1A1A1A] text-white text-[8px] font-sans font-bold w-3.5 h-3.5 rounded-full flex items-center justify-center">
                {compareCount}
              </span>
            )}
          </button>

          {clientUser || adminUser ? (
            <div className="flex items-center space-x-3 border-r border-[#EEECE6] pr-4">
              <div className="flex items-center space-x-1.5 text-[#555555] font-sans text-[10px] font-bold uppercase tracking-wider">
                <span className="w-1.5 h-1.5 rounded-full bg-[#C5A572] animate-pulse"></span>
                <span className="max-w-[120px] truncate">{clientUser ? clientUser.name : "Curator"}</span>
              </div>
              <button
                onClick={onLogout}
                className="inline-flex items-center justify-center p-1.5 text-[#555555] hover:text-[#C5A572] transition-colors cursor-pointer"
                title="Keluar"
              >
                <LogOut size={14} />
              </button>
            </div>
          ) : (
            <button
              onClick={() => onNavigate("/login")}
              className={`font-sans text-[11px] font-semibold uppercase tracking-[0.2em] py-1 cursor-pointer transition-colors duration-500 select-none ${
                currentPath === "/login" ? "text-[#C5A572]" : "text-[#555555] hover:text-[#C5A572]"
              }`}
            >
              <span>{t.login}</span>
            </button>
          )}

          <button
            onClick={() => onNavigate("/contact")}
            className="inline-flex items-center justify-center px-6 py-2.5 border border-[#1A1A1A] hover:bg-[#1A1A1A] hover:text-[#FDFCFB] text-[#1A1A1A] font-sans text-[10px] font-bold uppercase tracking-[0.2em] transition-all duration-500 cursor-pointer rounded-none"
            id="btn-nav-inquire"
          >
            {t.inquireNow}
          </button>
        </div>

        {/* Mobile Menu Trigger */}
        <div className="flex items-center space-x-4 md:hidden">
          {/* Mobile Language Button */}
          <button
            onClick={onToggleLang}
            className="flex items-center gap-1 border border-[#EEECE6] px-2 py-1 text-[9px] font-sans font-bold uppercase tracking-wider text-[#555555]"
          >
            <Globe size={10} className="text-[#C5A572]" />
            <span>{lang === "en" ? "EN" : "ID"}</span>
          </button>

          <button
            onClick={() => onNavigate("/luxury-villas-bali")}
            className="relative text-[#555555] hover:text-[#C5A572]"
          >
            <span className="material-symbols-outlined text-[24px]">bookmark</span>
            {savedCount > 0 && (
              <span className="absolute -top-1 -right-1 bg-[#C5A572] text-white text-[8px] w-3.5 h-3.5 rounded-full flex items-center justify-center">
                {savedCount}
              </span>
            )}
          </button>

          <button
            onClick={() => setMobileOpen(!mobileOpen)}
            className="text-[#1A1A1A] focus:outline-none p-1"
            id="mobile-menu-toggle"
          >
            {mobileOpen ? <X size={24} /> : <Menu size={24} />}
          </button>
        </div>
      </div>

      {/* Mobile Dropdown Panel */}
      {mobileOpen && (
        <div className="md:hidden border-t border-[#EEECE6] bg-[#FDFCFB] py-6 px-5 space-y-4 animate-fade-in">
          <div className="grid grid-cols-2 gap-3">
            <button
              onClick={() => {
                onNavigate("/");
                setMobileOpen(false);
              }}
              className="w-full text-left py-2 font-sans text-[11px] font-semibold uppercase tracking-widest text-[#555555]"
            >
              {t.home}
            </button>
            <button
              onClick={() => {
                onNavigate("/about");
                setMobileOpen(false);
              }}
              className="w-full text-left py-2 font-sans text-[11px] font-semibold uppercase tracking-widest text-[#555555]"
            >
              {t.about}
            </button>
            <button
              onClick={() => {
                onNavigate("/contact");
                setMobileOpen(false);
              }}
              className="w-full text-left py-2 font-sans text-[11px] font-semibold uppercase tracking-widest text-[#555555]"
            >
              {t.contact}
            </button>

            {clientUser && (
              <button
                onClick={() => {
                  onNavigate("/client-desk");
                  setMobileOpen(false);
                }}
                className="w-full text-left py-2 font-sans text-[11px] font-semibold uppercase tracking-widest text-[#C5A572]"
              >
                {t.clientDesk}
              </button>
            )}

            {adminUser && (
              <button
                onClick={() => {
                  onNavigate("/admin-console");
                  setMobileOpen(false);
                }}
                className="w-full text-left py-2 font-sans text-[11px] font-semibold uppercase tracking-widest text-[#C5A572]"
              >
                {t.adminConsole}
              </button>
            )}

            {clientUser || adminUser ? (
              <button
                onClick={() => {
                  if (onLogout) onLogout();
                  setMobileOpen(false);
                }}
                className="w-full text-left py-2 font-sans text-[11px] font-semibold uppercase tracking-widest text-red-600"
              >
                {t.logout}
              </button>
            ) : (
              <button
                onClick={() => {
                  onNavigate("/login");
                  setMobileOpen(false);
                }}
                className="w-full text-left py-2 font-sans text-[11px] font-semibold uppercase tracking-widest text-[#C5A572]"
              >
                {t.login}
              </button>
            )}
          </div>

          <div className="border-t border-[#EEECE6] pt-4">
            <span className="block font-sans text-[10px] uppercase tracking-widest text-[#555555] mb-2.5">Portfolios</span>
            <div className="grid grid-cols-1 gap-2.5">
              <button
                onClick={() => {
                  onNavigate("/luxury-villas-bali");
                  setMobileOpen(false);
                }}
                className="text-left font-sans text-xs text-[#1A1A1A] py-1 hover:text-[#C5A572]"
              >
                {t.villas} (Bali)
              </button>
              <button
                onClick={() => {
                  onNavigate("/apartments-jakarta");
                  setMobileOpen(false);
                }}
                className="text-left font-sans text-xs text-[#1A1A1A] py-1 hover:text-[#C5A572]"
              >
                {t.apartments} (Jakarta)
              </button>
              <button
                onClick={() => {
                  onNavigate("/houses-surabaya");
                  setMobileOpen(false);
                }}
                className="text-left font-sans text-xs text-[#1A1A1A] py-1 hover:text-[#C5A572]"
              >
                {t.houses} (Surabaya)
              </button>
              <button
                onClick={() => {
                  onNavigate("/commercial-property-bandung");
                  setMobileOpen(false);
                }}
                className="text-left font-sans text-xs text-[#1A1A1A] py-1 hover:text-[#C5A572]"
              >
                {t.commercial} (Bandung)
              </button>
            </div>
          </div>

          <button
            onClick={() => {
              onNavigate("/contact");
              setMobileOpen(false);
            }}
            className="w-full bg-[#1A1A1A] text-white uppercase text-center font-sans tracking-[0.12em] text-xs py-3.5 rounded"
          >
            {t.inquireNow}
          </button>
        </div>
      )}
    </header>
  );
}