import { Link } from "@tanstack/react-router";
import { Mail, Phone, Menu, X, Heart, ChevronDown, Facebook, Instagram, Linkedin, Youtube, MessageCircle } from "lucide-react";
import { useState } from "react";
import dsagLogo from "@/assets/dsag-logo.jpg";

// X (Twitter) icon
function XIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
    </svg>
  );
}

// TikTok icon
function TikTokIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-2.88 2.5 2.89 2.89 0 0 1-2.89-2.89 2.89 2.89 0 0 1 2.89-2.89c.28 0 .54.04.79.1V9.01a6.33 6.33 0 0 0-.79-.05 6.34 6.34 0 0 0-6.34 6.34 6.34 6.34 0 0 0 6.34 6.34 6.34 6.34 0 0 0 6.33-6.34V8.69a8.16 8.16 0 0 0 4.77 1.52V6.76a4.85 4.85 0 0 1-1-.07z"/>
    </svg>
  );
}

type NavItem = { label: string } & ({ to: string; children?: undefined } | { to?: undefined; children: { to: string; label: string }[] });

const nav: NavItem[] = [
  { to: "/", label: "Home" },
  {
    label: "Who We Are",
    children: [
      { to: "/about", label: "About Us" },
      { to: "/about#board", label: "Board of Directors" },
      { to: "/causes", label: "Our Causes" },
      { to: "/about-down-syndrome", label: "About Down Syndrome" },
    ],
  },
  {
    label: "What We Do",
    children: [
      { to: "/initiatives", label: "Initiatives" },
      { to: "/projects", label: "Projects" },
      { to: "/#self-advocacy", label: "Self-Advocacy" },
      { to: "/impact", label: "Our Impact" },
    ],
  },
  {
    label: "Media",
    children: [
      { to: "/events", label: "Events" },
      { to: "/news", label: "News" },
      { to: "/#documentary", label: "Mini Documentary" },
      { to: "/#podcasts", label: "Podcasts" },
      { to: "/resources", label: "Resources" },
    ],
  },
  { to: "/about-down-syndrome#faqs", label: "FAQs" },
  { to: "/contact", label: "Contact" },
];

