import type { Metadata } from "next";
import Link from "next/link";
import { ExternalLink, Pencil } from "lucide-react";
import { listProductPages } from "@/lib/product-pages/queries";
import {
  AdminHeading,
  DataTable,
  formatAdminRelative,
  type Column,
} from "@/components/admin";

export const metadata: Metadata = { title: "Product pages" };
export const dynamic = "force-dynamic";

type Row = Awaited<ReturnType<typeof listProductPages>>[number];

const columns: Column<Row>[] = [
  {
    key: "title",
    header: "Page",
    cell: (row) => (
      <div className="flex flex-col">
        <span className="font-semibold text-[var(--color-ink)]">
          {row.heroTitle || row.slug}
        </span>
        <span className="text-[12px] text-[var(--color-slate)]">
          /products/{row.slug}
        </span>
      </div>
    ),
  },
  {
    key: "heroTagline",
    header: "Tagline",
    cell: (row) => (
      <span className="line-clamp-2 text-[13px] text-[var(--color-slate)]">
        {row.heroTagline || "—"}
      </span>
    ),
  },
  {
    key: "counts",
    header: "Sections",
    cell: (row) => (
      <div className="flex flex-wrap gap-2 text-[12px] text-[var(--color-slate)]">
        <span>{row.features.length} features</span>
        <span>·</span>
        <span>{row.audiences.length} audiences</span>
        <span>·</span>
        <span>{row.faqs.length} FAQs</span>
      </div>
    ),
  },
  {
    key: "updatedAt",
    header: "Updated",
    cell: (row) => (
      <span className="text-[12px] text-[var(--color-slate)]">
        {formatAdminRelative(row.updatedAt)}
      </span>
    ),
  },
  {
    key: "actions",
    header: "",
    align: "right",
    cell: (row) => (
      <div className="flex justify-end gap-2 text-[13px]">
        <Link
          href={`/products/${row.slug}`}
          target="_blank"
          rel="noreferrer"
          className="inline-flex items-center gap-1 rounded-md border border-[var(--color-line)] px-2 py-1 font-semibold text-[var(--color-slate)] transition-colors hover:border-[var(--color-blue)] hover:text-[var(--color-blue)]"
        >
          <ExternalLink className="h-3 w-3" aria-hidden />
          View
        </Link>
        <Link
          href={`/admin/product-pages/${row.slug}`}
          className="inline-flex items-center gap-1 rounded-md bg-[var(--color-blue)] px-2.5 py-1 font-semibold text-white transition-colors hover:bg-[var(--color-blue-deep)]"
        >
          <Pencil className="h-3 w-3" aria-hidden />
          Edit
        </Link>
      </div>
    ),
  },
];

export default async function AdminProductPagesIndex() {
  const rows = await listProductPages();
  return (
    <>
      <AdminHeading
        eyebrow="Content"
        title="Product pages"
        lede="Edit the hero copy, features, FAQs, audiences, and CTAs that render on each /products/<slug> landing page. Changes go live on save."
      />

      <DataTable
        columns={columns}
        rows={rows}
        rowKey={(r) => r.slug}
        emptyMessage="No product pages yet. Run `npx tsx src/lib/db/seed-product-pages.ts` to seed defaults."
      />
    </>
  );
}
