'use client';

import { useState, useEffect, useRef } from 'react';
import {
  Menu, X, Facebook, Instagram, Linkedin,
  Heart, ShoppingCart, User, ChevronDown, ChevronRight
} from 'lucide-react';
import { useSidebar } from '@/contexts/SidebarContext';
import { useCart } from '@/hooks/useCart';
import { useWishlist } from '@/hooks/useWishlist';
import Link from 'next/link';

export interface MenuItem {
  id: string;
  title: string;
  type: string;
  link: string;
  parent_id: string | null;
  sort_order: number;
  children: MenuItem[];
}

// ─── Skeleton ─────────────────────────────────────────────────────────────────

function NavSkeleton() {
  return (
    <div className="hidden md:flex items-center gap-6">
      {[72, 56, 80, 48, 64].map((w, i) => (
        <div key={i} className="h-3 bg-white/20 rounded-full animate-pulse" style={{ width: w }} />
      ))}
    </div>
  );
}

// ─── Level-2 Flyout (slides out to the right of a level-1 row) ───────────────

function FlyoutMenu({ items, isOpen }: { items: MenuItem[]; isOpen: boolean }) {
  return (
    // pl-1 keeps a tiny transparent bridge so mouse can travel across
    <div className="absolute top-0 left-full pl-1 w-48 z-50">
      <div
        className={`bg-white rounded-xl shadow-xl border border-black/10 py-2 transition-all duration-150 ${
          isOpen
            ? 'opacity-100 translate-x-0 pointer-events-auto'
            : 'opacity-0 -translate-x-1 pointer-events-none'
        }`}
      >
        {items.map((grandchild) => (
          <a
            key={grandchild.id}
            href={grandchild.link}
            className="block px-4 py-2.5 text-sm text-text-primary hover:text-primary-500 hover:bg-primary-500/5 transition"
          >
            {grandchild.title}
          </a>
        ))}
      </div>
    </div>
  );
}

// ─── Level-1 Row inside dropdown (may open a level-2 flyout) ─────────────────

function DropdownRow({ item }: { item: MenuItem }) {
  const [flyoutOpen, setFlyoutOpen] = useState(false);
  const hasGrandchildren = item.children && item.children.length > 0;

  if (hasGrandchildren) {
    return (
      <div
        className="relative"
        onMouseEnter={() => setFlyoutOpen(true)}
        onMouseLeave={() => setFlyoutOpen(false)}
      >
        <a
          href={item.link}
          className="flex items-center justify-between px-4 py-2.5 text-sm text-text-primary hover:text-primary-500 hover:bg-primary-500/5 transition"
        >
          {item.title}
          <ChevronRight className="w-3.5 h-3.5 opacity-50 shrink-0" />
        </a>
        <FlyoutMenu items={item.children} isOpen={flyoutOpen} />
      </div>
    );
  }

  return (
    <a
      href={item.link}
      className="block px-4 py-2.5 text-sm text-text-primary hover:text-primary-500 hover:bg-primary-500/5 transition"
    >
      {item.title}
    </a>
  );
}

// ─── Level-0 Desktop Dropdown Panel ──────────────────────────────────────────

function DropdownPanel({ items, isOpen }: { items: MenuItem[]; isOpen: boolean }) {
  return (
    // pt-2 = transparent bridge between the trigger button and the panel,
    // so onMouseLeave doesn't fire as the cursor crosses the gap
    <div className="absolute top-full left-0 pt-2 w-52 z-50">
      <div
        className={`bg-white rounded-xl shadow-xl border border-black/10 py-2 transition-all duration-200 ${
          isOpen
            ? 'opacity-100 translate-y-0 pointer-events-auto'
            : 'opacity-0 -translate-y-2 pointer-events-none'
        }`}
      >
        {items.map((child) => (
          <DropdownRow key={child.id} item={child} />
        ))}
      </div>
    </div>
  );
}

// ─── Desktop Top-Level Item ───────────────────────────────────────────────────

function DesktopNavItem({ item }: { item: MenuItem }) {
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);
  const hasChildren = item.children && item.children.length > 0;

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

  if (!hasChildren) {
    return (
      <a
        href={item.link}
        className="text-text-primary hover:text-primary-500 px-3 py-2 rounded-md text-sm font-medium transition hover:scale-105"
      >
        {item.title}
      </a>
    );
  }

  return (
    <div
      ref={ref}
      className="relative"
      onMouseEnter={() => setOpen(true)}
      onMouseLeave={() => setOpen(false)}
    >
      <button
        className="flex items-center gap-1 text-text-primary hover:text-primary-500 px-3 py-2 rounded-md text-sm font-medium transition hover:scale-105"
        onClick={() => setOpen((v) => !v)}
        aria-expanded={open}
        aria-haspopup="true"
      >
        {item.title}
        <ChevronDown className={`w-4 h-4 transition-transform duration-200 ${open ? 'rotate-180' : ''}`} />
      </button>
      <DropdownPanel items={item.children} isOpen={open} />
    </div>
  );
}

