'use client';

import React, { useState, useEffect, useRef, useCallback } from 'react';
import Link from 'next/link';
import { Search, ShoppingCart, Menu, X, Home, Flame, Coffee, Cookie, Package, Truck, MapPin, ChevronDown, ShieldCheck } from 'lucide-react';
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
import { Badge } from '@/components/ui/badge';
import { useFoodMartStore } from '@/store/foodmart';

interface SearchResult {
  id: string;
  name: string;
  price: number;
  discountPrice: number | null;
  thumbnail: string;
  category: { name: string };
}

interface HeaderProps {
  storeName?: string;
  onFoodSelect: (id: string) => void;
  onOpenTracking?: () => void;
}

function formatPrice(price: number): string {
  return new Intl.NumberFormat('id-ID').format(price);
}

export default function Header({ storeName = 'FoodMart', onFoodSelect, onOpenTracking }: HeaderProps) {
  const [menuOpen, setMenuOpen] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');
  const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
  const [showResults, setShowResults] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const [branches, setBranches] = useState<{ id: string; name: string; slug: string; isOpen: boolean }[]>([]);
  const [branchOpen, setBranchOpen] = useState(false);
  const searchRef = useRef<HTMLDivElement>(null);
  const branchRef = useRef<HTMLDivElement>(null);
  const debounceRef = useRef<NodeJS.Timeout | null>(null);
  const cartCount = useFoodMartStore((s) => s.getCartCount());
  const cart = useFoodMartStore((s) => s.cart);
  const selectedBranch = useFoodMartStore((s) => s.selectedBranch);
  const setSelectedBranch = useFoodMartStore((s) => s.setSelectedBranch);

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

  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (searchRef.current && !searchRef.current.contains(event.target as Node)) {
        setShowResults(false);
      }
      if (branchRef.current && !branchRef.current.contains(event.target as Node)) {
        setBranchOpen(false);
      }
    }
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  useEffect(() => {
    async function fetchBranches() {
      try {
        const res = await fetch('/api/branches');
        const data = await res.json();
        if (data.success) setBranches(data.data);
      } catch { /* silent */ }
    }
    fetchBranches();
  }, []);

  const doSearch = useCallback(async (q: string) => {
    if (q.length < 2) {
      setSearchResults([]);
      return;
    }
    try {
      const res = await fetch(`/api/search?q=${encodeURIComponent(q)}`);
      const data = await res.json();
      if (data.success) {
        setSearchResults(data.data);
      }
    } catch {
      setSearchResults([]);
    }
  }, []);

  const handleSearchChange = (value: string) => {
    setSearchQuery(value);
    if (debounceRef.current) clearTimeout(debounceRef.current);
    debounceRef.current = setTimeout(() => {
      doSearch(value);
    }, 300);
  };

  const handleResultClick = (id: string) => {
    setShowResults(false);
    setSearchQuery('');
    setSearchResults([]);
    onFoodSelect(id);
  };

  const navItems = [
    { icon: Home, label: 'Beranda', href: '/' },
    { icon: Flame, label: 'Menu Makanan', href: '#menu' },
    { icon: Coffee, label: 'Minuman', href: '#menu' },
    { icon: Cookie, label: 'Snack', href: '#menu' },
    { icon: Package, label: 'Paket', href: '#menu' },
    { icon: Truck, label: 'Lacak Pesanan', href: '#tracking', action: onOpenTracking },
  ];

  return (
    <>
      <header
        className={`sticky top-0 z-40 w-full transition-all duration-300 ${
          scrolled
            ? 'shadow-lg'
            : ''
        }`}
        style={{ backgroundColor: 'var(--header-bg)', backdropFilter: 'var(--header-blur)' }}
      >
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="flex h-16 items-center justify-between gap-2 sm:gap-4">
            {/* Left: Hamburger + Logo */}
            <div className="flex items-center gap-2 sm:gap-3">
              <button
                onClick={() => setMenuOpen(true)}
                className="flex items-center justify-center rounded-lg p-2 text-[var(--text-secondary)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)] lg:hidden"
              >
                <Menu className="h-5 w-5" />
              </button>
              <Link href="/" className="flex items-center gap-2 shrink-0">
                <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-[var(--accent-500)] to-[var(--accent-400)]">
                  <span className="text-sm font-bold text-white">F</span>
                </div>
                <span className="hidden text-lg font-bold text-[var(--text-primary)] sm:block">{storeName}</span>
              </Link>
            </div>

            {/* Branch Selector (desktop) */}
            {branches.length > 0 && (
              <div ref={branchRef} className="relative hidden lg:block">
                <button
                  onClick={() => setBranchOpen(!branchOpen)}
                  className="flex items-center gap-1.5 rounded-lg border border-[var(--border-default)] bg-[var(--bg-input)] px-3 py-1.5 text-xs font-medium text-[var(--text-secondary)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]"
                >
                  <MapPin className="h-3.5 w-3.5 text-[var(--accent-400)]" />
                  <span>{selectedBranch?.name || 'Pilih Cabang'}</span>
                  <ChevronDown className="h-3 w-3" />
                </button>
                {branchOpen && (
                  <div className="absolute top-full left-0 mt-1 w-56 rounded-xl border border-[var(--border-hover)] bg-[var(--bg-card)] p-1 shadow-lg" style={{ boxShadow: '0 10px 40px var(--shadow-color)' }}>
                    {branches.map((b) => (
                      <button
                        key={b.id}
                        onClick={() => { setSelectedBranch(b); setBranchOpen(false); }}
                        className={`flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm transition-colors ${
                          selectedBranch?.id === b.id
                            ? 'bg-[var(--accent-100)] text-[var(--accent-600)]'
                            : 'text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]'
                        }`}
                      >
                        <MapPin className="h-4 w-4 shrink-0" />
                        <div className="min-w-0 flex-1">
                          <p className="truncate font-medium">{b.name}</p>
                          {!b.isOpen && <p className="text-[10px] text-[var(--text-tertiary)]">Tutup</p>}
                        </div>
                      </button>
                    ))}
                  </div>
                )}
              </div>
            )}

            {/* Center: Search */}
            <div ref={searchRef} className="relative flex-1 max-w-[180px] sm:max-w-xs md:max-w-md lg:max-w-lg">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--text-tertiary)]" />
                <input
                  type="text"
                  placeholder="Cari menu..."
                  value={searchQuery}
                  onChange={(e) => {
                    handleSearchChange(e.target.value);
                    setShowResults(true);
                  }}
                  onFocus={() => {
                    if (searchResults.length > 0) setShowResults(true);
                  }}
                  className="w-full rounded-full border border-[var(--border-hover)] bg-[var(--bg-input)] py-2 pl-10 pr-4 text-sm text-[var(--text-primary)] placeholder:text-[var(--text-tertiary)] outline-none transition-colors focus:border-[var(--accent-300)] focus:bg-[var(--bg-input-focus)]"
                />
              </div>
              {showResults && searchResults.length > 0 && (
                <div className="absolute top-full left-0 right-0 mt-2 rounded-xl border border-[var(--border-hover)] bg-[var(--bg-card)] shadow-xl overflow-hidden" style={{ boxShadow: '0 10px 40px var(--shadow-color)' }}>
                  {searchResults.map((item) => (
                    <button
                      key={item.id}
                      onClick={() => handleResultClick(item.id)}
                      className="flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-[var(--bg-hover)]"
                    >
                      {item.thumbnail ? (
                        <img
                          src={item.thumbnail}
                          alt={item.name}
                          className="h-10 w-10 rounded-lg object-cover"
                        />
                      ) : (
                        <div className="h-10 w-10 rounded-lg bg-[var(--bg-input)]" />
                      )}
                      <div className="min-w-0 flex-1">
                        <p className="truncate text-sm font-medium text-[var(--text-primary)]">{item.name}</p>
                        <p className="text-xs text-[var(--text-secondary)]">{item.category?.name || 'Menu'}</p>
                      </div>
                      <span className="text-sm font-semibold text-[var(--accent-400)]">
                        Rp {formatPrice(item.discountPrice || item.price)}
                      </span>
                    </button>
                  ))}
                </div>
              )}
            </div>

            {/* Right: Tracking + Cart */}
            <div className="flex items-center gap-1">
              {onOpenTracking && (
                <button
                  onClick={onOpenTracking}
                  className="flex items-center justify-center rounded-lg p-2 text-[var(--text-secondary)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]"
                  title="Lacak Pesanan"
                >
                  <Truck className="h-5 w-5" />
                </button>
              )}
              <button
                onClick={() => {
                  const event = new CustomEvent('open-cart');
                  window.dispatchEvent(event);
                }}
                className="relative flex items-center justify-center rounded-lg p-2 text-[var(--text-secondary)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]"
              >
                <ShoppingCart className="h-5 w-5" />
                {cartCount > 0 && (
                  <span className="absolute -top-0.5 -right-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-[var(--accent-500)] text-[10px] font-bold text-white">
                    {cartCount > 99 ? '99+' : cartCount}
                  </span>
                )}
              </button>
            </div>
          </div>
        </div>
      </header>

      {/* Mobile Menu Sheet */}
      <Sheet open={menuOpen} onOpenChange={setMenuOpen}>
        <SheetContent side="left" className="w-72 border-[var(--border-hover)] bg-[var(--bg-secondary)] p-0">
          <SheetHeader className="border-b border-[var(--border-default)] px-6 py-4">
            <div className="flex items-center gap-3">
              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-[var(--accent-500)] to-[var(--accent-400)]">
                <span className="text-lg font-bold text-white">F</span>
              </div>
              <div>
                <SheetTitle className="text-left text-[var(--text-primary)]">{storeName}</SheetTitle>
                <p className="text-xs text-[var(--text-secondary)]">Pesan makanan favoritmu</p>
              </div>
            </div>
          </SheetHeader>

          {/* Branch selector in mobile menu */}
          {branches.length > 0 && (
            <div className="border-b border-[var(--border-default)] p-4">
              <div className="flex items-center gap-2 mb-2">
                <MapPin className="h-4 w-4 text-[var(--accent-400)]" />
                <span className="text-xs font-semibold text-[var(--text-secondary)]">Pilih Cabang</span>
              </div>
              <div className="flex flex-col gap-1">
                {branches.map((b) => (
                  <button
                    key={b.id}
                    onClick={() => { setSelectedBranch(b); setMenuOpen(false); }}
                    className={`flex items-center gap-2 rounded-lg px-3 py-2 text-left text-sm transition-colors ${
                      selectedBranch?.id === b.id
                        ? 'bg-[var(--accent-100)] text-[var(--accent-600)]'
                        : 'text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]'
                    }`}
                  >
                    <MapPin className="h-3.5 w-3.5" />
                    <span className="truncate">{b.name}</span>
                  </button>
                ))}
              </div>
            </div>
          )}

          <nav className="flex flex-col gap-1 p-4">
            {navItems.map((item) =>
              item.action ? (
                <button
                  key={item.label}
                  onClick={() => {
                    setMenuOpen(false);
                    item.action?.();
                  }}
                  className="flex items-center gap-3 rounded-xl px-4 py-3 text-left text-[var(--text-secondary)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]"
                >
                  <item.icon className="h-5 w-5" />
                  <span className="text-sm font-medium">{item.label}</span>
                </button>
              ) : (
                <Link
                  key={item.label}
                  href={item.href}
                  onClick={() => setMenuOpen(false)}
                  className="flex items-center gap-3 rounded-xl px-4 py-3 text-[var(--text-secondary)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]"
                >
                  <item.icon className="h-5 w-5" />
                  <span className="text-sm font-medium">{item.label}</span>
                </Link>
              )
            )}

            {/* Admin link - hidden in menu */}
            <div className="mt-3 border-t border-[var(--border-default)] pt-3">
              <Link
                href="/admin"
                onClick={() => setMenuOpen(false)}
                className="flex items-center gap-3 rounded-xl px-4 py-3 text-[var(--text-quaternary)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text-tertiary)]"
              >
                <ShieldCheck className="h-4 w-4" />
                <span className="text-xs font-medium">Admin</span>
              </Link>
            </div>
          </nav>
        </SheetContent>
      </Sheet>
    </>
  );
}