"use client";

import { useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { Bell, Box, ChevronLeft, CircleCheck, Clock3, Heart, PackageSearch, RotateCcw, Scale, Share2, ShieldCheck, ShoppingCart, Star, Store, Truck } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useCart } from "@/components/cart-provider";
import { PriceBlock, ProductCard, ProductVisual } from "@/components/product-card";
import { StoreShell } from "@/components/store-shell";
import { DEFAULT_SITE_SETTINGS, resolveSiteSettings, type SiteSettings } from "@/data/site-defaults";
import { getDiscountPercent, type Product } from "@/lib/commerce";

export function ProductDetails({ productId, fallback, relatedFallback }: { productId: string; fallback: Product | null; relatedFallback: Product[] }) {
  const [product, setProduct] = useState<Product | null>(fallback);
  const [loading, setLoading] = useState(!fallback);
  const [settings, setSettings] = useState<SiteSettings>(DEFAULT_SITE_SETTINGS);
  const cart = useCart();

  useEffect(() => {
    fetch(`/api/products/${encodeURIComponent(productId)}`).then((response) => response.ok ? response.json() : null).then((payload) => payload?.product && setProduct(payload.product)).finally(() => setLoading(false));
  }, [productId]);
  useEffect(() => { fetch("/api/settings").then((response) => response.ok ? response.json() : null).then((payload) => payload?.settings && setSettings(resolveSiteSettings(payload.settings))).catch(() => undefined); }, []);

  const categories = useMemo(() => [...new Set(relatedFallback.map((item) => item.category))], [relatedFallback]);
  if (loading) return <StoreShell categories={categories}><div className="container-shell grid min-h-[60vh] place-items-center"><div className="h-12 w-12 animate-spin rounded-full border-4 border-slate-200 border-t-emerald-600" /></div></StoreShell>;
  if (!product) return <StoreShell categories={categories}><div className="container-shell grid min-h-[60vh] place-items-center text-center"><div><PackageSearch className="mx-auto h-20 w-20 text-slate-300" /><h1 className="mt-5 text-2xl font-black">این کالا پیدا نشد</h1><Button asChild className="mt-5"><Link href="/search">بازگشت به فروشگاه</Link></Button></div></div></StoreShell>;

  const discount = getDiscountPercent(product);
  const rating = product.rating > 5 ? product.rating / 10 : product.rating;
  const related = relatedFallback.filter((item) => item.category === product.category && item.id !== product.id).slice(0, 8);
  const specs = [
    ["بارکد", product.barcode], ["دسته‌بندی", product.category], ["وضعیت", product.stock > 0 ? "موجود" : "ناموجود"],
    ["تعداد موجودی", new Intl.NumberFormat("fa-IR").format(product.stock)], ["قیمت عمده", product.wholesalePrice ? `${new Intl.NumberFormat("fa-IR").format(product.wholesalePrice)} ${settings.currency}` : "تماس بگیرید"],
  ];

  return (
    <StoreShell categories={categories}>
      <div className="container-shell py-6">
        <nav className="mb-5 flex flex-wrap items-center gap-1 text-xs text-slate-500"><Link href="/">فروشگاه</Link><ChevronLeft className="h-3 w-3" /><Link href={`/search?category=${encodeURIComponent(product.category)}`}>{product.category}</Link><ChevronLeft className="h-3 w-3" /><span className="line-clamp-1">{product.name}</span></nav>
        <section className="grid gap-7 rounded-[28px] border bg-white p-4 md:grid-cols-[minmax(300px,500px)_1fr] md:p-7 xl:grid-cols-[500px_minmax(0,1fr)_340px] dark:bg-slate-900">
          <div className="relative">
            {discount > 0 && <span className="absolute left-4 top-4 z-10 rounded-full bg-[var(--shop-accent)] px-3 py-1.5 text-sm font-black text-white">٪{new Intl.NumberFormat("fa-IR").format(discount)}</span>}
            <div className="aspect-square overflow-hidden rounded-[24px] bg-slate-50"><ProductVisual product={product} /></div>
            <div className="mt-3 flex items-center justify-center gap-2">
              <Button variant="outline" size="icon" aria-label="علاقه‌مندی" onClick={() => cart.toggleFavorite(product.id)}><Heart className={cart.favorites.includes(product.id) ? "fill-[var(--shop-accent)] text-[var(--shop-accent)]" : ""} /></Button>
              <Button variant="outline" size="icon" aria-label="مقایسه" onClick={() => { cart.toggleCompare(product.id); toast.success("به فهرست مقایسه اضافه شد"); }}><Scale /></Button>
              <Button variant="outline" size="icon" aria-label="اشتراک‌گذاری" onClick={() => navigator.clipboard.writeText(location.href).then(() => toast.success("لینک کالا کپی شد"))}><Share2 /></Button>
              <Button variant="outline" size="icon" aria-label="اطلاع کاهش قیمت"><Bell /></Button>
            </div>
          </div>
          <div className="py-2">
            <Badge variant="secondary" className="rounded-full">{product.category}</Badge>
            <h1 className="mt-4 text-2xl font-black leading-[1.65] md:text-3xl">{product.name}</h1>
            <p className="mt-2 text-sm text-slate-400">barzinmarket product · {product.barcode}</p>
            <div className="mt-5 flex flex-wrap items-center gap-4 text-sm"><span className="flex items-center gap-1 font-black" dir="ltr">{rating.toFixed(1)}<Star className="h-4 w-4 fill-amber-400 text-amber-400" /></span><button className="font-bold text-emerald-700">{new Intl.NumberFormat("fa-IR").format(product.reviewCount)} دیدگاه</button><span className="text-slate-500">۸۷٪ پیشنهاد خریداران</span></div>
            <Separator className="my-6" />
            <h2 className="font-black">ویژگی‌های مهم</h2>
            <ul className="mt-4 grid gap-3 text-sm text-slate-600 dark:text-slate-300"><li className="flex gap-2"><CircleCheck className="h-5 w-5 shrink-0 text-emerald-600" />تضمین اصالت و سلامت فیزیکی کالا</li><li className="flex gap-2"><CircleCheck className="h-5 w-5 shrink-0 text-emerald-600" />امکان مرجوعی طبق قوانین فروشگاه</li><li className="flex gap-2"><CircleCheck className="h-5 w-5 shrink-0 text-emerald-600" />بسته‌بندی ایمن و ارسال قابل پیگیری</li></ul>
            <div className="mt-7 rounded-2xl bg-slate-50 p-5 dark:bg-slate-800"><h3 className="font-black">توضیحات کالا</h3><p className="mt-2 text-sm leading-7 text-slate-600 dark:text-slate-300">{product.description}</p></div>
          </div>
          <aside className="rounded-[22px] border bg-slate-50 p-5 dark:bg-slate-800 xl:self-start">
            <div className="flex items-center gap-3"><span className="grid h-11 w-11 place-items-center rounded-full bg-white shadow-sm dark:bg-slate-900"><Store className="h-5 w-5 text-[var(--shop-primary)]" /></span><div><div className="font-black">فروشنده: {settings.storeName}</div><div className="mt-1 text-xs text-slate-500">عملکرد عالی</div></div></div>
            <Separator className="my-5" />
            <div className="space-y-4 text-sm"><div className="flex gap-3"><ShieldCheck className="h-5 w-5 text-slate-500" /><span>گارانتی اصالت و سلامت کالا</span></div><div className="flex gap-3"><Box className="h-5 w-5 text-slate-500" /><span>{product.stock > 0 ? `${new Intl.NumberFormat("fa-IR").format(product.stock)} عدد موجود` : "ناموجود"}</span></div><div className="flex gap-3"><Truck className="h-5 w-5 text-[var(--shop-primary)]" /><span>ارسال سریع barzinmarket</span></div></div>
            <Separator className="my-5" />
            <PriceBlock product={product} />
            {discount > 0 && <p className="mt-2 text-left text-xs font-bold text-[var(--shop-accent)]">{new Intl.NumberFormat("fa-IR").format(product.consumerPrice - product.salePrice)} {settings.currency} سود شما</p>}
            <Button disabled={product.stock <= 0} className="mt-5 h-12 w-full rounded-xl text-base font-black" onClick={() => { cart.addItem(product); toast.success("کالا به سبد خرید اضافه شد"); }}><ShoppingCart className="ml-2 h-5 w-5" />{settings.labels.addToCart}</Button>
            <div className="mt-4 flex items-center gap-2 text-xs text-slate-500"><Clock3 className="h-4 w-4" />تحویل احتمالی: ۳۰ تا ۹۰ دقیقه</div>
          </aside>
        </section>

        <section className="mt-7 rounded-[28px] border bg-white p-5 md:p-8 dark:bg-slate-900">
          <Tabs defaultValue="review" dir="rtl"><TabsList className="h-auto w-full justify-start overflow-x-auto rounded-none border-b bg-transparent p-0"><TabsTrigger value="review" className="rounded-none px-5 py-4 data-[state=active]:border-b-2 data-[state=active]:border-[var(--shop-primary)]">نقد و بررسی</TabsTrigger><TabsTrigger value="specs" className="rounded-none px-5 py-4 data-[state=active]:border-b-2 data-[state=active]:border-[var(--shop-primary)]">مشخصات</TabsTrigger><TabsTrigger value="comments" className="rounded-none px-5 py-4 data-[state=active]:border-b-2 data-[state=active]:border-[var(--shop-primary)]">دیدگاه‌ها</TabsTrigger><TabsTrigger value="questions" className="rounded-none px-5 py-4 data-[state=active]:border-b-2 data-[state=active]:border-[var(--shop-primary)]">پرسش‌ها</TabsTrigger></TabsList>
            <TabsContent value="review" className="pt-6"><h2 className="text-xl font-black">معرفی {product.name}</h2><p className="mt-4 max-w-4xl leading-8 text-slate-600 dark:text-slate-300">{product.description} اطلاعات قیمت و موجودی این صفحه به‌صورت مستقیم از پنل مدیریت و فایل اکسل فروشگاه به‌روزرسانی می‌شود.</p></TabsContent>
            <TabsContent value="specs" className="pt-6"><div className="max-w-3xl space-y-2">{specs.map(([label, value]) => <div key={label} className="grid grid-cols-[140px_1fr] gap-4 rounded-xl bg-slate-50 p-4 text-sm dark:bg-slate-800"><span className="text-slate-500">{label}</span><span className="font-bold">{value}</span></div>)}</div></TabsContent>
            <TabsContent value="comments" className="pt-6"><div className="grid gap-6 md:grid-cols-[240px_1fr]"><div><div className="text-4xl font-black" dir="ltr">{rating.toFixed(1)} <span className="text-base text-slate-400">از ۵</span></div><p className="mt-2 text-sm text-slate-500">از مجموع {new Intl.NumberFormat("fa-IR").format(product.reviewCount)} امتیاز</p><Button variant="outline" className="mt-5 w-full">ثبت دیدگاه</Button></div><div className="rounded-2xl bg-slate-50 p-5 dark:bg-slate-800"><div className="flex items-center gap-2 font-black"><CircleCheck className="h-5 w-5 text-emerald-600" />خرید این کالا را پیشنهاد می‌کنم</div><p className="mt-3 text-sm leading-7 text-slate-600 dark:text-slate-300">کیفیت مناسب و بسته‌بندی خوب بود. سفارش هم در زمان اعلام‌شده تحویل شد.</p><p className="mt-3 text-xs text-slate-400">خریدار barzinmarket</p></div></div></TabsContent>
            <TabsContent value="questions" className="pt-6"><p className="text-slate-500">درباره این کالا سؤال دارید؟ از پنل مشتری سؤال خود را ثبت کنید.</p><Button variant="outline" className="mt-4">ثبت پرسش جدید</Button></TabsContent>
          </Tabs>
        </section>
        {related.length > 0 && <section className="mt-9"><div className="mb-5 flex items-center justify-between"><div><h2 className="text-2xl font-black">کالاهای مشابه</h2><p className="mt-1 text-sm text-slate-500">از دسته {product.category}</p></div><Link href={`/search?category=${encodeURIComponent(product.category)}`} className="text-sm font-black text-[var(--shop-primary)]">مشاهده همه</Link></div><div className="scroll-snap-x grid auto-cols-[220px] grid-flow-col gap-3 overflow-x-auto pb-2 md:auto-cols-[260px]">{related.map((item) => <ProductCard key={item.id} product={item} />)}</div></section>}
      </div>
    </StoreShell>
  );
}