// ─── Mobile Accordion Item (recursive — handles any depth) ───────────────────

function MobileNavItem({
  item,
  onClose,
  depth = 0,
}: {
  item: MenuItem;
  onClose: () => void;
  depth?: number;
}) {
  const [open, setOpen] = useState(false);
  const hasChildren = item.children && item.children.length > 0;

  // Visual indent increases per depth level
  const wrapClass = depth === 0
    ? 'bg-surface border border-black/10 hover:border-primary-500/30 hover:shadow-md rounded-xl px-4 py-4 text-lg'
    : depth === 1
    ? 'bg-surface/70 border border-black/8 hover:border-primary-500/20 rounded-xl px-4 py-3 text-base ml-4'
    : 'bg-surface/50 border border-black/5 hover:border-primary-500/10 rounded-xl px-4 py-2.5 text-sm ml-8';

  if (hasChildren) {
    return (
      <div>
        <button
          onClick={() => setOpen((v) => !v)}
          className={`w-full flex items-center justify-between text-text-primary font-medium transition ${wrapClass}`}
        >
          {item.title}
          <ChevronDown className={`w-5 h-5 shrink-0 transition-transform duration-200 ${open ? 'rotate-180' : ''}`} />
        </button>
        {open && (
          <div className="mt-1 space-y-1">
            {item.children.map((child) => (
              <MobileNavItem key={child.id} item={child} onClose={onClose} depth={depth + 1} />
            ))}
          </div>
        )}
      </div>
    );
  }

  return (
    <a
      href={item.link}
      onClick={onClose}
      className={`block text-text-primary hover:text-primary-500 font-medium transition ${wrapClass}`}
    >
      {item.title}
    </a>
  );
}

// ─── Main Navigation Component ────────────────────────────────────────────────

interface HeaderProps {
  logoData?: { data: { logo?: string; logo_alt?: string } } | null;
  menuData?: MenuItem[] | null;
}

