"use client";

import Link from "next/link";
import { Scale, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useCart } from "@/components/cart-provider";
import { ProductVisual } from "@/components/product-card";
import { StoreShell } from "@/components/store-shell";
import { formatPrice, getDiscountPercent, type Product } from "@/lib/commerce";

export function ComparePageClient({ products }: { products: Product[] }) {
  const cart = useCart();
  const selected = products.filter((product) => cart.compare.includes(product.id));
  const categories = [...new Set(products.map((product) => product.category))];
  const rows = [
    { label: "قیمت فروش", value: (product: Product) => `${formatPrice(product.salePrice)} تومان` },
    { label: "قیمت مصرف‌کننده", value: (product: Product) => product.consumerPrice ? `${formatPrice(product.consumerPrice)} تومان` : "—" },
    { label: "درصد تخفیف", value: (product: Product) => getDiscountPercent(product) ? `٪${new Intl.NumberFormat("fa-IR").format(getDiscountPercent(product))}` : "بدون تخفیف" },
    { label: "موجودی", value: (product: Product) => `${new Intl.NumberFormat("fa-IR").format(product.stock)} عدد` },
    { label: "دسته", value: (product: Product) => product.category },
    { label: "بارکد", value: (product: Product) => product.barcode },
  ];
  return <StoreShell categories={categories}><div className="container-shell py-7"><h1 className="text-2xl font-black">مقایسه کالاها</h1><p className="mt-2 text-sm text-slate-500">تا چهار کالا را کنار هم بررسی کنید.</p>{selected.length ? <div className="mt-6 overflow-x-auto rounded-[28px] border bg-white dark:bg-slate-900"><div className="grid min-w-[760px]" style={{ gridTemplateColumns: `180px repeat(${selected.length}, minmax(220px, 1fr))` }}><div className="border-b p-4" />{selected.map((product) => <div key={product.id} className="relative border-b border-r p-4"><Button size="icon" variant="ghost" className="absolute left-2 top-2 z-10" onClick={() => cart.toggleCompare(product.id)}><X className="h-4 w-4" /></Button><Link href={`/product/${encodeURIComponent(product.id)}`}><div className="mx-auto aspect-square max-w-52 overflow-hidden rounded-2xl bg-slate-50"><ProductVisual product={product} /></div><h2 className="mt-3 min-h-12 text-sm font-black leading-6">{product.name}</h2></Link></div>)}{rows.map((row) => <div key={row.label} className="contents"><div className="border-b bg-slate-50 p-4 text-sm font-bold dark:bg-slate-800">{row.label}</div>{selected.map((product) => <div key={`${row.label}-${product.id}`} className="border-b border-r p-4 text-sm">{row.value(product)}</div>)}</div>)}</div></div> : <div className="mt-6 grid min-h-[420px] place-items-center rounded-[28px] border bg-white text-center dark:bg-slate-900"><div><Scale className="mx-auto h-20 w-20 text-slate-300" /><h2 className="mt-5 text-xl font-black">کالایی برای مقایسه ندارید</h2><p className="mt-2 text-sm text-slate-500">از کارت یا صفحه کالا، گزینه مقایسه را انتخاب کنید.</p><Button asChild className="mt-5"><Link href="/search">انتخاب کالا</Link></Button></div></div>}</div></StoreShell>;
}