import { notFound } from "next/navigation";
import { requireUser } from "@/lib/auth";
import { orderWithDetails } from "@/lib/orders";
import { getSetting } from "@/lib/settings";
import { LogoMark } from "@/components/Logo";
import { PrintBar } from "@/components/dash/PrintBar";
import { dateOf, money } from "@/lib/format";

export const dynamic = "force-dynamic";
export const metadata = { title: "Invoice" };
export default async function Invoice({ params }: { params: Promise<{ id: string }> }) {
  const u = await requireUser(), o = orderWithDetails(Number((await params).id)), site = getSetting("site", {});
  if (!o || (u.role === "customer" && o.user_id !== u.id)) notFound();
  return (
    <div className="min-h-dvh bg-slate-100 p-4 sm:p-8 print:bg-white print:p-0">
      <PrintBar order={{ number: o.number, product: `${o.product_name} — ${o.plan_name}`, customer: o.customer, amount: o.amount, date: dateOf(o.paid_at || o.created_at, true), method: o.method }} />
      <div className="print-area mx-auto max-w-3xl rounded-3xl bg-white p-8 shadow-xl sm:p-12">
        <div className="flex items-start justify-between"><div className="flex items-center gap-3"><LogoMark size={44} /><div><b className="text-xl">{site.name}</b><div className="text-xs text-slate-500">{site.address}<br />{site.email} · {site.phone}</div></div></div>
          <div className="text-right"><div className="text-3xl font-extrabold tracking-tight text-brand">INVOICE</div><div className="text-sm font-semibold">{o.number}</div><span className={`badge mt-1 ${o.status === "paid" ? "ok" : "warn"}`}>{o.status.toUpperCase()}</span></div></div>
        <div className="mt-10 grid grid-cols-2 gap-6 text-sm"><div><div className="text-xs font-bold uppercase tracking-wider text-slate-400">Billed to</div><b>{o.customer}</b><div className="text-slate-500">{o.email}<br />{o.phone}</div></div>
          <div className="text-right"><div className="text-xs font-bold uppercase tracking-wider text-slate-400">Date</div><b>{dateOf(o.paid_at || o.created_at)}</b><div className="text-slate-500 capitalize">Paid via {o.method || "—"}</div></div></div>
        <table className="tbl mt-8"><thead><tr><th>Description</th><th>Billing</th><th className="text-right">Amount</th></tr></thead><tbody><tr><td><b>{o.product_name}</b><div className="text-xs text-slate-500">{o.plan_name} plan</div></td><td className="capitalize">{o.billing === "once" ? "One-time" : o.billing + "ly"}</td><td className="text-right font-semibold">{money(o.amount)}</td></tr></tbody></table>
        <div className="mt-6 flex justify-end"><div className="w-60 space-y-1 text-sm"><div className="flex justify-between text-slate-500"><span>Subtotal</span><span>{money(o.amount)}</span></div><div className="flex justify-between border-t border-slate-200 pt-2 text-lg font-extrabold"><span>Total</span><span>{money(o.amount)}</span></div></div></div>
        <p className="mt-12 border-t border-slate-100 pt-4 text-center text-xs text-slate-400">Thank you for choosing {site.name}. This is a computer-generated invoice.</p>
      </div>
    </div>
  );
}