"use client"

import { useState, useEffect, useRef } from 'react'
import { Menu, X, ChevronDown } from 'lucide-react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { headerDefaults } from '@/lib/api/header'
import type { HeaderData } from '@/lib/strapi/types'

// Links are now fetched from Strapi via the `data` prop.

function DiagonalSeparator() {
  return (
    <span
      className="hdr-sep inline-block w-[1px] h-[21px] bg-[#060505] mx-[24px] opacity-30"
      style={{ transform: 'rotate(30deg)' }}
      aria-hidden="true"
    />
  )
}

export default function Header({ data }: { data?: HeaderData }) {
  const logo = data?.logo ?? headerDefaults.logo
  const navLinks = data?.navLinks ?? headerDefaults.navLinks ?? []
  const companyLinks = data?.companyLinks ?? headerDefaults.companyLinks ?? []
  const mobileMenuLinks = data?.mobileMenuLinks ?? headerDefaults.mobileMenuLinks ?? []
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const [isCompaniesOpen, setIsCompaniesOpen] = useState(false)
  const [isScrolled, setIsScrolled] = useState(false)
  const dropdownRef = useRef<HTMLDivElement>(null)
  const pathname = usePathname()

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 20)
    }
    window.addEventListener('scroll', handleScroll)
    return () => window.removeEventListener('scroll', handleScroll)
  }, [])

  useEffect(() => {
    const id = window.setTimeout(() => {
      setIsMenuOpen(false)
      setIsCompaniesOpen(false)
    }, 0)
    return () => window.clearTimeout(id)
  }, [pathname])

  useEffect(() => {
    function handleClickOutside(e: MouseEvent) {
      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
        setIsCompaniesOpen(false)
      }
    }
    document.addEventListener('mousedown', handleClickOutside)
    return () => document.removeEventListener('mousedown', handleClickOutside)
  }, [])

  useEffect(() => {
    document.body.style.overflow = isMenuOpen ? 'hidden' : ''
    return () => { document.body.style.overflow = '' }
  }, [isMenuOpen])

  return (
    <nav className="fixed top-0 left-0 right-0 z-50 lg:px-[20px] transition-all duration-300 mt-0 lg:mt-2">
      <div
        className={`mx-auto max-w-[1297px] flex items-center justify-between pl-4 pr-3 py-[10px] rounded-b-[28px] lg:pl-[24px] lg:pr-[16px] lg:py-[12px] lg:rounded-[40px] transition-all duration-300 ${
          isScrolled ? 'bg-white shadow-md' : 'bg-transparent'
        }`}
      >
        <Link href="/" className="hdr-logo flex-shrink-0 block w-[140px] h-[44px] lg:w-[200px] lg:h-[52px]">
          <img
            src={logo}
            alt="MGM - M.G. Muthu Group"
            className="w-full h-full object-contain"
          />
        </Link>

        <div className="hdr-nav hidden lg:flex items-center">
          {navLinks.map((link, i) => (
            <div key={link.label} className="flex items-center">
              {link.hasDropdown ? (
                <div className="relative" ref={dropdownRef}>
                  <button
                    onClick={() => setIsCompaniesOpen(!isCompaniesOpen)}
                    className="flex items-center gap-[4px] text-[16px] leading-[1.5] text-[#060505] font-medium transition-colors hover:text-[#d20010]"
                  >
                    {link.label}
                    <ChevronDown
                      size={16}
                      className={`transition-transform duration-300 ${isCompaniesOpen ? 'rotate-180' : ''}`}
                    />
                  </button>
                  <div
                    className={`absolute top-full left-1/2 -translate-x-1/2 mt-4 w-[240px] bg-[#102443] rounded-[16px] overflow-hidden transition-all duration-300 origin-top ${
                      isCompaniesOpen
                        ? 'opacity-100 scale-y-100 pointer-events-auto'
                        : 'opacity-0 scale-y-95 pointer-events-none'
                    }`}
                    style={{ boxShadow: '0 12px 32px rgba(16,36,67,0.25)' }}
                  >
                    <div className="py-2">
                      {companyLinks.map((company) => {
                        const isActive = pathname === company.url
                        const className = `flex items-center gap-3 px-5 py-3 text-[14px] leading-[1.5] transition-colors ${
                          isActive
                            ? 'text-[#d20010] bg-white/10'
                            : 'text-white/80 hover:text-white hover:bg-white/10'
                        }`
                        return (
                          <Link
                            key={company.label}
                            href={company.url}
                            className={className}
                            onClick={() => setIsCompaniesOpen(false)}
                          >
                            <span
                              className={`w-[6px] h-[6px] rounded-full shrink-0 ${
                                isActive ? 'bg-[#d20010]' : 'bg-white/30'
                              }`}
                            />
                            {company.label}
                          </Link>
                        )
                      })}
                    </div>
                  </div>
                </div>
              ) : (
                <Link
                  href={link.url}
                  className={`text-[16px] leading-[1.5] transition-colors hover:text-[#d20010] ${
                    pathname === link.url ? 'font-bold text-[#d20010]' : 'font-medium text-[#060505]'
                  }`}
                >
                  {link.label}
                </Link>
              )}
              {i < navLinks.length - 1 && <DiagonalSeparator />}
            </div>
          ))}
        </div>

        <Link
          href="/contact"
          className="hdr-cta hidden lg:flex items-center bg-[#d20010] rounded-[66px] pl-[2px] py-[2px] flex-shrink-0 group hover:bg-[#b8000e] transition-colors"
        >
          <span className="hdr-cta-inner flex items-center justify-center bg-white px-[24px] py-[12px] rounded-[44px]">
            <span className="hdr-cta-text font-medium text-[16px] leading-[22px] text-[#1c2023] tracking-[0.32px] uppercase whitespace-nowrap">
              Contact us
            </span>
          </span>
          <span className="hdr-cta-arrow flex items-center justify-center w-[24px] h-[24px] mx-[8px]">
            <svg
              width="8"
              height="14"
              viewBox="0 0 7.5 13.5"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M0.75 0.75C0.75 0.75 6.75 5.169 6.75 6.75C6.75 8.331 0.75 12.75 0.75 12.75"
                stroke="#FAFAFA"
                strokeWidth="1.5"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          </span>
        </Link>

        <div className="flex items-center gap-[10px] lg:hidden">
          <Link
            href="/contact"
            className="flex items-center bg-[#d20010] rounded-[66px] pl-[2px] py-[2px] flex-shrink-0 hover:bg-[#b8000e] transition-colors"
          >
            <span className="flex items-center justify-center bg-white px-[16px] py-[8px] rounded-[44px]">
              <span className="font-medium text-[10px] leading-[14px] text-[#1c2023] tracking-[0.2px] uppercase whitespace-nowrap">
                Contact us
              </span>
            </span>
            <span className="flex items-center justify-center w-[18px] h-[18px] mx-[6px]">
              <svg
                width="7"
                height="12"
                viewBox="0 0 7.5 13.5"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M0.75 0.75C0.75 0.75 6.75 5.169 6.75 6.75C6.75 8.331 0.75 12.75 0.75 12.75"
                  stroke="#FAFAFA"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            </span>
          </Link>

          <button
            onClick={() => setIsMenuOpen(!isMenuOpen)}
            className={`p-1.5 rounded-full shadow-sm ring-1 transition-colors ${
              isScrolled
                ? 'bg-white text-[#1c2023] ring-black/10 hover:bg-gray-100'
                : 'bg-white/90 text-[#1c2023] ring-white/70 backdrop-blur hover:bg-white'
            }`}
            aria-label="Toggle menu"
          >
            {isMenuOpen ? <X size={22} strokeWidth={1.75} /> : <Menu size={22} strokeWidth={1.75} />}
          </button>
        </div>
      </div>

      <div
        className={`lg:hidden fixed inset-0 z-[100] ${isMenuOpen ? 'pointer-events-auto' : 'pointer-events-none'}`}
      >
        <div
          className={`absolute inset-0 bg-black/50 transition-opacity duration-300 ${isMenuOpen ? 'opacity-100' : 'opacity-0'}`}
          onClick={() => setIsMenuOpen(false)}
        />
        <div
          className={`absolute inset-y-0 right-0 w-[80%] bg-white flex flex-col overflow-hidden transition-transform duration-300 ease-in-out z-20 ${isMenuOpen ? 'translate-x-0' : 'translate-x-full'}`}
        >
          <div className="flex justify-end px-[18px] pt-[14px] pb-[12px] shrink-0">
            <button
              onClick={() => setIsMenuOpen(false)}
              className="p-1.5 rounded-lg text-[#6b7280] hover:bg-gray-100 transition-colors"
              aria-label="Close menu"
            >
              <X size={22} strokeWidth={1.75} />
            </button>
          </div>

          <div className="flex flex-1 min-h-0 flex-col px-[18px] pb-[18px]">
            <div className="min-h-0 overflow-y-auto">
              <div className="border-r border-b border-[rgba(8,19,33,0.1)] relative z-10">
              {mobileMenuLinks.map((link, index) => {
                const isActive = pathname === link.url
                const num = String(index + 1).padStart(2, '0') + '.'

                const inner = (
                  <div className="relative h-[56px] w-full">
                    {isActive ? (
                      <>
                        <div
                          className="absolute inset-0 overflow-hidden"
                          style={{ background: 'linear-gradient(to left, #d20010, rgba(255,255,255,0))',
                          }}
                        >
                          <svg className="absolute top-0 left-0 w-[8px] h-[10px]" viewBox="0 0 8 10" fill="none">
                            <path d="M0 0H8V2H2V10H0V0Z" fill="#c5c5c5" />
                          </svg>
                          <svg className="absolute top-0 right-0 w-[8px] h-[10px]" viewBox="0 0 8 10" fill="none">
                            <path d="M8 0H0V2H6V10H8V0Z" fill="white" />
                          </svg>
                        </div>
                        <div className="absolute inset-0 flex items-center gap-3">
                          <span
                            className="text-[14px] leading-none text-black uppercase"
                          >
                            {num}
                          </span>
                          <span
                            className="text-[20px] leading-none text-black uppercase"
                          >
                            {link.label}
                          </span>
                        </div>
                      </>
                    ) : (
                      <div className="absolute inset-0 flex items-center gap-3">
                        <span
                          className="text-[14px] leading-[24px] text-[#232323] opacity-60 tracking-[-0.5px]"
                        >
                          {num}
                        </span>
                        <span
                          className="text-[20px] leading-[33px] text-[#232323] opacity-60 tracking-[-0.5px]"
                        >
                          {link.label}
                        </span>
                      </div>
                    )}
                  </div>
                )

                return (
                  <Link
                    key={link.label}
                    href={link.url}
                    className="block"
                    onClick={() => setIsMenuOpen(false)}
                  >
                    {inner}
                  </Link>
                )
              })}
              </div>
            </div>

            <p
              className="mt-auto shrink-0 self-end pt-4 text-[clamp(34px,13vw,56px)] font-bold leading-[0.8] text-[rgba(156,30,54,0.08)] whitespace-nowrap pointer-events-none select-none"
            >
              MGM Group
            </p>
          </div>
        </div>
      </div>
    </nav>
  )
}