import { notFound } from "next/navigation";
import { prisma } from "@/lib/db";
import { siteConfig } from "@/lib/config";
import { formatPrice, formatDateTime } from "@/lib/format";
import { PrintButton } from "@/components/admin/PrintButton";

export const dynamic = "force-dynamic";

export default async function InvoicePage({
  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="mx-auto max-w-2xl bg-white p-8">
      <div className="mb-6 flex items-start justify-between">
        <div>
          <h1 className="text-2xl font-black text-slate-900">{siteConfig.name}</h1>
          <p className="text-sm text-slate-500">{siteConfig.tagline}</p>
          <p className="mt-2 text-xs text-slate-500">{siteConfig.address}</p>
          <p className="text-xs text-slate-500">
            {siteConfig.phone} • {siteConfig.email}
          </p>
        </div>
        <PrintButton />
      </div>

      <div className="border-t border-b border-slate-200 py-4">
        <div className="flex justify-between text-sm">
          <div>
            <p className="font-bold text-slate-800">INVOICE</p>
            <p className="text-slate-500">Order {order.orderNumber}</p>
            <p className="text-slate-500">{formatDateTime(order.createdAt)}</p>
          </div>
          <div className="text-right text-sm">
            <p className="font-semibold text-slate-700">Bill to</p>
            <p className="text-slate-500">{order.customerName}</p>
            <p className="text-slate-500">{order.customerPhone}</p>
            {order.customerEmail ? (
              <p className="text-slate-500">{order.customerEmail}</p>
            ) : null}
          </div>
        </div>
      </div>

      <table className="mt-4 w-full text-sm">
        <thead>
          <tr className="border-b border-slate-200 text-left text-xs uppercase text-slate-500">
            <th className="py-2">Item</th>
            <th className="py-2 text-center">Qty</th>
            <th className="py-2 text-right">Price</th>
            <th className="py-2 text-right">Amount</th>
          </tr>
        </thead>
        <tbody>
          {order.items.map((it) => (
            <tr key={it.id} className="border-b border-slate-100">
              <td className="py-2 pr-2 text-slate-700">{it.titleSnapshot}</td>
              <td className="py-2 text-center text-slate-600">{it.quantity}</td>
              <td className="py-2 text-right text-slate-600">
                {formatPrice(it.priceSnapshot)}
              </td>
              <td className="py-2 text-right font-medium">
                {formatPrice(it.priceSnapshot * it.quantity)}
              </td>
            </tr>
          ))}
        </tbody>
      </table>

      <div className="mt-4 flex justify-end">
        <div className="w-56 space-y-1 text-sm">
          <div className="flex justify-between">
            <span className="text-slate-500">Subtotal</span>
            <span>{formatPrice(order.subtotal)}</span>
          </div>
          <div className="flex justify-between border-t border-slate-200 pt-1 text-base font-bold">
            <span>Total</span>
            <span>{formatPrice(order.total)}</span>
          </div>
        </div>
      </div>

      <div className="mt-6 text-sm text-slate-600">
        <p>
          <span className="font-semibold">Fulfilment:</span>{" "}
          {order.deliveryMethod === "PICKUP" ? "Store pickup" : "Home delivery"}
        </p>
        {order.deliveryMethod === "DELIVERY" && order.address ? (
          <p className="whitespace-pre-line text-slate-500">{order.address}</p>
        ) : null}
        <p className="mt-1">
          <span className="font-semibold">Payment:</span> Cash on{" "}
          {order.deliveryMethod === "PICKUP" ? "pickup" : "delivery"}
        </p>
      </div>

      <p className="mt-8 border-t border-slate-200 pt-4 text-center text-xs text-slate-400">
        Thank you for shopping with {siteConfig.name}! Devices carry the stated
        seller warranty from the date of delivery.
      </p>
    </div>
  );
}