'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import {
  Popover,
  PopoverButton,
  PopoverBackdrop,
  PopoverPanel,
} from '@headlessui/react'
import clsx from 'clsx'

import { Button } from '@/components/Button'
import { Container } from '@/components/Container'
import { Logo } from '@/components/Logo'
import { NavLink } from '@/components/NavLink'

function MobileNavLink({ href, children }) {
  return (
    <PopoverButton as={Link} href={href} className="block w-full p-2">
      {children}
    </PopoverButton>
  )
}

function MobileNavIcon({ open }) {
  return (
    <svg
      aria-hidden="true"
      className="h-3.5 w-3.5 overflow-visible stroke-bg-darkbrown"
      fill="none"
      strokeWidth={2}
      strokeLinecap="round"
    >
      <path
        d="M0 1H14M0 7H14M0 13H14"
        className={clsx(
          'origin-center transition',
          open && 'scale-90 opacity-0',
        )}
      />
      <path
        d="M2 2L12 12M12 2L2 12"
        className={clsx(
          'origin-center transition',
          !open && 'scale-90 opacity-0',
        )}
      />
    </svg>
  )
}

function MobileNavigation() {
  return (
    <Popover>
      <PopoverButton
        className="relative z-50 flex h-8 w-8 items-center justify-center ui-not-focus-visible:outline-none"
        aria-label="Toggle Navigation"
      >
        {({ open }) => <MobileNavIcon open={open} />}
      </PopoverButton>
      <PopoverBackdrop
        transition
        className="fixed inset-0 z-40 bg-slate-900/20 backdrop-blur-sm duration-150 data-[closed]:opacity-0 data-[enter]:ease-out data-[leave]:ease-in"
      />
      <PopoverPanel
        transition
        className="absolute inset-x-0 top-full z-50 mt-4 flex origin-top flex-col rounded-lg bg-transparent border border-slate-200/20 p-4 text-lg tracking-tight text-white shadow-xl ring-1 ring-slate-900/5 data-[closed]:scale-95 data-[closed]:opacity-0 data-[enter]:duration-150 data-[leave]:duration-100 data-[enter]:ease-out data-[leave]:ease-in"
      >
        <MobileNavLink href="/">HOME</MobileNavLink>
        <MobileNavLink href="/story">STORY</MobileNavLink>
        <MobileNavLink href="/experiences">EXPERIENCES</MobileNavLink>
        <MobileNavLink href="/dahabiyas">DAHABIYAS</MobileNavLink>
        <MobileNavLink href="/itinerary">ITINERARY</MobileNavLink>
        <hr className="m-2 border-slate-300/40" />
        <MobileNavLink href="/contact">Book Now</MobileNavLink>
      </PopoverPanel>
    </Popover>
  )
}

export function Header() {
  const pathname = usePathname()
  const isStoryPage = pathname === '/story'
  
  const headerClasses = clsx(
    'bg-darksand',
    {
      'fixed top-0 left-0 right-0 z-50': isStoryPage,
    }
  )
  
  return (
    <header className={headerClasses}>
      <nav className="relative z-50 flex items-center py-2 lg:py-4">
        {/* Logo and Navigation Container - Left and Center */}
        <div className="flex-1 max-w-7xl ml-3 mx-0 lg:px-4 px-6">
          <div className="flex items-center">
            {/* Logo - Left */}
            <div className="flex-shrink-0">
              <Link href="/" aria-label="Home" className="overflow-visible flex-shrink-0">
                <Logo className="h-7 w-auto max-w-none sm:h-8 md:h-9 lg:h-10" />
              </Link>
            </div>

            {/* Navigation - Center */}
            <div className="flex-1 flex justify-center">
              <div className="hidden md:flex md:gap-x-4 lg:gap-x-6">
                <NavLink href="/">HOME</NavLink>
                <NavLink href="/story">STORY</NavLink>
                <NavLink href="/experiences">EXPERIENCES</NavLink>
                <NavLink href="/dahabiyas">DAHABIYAS</NavLink>
                <NavLink href="/itinerary">ITINERARY</NavLink>
              </div>
            </div>
          </div>
        </div>

        {/* Book Now Button - Very Right Edge */}
        <div className="flex items-center gap-x-3 md:gap-x-4 flex-shrink-0">
          <Button href="/contact" variant="outline" color="white" className="text-xs sm:text-sm">
            <span className="tracking-wide font-medium">
              Book Now
            </span>
          </Button>
          <div className="md:hidden">
            <MobileNavigation />
          </div>
        </div>
      </nav>
    </header>
  )
}