"use client";

/** صفحه سبد خرید */
import Link from "next/link";
import { cart, MAX_QTY_PER_ITEM, useCart, useCartReady } from "@/lib/client/store";
import { usePricing } from "@/lib/client/use-pricing";
import { faNumber, formatToman } from "@/lib/format";
import { Icon } from "@/components/ui/Icon";
import { ProductVisual } from "@/components/product/ProductVisual";
import { productHref } from "@/components/product/ProductCard";
import { CartSummary, FreeShippingProgress } from "./CartSummary";

export function CartView() {
  const lines = useCart();
  const ready = useCartReady();
  const { data, loading } = usePricing(lines);

  if (!ready) return <p className="py-20 text-center text-sm text-muted">در حال بارگذاری سبد…</p>;
  if (!lines.length) {
    return (
      <div className="flex flex-col items-center gap-4 py-20 text-center">
        <Icon name="bag" size={40} strokeWidth={1.2} />
        <p className="text-lg font-bold">سبد خرید شما خالی است</p>
        <p className="text-sm text-muted">از میان پرفروش‌ها و تازه‌ها چیزی پیدا کنید.</p>
        <Link href="/search" className="btn-primary mt-2">شروع خرید</Link>
      </div>
    );
  }
  if (!data) return <p className="py-20 text-center text-sm text-muted">در حال بارگذاری سبد…</p>;

  const hasShortage = data.lines.some((l) => l.availableQty < l.qty);

  return (
    <div className={`md:grid md:grid-cols-[1fr_340px] md:gap-12 ${loading ? "opacity-70" : ""}`}>
      <div>
        <FreeShippingProgress pricing={data} />
        <ul className="mt-4 divide-y divide-line">
          {data.lines.map((l) => (
            <li key={l.variantId} className="flex gap-4 py-5">
              <Link href={productHref(l.product)} className="size-24 shrink-0 overflow-hidden rounded-xl bg-mist">
                <ProductVisual image={l.product.image} sizes="96px" shape={l.product.shape} tone={l.variant.colorHex ?? l.product.tone} label={l.product.brand.nameEn} className="size-full" />
              </Link>
              <div className="min-w-0 flex-1">
                <p className="text-xs font-bold">{l.product.brand.name}</p>
                <Link href={productHref(l.product)} className="line-clamp-2 text-sm text-ink-soft">{l.product.name}</Link>
                <p className="mt-1 text-xs text-muted">{[l.variant.colorName, l.variant.size].filter(Boolean).join(" · ")}</p>
                {l.availableQty < l.qty && (
                  <p className="mt-1 text-xs font-bold">{l.availableQty === 0 ? "این کالا ناموجود شد" : `فقط ${faNumber(l.availableQty)} عدد موجود است`}</p>
                )}
                <div className="mt-3 flex items-center justify-between gap-2">
                  <div className="flex items-center rounded-full border border-line">
                    <button aria-label="کاهش" className="grid size-9 place-items-center" onClick={() => cart.setQty(l.variantId, l.qty - 1)}>
                      <Icon name={l.qty === 1 ? "trash" : "minus"} size={16} />
                    </button>
                    <span className="w-6 text-center text-sm">{faNumber(l.qty)}</span>
                    <button aria-label="افزایش" className="grid size-9 place-items-center disabled:opacity-30" disabled={l.qty >= Math.min(MAX_QTY_PER_ITEM, l.variant.stock)} onClick={() => cart.setQty(l.variantId, l.qty + 1)}>
                      <Icon name="plus" size={16} />
                    </button>
                  </div>
                  <span className="text-sm font-bold">{formatToman(l.variant.price * l.qty)}</span>
                </div>
              </div>
            </li>
          ))}
        </ul>
      </div>

      <aside className="mt-6 md:mt-0">
        <div className="space-y-4 rounded-2xl border border-line p-5 md:sticky md:top-36">
          <CartSummary pricing={data} />
          <p className="text-[11px] leading-5 text-muted">هزینه ارسال و کد تخفیف در مرحله بعد محاسبه می‌شود.</p>
          <Link href="/checkout" aria-disabled={hasShortage} className={`btn-primary w-full ${hasShortage ? "pointer-events-none opacity-40" : ""}`}>
            ادامه و تسویه حساب
          </Link>
          {hasShortage && <p className="text-xs">ابتدا تعداد کالاهای ناموجود را اصلاح کنید.</p>}
        </div>
      </aside>
    </div>
  );
}