'use client';

import React, { useState, useEffect, useRef } from 'react';
import Link from 'next/link';
import { useCart } from '@/context/CartContext';
import { HeaderSettings, NavItemSetting } from '@/lib/settings';
import { Category } from '@/types/woocommerce';
import SearchAutocomplete from '@/components/layout/SearchAutocomplete';

const DEFAULT_TICKER = [
  'ঢাকার ভেতরে ২৪–৪৮ ঘণ্টায় ডেলিভারি',
  'ক্যাশ অন ডেলিভারি — হাতে পেয়ে টাকা দিন',
  '৳২,০০০+ অর্ডারে ফ্রি ডেলিভারি',
  'খাঁটি মধু · ভেষজ · বাদাম — ভেজালমুক্ত',
];

const DEFAULT_MOBILE_MENU: NavItemSetting[] = [
  { label: 'All Products', url: '/shop', enabled: true },
  { label: 'Brands', url: '/brands', enabled: true },
  { label: 'Track Order', url: '/track-order', enabled: true },
  { label: 'Contact', url: '/contact', enabled: true },
  { label: 'About us', url: '/about', enabled: true },
];

interface HeaderProps {
  settings?: HeaderSettings;
  categories?: Category[];
}

export default function Header({ settings, categories = [] }: HeaderProps) {
  const { itemCount, openCart } = useCart();
  const [menuOpen, setMenuOpen] = useState(false);
  const [logoError, setLogoError] = useState(false);
  const logoRef = useRef<HTMLImageElement>(null);

  // Catch images that failed before hydration attached onError
  useEffect(() => {
    const img = logoRef.current;
    if (img && img.complete && img.naturalWidth === 0) setLogoError(true);
  });

  // Open menu drawer from mobile bottom nav
  useEffect(() => {
    const open = () => setMenuOpen(true);
    window.addEventListener('open-mobile-menu', open);
    return () => window.removeEventListener('open-mobile-menu', open);
  }, []);

  // Close drawer on ESC + lock body scroll
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') setMenuOpen(false);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

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

  // Ticker messages (plugin-driven, Bengali defaults from design)
  const showTicker = settings?.announcement_enabled !== false;
  const rawTicker = settings?.announcement_text?.trim();
  const tickerItems = rawTicker
    ? rawTicker
        .split('•')
        .map((s) => s.trim())
        .filter(Boolean)
    : DEFAULT_TICKER;
  const tickerLoop = tickerItems.length > 0 ? [...tickerItems, ...tickerItems] : [];

  const brandName = settings?.brand_name || 'Hayat Supplements';
  const rawLogo = settings?.logo_url?.trim();
  // Only render an <img> when the plugin provides a logo URL; otherwise show the brand name as text.
  const logoUrl =
    !logoError && rawLogo
      ? rawLogo.startsWith('http://') || rawLogo.startsWith('https://') || rawLogo.startsWith('/')
        ? rawLogo
        : `/images/${rawLogo}`
      : '';

  const mobileMenu =
    settings?.mobile_menu && settings.mobile_menu.length > 0
      ? settings.mobile_menu.filter((m) => m.enabled !== false)
      : DEFAULT_MOBILE_MENU;

  // Desktop category nav: use plugin desktop_menu when configured, otherwise WooCommerce categories
  const desktopMenu =
    settings?.desktop_menu && settings.desktop_menu.length > 0
      ? settings.desktop_menu.filter((m) => m.enabled !== false)
      : null;
  const showWcCategories = !desktopMenu && categories.length > 0;

  return (
    <>
      {/* Announcement ticker */}
      {showTicker && tickerLoop.length > 0 && (
        <>
          <div className="ticker" aria-hidden="true">
            <div className="ticker-track">
              {tickerLoop.map((t, i) => (
                <span key={i}>{t}</span>
              ))}
            </div>
          </div>
          <p className="sr">{tickerItems.join(' • ')}</p>
        </>
      )}

      {/* Main sticky header */}
      <header className="hdr">
        <div className="wrap hdr-in">
          <button
            type="button"
            className="burger"
            onClick={() => setMenuOpen(true)}
            aria-label="মেনু খুলুন"
          >
            <svg className="ic" viewBox="0 0 24 24">
              <path d="M4 7h16M4 12h16M4 17h10" />
            </svg>
          </button>

          <Link href="/" className="logo" aria-label={`${brandName} হোম`}>
            {logoUrl ? (
              <img
                ref={logoRef}
                src={logoUrl}
                alt={brandName}
                width={104}
                height={46}
                onError={() => setLogoError(true)}
              />
            ) : (
              <span style={{ fontWeight: 700, fontSize: '20px', color: 'var(--g800)' }}>
                {brandName}
              </span>
            )}
          </Link>

          <div className="hsearch">
            <SearchAutocomplete placeholder="মধু, অশ্বগন্ধা, চিয়া সীড খুঁজুন…" />
          </div>

          <nav className="hicons" aria-label="অ্যাকাউন্ট">
            <Link className="hic hide-m" href="/track-order">
              <svg className="ic" viewBox="0 0 24 24">
                <path d="M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z" />
                <circle cx="12" cy="10" r="2.5" />
              </svg>
              Track Order
            </Link>
            <Link className="hic hide-m" href="/brands">
              <svg className="ic" viewBox="0 0 24 24">
                <path d="M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z" />
                <circle cx="7.5" cy="7.5" r="1.5" />
              </svg>
              Brands
            </Link>
            <button
              type="button"
              className="hic"
              onClick={openCart}
              aria-label={`কার্ট খুলুন (${itemCount}টি পণ্য)`}
            >
              <svg className="ic" viewBox="0 0 24 24">
                <path d="M6 7h12l-1 13H7L6 7z" />
                <path d="M9 7a3 3 0 0 1 6 0" />
              </svg>
              <span className="hide-m-label">Cart</span>
              <span className="cnt" data-n={itemCount}>
                {itemCount}
              </span>
            </button>
          </nav>
        </div>

        {/* Category nav: plugin desktop menu when configured, else WooCommerce categories */}
        {desktopMenu ? (
          <nav className="catnav" aria-label="ক্যাটাগরি">
            <div className="wrap">
              <ul>
                {desktopMenu.map((m, idx) => (
                  <li key={idx}>
                    <Link href={m.url}>{m.label}</Link>
                  </li>
                ))}
              </ul>
            </div>
          </nav>
        ) : (
          showWcCategories && (
            <nav className="catnav" aria-label="ক্যাটাগরি">
              <div className="wrap">
                <ul>
                  {categories.map((c) => (
                    <li key={c.slug}>
                      <Link
                        href={`/category/${c.slug}`}
                        className={c.tag === 'hot' ? 'hot' : ''}
                      >
                        {c.name}
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>
            </nav>
          )
        )}
      </header>

      {/* Mobile menu drawer */}
      {menuOpen && (
        <>
          <div
            className="scrim on"
            onClick={() => setMenuOpen(false)}
            aria-hidden="true"
          />
          <aside className="drawer left on" role="dialog" aria-modal="true" aria-label="মেনু">
            <div className="dh">
              <h3>Menu</h3>
              <button
                type="button"
                className="xbtn"
                onClick={() => setMenuOpen(false)}
                aria-label="বন্ধ করুন"
              >
                ✕
              </button>
            </div>
            <div className="db">
              <nav className="mnav">
                {mobileMenu.map((item, idx) => (
                  <Link key={idx} href={item.url} onClick={() => setMenuOpen(false)}>
                    {item.label}
                  </Link>
                ))}
              </nav>
            </div>
          </aside>
        </>
      )}
    </>
  );
}