import Link from "next/link";
import { AdminPageHeader } from "@/components/admin/AdminBreadcrumbs";
import { AdminTable } from "@/components/admin/AdminTable";
import { StatusBadge } from "@/components/admin/StatusBadge";
import { formatCurrency, formatDate } from "@/lib/client-api";
import { pricingService } from "@/modules/pricing";
import { PlanForm } from "./plan-form";

export const dynamic = "force-dynamic";
export const metadata = { title: "Pricing · Admin" };

export default async function AdminPricingPage() {
  const result = await pricingService.list({
    q: undefined,
    status: undefined,
    page: 1,
    pageSize: 50,
  });

  return (
    <div className="space-y-6">
      <AdminPageHeader
        breadcrumbs={[{ label: "Admin", href: "/admin" }, { label: "Pricing" }]}
        title="Pricing"
        description="Control the plans shown on the public pricing page."
      />

      <div className="grid gap-6 lg:grid-cols-3">
        <section className="lg:col-span-2 rounded-2xl border border-border bg-surface p-5 shadow-sm">
          <h2 className="text-sm font-semibold text-foreground">
            Existing plans
          </h2>
          {result.items.length === 0 ? (
            <p className="mt-3 text-sm text-muted">No plans yet.</p>
          ) : (
            <div className="mt-4 space-y-3">
              {result.items.map((p) => (
                <div
                  key={p.id}
                  className="rounded-xl border border-border p-3"
                >
                  <div className="flex flex-wrap items-start justify-between gap-3">
                    <div>
                      <p className="text-sm font-semibold">{p.name}</p>
                      <p className="text-xs text-muted">{p.description}</p>
                      <p className="mt-1 text-xs text-muted">
                        {formatCurrency(p.price, p.currency)} / {p.billingPeriod}
                        {p.offerPrice
                          ? ` · offer ${formatCurrency(p.offerPrice, p.currency)}`
                          : ""}
                      </p>
                    </div>
                    <div className="flex items-center gap-2">
                      <StatusBadge status={p.status} />
                      {p.isPopular ? (
                        <StatusBadge tone="primary">Popular</StatusBadge>
                      ) : null}
                      <Link
                        href={`/admin/pricing#${p.id}`}
                        className="rounded-lg border border-border px-2 py-1 text-xs"
                      >
                        Edit
                      </Link>
                    </div>
                  </div>
                  <PlanForm plan={p} />
                </div>
              ))}
            </div>
          )}
          {result.items.length > 0 ? (
            <AdminTable
              rows={result.items}
              rowKey={(p) => p.id}
              columns={[
                { key: "name", header: "Name", render: (p) => p.name },
                {
                  key: "price",
                  header: "Price",
                  render: (p) => formatCurrency(p.price, p.currency),
                },
                {
                  key: "period",
                  header: "Billing",
                  render: (p) => (
                    <span className="text-xs capitalize">
                      {p.billingPeriod}
                    </span>
                  ),
                },
                {
                  key: "status",
                  header: "Status",
                  render: (p) => <StatusBadge status={p.status} />,
                },
                {
                  key: "updated",
                  header: "Updated",
                  render: (p) => (
                    <span className="text-xs text-muted">
                      {formatDate(p.updatedAt)}
                    </span>
                  ),
                },
              ]}
            />
          ) : null}
        </section>
        <section className="rounded-2xl border border-border bg-surface p-5 shadow-sm">
          <h2 className="text-sm font-semibold text-foreground">Create a plan</h2>
          <PlanForm isNew />
        </section>
      </div>
    </div>
  );
}