"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { ArrowLeft, Minus, PackageOpen, Plus, ShieldCheck, ShoppingBasket, Trash2, Truck } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Progress } from "@/components/ui/progress";
import { Separator } from "@/components/ui/separator";
import { useCart } from "@/components/cart-provider";
import { ProductVisual } from "@/components/product-card";
import { StoreShell } from "@/components/store-shell";
import { DEFAULT_SITE_SETTINGS, resolveSiteSettings, type SiteSettings } from "@/data/site-defaults";
import { formatPrice } from "@/lib/commerce";

export function CartPageClient({ categories }: { categories: string[] }) {
  const cart = useCart();
  const [settings, setSettings] = useState<SiteSettings>(DEFAULT_SITE_SETTINGS);
  useEffect(() => { fetch("/api/settings").then((response) => response.ok ? response.json() : null).then((payload) => payload?.settings && setSettings(resolveSiteSettings(payload.settings))).catch(() => undefined); }, []);
  const threshold = settings.checkout.freeShippingThreshold;
  const shipping = cart.subtotal >= threshold ? 0 : settings.checkout.shippingCost;
  const remaining = Math.max(0, threshold - cart.subtotal);
  return (
    <StoreShell categories={categories}>
      <div className="container-shell py-7">
        <h1 className="text-2xl font-black">سبد خرید شما</h1>
        <p className="mt-1 text-sm text-slate-500">{new Intl.NumberFormat("fa-IR").format(cart.count)} کالا</p>
        {!cart.items.length ? (
          <div className="mt-6 grid min-h-[430px] place-items-center rounded-[28px] border bg-white p-8 text-center dark:bg-slate-900"><div><span className="mx-auto grid h-24 w-24 place-items-center rounded-full bg-slate-100 dark:bg-slate-800"><ShoppingBasket className="h-12 w-12 text-slate-400" /></span><h2 className="mt-6 text-xl font-black">سبد خریدتان خالی است</h2><p className="mt-2 text-sm text-slate-500">می‌توانید از پیشنهادهای فروشگاه شروع کنید.</p><Button asChild className="mt-6 rounded-xl"><Link href="/search">رفتن به فروشگاه</Link></Button></div></div>
        ) : (
          <div className="mt-6 grid items-start gap-5 lg:grid-cols-[minmax(0,1fr)_360px]">
            <section className="space-y-3 rounded-[28px] border bg-white p-4 dark:bg-slate-900">
              {cart.items.map(({ product, quantity }, index) => (
                <div key={product.id}>
                  <article className="grid grid-cols-[110px_1fr] gap-4 py-3 sm:grid-cols-[150px_1fr]">
                    <Link href={`/product/${encodeURIComponent(product.id)}`} className="aspect-square overflow-hidden rounded-2xl bg-slate-50"><ProductVisual product={product} /></Link>
                    <div className="flex min-w-0 flex-col"><Link href={`/product/${encodeURIComponent(product.id)}`} className="font-black leading-7 hover:text-[var(--shop-primary)]">{product.name}</Link><div className="mt-2 space-y-1 text-xs text-slate-500"><div className="flex items-center gap-2"><ShieldCheck className="h-4 w-4" />ضمانت اصالت و سلامت کالا</div><div className="flex items-center gap-2"><Truck className="h-4 w-4 text-[var(--shop-primary)]" />ارسال سریع barzinmarket</div></div><div className="mt-auto flex flex-wrap items-end justify-between gap-3 pt-4"><div className="flex items-center rounded-xl border p-1"><Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => cart.setQuantity(product.id, quantity + 1)}><Plus className="h-4 w-4" /></Button><span className="w-8 text-center font-black">{new Intl.NumberFormat("fa-IR").format(quantity)}</span><Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => cart.setQuantity(product.id, quantity - 1)}>{quantity === 1 ? <Trash2 className="h-4 w-4 text-red-600" /> : <Minus className="h-4 w-4" />}</Button></div><div className="text-left"><div className="text-lg font-black">{formatPrice(product.salePrice * quantity)} <span className="text-xs">{settings.currency}</span></div>{product.consumerPrice > product.salePrice && <div className="mt-1 text-xs font-bold text-[var(--shop-accent)]">{formatPrice((product.consumerPrice - product.salePrice) * quantity)} {settings.currency} تخفیف</div>}</div></div></div>
                  </article>{index < cart.items.length - 1 && <Separator />}
                </div>
              ))}
            </section>
            <aside className="sticky top-32 rounded-[24px] border bg-white p-5 dark:bg-slate-900"><h2 className="font-black">خلاصه سفارش</h2><div className="mt-5 space-y-4 text-sm"><div className="flex justify-between text-slate-500"><span>قیمت کالاها</span><span>{formatPrice(cart.subtotal)} {settings.currency}</span></div><div className="flex justify-between text-slate-500"><span>هزینه ارسال</span><span>{shipping ? `${formatPrice(shipping)} ${settings.currency}` : "رایگان"}</span></div><Separator /><div className="flex justify-between text-base font-black"><span>مبلغ قابل پرداخت</span><span>{formatPrice(cart.subtotal + shipping)} {settings.currency}</span></div></div><div className="mt-5 rounded-2xl bg-emerald-50 p-4 text-xs leading-6 text-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-200">{remaining > 0 ? <><div>{formatPrice(remaining)} {settings.currency} دیگر تا ارسال رایگان</div><Progress value={Math.min(100, cart.subtotal / threshold * 100)} className="mt-3 h-2" /></> : <div className="flex items-center gap-2 font-black"><Truck className="h-4 w-4" />ارسال این سفارش رایگان است</div>}</div><Button asChild className="mt-5 h-12 w-full rounded-xl text-base font-black"><Link href="/checkout">ادامه و ثبت سفارش<ArrowLeft className="mr-2 h-5 w-5" /></Link></Button><p className="mt-4 text-center text-xs leading-6 text-slate-400">قیمت و موجودی در مرحله ثبت سفارش دوباره کنترل می‌شود.</p></aside>
          </div>
        )}
      </div>
    </StoreShell>
  );
}