"use client";

import Image from "next/image";
import NextLink from "next/link";
import { FormEvent, useEffect, useMemo, useState } from "react";
import { ChevronDown, Gamepad2, Gift, Headphones, LogIn, Menu, Search, UserPlus, WalletCards, X } from "lucide-react";
import { categories, yapaylisansProducts, gamesAllMenu, gamesPopularMenu, giftCards, giftsAllMenu, giftsPopularMenu, popularProducts } from "@/data/yapaylisans";
import type { MenuLink } from "@/types/yapaylisans";

type MenuName = "games" | "gifts" | null;

function MenuColumn({ title, links, wide = false }: { title: string; links: MenuLink[]; wide?: boolean }) {
  return (
    <div className={wide ? "mega-column wide" : "mega-column"}>
      <p>{title}</p>
      <ul>
        {links.map((link) => (
          <li key={`${link.title}-${link.href}`}>
            <a href={link.href}>{link.title}</a>
            {link.discount && <span>{link.discount}</span>}
          </li>
        ))}
      </ul>
    </div>
  );
}

function MegaMenu({ kind, open }: { kind: Exclude<MenuName, null>; open: boolean }) {
  const isGames = kind === "games";
  return (
    <div className={`mega-menu ${open ? "open" : ""}`}>
      <div className="mega-copy">
        <MenuColumn title="Popüler Ürünler" links={isGames ? gamesPopularMenu : giftsPopularMenu} />
        <MenuColumn title="Tüm Ürünler" links={isGames ? gamesAllMenu : giftsAllMenu} wide />
      </div>
      <div className="mega-art">
        <Image src={isGames ? "/assets/yapaylisans/menu-games.jpg" : "/assets/yapaylisans/menu-gifts.jpg"} alt="" width={425} height={300} loading="eager" />
      </div>
    </div>
  );
}

