import Link from "next/link";
import { notFound } from "next/navigation";
import { prisma } from "@/lib/db";
import { OrderDetails } from "@/components/order/OrderDetails";
import { updateOrderStatus } from "@/app/admin/actions";
import { ORDER_STATUSES, ORDER_STATUS_META } from "@/lib/constants";

export const dynamic = "force-dynamic";

export default async function AdminOrderDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const order = await prisma.order.findUnique({
    where: { id },
    include: { items: true },
  });
  if (!order) notFound();

  return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <a href="/admin/orders" className="text-sm text-slate-400 hover:text-brand-600">
          ← Back to orders
        </a>
        <Link
          href={`/admin/orders/${order.id}/invoice`}
          target="_blank"
          className="rounded-lg border border-slate-300 px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-100"
        >
          🖨 Print invoice
        </Link>
      </div>

      <div className="grid gap-5 lg:grid-cols-[1fr_280px]">
        <OrderDetails order={order} showCustomer />

        <div className="lg:sticky lg:top-6 lg:self-start">
          <form
            action={updateOrderStatus}
            className="rounded-xl border border-slate-200 bg-white p-5"
          >
            <input type="hidden" name="id" value={order.id} />
            <h3 className="text-sm font-bold text-slate-700">Update status</h3>
            <select
              name="status"
              defaultValue={order.status}
              className="mt-3 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm"
            >
              {ORDER_STATUSES.map((s) => (
                <option key={s} value={s}>
                  {ORDER_STATUS_META[s].label}
                </option>
              ))}
            </select>
            <button className="mt-3 w-full rounded-lg bg-brand-600 py-2.5 text-sm font-semibold text-white hover:bg-brand-700">
              Save status
            </button>
            <p className="mt-3 text-xs text-slate-400">
              Tip: For pickups use “Ready for pickup”, for delivery use “Shipped”
              then “Delivered”.
            </p>
          </form>
        </div>
      </div>
    </div>
  );
}