import Link from "next/link";
import { notFound } from "next/navigation";
import { prisma } from "@/lib/prisma";
import { formatPaise } from "@/lib/format";
import { updateOrderStatus } from "@/lib/actions/orders";
import StatusBadge from "@/components/admin/StatusBadge";

const STATUSES = ["pending", "paid", "failed", "shipped", "delivered", "cancelled"];

export default async function AdminOrderDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;

  const [order, courierPartners] = await Promise.all([
    prisma.order.findUnique({
      where: { id },
      include: { items: { include: { product: true, variant: true } }, courierPartner: true },
    }),
    prisma.courierPartner.findMany({ where: { active: true }, orderBy: { name: "asc" } }),
  ]);

  if (!order) notFound();

  return (
    <div className="max-w-2xl">
      <div className="flex items-center gap-3">
        <h1 className="font-[family-name:var(--font-heading)] text-2xl font-bold text-stone-800">{order.orderNumber}</h1>
        <StatusBadge status={order.status} />
        <Link href={`/iv-manage-84x2/orders/${order.id}/invoice`} className="ml-auto text-sm font-medium text-rose-700 hover:underline">
          View invoice →
        </Link>
      </div>
      <p className="mt-1 text-sm text-stone-500">Placed {order.createdAt.toLocaleString("en-IN")}</p>

      <div className="mt-6 grid gap-6 sm:grid-cols-2">
        <div className="rounded-lg border border-rose-100 bg-white p-4 text-sm">
          <div className="font-medium text-stone-700">Customer</div>
          <div className="mt-1 text-stone-600">{order.customerName}</div>
          <div className="text-stone-600">{order.email}</div>
          <div className="text-stone-600">{order.phone}</div>
        </div>
        <div className="rounded-lg border border-rose-100 bg-white p-4 text-sm">
          <div className="font-medium text-stone-700">Shipping address</div>
          <div className="mt-1 text-stone-600">{order.addressLine1}{order.addressLine2 ? `, ${order.addressLine2}` : ""}</div>
          <div className="text-stone-600">{order.city}, {order.state} {order.pincode}</div>
        </div>
      </div>

      <div className="mt-6 rounded-lg border border-rose-100 bg-white p-4">
        <ul className="divide-y divide-rose-100 text-sm">
          {order.items.map((item) => (
            <li key={item.id} className="flex justify-between py-2">
              <span>
                {item.product.name}
                {item.variant ? ` (${item.variant.name})` : ""} × {item.quantity}
                {item.personalization ? ` — “${item.personalization}”` : ""}
              </span>
              <span>{formatPaise(item.lineTotal)}</span>
            </li>
          ))}
        </ul>
        <div className="mt-3 space-y-1 border-t border-rose-100 pt-3 text-sm">
          <div className="flex justify-between text-stone-500"><span>Subtotal</span><span>{formatPaise(order.subtotal)}</span></div>
          <div className="flex justify-between text-stone-500"><span>Shipping</span><span>{formatPaise(order.shippingFee)}</span></div>
          <div className="flex justify-between text-base font-semibold text-stone-800"><span>Total</span><span>{formatPaise(order.total)}</span></div>
        </div>
      </div>

      <div className="mt-6 rounded-lg border border-rose-100 bg-white p-4">
        <label className="text-sm font-medium text-stone-700">Update status &amp; shipment</label>
        <form action={updateOrderStatus.bind(null, order.id)} className="mt-2 grid grid-cols-2 gap-2 sm:grid-cols-4">
          <select name="status" defaultValue={order.status} className="rounded-md border border-stone-300 px-3 py-2 text-sm">
            {STATUSES.map((s) => (
              <option key={s} value={s}>{s}</option>
            ))}
          </select>
          <select name="courierPartnerId" defaultValue={order.courierPartnerId ?? ""} className="rounded-md border border-stone-300 px-3 py-2 text-sm">
            <option value="">Courier…</option>
            {courierPartners.map((c) => (
              <option key={c.id} value={c.id}>{c.name}</option>
            ))}
          </select>
          <input
            name="trackingNumber"
            defaultValue={order.trackingNumber ?? ""}
            placeholder="Tracking number"
            className="rounded-md border border-stone-300 px-3 py-2 text-sm"
          />
          <button type="submit" className="rounded-md bg-stone-800 px-4 py-2 text-sm font-medium text-white hover:bg-stone-900">
            Update
          </button>
        </form>
        {(order.shippedAt || order.deliveredAt) && (
          <p className="mt-2 text-xs text-stone-500">
            {order.shippedAt && `Shipped ${order.shippedAt.toLocaleDateString("en-IN")}`}
            {order.shippedAt && order.deliveredAt && " · "}
            {order.deliveredAt && `Delivered ${order.deliveredAt.toLocaleDateString("en-IN")}`}
          </p>
        )}
      </div>
    </div>
  );
}