/** جزئیات سفارش و تغییر وضعیت */
import Link from "next/link";
import { notFound } from "next/navigation";
import { AdminHeader, Card, Pill, SavedNotice } from "@/components/admin/ui";
import { orderStatusFa, paymentStatusFa } from "@/components/admin/labels";
import { SubmitButton } from "@/components/admin/SubmitButton";
import { db } from "@/lib/db";
import { faDigits, faNumber, formatJalali, formatToman } from "@/lib/format";
import { allowedNextStatuses, changeOrderStatusAction } from "@/server/admin/orders";
import { requireStaffPage } from "@/server/admin/guard";

export const dynamic = "force-dynamic";

type Props = { params: Promise<{ code: string }>; searchParams: Promise<{ saved?: string; error?: string }> };

export async function generateMetadata({ params }: Props) {
  return { title: `سفارش ${(await params).code}` };
}

export default async function AdminOrderDetail({ params, searchParams }: Props) {
  await requireStaffPage("/admin/orders", "orders");
  const { code } = await params;
  const { saved, error } = await searchParams;
  const order = await db.order.findUnique({
    where: { code: decodeURIComponent(code) },
    include: {
      user: { select: { phone: true, name: true } },
      items: true,
      history: { orderBy: { createdAt: "asc" } },
      payments: { orderBy: { createdAt: "desc" } },
      shippingMethod: true,
      discountCode: { select: { code: true } },
    },
  });
  if (!order) notFound();
  const next = await allowedNextStatuses(order.status);

  return (
    <>
      <AdminHeader
        title={`سفارش ${faDigits(order.code)}`}
        description={formatJalali(order.createdAt)}
        actions={<Link href="/admin/orders" className="btn-outline h-10 px-4">بازگشت</Link>}
      />
      <SavedNotice show={saved === "1"} text="وضعیت سفارش به‌روز شد" />
      {error === "tracking" && <p className="mb-4 rounded-xl bg-paper px-4 py-3 text-sm ring-1 ring-ink">⚠ برای وضعیت «ارسال شده» کد رهگیری را وارد کنید.</p>}

      <div className="grid gap-4 lg:grid-cols-3">
        <div className="space-y-4 lg:col-span-2">
          <Card title="اقلام سفارش">
            <ul className="divide-y divide-line text-sm">
              {order.items.map((i) => (
                <li key={i.id} className="flex justify-between gap-3 py-2.5">
                  <span>{i.productName}{i.variantLabel && <span className="text-xs text-muted"> · {i.variantLabel}</span>} <span className="text-xs text-muted">× {faNumber(i.qty)}</span></span>
                  <span className="whitespace-nowrap">{formatToman(i.price * i.qty)}</span>
                </li>
              ))}
            </ul>
            <dl className="mt-3 space-y-1.5 border-t border-line pt-3 text-sm">
              <div className="flex justify-between"><dt className="text-muted">جمع کالاها</dt><dd>{formatToman(order.subtotal)}</dd></div>
              {order.discount > 0 && <div className="flex justify-between"><dt className="text-muted">تخفیف {order.discountCode && `(${order.discountCode.code})`}</dt><dd>− {formatToman(order.discount)}</dd></div>}
              <div className="flex justify-between"><dt className="text-muted">ارسال ({order.shippingMethod.name})</dt><dd>{order.shippingCost ? formatToman(order.shippingCost) : "رایگان"}</dd></div>
              <div className="flex justify-between font-bold"><dt>مبلغ کل</dt><dd>{formatToman(order.total)}</dd></div>
            </dl>
          </Card>
          <Card title="گیرنده و آدرس">
            <p className="text-sm leading-7">
              {order.receiver} · <bdi>{faDigits(order.phone)}</bdi>
              <br />
              {order.province}، {order.city}، {order.addressLine}
              <br />
              کد پستی: <bdi>{faDigits(order.postalCode)}</bdi>
            </p>
            <p className="mt-2 text-xs text-muted">حساب خریدار: <bdi>{faDigits(order.user.phone)}</bdi>{order.user.name && ` · ${order.user.name}`}</p>
          </Card>
          <Card title="پرداخت‌ها">
            {order.payments.length ? (
              <ul className="space-y-2 text-sm">
                {order.payments.map((p) => (
                  <li key={p.id} className="flex flex-wrap justify-between gap-2">
                    <span>{p.gateway} · {formatToman(p.amount)}</span>
                    <span className="flex items-center gap-2">{p.refId && <bdi className="text-xs text-muted">{p.refId}</bdi>}<Pill tone={p.status === "SUCCEEDED" ? "ink" : "line"}>{paymentStatusFa[p.status]}</Pill></span>
                  </li>
                ))}
              </ul>
            ) : <p className="text-sm text-muted">پرداختی ثبت نشده</p>}
          </Card>
        </div>

        <div className="space-y-4">
          <Card title="وضعیت">
            <Pill tone="ink">{orderStatusFa[order.status]}</Pill>
            {order.trackingCode && <p className="mt-2 text-xs">کد رهگیری: <bdi className="font-bold">{order.trackingCode}</bdi></p>}
            {next.length > 0 ? (
              <form action={changeOrderStatusAction} className="mt-4 space-y-3">
                <input type="hidden" name="code" value={order.code} />
                <label className="block">
                  <span className="label">وضعیت جدید</span>
                  <select name="status" className="field h-10" required>
                    {next.map((s) => <option key={s} value={s}>{orderStatusFa[s]}</option>)}
                  </select>
                </label>
                {next.includes("SHIPPED") && (
                  <label className="block">
                    <span className="label">کد رهگیری مرسوله (برای ارسال)</span>
                    <input name="trackingCode" defaultValue={order.trackingCode ?? ""} className="field h-10" dir="ltr" maxLength={60} />
                  </label>
                )}
                <label className="block">
                  <span className="label">یادداشت داخلی (اختیاری)</span>
                  <input name="note" className="field h-10" maxLength={300} />
                </label>
                <SubmitButton className="btn-primary w-full" confirm="وضعیت سفارش تغییر کند؟ برای ارسال، تحویل و لغو به مشتری پیامک ارسال می‌شود.">ثبت وضعیت</SubmitButton>
                {next.includes("CANCELED") && <p className="text-[11px] leading-5 text-muted">با لغو، موجودی کالاها برمی‌گردد. بازپرداخت وجه را از پنل درگاه انجام دهید.</p>}
              </form>
            ) : <p className="mt-3 text-xs text-muted">این سفارش در وضعیت نهایی است.</p>}
          </Card>
          <Card title="تاریخچه">
            <ol className="space-y-3 text-sm">
              {order.history.map((h) => (
                <li key={h.id}>
                  <span className="font-medium">{orderStatusFa[h.status]}</span>
                  <span className="block text-xs text-muted">{formatJalali(h.createdAt)}{h.note && ` · ${h.note}`}</span>
                </li>
              ))}
            </ol>
          </Card>
        </div>
      </div>
    </>
  );
}