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 AdminMetaDescriptionsPage() {
  const [products, categories, pages] = await Promise.all([
    prisma.product.findMany({ where: { active: true }, select: { id: true, name: true, description: true, metaDescription: true }, orderBy: { name: "asc" } }),
    prisma.category.findMany({ select: { id: true, name: true, metaDescription: true }, orderBy: { name: "asc" } }),
    prisma.pageSeo.findMany({ select: { id: true, label: true, description: true }, orderBy: { path: "asc" } }),
  ]);

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

  return (
    <div>
      <h1 className="font-[family-name:var(--font-heading)] text-2xl font-bold text-stone-800">Meta Descriptions</h1>
      <p className="mt-1 text-sm text-stone-500">
        {missing} with no description at all, {tooLong} over 160 characters (likely to get truncated in search results).
      </p>

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

      <ScrollableTable>
        <table className="w-full min-w-[900px] 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">Description</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="max-w-sm truncate p-3 text-stone-800">
                  {r.description || <span className="text-stone-400">— none —</span>}
                  {!r.isCustom && r.description && <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.description.length > 160 ? "text-amber-600" : "text-stone-500"}>{r.description.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>
  );
}