export default function Navigation({ logoData, menuData }: HeaderProps) {
  const { openSidebar } = useSidebar();
  const { getTotalItems } = useCart();
  const { items: wishlistItems } = useWishlist();

  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  const cartCount = getTotalItems();
  const wishlistCount = wishlistItems.length;
  const isLoading = !menuData;
  const navItems: MenuItem[] = menuData
    ? [...menuData].sort((a, b) => a.sort_order - b.sort_order)
    : [];

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

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

  return (
    <>
      {/* ── Topbar ── */}
      <div className="fixed top-0 left-0 right-0 z-60 bg-[#0066FF] text-white">
        <div className="max-w-7xl mx-auto px-4 py-2 flex items-center justify-between text-sm">
          <div className="flex items-center gap-4">
            <a href="#" className="hover:opacity-80 transition"><Facebook className="w-4 h-4" /></a>
            <a href="#" className="hover:opacity-80 transition"><Instagram className="w-4 h-4" /></a>
            <a href="#" className="hover:opacity-80 transition"><Linkedin className="w-4 h-4" /></a>
          </div>
          <div className="hidden sm:flex items-center gap-6">
            <span>📞 +92 300 0000000</span>
            <span>✉️ info@yourdomain.com</span>
          </div>
        </div>
      </div>

      {/* ── Navbar ── */}
      <nav
        className={`fixed top-8.75 left-0 right-0 z-55 transition-all duration-300 ${
          isScrolled
            ? 'bg-surface/95 backdrop-blur-lg border-b border-black/10 shadow-xl'
            : 'bg-transparent'
        }`}
      >
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">

            <Link href="/" className="text-2xl font-bold text-gradient hover:scale-105 transition">
              {logoData?.data?.logo_alt ?? 'OutreachExpert'}
            </Link>

            {/* Desktop links */}
            <div className="hidden md:flex items-center space-x-2">
              {isLoading
                ? <NavSkeleton />
                : navItems.map((item) => <DesktopNavItem key={item.id} item={item} />)
              }
            </div>

            {/* Desktop right icons */}
            <div className="hidden md:flex items-center gap-4">
              <button
                onClick={() => openSidebar('wishlist')}
                className="relative p-2 rounded-lg hover:bg-primary-500/10 transition group"
              >
                <Heart className="h-5 w-5 text-text-primary group-hover:text-red-500 transition-colors" />
                {wishlistCount > 0 && (
                  <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
                    {wishlistCount}
                  </span>
                )}
              </button>
              <button
                onClick={() => openSidebar('cart')}
                className="relative p-2 rounded-lg hover:bg-primary-500/10 transition group"
              >
                <ShoppingCart className="h-5 w-5 text-text-primary group-hover:text-green-500 transition-colors" />
                {cartCount > 0 && (
                  <span className="absolute -top-1 -right-1 bg-green-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
                    {cartCount}
                  </span>
                )}
              </button>
              <button className="btn-primary whitespace-nowrap flex items-center gap-2">
                <User className="h-4 w-4" /> Login
              </button>
            </div>

            {/* Mobile toggle */}
            <button
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
              className="md:hidden p-2 rounded-lg bg-surface border border-black/10 hover:bg-primary-500/10 transition"
            >
              {isMobileMenuOpen
                ? <X className="h-5 w-5 text-text-primary" />
                : <Menu className="h-5 w-5 text-text-primary" />}
            </button>
          </div>
        </div>
      </nav>

      {/* ── Mobile Sidebar ── */}
      <div
        className={`md:hidden fixed top-0 right-0 h-full z-70 w-full max-w-sm border-l border-black/10 shadow-2xl transform transition-transform duration-300 ${
          isMobileMenuOpen ? 'translate-x-0' : 'translate-x-full'
        }`}
        style={{ background: 'rgba(255,255,255,0.98)', backdropFilter: 'blur(20px)', overflowY: 'auto' }}
      >
        <div className="flex items-center justify-between p-6 border-b border-black/10 mt-2.5">
          <span className="text-xl font-bold text-text-primary">Menu</span>
          <button onClick={() => setIsMobileMenuOpen(false)} className="p-2 rounded-lg hover:bg-primary-500/10 transition">
            <X className="h-6 w-6 text-text-primary" />
          </button>
        </div>

        {/* Recursive nav items */}
        <div className="p-6 space-y-3">
          {navItems.map((item) => (
            <MobileNavItem key={item.id} item={item} onClose={() => setIsMobileMenuOpen(false)} />
          ))}
        </div>

        {/* Mobile icon row */}
        <div className="px-6 py-4 border-t border-black/10">
          <div className="flex items-center justify-around">
            <button
              onClick={() => { openSidebar('wishlist'); setIsMobileMenuOpen(false); }}
              className="relative p-3 rounded-xl bg-surface border border-black/10 hover:shadow-md transition group"
            >
              <Heart className="h-6 w-6 text-text-primary group-hover:text-red-500 transition-colors" />
              {wishlistCount > 0 && (
                <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
                  {wishlistCount}
                </span>
              )}
            </button>
            <button
              onClick={() => { openSidebar('cart'); setIsMobileMenuOpen(false); }}
              className="relative p-3 rounded-xl bg-surface border border-black/10 hover:shadow-md transition group"
            >
              <ShoppingCart className="h-6 w-6 text-text-primary group-hover:text-green-500 transition-colors" />
              {cartCount > 0 && (
                <span className="absolute -top-1 -right-1 bg-green-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
                  {cartCount}
                </span>
              )}
            </button>
          </div>
        </div>

        {/* Stay connected */}
        <div className="px-6 py-6 border-t border-black/10 space-y-5">
          <h3 className="text-lg font-semibold text-text-primary">Stay Connected</h3>
          <div className="flex items-center gap-5">
            {([Facebook, Instagram, Linkedin] as const).map((Icon, i) => (
              <a key={i} href="#" className="p-3 rounded-xl bg-white border hover:shadow-md transition">
                <Icon className="w-5 h-5 text-primary-500" />
              </a>
            ))}
          </div>
          <div className="space-y-2 text-text-primary text-[15px]">
            <p>📞 +92 300 0000000</p>
            <p>✉️ info@outreachexpert.co</p>
          </div>
        </div>

        <div className="p-6 border-t border-black/10">
          <button className="w-full btn-primary py-4 text-lg font-semibold" onClick={() => setIsMobileMenuOpen(false)}>
            <User className="h-5 w-5 inline-block mr-2" /> Login
          </button>
        </div>
      </div>

      {/* Overlay */}
      {isMobileMenuOpen && (
        <div
          className="md:hidden fixed inset-0 bg-black/60 backdrop-blur-sm z-65"
          onClick={() => setIsMobileMenuOpen(false)}
        />
      )}
    </>
  );
}