import { notFound } from "next/navigation";
import { winofyFetch, ApiError } from "@/lib/api/winofy";
import { OrderCard } from "@/components/customer/order-card";
import { PAYMENT_STATUS_LABELS_FA } from "@/lib/order-status";
import type { OrderGroup } from "@/types/api";

async function getOrderGroup(uuid: string) {
  try {
    return await winofyFetch<OrderGroup>(`/v1/order-groups/${uuid}/`);
  } catch (err) {
    if (err instanceof ApiError && err.status === 404) return null;
    throw err;
  }
}

export default async function OrderGroupPage({ params }: PageProps<"/order-groups/[uuid]">) {
  const { uuid } = await params;
  const orderGroup = await getOrderGroup(uuid);
  if (!orderGroup) notFound();

  return (
    <main className="mx-auto flex w-full max-w-2xl flex-1 flex-col gap-6 px-4 py-6">
      <div className="flex flex-col items-center gap-2 rounded-2xl border border-border p-6 text-center">
        <span className="text-2xl">✓</span>
        <h1 className="text-lg font-bold">سفارش شما ثبت شد</h1>
        <p className="text-sm text-muted-foreground">
          وضعیت پرداخت: {PAYMENT_STATUS_LABELS_FA[orderGroup.payment_status]}
        </p>
        <p className="text-sm text-muted-foreground">{orderGroup.full_address}</p>
      </div>

      {orderGroup.payment?.payment_url && (
        <a
          href={orderGroup.payment.payment_url}
          className="rounded-xl bg-primary px-4 py-3 text-center text-sm font-medium text-primary-foreground"
        >
          ادامه پرداخت
        </a>
      )}

      <div className="flex flex-col gap-4">
        {orderGroup.orders.map((order) => (
          <OrderCard key={order.uuid} order={order} />
        ))}
      </div>

      <div className="flex justify-between rounded-2xl border border-border p-4 font-semibold">
        <span>مجموع کل</span>
        <span>{orderGroup.total_amount.toLocaleString("fa-IR")} تومان</span>
      </div>
    </main>
  );
}