import Link from "next/link";
import { notFound, redirect } from "next/navigation";
import { getSession } from "../../../lib/auth";
import { getDb, type RikxRonde } from "../../../lib/db";
import { AppHeader } from "../../AppHeader";
import { updateRonde } from "../actions";
import { RONDE_ERRORS, RondeFields } from "../RondeFields";

export default async function EditRondePage({
  params,
  searchParams,
}: {
  params: Promise<{ id: string }>;
  searchParams: Promise<{ error?: string }>;
}) {
  const session = await getSession();
  if (!session) redirect("/login");

  const { id } = await params;
  const { error } = await searchParams;
  const row = getDb().prepare("SELECT * FROM rikx_rondes WHERE id = ?").get(Number(id)) as RikxRonde | undefined;
  if (!row) notFound();
  const ronde = { ...row };

  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-10 flex flex-col gap-6">
        <Link href="/rondes" className="text-sm text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors">
          ← Terug naar Rikx rondes
        </Link>
        <h1 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Rikx Ronde bewerken</h1>
        {error && RONDE_ERRORS[error] && (
          <p className="text-sm text-red-600 dark:text-red-400">{RONDE_ERRORS[error]}</p>
        )}
        <form
          action={updateRonde}
          className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 grid grid-cols-1 sm:grid-cols-3 gap-4"
        >
          <input type="hidden" name="id" value={ronde.id} />
          <RondeFields ronde={ronde} />
          <p className="sm:col-span-3 text-xs text-zinc-500">
            Een andere Rikx waarde of prijs verandert de Rikx calculatie van alle projecten in deze ronde.
          </p>
          <div className="sm:col-span-3 flex gap-3">
            <button
              type="submit"
              className="rounded-lg bg-rikx-maroon hover:bg-rikx-maroon-light px-5 py-2 text-sm font-medium text-white transition-colors"
            >
              Opslaan
            </button>
            <Link
              href="/rondes"
              className="rounded-lg border border-zinc-300 dark:border-zinc-700 px-5 py-2 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
            >
              Annuleren
            </Link>
          </div>
        </form>
      </main>
    </div>
  );
}