import Link from "next/link";
import { StatusCard } from "@/components/admin/dashboard";
import { prisma } from "@/lib/prisma";

export const dynamic = "force-dynamic";

export default async function AdminHelpQuestions() {
  let entries: Awaited<
    ReturnType<typeof prisma.websiteHelpCenterCategories.findMany>
  > = [];
  try {
    entries = await prisma.websiteHelpCenterCategories.findMany({
      orderBy: [{ position: "asc" }, { id: "asc" }],
      take: 500,
    });
  } catch {
    entries = [];
  }

  const smallBoxes = entries.filter((e) => e.smallBox).length;
  const withButton = entries.filter((e) => e.buttonText).length;

  return (
    <main>
      <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
        <h1 style={{ flex: 1 }}>Help Center</h1>
        <Link href="/admin/help-questions/new" className="btn btn-primary">
          + New entry
        </Link>
      </div>
      <p className="muted" style={{ marginTop: "-0.4rem" }}>
        Help-center FAQ entries (<code>website_help_center_categories</code>). Shown to visitors on
        the public help page, ordered by position.
      </p>

      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
        <StatusCard label="Entries" value={entries.length} icon="❓" />
        <StatusCard label="With button" value={withButton} icon="🔘" />
        <StatusCard label="Small boxes" value={smallBoxes} icon="🗂️" />
      </div>

      <section className="mt-6">
        <h2>Entries</h2>
        {entries.length === 0 ? (
          <p className="muted">No help-center entries yet.</p>
        ) : (
          <table>
            <thead>
              <tr>
                <th>Pos.</th>
                <th>Name</th>
                <th>Button</th>
                <th>Small box</th>
                <th />
              </tr>
            </thead>
            <tbody>
              {entries.map((e) => (
                <tr key={String(e.id)}>
                  <td className="muted">{e.position}</td>
                  <td>
                    <Link href={`/admin/help-questions/${e.id}`}>{e.name}</Link>
                  </td>
                  <td className="muted">{e.buttonText || "—"}</td>
                  <td>
                    <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${e.smallBox ? "bg-green-600/20 text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}>
                      {e.smallBox ? "Yes" : "No"}
                    </span>
                  </td>
                  <td>
                    <Link href={`/admin/help-questions/${e.id}`}>Edit</Link>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </section>
    </main>
  );
}