import { prisma } from "@/lib/prisma";
import { createCustomOrderRequest } from "@/lib/actions/custom-orders";
import CustomOrdersTabs from "@/components/admin/CustomOrdersTabs";
import CustomOrderTable from "@/components/admin/CustomOrderTable";

export default async function AdminCustomOrdersPage({
  searchParams,
}: {
  searchParams: Promise<{ error?: string }>;
}) {
  const { error } = await searchParams;
  const requests = await prisma.customOrderRequest.findMany({ orderBy: { createdAt: "desc" } });

  return (
    <div>
      <h1 className="font-[family-name:var(--font-heading)] text-2xl font-bold text-stone-800">Customization Request</h1>
      <p className="mt-1 text-sm text-stone-500">
        Log a custom order request you got via WhatsApp, phone, or email, then move it through Design Approval → Production → Ready to Dispatch.
      </p>

      <CustomOrdersTabs active="/iv-manage-84x2/custom-orders" />

      {error && <p className="mb-4 text-sm text-red-700">{decodeURIComponent(error)}</p>}

      <form
        action={createCustomOrderRequest}
        className="grid max-w-3xl grid-cols-1 gap-3 rounded-lg border border-rose-100 bg-white p-4 sm:grid-cols-3"
      >
        <input name="customerName" required placeholder="Customer name" className="rounded-md border border-stone-300 px-2 py-2 text-sm" />
        <input
          name="phone"
          type="tel"
          required
          inputMode="numeric"
          pattern="\d{10}"
          maxLength={10}
          title="Enter a 10-digit mobile number"
          placeholder="Phone"
          className="rounded-md border border-stone-300 px-2 py-2 text-sm"
        />
        <input name="email" type="email" placeholder="Email (optional)" className="rounded-md border border-stone-300 px-2 py-2 text-sm" />
        <select name="type" required className="rounded-md border border-stone-300 px-2 py-2 text-sm">
          <option value="">Customization type…</option>
          <option value="name_engraving">Name Engraving</option>
          <option value="laser_engraving">Laser Engraving</option>
          <option value="3d_printing">3D Printing</option>
        </select>
        <input name="quantity" type="number" min={1} placeholder="Quantity (optional)" className="rounded-md border border-stone-300 px-2 py-2 text-sm" />
        <input name="image" type="file" accept="image/*" className="rounded-md border border-stone-300 px-2 py-1.5 text-sm sm:col-span-1" />
        <textarea
          name="details"
          required
          placeholder="Request details — what to engrave/print, instructions, etc."
          rows={2}
          className="rounded-md border border-stone-300 px-2 py-2 text-sm sm:col-span-3"
        />
        <button
          type="submit"
          className="col-span-1 rounded-md bg-rose-700 px-4 py-2 text-sm font-semibold text-white hover:bg-rose-800 sm:col-span-3"
        >
          Log request
        </button>
      </form>

      <div className="mt-8">
        <CustomOrderTable requests={requests} returnTo="/iv-manage-84x2/custom-orders" />
      </div>
    </div>
  );
}