"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import { Flame, Headset, LogIn, PawPrint, ShoppingCart, TrendingUp, UserCircle } from "lucide-react";
import { LiveSearch } from "./live-search";
import { CartDrawer } from "./cart-drawer";
import { PetIcon } from "./pet-icon";
import { cartCount, useCartStore, useUIStore } from "./cart-store";

type NavCategory = { name: string; slug: string; icon: string; count: number };

const ANNOUNCEMENTS = [
  "1.500 ₺ üzeri ÜCRETSİZ KARGO",
  "16:00'a kadar verilen siparişler AYNI GÜN KARGODA",
  "PATA10 kodu ile ilk siparişte %10 HOŞ GELDİN İNDİRİMİ",
  "%100 güvenli ödeme — 256-bit SSL",
];

export function SiteHeader({ categories }: { categories: NavCategory[] }) {
  const [mounted, setMounted] = useState(false);
  const [user, setUser] = useState<{ name: string } | null>(null);
  const items = useCartStore((s) => s.items);
  const setCartOpen = useUIStore((s) => s.setCartOpen);

  useEffect(() => {
    setMounted(true);
    fetch("/api/auth/me").then(r => r.json()).then(d => { if (d.user) setUser(d.user); }).catch(() => {});
  }, []);
  const count = mounted ? cartCount(items) : 0;

  return (
    <>
      {/* Duyuru bandı */}
      <div data-pet5-id="site.header.announcement" className="overflow-hidden bg-gradient-to-r from-brand-600 via-brand-500 to-brand-600 py-2 text-white">
        <div className="animate-marquee flex w-max items-center gap-8">
          {[0, 1].map((copy) => (
            <div
              key={copy}
              aria-hidden={copy === 1}
              className="flex items-center gap-8 text-[11px] font-extrabold tracking-wide"
            >
              {ANNOUNCEMENTS.map((text) => (
                <span key={`${copy}-${text}`} className="flex items-center gap-2 whitespace-nowrap">
                  <PawPrint className="size-3.5 opacity-80" aria-hidden />
                  {text}
                </span>
              ))}
            </div>
          ))}
        </div>
      </div>

      <header data-pet5-id="site.header" className="sticky top-0 z-40 border-b border-sand-dark/70 bg-cream/90 backdrop-blur-md">
        <div className="mx-auto flex max-w-7xl items-center gap-4 px-4 py-3 sm:px-6">
          {/* Logo */}
          <Link data-pet5-id="site.header.logo" href="/" className="group flex shrink-0 items-center gap-2.5" aria-label="PetMarketim ana sayfa">
            <div className="relative flex items-center gap-2">
              <div className="grid size-11 place-items-center rounded-2xl bg-gradient-to-br from-orange-400 to-orange-600 text-white shadow-lg shadow-orange-500/30 transition-transform duration-300 group-hover:rotate-6 group-hover:scale-105">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="size-6">
                  <path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/>
                  <circle cx="12" cy="15" r="1.5" fill="currentColor"/>
                </svg>
              </div>
              <div className="flex flex-col">
                <span className="font-display text-2xl font-extrabold leading-none tracking-tight text-ink">
                  Pet<span className="text-orange-600">Marketim</span>
                </span>
                <span className="mt-0.5 block text-[10px] font-bold uppercase tracking-[0.2em] text-mocha">
                  PETMARKETIM.NET
                </span>
              </div>
            </div>
          </Link>

          {/* Masaüstü arama */}
          <div data-pet5-id="site.header.search" className="hidden flex-1 justify-center px-2 lg:flex">
            <div className="w-full max-w-xl">
              <LiveSearch />
            </div>
          </div>

          {/* Sağ aksiyonlar */}
          <div className="ml-auto flex items-center gap-2 lg:ml-0">
            <a
              data-pet5-id="site.header.phone"
              href="tel:08503057245"
              className="hidden items-center gap-2.5 rounded-full py-1.5 pl-1.5 pr-4 transition-colors hover:bg-sand xl:flex"
            >
              <span className="grid size-9 place-items-center rounded-full bg-brand-100 text-brand-600">
                <Headset className="size-4.5" aria-hidden />
              </span>
              <span className="leading-tight">
                <span className="block text-[10px] font-extrabold uppercase tracking-wider text-mocha">
                  Destek Hattı
                </span>
                <span className="block text-sm font-extrabold text-ink">0850 305 72 45</span>
              </span>
            </a>

            {mounted && (
              user ? (
                <Link href="/hesabim" className="flex items-center gap-2 rounded-full bg-brand-50 py-1.5 pl-1.5 pr-3.5 text-sm font-extrabold text-brand-700 ring-1 ring-brand-200 transition-colors hover:bg-brand-100">
                  <span className="grid size-8 place-items-center rounded-full bg-brand-500 text-white"><UserCircle className="size-5" /></span>
                  <span className="hidden sm:inline">{user.name.split(" ")[0]}</span>
                </Link>
              ) : (
                <Link href="/giris" className="flex items-center gap-1.5 rounded-full bg-white py-2 pl-3 pr-4 text-sm font-extrabold text-ink ring-1 ring-sand-dark transition-colors hover:bg-brand-50 hover:text-brand-700 hover:ring-brand-300">
                  <LogIn className="size-4.5 text-brand-500" />
                  <span className="hidden sm:inline">Giriş Yap</span>
                </Link>
              )
            )}

            <button
              data-pet5-id="site.header.cart"
              type="button"
              onClick={() => setCartOpen(true)}
              className="relative grid size-11 place-items-center rounded-full bg-ink text-white shadow-lg shadow-ink/20 transition-all hover:-translate-y-0.5 hover:bg-brand-600 active:scale-95"
              aria-label={`Sepeti aç, ${count} ürün`}
            >
              <ShoppingCart className="size-5" aria-hidden />
              {count > 0 && (
                <span className="absolute -right-1 -top-1 grid size-5 animate-pop-in place-items-center rounded-full bg-brand-500 text-[10px] font-extrabold text-white ring-2 ring-cream">
                  {count > 99 ? "99+" : count}
                </span>
              )}
            </button>
          </div>
        </div>

        {/* Mobil arama */}
        <div className="px-4 pb-3 lg:hidden">
          <LiveSearch />
        </div>

        {/* Kategori navigasyonu */}
        <nav
          data-pet5-id="site.header.nav"
          aria-label="Kategoriler"
          className="hidden border-t border-sand-dark/50 bg-white/50 lg:block"
        >
          <div className="mx-auto flex max-w-7xl items-center gap-2 overflow-x-auto px-6 py-2 no-scrollbar">
            {categories.map((cat) => (
              <Link
                key={cat.slug}
                href={`/urunler?kategori=${cat.slug}`}
                className="flex shrink-0 items-center gap-1.5 rounded-full border border-sand-dark bg-white px-3.5 py-1.5 text-sm font-extrabold text-cocoa transition-all hover:-translate-y-0.5 hover:border-brand-400 hover:bg-brand-50 hover:text-brand-700"
              >
                <PetIcon icon={cat.icon} className="size-4 text-brand-500" />
                {cat.name}
              </Link>
            ))}
            <Link
              href="/urunler"
              className="flex shrink-0 items-center gap-1.5 rounded-full border border-dashed border-brand-300 px-3.5 py-1.5 text-sm font-extrabold text-brand-700 transition-colors hover:bg-brand-50"
            >
              <TrendingUp className="size-4" aria-hidden />
              Çok Satanlar
            </Link>
            <Link
              href="/urunler?kampanya=1"
              className="flex shrink-0 items-center gap-1.5 rounded-full bg-gradient-to-r from-brand-500 to-brand-600 px-4 py-1.5 text-sm font-extrabold text-white shadow-md shadow-brand-500/30 transition-transform hover:-translate-y-0.5"
            >
              <Flame className="size-4" aria-hidden />
              Kampanyalar
            </Link>
          </div>
        </nav>
      </header>

      <CartDrawer />
    </>
  );
}