"use client";

import { FormEvent, useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { Bike, ChevronDown, Headphones, Heart, Home, MapPin, Menu, Search, ShoppingBasket, UserRound } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
import { useCart } from "@/components/cart-provider";
import { SiteSettingsProvider } from "@/components/site-settings-provider";
import { DEFAULT_SITE_SETTINGS, resolveSiteSettings, type SiteSettings } from "@/data/site-defaults";

export function StoreShell({ children, categories = [] }: { children: React.ReactNode; categories?: string[] }) {
  const [settings, setSettings] = useState<SiteSettings>(DEFAULT_SITE_SETTINGS);
  const [query, setQuery] = useState("");
  const cart = useCart();
  const router = useRouter();

  useEffect(() => {
    fetch("/api/settings")
      .then((response) => response.ok ? response.json() : null)
      .then((payload) => payload?.settings && setSettings(resolveSiteSettings(payload.settings)))
      .catch(() => undefined);
  }, []);

  const style = useMemo(() => ({
    "--shop-primary": settings.theme.primary,
    "--shop-navy": settings.theme.navy,
    "--shop-accent": settings.theme.accent,
    "--shop-background": settings.theme.background,
    "--shop-surface": settings.theme.surface,
    "--shop-text": settings.theme.text,
    "--shop-radius": `${settings.theme.radius}px`,
    "--shop-card-radius": `${settings.theme.productCardRadius}px`,
    "--shop-max-width": `${settings.layout.maxWidth}px`,
    "--shop-product-columns": settings.layout.productColumns,
  }) as React.CSSProperties, [settings]);

  function search(event: FormEvent) {
    event.preventDefault();
    router.push(`/search?q=${encodeURIComponent(query.trim())}`);
  }

  const menuItems = [
    ...settings.navigation.filter((item) => item.enabled),
    ...categories.slice(0, 10).map((name) => ({ id: `category-${name}`, label: name, href: `/search?category=${encodeURIComponent(name)}`, enabled: true })),
  ];

  return (
    <SiteSettingsProvider settings={settings}>
      <div style={style} className="shop-root min-h-screen bg-[var(--shop-background)] text-[var(--shop-text)] dark:bg-slate-950 dark:text-slate-100">
        {settings.announcement.enabled && (
          <div className="bg-[var(--shop-navy)] px-4 py-2 text-center text-sm text-white">
            <span>{settings.announcement.text}</span>
            <Link href={settings.announcement.linkHref} className="mr-2 font-black text-emerald-200 hover:text-white">{settings.announcement.linkLabel}</Link>
          </div>
        )}

        <header className={`${settings.layout.stickyHeader ? "sticky top-0" : ""} z-50 border-b border-slate-200/80 bg-white/95 shadow-[0_8px_28px_rgba(17,24,39,.05)] backdrop-blur-xl dark:border-slate-800 dark:bg-slate-950/95`}>
          <div className="container-shell flex min-h-[76px] items-center gap-3 py-3">
            <Sheet>
              <SheetTrigger asChild><Button variant="ghost" size="icon" className="md:hidden" aria-label="باز کردن منو"><Menu /></Button></SheetTrigger>
              <SheetContent side="right" className="w-[88vw] max-w-sm" dir="rtl">
                <SheetHeader><SheetTitle className="text-right">منوی {settings.storeName}</SheetTitle></SheetHeader>
                <button className="mt-5 flex w-full items-center gap-3 rounded-2xl bg-emerald-50 p-4 text-right text-sm font-black text-emerald-800">
                  <MapPin className="h-5 w-5 text-[var(--shop-primary)]" />{settings.labels.locationPrompt}
                </button>
                <nav className="mt-4 grid gap-1">
                  {menuItems.map((item) => <Link key={item.id} href={item.href} className="rounded-xl px-4 py-3 font-medium hover:bg-slate-100 dark:hover:bg-slate-800">{item.label}</Link>)}
                </nav>
              </SheetContent>
            </Sheet>

            <Link href="/" className="flex shrink-0 items-center gap-2" aria-label="صفحه اصلی barzinmarket">
              <span className="grid h-11 w-11 place-items-center rounded-[15px] bg-[var(--shop-primary)] text-2xl font-black lowercase text-white shadow-[0_8px_20px_rgba(0,168,107,.25)]">b</span>
              <span className="hidden text-[1.35rem] font-black tracking-[-.04em] text-[var(--shop-navy)] sm:block dark:text-white">{settings.storeShortName}<i className="not-italic text-[var(--shop-accent)]">.</i></span>
            </Link>

            <button className="hidden max-w-48 items-center gap-2 rounded-2xl border border-emerald-100 bg-emerald-50/80 px-3 py-2 text-right lg:flex">
              <MapPin className="h-5 w-5 shrink-0 text-[var(--shop-primary)]" />
              <span><small className="block text-[11px] text-slate-500">ارسال به</small><b className="block truncate text-xs text-slate-800">{settings.labels.locationPrompt}</b></span>
            </button>

            <form onSubmit={search} className="relative flex-1">
              <Search className="absolute right-4 top-1/2 h-5 w-5 -translate-y-1/2 text-slate-400" />
              <Input value={query} onChange={(event) => setQuery(event.target.value)} placeholder={settings.labels.searchPlaceholder} className="h-12 rounded-2xl border-transparent bg-slate-100 pr-12 text-base focus-visible:bg-white md:h-13 dark:bg-slate-800" />
            </form>

            <Button variant="ghost" className="hidden h-11 rounded-xl lg:flex" asChild><Link href="/account"><UserRound className="ml-2 h-5 w-5" />{settings.labels.loginLabel}</Link></Button>
            <Button className="relative h-11 rounded-xl bg-[var(--shop-primary)] px-3 text-white hover:brightness-95" asChild>
              <Link href="/cart" aria-label={settings.labels.cartLabel}>
                <ShoppingBasket className="h-5 w-5 lg:ml-2" /><span className="hidden lg:inline">{settings.labels.cartLabel}</span>
                {cart.count > 0 && <span className="mr-2 grid h-6 min-w-6 place-items-center rounded-full bg-white px-1 text-[11px] font-black text-[var(--shop-primary)]">{new Intl.NumberFormat("fa-IR").format(cart.count)}</span>}
              </Link>
            </Button>
          </div>

          <div className="hidden border-t border-slate-100 md:block dark:border-slate-800">
            <div className="container-shell flex h-11 items-center justify-between gap-4 text-sm">
              <nav className="flex h-full min-w-0 items-center gap-1">
                <div className="group relative h-full shrink-0">
                  <button className="flex h-full items-center gap-2 border-b-2 border-transparent px-3 font-black hover:border-[var(--shop-primary)]"><Menu className="h-4 w-4" />{settings.labels.categoryMenu}<ChevronDown className="h-3.5 w-3.5" /></button>
                  <div className="invisible absolute right-0 top-full grid w-[520px] translate-y-2 grid-cols-2 gap-1 rounded-b-2xl border bg-white p-4 opacity-0 shadow-2xl transition group-hover:visible group-hover:translate-y-0 group-hover:opacity-100 dark:bg-slate-900">
                    {categories.map((name) => <Link key={name} href={`/search?category=${encodeURIComponent(name)}`} className="rounded-xl px-3 py-2.5 font-medium hover:bg-emerald-50 hover:text-[var(--shop-primary)] dark:hover:bg-slate-800">{name}</Link>)}
                  </div>
                </div>
                {settings.navigation.filter((item) => item.enabled).map((item) => <Link key={item.id} href={item.href} className="flex h-full shrink-0 items-center border-b-2 border-transparent px-3 text-slate-600 hover:border-[var(--shop-primary)] hover:text-[var(--shop-primary)] dark:text-slate-300">{item.label}</Link>)}
              </nav>
              <div className="flex shrink-0 items-center gap-2 font-bold text-[var(--shop-primary)]"><Bike className="h-4 w-4" />{settings.labels.deliveryBadge}</div>
            </div>
          </div>
        </header>

        <main>{children}</main>

        <footer className="mt-14 border-t border-slate-200 bg-white pb-24 pt-10 md:pb-10 dark:border-slate-800 dark:bg-slate-950">
          <div className="container-shell">
            <div className="mb-10 flex flex-col justify-between gap-5 border-b border-slate-200 pb-8 md:flex-row md:items-center dark:border-slate-800">
              <div><div className="text-2xl font-black lowercase text-[var(--shop-navy)] dark:text-white">{settings.storeName}<i className="not-italic text-[var(--shop-accent)]">.</i></div><p className="mt-2 max-w-xl text-sm leading-7 text-slate-500">{settings.footer.description}</p><p className="mt-1 text-xs font-bold text-[var(--shop-primary)]" dir="ltr">{settings.domain}</p></div>
              <div className="flex items-center gap-3 rounded-2xl bg-emerald-50 px-5 py-4 dark:bg-emerald-950/30"><Headphones className="h-7 w-7 text-[var(--shop-primary)]" /><div><div className="font-black">{settings.supportPhone}</div><div className="text-xs text-slate-500">{settings.supportHours}</div></div></div>
            </div>
            <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
              <FooterLinks title={`با ${settings.storeName}`} links={["درباره ما", "فرصت‌های شغلی", `فروش در ${settings.storeName}`, "تماس با ما"]} />
              <FooterLinks title="خدمات مشتریان" links={["پاسخ به پرسش‌ها", "رویه بازگرداندن", "شرایط استفاده", "حریم خصوصی"]} />
              <FooterLinks title="راهنمای خرید" links={["نحوه ثبت سفارش", "رویه ارسال", "شیوه پرداخت", "پیگیری سفارش"]} />
              <div><h3 className="font-black">ارتباط با ما</h3><p className="mt-4 text-sm leading-7 text-slate-500">{settings.footer.address}<br />{settings.footer.email}</p><p className="mt-4 text-xs font-bold text-[var(--shop-primary)]">{settings.footer.trustText}</p></div>
            </div>
            <div className="mt-10 border-t border-slate-200 pt-6 text-center text-xs text-slate-500 dark:border-slate-800">تمام حقوق برای {settings.storeName} محفوظ است.</div>
          </div>
        </footer>

        <nav className="fixed inset-x-0 bottom-0 z-50 grid grid-cols-5 border-t bg-white px-2 py-2 shadow-[0_-10px_30px_rgba(15,23,42,.08)] md:hidden dark:bg-slate-950">
          <MobileLink href="/" label="خانه" icon={<Home />} />
          <MobileLink href="/search" label="دسته‌ها" icon={<Menu />} />
          <MobileLink href="/cart" label="سبد" icon={<ShoppingBasket />} badge={cart.count} />
          <MobileLink href="/account?tab=favorites" label="علاقه‌مندی" icon={<Heart />} />
          <MobileLink href="/account" label="حساب من" icon={<UserRound />} />
        </nav>
      </div>
    </SiteSettingsProvider>
  );
}

function FooterLinks({ title, links }: { title: string; links: string[] }) {
  return <div><h3 className="font-black">{title}</h3><div className="mt-4 grid gap-3 text-sm text-slate-500">{links.map((link) => <Link key={link} href="/faq" className="hover:text-[var(--shop-primary)]">{link}</Link>)}</div></div>;
}

function MobileLink({ href, label, icon, badge = 0 }: { href: string; label: string; icon: React.ReactNode; badge?: number }) {
  return <Link href={href} className="relative flex flex-col items-center gap-1 text-[11px] font-medium text-slate-600 hover:text-[var(--shop-primary)] [&_svg]:h-5 [&_svg]:w-5"><span>{icon}</span><span>{label}</span>{badge > 0 && <span className="absolute left-1/2 top-0 mr-2 grid h-4 min-w-4 place-items-center rounded-full bg-[var(--shop-accent)] px-1 text-[9px] text-white">{badge}</span>}</Link>;
}