"use client";

import Link from "next/link";
import { Button } from "@/components/ui/button";
import {
  Package,
  LogIn,
  UserPlus,
  Menu,
  User,
  LogOut,
  KeyRound,
  Home,
  HelpCircle,
  Info,
  Shield,
  Mail,
  Car,
  ChevronDown,
} from "lucide-react";
import { useState, useEffect } from "react";
import { FrontendBrandLogo } from "./brand-logo";
import { MobileSidebar } from "./mobile-sidebar";
import { getProfileAction } from "@/features/users/actions/profile-actions";
import { getStorageUrl } from "@/lib/utils";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

const USER_PROFILE_IMAGE_UPDATED_EVENT = "user-profile-image-updated";

function getProfileImageSrc(value: string | null | undefined, cacheKey?: number) {
  if (!value?.trim()) {
    return null;
  }

  if (value.startsWith("data:") || value.startsWith("blob:")) {
    return value;
  }

  const imageUrl = getStorageUrl(value);

  if (!cacheKey) {
    return imageUrl;
  }

  const separator = imageUrl.includes("?") ? "&" : "?";
  return `${imageUrl}${separator}v=${cacheKey}`;
}

export function FrontendHeader() {
  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [userName, setUserName] = useState("");
  const [profileImage, setProfileImage] = useState<string | null>(null);

  const loadProfileImage = async () => {
    try {
      const result = await getProfileAction();

      if (result.success && result.data) {
        setProfileImage(getProfileImageSrc(result.data.profile_image));
        const fullName = [result.data.first_name, result.data.last_name]
          .filter(Boolean)
          .join(" ")
          .trim();
        if (fullName) setUserName(fullName);
      }
    } catch (error) {
      console.error("[FrontendHeader] Failed to load profile image", error);
    }
  };

  const handleLogout = () => {
    sessionStorage.removeItem("customer_session");
    localStorage.removeItem("customer_session");
    localStorage.removeItem("teertham_auth_token");
    window.dispatchEvent(new Event("sessionUpdate"));
    window.location.href = "/";
  };

  const checkSession = () => {
    const customerSession =
      sessionStorage.getItem("customer_session") ||
      localStorage.getItem("customer_session");
    if (customerSession) {
      try {
        const session = JSON.parse(customerSession);
        sessionStorage.setItem("customer_session", customerSession);
        setIsLoggedIn(true);
        setUserName(session.name || "User");
        void loadProfileImage();
      } catch (error) {
        console.error("Error parsing session:", error);
        setIsLoggedIn(false);
        setProfileImage(null);
      }
    } else {
      setIsLoggedIn(false);
      setProfileImage(null);
    }
  };

  useEffect(() => {
    // Check session on mount
    checkSession();

    // Listen for storage events (when session changes in other tabs)
    const handleStorageChange = (e: StorageEvent) => {
      if (e.key === "customer_session") {
        checkSession();
      }
    };

    // Listen for custom session update event
    const handleSessionUpdate = () => {
      checkSession();
    };

    const handleProfileImageUpdated = (event: Event) => {
      const detail = (event as CustomEvent<{ profileImage?: string | null }>)
        .detail;
      setProfileImage(getProfileImageSrc(detail?.profileImage, Date.now()));
    };

    window.addEventListener("storage", handleStorageChange);
    window.addEventListener("sessionUpdate", handleSessionUpdate);
    window.addEventListener(
      USER_PROFILE_IMAGE_UPDATED_EVENT,
      handleProfileImageUpdated
    );

    return () => {
      window.removeEventListener("storage", handleStorageChange);
      window.removeEventListener("sessionUpdate", handleSessionUpdate);
      window.removeEventListener(
        USER_PROFILE_IMAGE_UPDATED_EVENT,
        handleProfileImageUpdated
      );
    };
  }, []);

  const navLinks = [
    { href: "/", label: "Home", icon: Home },
    { href: "/vehicle-booking", label: "Vehicles", icon: Car },
    // { href: "/book-hotel", label: "Hotel Booking", icon: Hotel },
    { href: "/fixed-packages", label: "Fix Packages", icon: Package }, // Added Fixed Packages link after Hotel Booking
    // {
    //   href: "/spiritual-packages",
    //   label: "Spiritual Packages",
    //   icon: Sparkles,
    // },
    // { href: "/custom-packages", label: "Custom Packages", icon: Package },
    { href: "/about-us", label: "About Us", icon: Info },
    { href: "/privacy-policy", label: "Privacy Policy", icon: Shield },
    { href: "/contact-us", label: "Contact Us", icon: Mail },
    { href: "/faq", label: "FAQ", icon: HelpCircle },
  ];

  return (
    <>
      <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background shadow-sm">
        <nav
          className="mx-auto flex h-20 max-w-7xl items-center justify-between px-4 md:px-6 lg:px-8"
          aria-label="Main navigation"
        >
          {/* Logo */}
          <FrontendBrandLogo variant="header" />

          {/* Desktop Navigation */}
          <div className="hidden lg:flex items-center gap-1">
            {navLinks.map((link) => {
              const Icon = link.icon;
              return (
                <Button
                  key={link.href}
                  asChild
                  variant="ghost"
                  size="sm"
                  className="gap-1.5 hover:bg-primary/10 hover:text-primary transition-colors"
                >
                  <Link href={link.href}>
                    <Icon className="h-4 w-4" aria-hidden="true" />
                    <span className="font-medium text-sm">{link.label}</span>
                  </Link>
                </Button>
              );
            })}
          </div>

          <div className="hidden md:flex items-center gap-2">
            {isLoggedIn ? (
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button
                    className="h-11 gap-2 rounded-lg border-0 bg-gradient-to-r from-teal-600 to-cyan-600 px-3 text-white shadow-md transition-all hover:from-teal-700 hover:to-cyan-700 hover:text-white hover:shadow-lg"
                    aria-label="Open account menu"
                  >
                    <span className="flex h-8 w-8 items-center justify-center overflow-hidden rounded-full border border-white/30 bg-white/15">
                      {profileImage ? (
                        <img
                          src={profileImage}
                          alt="Profile"
                          className="h-full w-full object-cover"
                        />
                      ) : (
                        <User
                          className="h-4 w-4 text-white"
                          aria-hidden="true"
                        />
                      )}
                    </span>
                    <span className="max-w-36 truncate font-medium">
                      {userName || "User"}
                    </span>
                    <ChevronDown className="h-4 w-4" aria-hidden="true" />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end" className="w-56">
                  <DropdownMenuLabel>
                    <p className="text-sm font-semibold">{userName || "User"}</p>
                    <p className="text-xs font-normal text-muted-foreground">
                      Account
                    </p>
                  </DropdownMenuLabel>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem asChild>
                    <Link href="/user/manage-profile">
                      <User className="h-4 w-4" />
                      Manage Profile
                    </Link>
                  </DropdownMenuItem>
                  <DropdownMenuItem asChild>
                    <Link href="/user/change-password">
                      <KeyRound className="h-4 w-4" />
                      Change Password
                    </Link>
                  </DropdownMenuItem>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem
                    variant="destructive"
                    onClick={handleLogout}
                  >
                    <LogOut className="h-4 w-4" />
                    Logout
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            ) : (
              <>
                <Button
                  asChild
                  variant="outline"
                  size="sm"
                  className="gap-1.5 hover:bg-primary/10 hover:text-primary hover:border-primary transition-all bg-transparent"
                  aria-label="Login to your account"
                >
                  <Link href="/login">
                    <LogIn className="h-4 w-4" aria-hidden="true" />
                    <span>Login</span>
                  </Link>
                </Button>

                <Button
                  asChild
                  size="sm"
                  className="gap-1.5 frontend-gradient-primary hover:opacity-90 transition-opacity shadow-md"
                  aria-label="Create a new account"
                >
                  <Link href="/create-account">
                    <UserPlus className="h-4 w-4" aria-hidden="true" />
                    <span>Create Account</span>
                  </Link>
                </Button>
              </>
            )}
          </div>

          {/* Mobile Menu Button */}
          <Button
            variant="ghost"
            size="icon"
            className="lg:hidden h-8 w-8"
            onClick={() => setMobileSidebarOpen(true)}
            aria-label="Open mobile menu"
          >
            <Menu className="h-5 w-5" aria-hidden="true" />
          </Button>
        </nav>
      </header>

      <MobileSidebar
        isOpen={mobileSidebarOpen}
        onClose={() => setMobileSidebarOpen(false)}
      />
    </>
  );
}

export { FrontendHeader as Header };