import { listProjects } from "@autoscholar/core";
import Link from "next/link";
import { disciplineLabel, fmtDateTime } from "@/lib/format";
import { db } from "@/lib/server/db";

export const dynamic = "force-dynamic";

export default async function ProjectsPage() {
  const rows = await listProjects(db());
  return (
    <div className="space-y-6">
      <header className="flex items-end justify-between">
        <div>
          <p className="eyebrow">Research</p>
          <h1 className="title-2 mt-1">Projects</h1>
        </div>
        <Link href="/admin/new" className="btn btn-primary">
          New research
        </Link>
      </header>
      <table className="table">
        <thead>
          <tr>
            <th>Title</th>
            <th>Discipline</th>
            <th>Instruction versions</th>
            <th>Runs</th>
            <th>Updated</th>
          </tr>
        </thead>
        <tbody>
          {rows.length === 0 && (
            <tr>
              <td colSpan={5} className="muted py-8 text-center">
                No projects yet.
              </td>
            </tr>
          )}
          {rows.map((r) => (
            <tr key={r.project.id}>
              <td>
                <Link href={`/admin/projects/${r.project.id}`}>{r.project.title}</Link>
              </td>
              <td>{disciplineLabel(r.project.discipline)}</td>
              <td>{r.versions}</td>
              <td>{r.runs}</td>
              <td className="subtle text-xs">{fmtDateTime(r.project.updatedAt)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}