"use client";

import * as React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { motion, AnimatePresence } from "framer-motion";
import { Menu, X, Phone, Mail, MapPin, ChevronDown, Snowflake } from "lucide-react";
import { NAV_LINKS, SERVICE_NAV } from "./nav";
import { Button } from "@/components/ui/button";
import type { SiteSetting } from "@/lib/queries";

export function SiteHeader({ settings }: { settings: SiteSetting }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const [servicesOpen, setServicesOpen] = React.useState(false);
  const pathname = usePathname();

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  React.useEffect(() => {
    setMobileOpen(false);
    setServicesOpen(false);
  }, [pathname]);

  const isActive = (href: string) =>
    href === "/" ? pathname === "/" : pathname.startsWith(href);

  return (
    <>
      {/* Top utility bar */}
      <div className="hidden lg:block navy-bg text-white/90 text-xs">
        <div className="container-mx flex items-center justify-between h-9">
          <div className="flex items-center gap-5">
            <span className="flex items-center gap-1.5">
              <Phone className="size-3.5 text-[var(--brand-cyan)]" />
              {settings.phone}
            </span>
            <span className="flex items-center gap-1.5">
              <Mail className="size-3.5 text-[var(--brand-cyan)]" />
              {settings.email}
            </span>
            <span className="flex items-center gap-1.5">
              <MapPin className="size-3.5 text-[var(--brand-cyan)]" />
              SITE Area, Karachi
            </span>
          </div>
          <div className="flex items-center gap-4 text-white/70">
            <span>{settings.workingHours}</span>
            <span className="text-white/30">|</span>
            <span>NTN: {settings.ntn}</span>
          </div>
        </div>
      </div>

      {/* Main header */}
      <header
        className={`sticky top-0 z-50 transition-all duration-300 ${
          scrolled ? "glass shadow-soft border-b border-border/60" : "bg-white"
        }`}
      >
        <div className="container-mx flex items-center justify-between h-18 py-3">
          <Link href="/" className="flex items-center gap-3 group">
            <div className="relative grid place-items-center size-12 rounded-xl brand-gradient text-white shadow-brand">
              <Snowflake className="size-6" />
              <span className="absolute -bottom-1 -right-1 size-4 rounded-full bg-[var(--brand-cyan)] border-2 border-white" />
            </div>
            <div className="leading-tight">
              <div className="font-extrabold text-[15px] sm:text-base tracking-tight text-foreground">
                AL-HASAN <span className="royal-text">ENGINEERING</span>
              </div>
              <div className="text-[10px] sm:text-[11px] font-semibold tracking-[0.18em] text-muted-foreground uppercase">
                AHE Services
              </div>
            </div>
          </Link>

          {/* Desktop nav */}
          <nav className="hidden lg:flex items-center gap-1">
            {NAV_LINKS.map((link) =>
              link.label === "Services" ? (
                <div
                  key={link.href}
                  className="relative"
                  onMouseEnter={() => setServicesOpen(true)}
                  onMouseLeave={() => setServicesOpen(false)}
                >
                  <Link
                    href={link.href}
                    className={`flex items-center gap-1 px-3.5 py-2 rounded-lg text-sm font-medium transition-colors ${
                      isActive(link.href)
                        ? "text-[var(--brand-royal)]"
                        : "text-foreground/80 hover:text-[var(--brand-royal)]"
                    }`}
                  >
                    {link.label}
                    <ChevronDown className="size-3.5" />
                  </Link>
                  <AnimatePresence>
                    {servicesOpen && (
                      <motion.div
                        initial={{ opacity: 0, y: 10 }}
                        animate={{ opacity: 1, y: 0 }}
                        exit={{ opacity: 0, y: 10 }}
                        transition={{ duration: 0.18 }}
                        className="absolute top-full left-1/2 -translate-x-1/2 pt-2 w-72"
                      >
                        <div className="bg-white rounded-xl shadow-xl border border-border/60 p-2 overflow-hidden">
                          {SERVICE_NAV.map((s) => (
                            <Link
                              key={s.href}
                              href={s.href}
                              className="block px-3 py-2 rounded-lg text-sm text-foreground/80 hover:bg-accent hover:text-[var(--brand-royal)] transition-colors"
                            >
                              {s.label}
                            </Link>
                          ))}
                          <Link
                            href="/services"
                            className="block px-3 py-2 mt-1 rounded-lg text-sm font-semibold text-[var(--brand-royal)] bg-accent/60"
                          >
                            View All Services →
                          </Link>
                        </div>
                      </motion.div>
                    )}
                  </AnimatePresence>
                </div>
              ) : (
                <Link
                  key={link.href}
                  href={link.href}
                  className={`px-3.5 py-2 rounded-lg text-sm font-medium transition-colors ${
                    isActive(link.href)
                      ? "text-[var(--brand-royal)]"
                      : "text-foreground/80 hover:text-[var(--brand-royal)]"
                  }`}
                >
                  {link.label}
                </Link>
              )
            )}
          </nav>

          <div className="flex items-center gap-2">
            <Button asChild size="sm" className="hidden sm:inline-flex brand-gradient text-white shadow-brand hover:opacity-95">
              <Link href="/contact">Get a Quote</Link>
            </Button>
            <button
              onClick={() => setMobileOpen((v) => !v)}
              className="lg:hidden grid place-items-center size-10 rounded-lg border border-border text-foreground"
              aria-label="Toggle menu"
            >
              {mobileOpen ? <X className="size-5" /> : <Menu className="size-5" />}
            </button>
          </div>
        </div>
      </header>

      {/* Mobile menu */}
      <AnimatePresence>
        {mobileOpen && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-40 lg:hidden"
          >
            <div className="absolute inset-0 bg-black/40" onClick={() => setMobileOpen(false)} />
            <motion.div
              initial={{ x: "100%" }}
              animate={{ x: 0 }}
              exit={{ x: "100%" }}
              transition={{ type: "spring", damping: 30, stiffness: 280 }}
              className="absolute right-0 top-0 bottom-0 w-[85%] max-w-sm bg-white shadow-2xl overflow-y-auto"
            >
              <div className="p-5 border-b border-border flex items-center justify-between">
                <div className="font-bold text-foreground">Menu</div>
                <button onClick={() => setMobileOpen(false)} className="grid place-items-center size-9 rounded-lg border border-border">
                  <X className="size-5" />
                </button>
              </div>
              <nav className="p-3">
                {NAV_LINKS.map((link) => (
                  <Link
                    key={link.href}
                    href={link.href}
                    className={`block px-4 py-3 rounded-lg text-sm font-medium ${
                      isActive(link.href) ? "bg-accent text-[var(--brand-royal)]" : "text-foreground/80"
                    }`}
                  >
                    {link.label}
                  </Link>
                ))}
              </nav>
              <div className="p-5 border-t border-border space-y-3">
                <a href={`tel:${settings.phone}`} className="flex items-center gap-2 text-sm">
                  <Phone className="size-4 royal-text" /> {settings.phone}
                </a>
                <a href={`mailto:${settings.email}`} className="flex items-center gap-2 text-sm">
                  <Mail className="size-4 royal-text" /> {settings.email}
                </a>
                <Button asChild className="w-full brand-gradient text-white">
                  <Link href="/contact">Get a Free Quote</Link>
                </Button>
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
}