export function SiteHeader() {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const [activeMenu, setActiveMenu] = useState<MenuName>(null);
  const [mobileSection, setMobileSection] = useState<MenuName>(null);
  const [query, setQuery] = useState("");
  const [searchFocused, setSearchFocused] = useState(false);
  const [preferencesSaved, setPreferencesSaved] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 110);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const results = useMemo(() => {
    const normalized = query.trim().toLocaleLowerCase("tr");
    if (normalized.length < 2) return [];
    return [...categories, ...popularProducts, ...yapaylisansProducts, ...giftCards]
      .filter((item, index, items) => item.title.toLocaleLowerCase("tr").includes(normalized) && items.findIndex((candidate) => candidate.title === item.title) === index)
      .slice(0, 7);
  }, [query]);

  function submitSearch(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (results[0]) window.location.assign(results[0].href);
  }

  function closeDrawer() {
    setMenuOpen(false);
    setMobileSection(null);
  }

  return (
    <header className={`site-header ${scrolled ? "is-scrolled" : ""}`}>
      <div className="header-quick">
        <div className="yapaylisans-container quick-inner">
          <a className="dealer-button" href="https://forms.gle/MDgpsVXL4SygReDMA">Bayi Başvuru Formu</a>
          <span className="quick-tagline">Türkiye&apos;nin en büyük Yapaylisans.com satış platformu!</span>
          <div className="quick-actions">
            <a href="/iletisim">✉ İletişim</a>
            <a className="balance-button" href="/yapaylisans-site-bakiyesi"><WalletCards size={15} /> Bakiye Yükle</a>
          </div>
        </div>
      </div>

      <div className="header-center">
        <div className="yapaylisans-container center-inner">
          <NextLink className="company-logo" href="/" aria-label="Yapaylisans.com ana sayfa">
            <Image src="/assets/yapaylisans/logo.svg" alt="Yapaylisans.com" width={140} height={53} priority />
          </NextLink>
          <form className="site-search" onSubmit={submitSearch}>
            <input aria-label="Ürün ara" placeholder="Arama Yapmak İstediğiniz Ürünü Yazın" value={query} onChange={(event) => setQuery(event.target.value)} onFocus={() => setSearchFocused(true)} onBlur={() => window.setTimeout(() => setSearchFocused(false), 150)} />
            <button type="submit" aria-label="Ara"><Search size={24} strokeWidth={3} /></button>
            {searchFocused && query.length >= 2 && (
              <div className="search-results">
                {results.length > 0 ? results.map((result) => <a href={result.href} key={`${result.title}-${result.href}`}>{result.title}</a>) : <span>Ürün bulunamadı</span>}
              </div>
            )}
          </form>
          <div className="account-actions">
            <a href="/kayit-ol">Kayıt Ol <UserPlus size={20} /></a>
            <a href="/giris-yap">Giriş Yap <LogIn size={20} /></a>
          </div>
        </div>
      </div>

      <button className="mobile-menu-button" type="button" aria-label="Menüyü aç" onClick={() => setMenuOpen(true)}><Menu size={26} /></button>

      <nav className="header-nav" aria-label="Ana menü" onMouseLeave={() => setActiveMenu(null)}>
        <div className="yapaylisans-container nav-inner">
          <div className="nav-item" onMouseEnter={() => setActiveMenu("games")}>
            <a href="/oyun-pinleri"><Gamepad2 size={17} /> Oyun Pinleri &amp; Top-Up <ChevronDown size={14} /></a>
            <MegaMenu kind="games" open={activeMenu === "games"} />
          </div>
          <div className="nav-item" onMouseEnter={() => setActiveMenu("gifts")}>
            <a href="/hediye-kartlari"><Gift size={17} /> TV Paketleri ve Hediye Kartları <ChevronDown size={14} /></a>
            <MegaMenu kind="gifts" open={activeMenu === "gifts"} />
          </div>
          <div className="nav-item" onMouseEnter={() => setActiveMenu(null)}>
            <a href="/yayincilar"><Headphones size={17} /> Sponsorlu Yayıncılar / Donate</a>
          </div>
        </div>
      </nav>

      <aside className={`mobile-drawer ${menuOpen ? "open" : ""}`} aria-hidden={!menuOpen}>
        <button className="drawer-close" type="button" aria-label="Menüyü kapat" onClick={closeDrawer}><X size={24} /></button>
        <div className="drawer-account">
          <a href="/giris-yap"><LogIn size={16} /> GİRİŞ YAP</a>
          <a href="/kayit-ol"><UserPlus size={16} /> KAYIT OL</a>
        </div>
        <div className="drawer-section">
          <div><a href="/oyun-pinleri"><Gamepad2 size={18} /> Oyun Pinleri &amp; Top-Up</a><button type="button" aria-label="Oyun alt menüsünü aç" onClick={() => setMobileSection(mobileSection === "games" ? null : "games")}><ChevronDown /></button></div>
          {mobileSection === "games" && <div className="drawer-submenu">{gamesAllMenu.map((link) => <a href={link.href} key={link.href}>{link.title}{link.discount && <span>{link.discount}</span>}</a>)}</div>}
        </div>
        <div className="drawer-section">
          <div><a href="/hediye-kartlari"><Gift size={18} /> TV Paketleri ve Hediye Kartları</a><button type="button" aria-label="Hediye kartı alt menüsünü aç" onClick={() => setMobileSection(mobileSection === "gifts" ? null : "gifts")}><ChevronDown /></button></div>
          {mobileSection === "gifts" && <div className="drawer-submenu">{giftsAllMenu.map((link) => <a href={link.href} key={link.href}>{link.title}{link.discount && <span>{link.discount}</span>}</a>)}</div>}
        </div>
        <a className="drawer-publisher" href="/yayincilar"><Headphones size={18} /> Sponsorlu Yayıncılar / Donate</a>
        <div className="language-form">
          <div className="language-current"><Image src="/assets/yapaylisans/language-tr.png" alt="Türkçe" width={20} height={20} /> /TRY/TR/</div>
          <h3>Lütfen Dil ve Para Birimini Seçin</h3>
          <select aria-label="Ülke"><option>Ülke Seçiniz</option><option>Türkiye</option></select>
          <select aria-label="Para birimi"><option>Para Birimi Seçiniz</option><option>Türkiye</option></select>
          <select aria-label="Dil"><option>Dil Seçiniz</option><option>Türkiye</option></select>
          <button type="button" onClick={() => setPreferencesSaved(true)}>{preferencesSaved ? "KAYDEDİLDİ" : "KAYDET"}</button>
        </div>
      </aside>
      {menuOpen && <button className="drawer-backdrop" aria-label="Menü arka planı" onClick={closeDrawer} />}
    </header>
  );
}