import Link from "next/link";
import { prisma } from "@/lib/prisma";
import SeoTabs from "@/components/admin/SeoTabs";
import ScrollableTable from "@/components/admin/ScrollableTable";

export default async function AdminMetaTitlesPage() {
  const [products, categories, pages] = await Promise.all([
    prisma.product.findMany({ where: { active: true }, select: { id: true, name: true, metaTitle: true }, orderBy: { name: "asc" } }),
    prisma.category.findMany({ select: { id: true, name: true, metaTitle: true }, orderBy: { name: "asc" } }),
    prisma.pageSeo.findMany({ select: { id: true, label: true, title: true, path: true }, orderBy: { path: "asc" } }),
  ]);

  type Row = { key: string; type: string; name: string; title: string; isCustom: boolean; editHref: string };
  const rows: Row[] = [
    ...products.map((p) => ({ key: `p-${p.id}`, type: "Product", name: p.name, title: p.metaTitle ?? p.name, isCustom: !!p.metaTitle, editHref: "/iv-manage-84x2/seo" })),
    ...categories.map((c) => ({ key: `c-${c.id}`, type: "Category", name: c.name, title: c.metaTitle ?? c.name, isCustom: !!c.metaTitle, editHref: "/iv-manage-84x2/seo/categories" })),
    ...pages.map((pg) => ({ key: `pg-${pg.id}`, type: "Page", name: pg.label, title: pg.title ?? pg.label, isCustom: !!pg.title, editHref: "/iv-manage-84x2/seo/pages" })),
  ];
  const missing = rows.filter((r) => !r.isCustom).length;
  const tooLong = rows.filter((r) => r.title.length > 60).length;

  return (
    <div>
      <h1 className="font-[family-name:var(--font-heading)] text-2xl font-bold text-stone-800">Meta Titles</h1>
      <p className="mt-1 text-sm text-stone-500">
        Every meta title across the site in one place, for a quick audit. {missing} using the default name (not customized),{" "}
        {tooLong} over 60 characters.
      </p>

      <SeoTabs active="/iv-manage-84x2/seo/meta-titles" />

      <ScrollableTable>
        <table className="w-full min-w-[800px] text-sm">
          <thead className="sticky top-0 z-10 bg-rose-50 text-left text-xs uppercase text-stone-500">
            <tr>
              <th className="p-3">Type</th>
              <th className="p-3">Name</th>
              <th className="p-3">Title</th>
              <th className="p-3">Length</th>
              <th className="p-3"></th>
            </tr>
          </thead>
          <tbody className="divide-y divide-rose-100">
            {rows.map((r) => (
              <tr key={r.key}>
                <td className="whitespace-nowrap p-3 text-stone-500">{r.type}</td>
                <td className="whitespace-nowrap p-3 text-stone-700">{r.name}</td>
                <td className="whitespace-nowrap p-3 text-stone-800">
                  {r.title}
                  {!r.isCustom && <span className="ml-2 rounded-full bg-stone-100 px-2 py-0.5 text-[11px] text-stone-500">default</span>}
                </td>
                <td className="whitespace-nowrap p-3">
                  <span className={r.title.length > 60 ? "text-amber-600" : "text-stone-500"}>{r.title.length}</span>
                </td>
                <td className="whitespace-nowrap p-3">
                  <Link href={r.editHref} className="text-xs font-medium text-rose-700 hover:underline">
                    Edit →
                  </Link>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </ScrollableTable>
    </div>
  );
}