/** پیگیری سفارش با شماره سفارش و موبایل (فرم GET، بدون نیاز به جاوااسکریپت) */
import type { Metadata } from "next";
import { z } from "zod";
import { OrderCard } from "@/components/account/OrderCard";
import { Breadcrumbs } from "@/components/ui/Breadcrumbs";
import { faDigits } from "@/lib/format";
import { toLatinDigits } from "@/lib/persian";
import { trackOrder } from "@/server/services/orders";
import { mobileSchema } from "@/validation/common";

export const metadata: Metadata = { title: "پیگیری سفارش", description: "پیگیری وضعیت سفارش زهورا با شماره سفارش و شماره موبایل." };

const query = z.object({
  code: z.string().transform((s) => toLatinDigits(s).trim().toUpperCase()).pipe(z.string().regex(/^ZH-[\d-]{4,20}$/, "شماره سفارش معتبر نیست")),
  phone: mobileSchema,
});

export default async function TrackPage({ searchParams }: { searchParams: Promise<Record<string, string | undefined>> }) {
  const sp = await searchParams;
  const submitted = sp.code !== undefined;
  const parsed = submitted ? query.safeParse(sp) : null;
  const result = parsed?.success ? await trackOrder(parsed.data.code, parsed.data.phone) : undefined;

  return (
    <div className="container-z max-w-2xl py-6 md:py-10">
      <Breadcrumbs items={[{ name: "پیگیری سفارش" }]} />
      <h1 className="mt-4 text-2xl font-extrabold">پیگیری سفارش</h1>
      <p className="mt-2 text-sm text-muted">شماره سفارش و موبایلی که با آن خرید کرده‌اید را وارد کنید.</p>
      <form className="mt-6 grid gap-3 sm:grid-cols-[1fr_1fr_auto]" method="get">
        <input name="code" defaultValue={sp.code} className="field" dir="ltr" placeholder="ZH-1405-10421" maxLength={24} aria-label="شماره سفارش" required />
        <input name="phone" defaultValue={sp.phone} className="field" type="tel" inputMode="numeric" placeholder="09xxxxxxxxx" maxLength={14} aria-label="شماره موبایل" required />
        <button className="btn-primary">پیگیری</button>
      </form>
      <p className="mt-3 text-xs text-muted">نمونه برای تست: <bdi>{faDigits("ZH-1405-10421")}</bdi> با موبایل <bdi>{faDigits("09120000000")}</bdi></p>

      <div className="mt-8">
        {parsed && !parsed.success && <p className="text-sm font-medium">⚠ {parsed.error.issues[0].message}</p>}
        {parsed?.success && !result && <p className="card-surface p-6 text-center text-sm">سفارشی با این مشخصات پیدا نشد.</p>}
        {result && <OrderCard order={result.order} items={result.items} open />}
      </div>
    </div>
  );
}