export function SiteHeader() {
  const [open, setOpen] = useState(false);
  const [openDropdown, setOpenDropdown] = useState<string | null>(null);

  const socials = [
    { icon: Facebook, href: "https://www.facebook.com/share/14YrXpzokyn/", label: "Facebook" },
    { icon: XIcon, href: "https://x.com/downsyndromeGH", label: "X (Twitter)" },
    { icon: Instagram, href: "https://www.instagram.com/downsyndromeghana", label: "Instagram" },
    { icon: Linkedin, href: "https://www.linkedin.com/company/down-syndrome-ghana/", label: "LinkedIn" },
    { icon: TikTokIcon, href: "https://www.tiktok.com/@downsyndromeghana", label: "TikTok" },
    { icon: Youtube, href: "https://youtube.com/@downsyndromeghana", label: "YouTube" },
    { icon: MessageCircle, href: "https://wa.me/233207405343", label: "WhatsApp" },
  ];

  return (
    <header className="sticky top-0 z-50 shadow-sm">
      {/* Tier 1 — slim utility bar: contact + socials */}
      <div className="hidden md:flex justify-between items-center text-xs text-primary-foreground bg-primary px-6 py-2">
        <div className="flex items-center gap-5">
          <a href="tel:+233207405343" className="inline-flex items-center gap-1.5 hover:underline">
            <Phone className="h-3 w-3" /> +233 (0) 20 740 5343
          </a>
          <span className="opacity-40">|</span>
          <a href="https://wa.me/233207405343" target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1.5 hover:underline">
            <MessageCircle className="h-3 w-3" /> WhatsApp
          </a>
          <span className="opacity-40">|</span>
          <a href="mailto:info@downsyndromeghana.org" className="inline-flex items-center gap-1.5 hover:underline">
            <Mail className="h-3 w-3" /> info@downsyndromeghana.org
          </a>
        </div>
        <div className="flex items-center gap-2.5">
          {socials.map((s, i) => (
            <a key={i} href={s.href} target="_blank" rel="noopener noreferrer" aria-label={s.label} className="opacity-90 hover:opacity-100 transition">
              <s.icon className="h-3.5 w-3.5" />
            </a>
          ))}
        </div>
      </div>

      {/* Tier 2 — logo, nav, donate (single clean row) */}
      <div className="bg-background border-b border-border">
        <div className="max-w-7xl mx-auto flex items-center justify-between gap-6 px-5 lg:px-8 py-3">
          {/* Logo + name */}
          <Link to="/" className="flex items-center gap-3 shrink-0 group">
            <img src={dsagLogo} alt="DSAG Logo" className="h-12 w-12 lg:h-14 lg:w-14 object-contain" />
            <div className="leading-tight">
              <div className="font-display font-extrabold text-foreground text-base lg:text-lg tracking-tight">
                Down Syndrome Association
                <span className="block text-primary text-sm lg:text-base">of Ghana</span>
              </div>
              <div className="hidden lg:block text-[9px] uppercase tracking-[0.25em] text-muted-foreground font-bold mt-0.5">
                Embracing Differences · Enriching Lives
              </div>
            </div>
          </Link>

          {/* Donate + mobile toggle */}
          <div className="flex items-center gap-2 shrink-0">
            <Link
              to="/donate"
              className="inline-flex items-center gap-1.5 bg-primary text-primary-foreground font-bold uppercase tracking-wide px-4 lg:px-5 py-2.5 text-xs lg:text-sm rounded-full hover:bg-primary-dark transition shadow-sm"
            >
              <Heart className="h-3.5 w-3.5" /> Donate
            </Link>
            <button
              aria-label="Toggle menu"
              onClick={() => setOpen((v) => !v)}
              className="md:hidden p-2 text-foreground"
            >
              {open ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
            </button>
          </div>
        </div>
      </div>

      {/* Tier 3 — persistent nav bar under logo/donate (always visible from md up) */}
      <div className="hidden md:block bg-surface border-b border-border">
        <nav className="max-w-7xl mx-auto flex items-center justify-center flex-wrap gap-1 px-5 lg:px-8">
          {nav.map((item) =>
            item.children ? (
              <div
                key={item.label}
                className="relative"
                onMouseEnter={() => setOpenDropdown(item.label)}
                onMouseLeave={() => setOpenDropdown(null)}
              >
                <button className="inline-flex items-center gap-1 px-4 py-3 text-sm font-bold uppercase tracking-wide text-foreground hover:text-primary transition">
                  {item.label} <ChevronDown className="h-3.5 w-3.5" />
                </button>
                {openDropdown === item.label && (
                  <div className="absolute left-0 top-full min-w-[220px] bg-card border border-border shadow-card overflow-hidden z-20 rounded-b-lg">
                    {item.children.map((c) => (
                      <a
                        key={c.to}
                        href={c.to}
                        className="block px-5 py-3 text-sm text-foreground border-b border-border last:border-0 hover:bg-primary hover:text-primary-foreground transition"
                      >
                        {c.label}
                      </a>
                    ))}
                  </div>
                )}
              </div>
            ) : (
              <Link
                key={item.to}
                to={item.to}
                activeProps={{ className: "text-primary" }}
                className="px-4 py-3 text-sm font-bold uppercase tracking-wide text-foreground hover:text-primary transition"
              >
                {item.label}
              </Link>
            )
          )}
        </nav>
      </div>


      {/* Mobile menu */}
      {open && (
        <div className="md:hidden border-t border-border bg-background max-h-[70vh] overflow-y-auto">
          <nav className="flex flex-col px-5 py-3">
            {nav.map((item) =>
              item.children ? (
                <div key={item.label} className="border-b border-border/50 py-2">
                  <div className="text-xs font-bold uppercase tracking-widest text-primary py-1">{item.label}</div>
                  {item.children.map((c) => (
                    <a
                      key={c.to}
                      href={c.to}
                      onClick={() => setOpen(false)}
                      className="block py-2 pl-3 text-base font-medium text-foreground/90"
                    >
                      {c.label}
                    </a>
                  ))}
                </div>
              ) : (
                <Link
                  key={item.to}
                  to={item.to}
                  onClick={() => setOpen(false)}
                  activeProps={{ className: "text-primary" }}
                  className="py-2.5 text-base font-medium text-foreground/90"
                >
                  {item.label}
                </Link>
              )
            )}

            <div className="border-t border-border/50 mt-4 pt-4">
              <div className="text-xs font-bold uppercase tracking-widest text-primary py-2">Follow Us</div>
              <div className="flex items-center gap-3">
                {socials.map((s, i) => (
                  <a key={i} href={s.href} target="_blank" rel="noopener noreferrer" aria-label={s.label} className="h-10 w-10 rounded-full border border-primary bg-primary/10 inline-flex items-center justify-center hover:bg-primary hover:text-white transition">
                    <s.icon className="h-4 w-4 text-primary" />
                  </a>
                ))}
              </div>
            </div>
          </nav>
        </div>
      )}
    </header>
  );
}
