import Link from "next/link";
import { getCart } from "@/lib/api/cart";
import { requireSession } from "@/lib/auth/session";
import { CartItemRow } from "@/components/customer/cart-item-row";
import { ClearCartButton } from "@/components/customer/clear-cart-button";
import { Button } from "@/components/ui/button";

export default async function CartPage() {
  await requireSession("/cart");
  const cart = await getCart();
  const hasBlockedGroup = cart.groups.some((g) => !g.meets_minimum_order);

  if (cart.groups.length === 0) {
    return (
      <main className="mx-auto flex w-full max-w-2xl flex-1 flex-col items-center justify-center gap-3 px-4 py-16 text-center">
        <p className="text-muted-foreground">سبد خرید شما خالی است.</p>
        <Link href="/">
          <Button variant="outline">مشاهده فروشگاه‌ها</Button>
        </Link>
      </main>
    );
  }

  return (
    <main className="mx-auto flex w-full max-w-2xl flex-1 flex-col gap-6 px-4 py-6">
      <div className="flex items-center justify-between">
        <h1 className="text-lg font-bold">سبد خرید</h1>
        <ClearCartButton />
      </div>

      {cart.groups.map((group) => (
        <section key={group.store.uuid} className="flex flex-col gap-2 rounded-2xl border border-border p-4">
          <Link href={`/stores/${group.store.uuid}`} className="font-medium">
            {group.store.name}
          </Link>

          <div className="divide-y divide-border">
            {group.items.map((item) => (
              <CartItemRow key={item.uuid} item={item} />
            ))}
          </div>

          <div className="flex flex-col gap-1 border-t border-border pt-2 text-sm">
            <div className="flex justify-between text-muted-foreground">
              <span>جمع کالاها</span>
              <span>{group.items_subtotal.toLocaleString("fa-IR")} تومان</span>
            </div>
            <div className="flex justify-between text-muted-foreground">
              <span>هزینه ارسال</span>
              <span>{group.delivery_fee.toLocaleString("fa-IR")} تومان</span>
            </div>
            <div className="flex justify-between font-semibold">
              <span>مجموع</span>
              <span>{group.total.toLocaleString("fa-IR")} تومان</span>
            </div>
          </div>

          {!group.meets_minimum_order && (
            <p className="rounded-lg bg-destructive/10 px-3 py-2 text-xs text-destructive">
              حداقل مبلغ سفارش برای این فروشگاه رعایت نشده است.
            </p>
          )}
        </section>
      ))}

      <div className="sticky bottom-4 flex flex-col gap-2 rounded-2xl border border-border bg-background p-4 shadow-lg">
        <div className="flex justify-between font-semibold">
          <span>مبلغ قابل پرداخت</span>
          <span>{cart.grand_total.toLocaleString("fa-IR")} تومان</span>
        </div>
        <Link href={hasBlockedGroup ? "#" : "/checkout"} aria-disabled={hasBlockedGroup}>
          <Button size="lg" className="w-full" disabled={hasBlockedGroup}>
            ادامه و ثبت سفارش
          </Button>
        </Link>
      </div>
    </main>
  );
}