"use client"

import * as React from "react"
import Link from "next/link"
import { Search, Phone, Mail, ShieldCheck, MessageSquare } from "lucide-react"
import { siteConfig } from "@/config/site"
import { MobileNav } from "@/components/layout/mobile-nav"
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu"

import type { Route } from "next"

export function Header() {
  const { nav } = siteConfig

  return (
    <>
      {/* TOPBAR */}
      <div className="bg-ink text-white/50 border-b border-white/5 hidden md:block">
        <div className="container-content h-9 flex items-center justify-between text-xs">
          <div className="flex gap-[22px] items-center flex-wrap">
            <span className="flex items-center gap-1.5 text-xs text-white/50 font-sans font-medium">
              <Phone className="size-3 text-gold opacity-85" />
              US +1 646-781-8004
            </span>
            <span className="flex items-center gap-1.5 text-xs text-white/50 font-sans font-medium">
              <Phone className="size-3 text-gold opacity-85" />
              EU +44-203-868-8738
            </span>
            <span className="flex items-center gap-1.5 text-xs text-white/50 font-sans font-medium">
              <Mail className="size-3 text-gold opacity-85" />
              sales@meticulousresearch.com
            </span>
          </div>
          <div className="flex gap-[18px] items-center">
            <span className="flex items-center gap-1.5 text-[11.5px] text-accent-gold font-medium font-sans">
              <ShieldCheck className="size-3.5" />
              Verified by the Meticulous Standard
            </span>
          </div>
        </div>
      </div>

      {/* NAV */}
      <nav className="sticky top-0 z-40 w-full border-b border-hairline bg-white text-ink backdrop-blur-xs">
        <div className="container-content flex h-[66px] items-center justify-between gap-5">
          {/* Left: Brand Logo */}
          <div className="flex items-center gap-6">
            <Link href="/" className="transition-opacity hover:opacity-90">
              <div className="flex items-center gap-[11px] shrink-0">
                <div className="relative size-9">
                  <div className="absolute top-[2px] left-[5px] size-6 rounded-full border-4 border-gold border-b-transparent -rotate-[40deg]"></div>
                  <div className="absolute bottom-[3px] left-[2px] w-[13px] h-[4.5px] bg-gold rounded-[3px] rotate-[45deg] origin-[right_center]"></div>
                </div>
                <div className="leading-none">
                  <div className="text-[17px] font-semibold text-ink tracking-[-0.3px]">
                    Meticulous<span className="text-gold">®</span>
                  </div>
                  <div className="text-[9px] font-bold text-gold tracking-[0.18em] uppercase mt-[2px]">
                    Research
                  </div>
                </div>
              </div>
            </Link>
          </div>

          {/* Center: Desktop Navigation Menu */}
          <nav className="hidden lg:flex items-center h-full">
            <NavigationMenu>
              <NavigationMenuList className="gap-0">
                {nav.primary.map((item, idx) => {
                  if (item.title === "Reports") {
                    return (
                      <NavigationMenuItem key={idx}>
                        <NavigationMenuTrigger 
                          onClick={() => window.location.href = item.href}
                          className="text-muted-gray hover:text-active-dark hover:bg-black/5 data-[popup-open]:bg-black/5 data-[popup-open]:text-active-dark font-sans font-medium text-[13.5px] h-[66px] rounded-none px-[14px] border-none shadow-none cursor-pointer"
                        >
                          {item.title}
                        </NavigationMenuTrigger>
                        <NavigationMenuContent className="p-6 w-[700px] grid grid-cols-12 gap-6 bg-white border border-hairline rounded-sm">
                          {/* Column 1: By Industry */}
                          <div className="col-span-5 space-y-3">
                            <h4 className="font-mono text-[10px] tracking-wider text-navy/50 uppercase font-semibold">
                              By Industry
                            </h4>
                            <div className="grid grid-cols-1 gap-1.5">
                              {nav.reportsMegaMenu.industries.map((ind, iIdx) => (
                                <NavigationMenuLink
                                  key={iIdx}
                                  render={
                                    <Link
                                      href={ind.href as Route}
                                      className="text-xs text-ink hover:text-navy block transition-colors py-0.5 font-sans font-medium"
                                    />
                                  }
                                >
                                  {ind.title}
                                </NavigationMenuLink>
                              ))}
                            </div>
                          </div>

                          {/* Column 2: By Type */}
                          <div className="col-span-3 space-y-3 border-l border-hairline pl-4">
                            <h4 className="font-mono text-[10px] tracking-wider text-navy/50 uppercase font-semibold">
                              By Type
                            </h4>
                            <div className="grid gap-2">
                              {nav.reportsMegaMenu.types.map((type, tIdx) => (
                                <NavigationMenuLink
                                  key={tIdx}
                                  render={
                                    <Link
                                      href={type.href as Route}
                                      className="text-xs text-ink hover:text-navy block transition-colors py-0.5 font-sans"
                                    />
                                  }
                                >
                                  {type.title}
                                </NavigationMenuLink>
                              ))}
                            </div>
                          </div>

                          {/* Column 3: Featured */}
                          <div className="col-span-4 space-y-3 border-l border-hairline pl-4 flex flex-col justify-between">
                            <div className="space-y-3">
                              <h4 className="font-mono text-[10px] tracking-wider text-navy/50 uppercase font-semibold">
                                Featured Intelligence
                              </h4>
                              <div className="grid gap-2.5">
                                {nav.reportsMegaMenu.featured.map((feat, fIdx) => (
                                  <NavigationMenuLink
                                    key={fIdx}
                                    render={
                                      <Link
                                        href={feat.href as Route}
                                        className="text-xs text-ink hover:text-navy font-medium block leading-tight transition-colors"
                                      />
                                    }
                                  >
                                    {feat.title}
                                  </NavigationMenuLink>
                                ))}
                              </div>
                            </div>
                            <div className="pt-4 border-t border-hairline mt-auto">
                              <NavigationMenuLink
                                render={
                                  <Link
                                    href="/reports"
                                    className="text-xs font-sans font-semibold text-navy hover:underline block"
                                  />
                                }
                              >
                                Browse all 3,000 reports &rarr;
                              </NavigationMenuLink>
                            </div>
                          </div>
                        </NavigationMenuContent>
                      </NavigationMenuItem>
                    )
                  }

                  if (item.title === "Insights") {
                    return (
                      <NavigationMenuItem key={idx}>
                        <NavigationMenuTrigger 
                          onClick={() => window.location.href = item.href}
                          className="text-muted-gray hover:text-active-dark hover:bg-black/5 data-[popup-open]:bg-black/5 data-[popup-open]:text-active-dark font-sans font-medium text-[13.5px] h-[66px] rounded-none px-[14px] border-none shadow-none cursor-pointer"
                        >
                          {item.title}
                        </NavigationMenuTrigger>
                        <NavigationMenuContent className="p-4 w-[280px] bg-white border border-hairline rounded-sm">
                          <div className="grid gap-1">
                            {nav.insightsMegaMenu.map((ins, insIdx) => (
                              <NavigationMenuLink
                                key={insIdx}
                                render={
                                  <Link
                                    href={ins.href as Route}
                                    className="block select-none rounded-xs p-2 text-left transition-colors hover:bg-off-white text-ink"
                                  />
                                }
                              >
                                <div className="text-xs font-semibold text-navy font-sans">{ins.title}</div>
                                <p className="text-[10px] leading-snug text-muted-foreground mt-0.5 font-sans">
                                  {ins.description}
                                </p>
                              </NavigationMenuLink>
                            ))}
                          </div>
                        </NavigationMenuContent>
                      </NavigationMenuItem>
                    )
                  }

                  return (
                    <NavigationMenuItem key={idx}>
                      <NavigationMenuLink
                        render={
                          <Link
                            href={item.href as Route}
                            className="inline-flex h-[66px] w-max items-center justify-center px-[14px] text-[13.5px] font-medium text-muted-gray hover:text-active-dark hover:bg-black/5 transition-colors font-sans"
                          />
                        }
                      >
                        {item.title}
                      </NavigationMenuLink>
                    </NavigationMenuItem>
                  )
                })}
              </NavigationMenuList>
            </NavigationMenu>
          </nav>

          {/* Right: Actions */}
          <div className="flex items-center gap-2.5 shrink-0">
            {/* Search Trigger */}
            <button
              onClick={() => alert("Search capability is scheduled for Phase 2 implementation.")}
              className="size-[38px] border border-border-gray rounded-[3px] flex items-center justify-center text-muted-gray hover:bg-black/5 transition-colors shrink-0 cursor-pointer"
              title="Search Market Intelligence"
            >
              <Search className="size-[17px]" />
            </button>

            {/* Persistent CTA Button */}
            <Link
              href="/custom-research"
              className="bg-gold text-ink hover:bg-gold/90 rounded-[3px] font-sans text-[13.5px] font-semibold px-[18px] py-[11.5px] flex items-center gap-1.5 shrink-0 transition-colors hidden sm:inline-flex"
            >
              <MessageSquare className="size-[15px]" />
              Talk to an Analyst
            </Link>

            {/* Mobile hamburger menu */}
            <MobileNav />
          </div>
        </div>
      </nav>
    </>
  )
}