import Link from "next/link";
import { prisma } from "@/lib/db";
import KbActions from "./KbActions";

export const dynamic = "force-dynamic";

export default async function AdminKb({ searchParams }) {
  const projectFilter = searchParams?.project;
  const [articles, projects] = await Promise.all([
    prisma.article.findMany({
      where: projectFilter ? { project: { slug: projectFilter } } : {},
      include: { project: true, category: true },
      orderBy: { updatedAt: "desc" },
    }),
    prisma.project.findMany({ orderBy: { id: "asc" } }),
  ]);

  return (
    <main className="max-w-6xl mx-auto space-y-5">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <h1 className="text-2xl font-extrabold tracking-tight">Knowledge Base</h1>
        <Link href="/admin/kb/editor" className="btn-primary">+ New article</Link>
      </div>

      <div className="flex flex-wrap gap-2">
        <Link href="/admin/kb" className={`chip border ${!projectFilter ? "text-white border-transparent" : "border-line bg-panel"}`} style={!projectFilter ? { background: "rgb(var(--accent))" } : {}}>
          All
        </Link>
        {projects.map((p) => (
          <Link key={p.slug} href={`/admin/kb?project=${p.slug}`} className={`chip border ${projectFilter === p.slug ? "text-white border-transparent" : "border-line bg-panel"}`} style={projectFilter === p.slug ? { background: p.color } : {}}>
            {p.icon} {p.name}
          </Link>
        ))}
      </div>

      <div className="card overflow-hidden">
        <div className="overflow-x-auto">
          <table className="table-base">
            <thead>
              <tr>
                <th>Article</th>
                <th>Product</th>
                <th>Category</th>
                <th>Views</th>
                <th>Helpful</th>
                <th>Status</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {articles.map((a) => (
                <tr key={a.id}>
                  <td>
                    <Link href={`/admin/kb/editor?id=${a.id}`} className="font-semibold hover:underline">
                      {a.title}
                    </Link>
                  </td>
                  <td className="text-sm">{a.project.icon} {a.project.name}</td>
                  <td className="text-sm text-muted">{a.category?.name || "—"}</td>
                  <td className="text-sm">{a.views}</td>
                  <td className="text-sm">
                    <span className="text-emerald-500">👍{a.helpful}</span>{" "}
                    <span className="text-red-400">👎{a.notHelpful}</span>
                  </td>
                  <td>
                    <span className={`chip ${a.published ? "text-emerald-500 bg-emerald-500/10" : "text-muted bg-line/50"}`}>
                      {a.published ? "Published" : "Draft"}
                    </span>
                  </td>
                  <td>
                    <KbActions article={{ id: a.id, published: a.published, slug: a.slug, projectSlug: a.project.slug }} />
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </main>
  );
}