import Link from "next/link";
import { requireSession } from "@/lib/auth/session";
import { getOrderGroups } from "@/lib/api/orders";
import { PAYMENT_STATUS_LABELS_FA } from "@/lib/order-status";

export default async function OrdersPage() {
  await requireSession("/orders");
  const orderGroups = await getOrderGroups();

  return (
    <main className="mx-auto flex w-full max-w-2xl flex-1 flex-col gap-4 px-4 py-6">
      <h1 className="text-lg font-bold">سفارش‌های من</h1>

      {orderGroups.length === 0 && <p className="text-sm text-muted-foreground">هنوز سفارشی ثبت نکرده‌اید.</p>}

      <div className="flex flex-col gap-3">
        {orderGroups.map((group) => (
          <Link
            key={group.uuid}
            href={`/order-groups/${group.uuid}`}
            className="flex flex-col gap-2 rounded-2xl border border-border p-4"
          >
            <div className="flex justify-between text-sm text-muted-foreground">
              <span>{new Date(group.created_at).toLocaleDateString("fa-IR")}</span>
              <span>{PAYMENT_STATUS_LABELS_FA[group.payment_status]}</span>
            </div>
            <div className="flex flex-wrap gap-1 text-sm">
              {group.orders.map((order) => (
                <span key={order.uuid} className="rounded-full bg-muted px-2 py-0.5">
                  {order.store.name}
                </span>
              ))}
            </div>
            <div className="flex justify-between font-semibold">
              <span>مجموع</span>
              <span>{group.total_amount.toLocaleString("fa-IR")} تومان</span>
            </div>
          </Link>
        ))}
      </div>
    </main>
  );
}