import Link from "next/link";
import { notFound, redirect } from "next/navigation";
import { requireAdmin } from "../../../lib/auth";
import { getDb, listRikxRondes, type Project } from "../../../lib/db";
import { listBeoordelingen } from "../../../lib/experts";
import { projectStatusBadgeClass, projectStatusLabel } from "../../../lib/projectStatus";
import { listAccountNames } from "../../../lib/platform-db";
import { AppHeader } from "../../AppHeader";
import { PROJECT_FORM_ID } from "./formId";
import { ProjectDetailForm } from "./ProjectDetailForm";

export default async function ProjectPage({
  params,
  searchParams,
}: {
  params: Promise<{ id: string }>;
  searchParams: Promise<{ error?: string; opgeslagen?: string; tab?: string }>;
}) {
  const session = await requireAdmin();

  const { id } = await params;
  const { error, opgeslagen, tab } = await searchParams;

  const db = getDb();
  const row = db.prepare("SELECT * FROM projects WHERE id = ?").get(Number(id)) as Project | undefined;
  if (!row) notFound();
  // node:sqlite levert objecten met null-prototype; spreiden maakt ze doorgeefbaar aan client components.
  const project = { ...row };
  const beoordelingen = listBeoordelingen([project.id]);

  const message =
    error === "missing"
      ? { tone: "error", text: "Vul een projectnaam in." }
      : error === "invalid"
      ? { tone: "error", text: "Niet opgeslagen: controleer de getallen (percentage 0–100, geen negatieve waarden)." }
      : error === "datum"
      ? { tone: "error", text: "Niet opgeslagen: controleer de datums (de einddatum mag niet vóór de startdatum liggen)." }
      : opgeslagen
      ? { tone: "ok", text: "Project opgeslagen." }
      : null;

  return (
    <div className="min-h-screen bg-zinc-50 dark:bg-zinc-950">
      <AppHeader email={session.email} active="projecten" />

      <main className="max-w-5xl mx-auto px-4 sm:px-6 py-8 flex flex-col gap-6">
        <Link
          href="/projecten"
          className="text-sm text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors"
        >
          ← Terug naar projecten
        </Link>
        <div className="flex flex-wrap items-center gap-3">
          <h1 className="text-xl font-semibold text-zinc-900 dark:text-zinc-100">{project.name}</h1>
          <span
            className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${projectStatusBadgeClass(project.status)}`}
          >
            {projectStatusLabel(project.status)}
          </span>
          {/* Verstuurt het projectformulier hieronder (form-attribuut) */}
          <button
            type="submit"
            form={PROJECT_FORM_ID}
            className="ml-auto rounded-lg bg-rikx-maroon hover:bg-rikx-maroon-light px-5 py-2 text-sm font-medium text-white transition-colors"
          >
            Opslaan
          </button>
        </div>
        {message && (
          <p
            className={
              message.tone === "error"
                ? "text-sm text-red-600 dark:text-red-400"
                : "text-sm text-green-700 dark:text-green-400"
            }
          >
            {message.text}
          </p>
        )}
        <ProjectDetailForm
          project={project}
          beoordelingen={beoordelingen}
          rondes={listRikxRondes()}
          impactmakers={listAccountNames()}
          initialTab={tab === "calculatie" ? "calculatie" : "plan"}
        />
      </main>
    </div>
  );
}