import Link from "next/link";
import { notFound } from "next/navigation";
import { CheckCircle2, Clock, XCircle, FileText } from "lucide-react";
import { requireUser } from "@/lib/auth";
import { orderWithDetails, paymentsOf } from "@/lib/orders";
import { PageHead } from "@/components/dash/Shell";
import { PayActions } from "@/components/dash/Bits";
import { Status } from "@/components/ui";
import { dateOf, money } from "@/lib/format";

export default async function OrderPage({ params, searchParams }: { params: Promise<{ id: string }>; searchParams: Promise<{ pay?: string }> }) {
  const u = await requireUser(["customer"]), { id } = await params, { pay } = await searchParams;
  const o = orderWithDetails(Number(id));
  if (!o || o.user_id !== u.id) notFound();
  const pays = paymentsOf(o.id);
  const banner = pay === "success" ? ["ok", CheckCircle2, "Payment successful", "Your product is now active in My products."] : pay === "review" ? ["warn", Clock, "Payment submitted", "Our team is verifying your transaction. You’ll be notified and your product activates automatically on approval."] : pay === "failed" ? ["bad", XCircle, "Payment didn’t complete", "No money was taken, or the transaction couldn’t be verified. You can try again below."] : null;
  return (
    <>
      <PageHead title={`Order ${o.number}`} sub={`${o.product_name} · ${o.plan_name}`}>{o.status === "paid" && <Link href={`/invoice/${o.id}`} target="_blank" className="btn btn-primary btn-sm"><FileText size={14} />Invoice</Link>}</PageHead>
      {banner && (() => { const [k, I, t, d] = banner as any; return <div className={`mb-4 flex items-start gap-3 rounded-2xl border p-4 ${k === "ok" ? "border-emerald-200 bg-emerald-50 text-emerald-800" : k === "warn" ? "border-amber-200 bg-amber-50 text-amber-800" : "border-rose-200 bg-rose-50 text-rose-800"}`}><I size={22} /><div><b>{t}</b><p className="text-sm opacity-90">{d}</p></div></div>; })()}
      <div className="grid gap-4 lg:grid-cols-3">
        <div className="card p-6 lg:col-span-2"><div className="flex items-center justify-between"><h2 className="font-bold">Summary</h2><Status s={o.status} /></div>
          <dl className="mt-4 grid grid-cols-2 gap-4 text-sm sm:grid-cols-4">{[["Date", dateOf(o.created_at, true)], ["Billing", o.billing === "year" ? "Yearly" : o.billing === "once" ? "One-time" : "Monthly"], ["Method", o.method || "—"], ["Total", money(o.amount)]].map(([k, v]) => <div key={k}><dt className="text-xs text-slate-400">{k}</dt><dd className="font-semibold capitalize">{v}</dd></div>)}</dl>
          {o.status === "pending" && <div className="mt-5 border-t border-slate-100 pt-4"><PayActions orderId={o.id} planId={o.plan_id} billing={o.billing} /></div>}</div>
        <div className="card p-6"><h2 className="mb-3 font-bold">Payment timeline</h2><ul className="space-y-4">
          {pays.length === 0 && <li className="text-sm text-slate-400">No payment attempts yet.</li>}
          {pays.map((p) => <li key={p.id} className="flex gap-3"><span className={`mt-1 h-2.5 w-2.5 shrink-0 rounded-full ${p.status === "succeeded" ? "bg-emerald-500" : p.status === "pending_review" ? "bg-amber-400" : "bg-slate-300"}`} /><div className="text-sm"><div className="flex items-center gap-2"><b className="capitalize">{p.gateway.replace("_", " ")}</b><Status s={p.status} /></div><div className="text-xs text-slate-400">{dateOf(p.created_at, true)}{p.trx_id && ` · ${p.trx_id}`}</div>{p.note && <div className="mt-0.5 text-xs text-rose-600">{p.note}</div>}</div></li>)}</ul></div>
      </div>
    </>
  );
}