import Link from "next/link";
import { notFound, redirect } from "next/navigation";
import { requireAdmin } from "../../../lib/auth";
import { getAccount } from "../../../lib/platform-db";
import { updateTenant } from "../actions";
import { AppHeader } from "../../AppHeader";

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

  const { id } = await params;
  const { error } = await searchParams;
  const account = getAccount(Number(id));
  if (!account) notFound();

  const errorMsg =
    error === "slug"
      ? "Slug is al in gebruik."
      : error === "missing"
      ? "Vul alle velden in."
      : null;

  const inputClass =
    "rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-zinc-500";

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

      <main className="max-w-5xl mx-auto px-6 py-10 flex flex-col gap-6">
        <Link
          href="/tenants"
          className="text-sm text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors"
        >
          ← Terug naar overzicht
        </Link>
        <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
          Sociaal ondernemer bewerken
        </h2>
        {errorMsg && <p className="text-sm text-red-600 dark:text-red-400">{errorMsg}</p>}
        <form
          action={updateTenant}
          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-2 gap-4"
        >
          <input type="hidden" name="account_id" value={account.id} />
          <div className="flex flex-col gap-1">
            <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Bedrijfsnaam</label>
            <input type="text" name="name" required defaultValue={account.name} className={inputClass} />
          </div>
          <div className="flex flex-col gap-1">
            <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">
              Slug <span className="text-zinc-400 font-normal">(URL-naam)</span>
            </label>
            <input
              type="text"
              name="slug"
              required
              pattern="[a-z0-9-]+"
              defaultValue={account.slug}
              className={`${inputClass} font-mono`}
            />
            <p className="text-xs text-zinc-500">
              Let op: een andere slug wijzigt de URL ({account.slug}.rikxplatform.nl).
            </p>
          </div>
          <div className="sm:col-span-2 flex gap-3">
            <button
              type="submit"
              className="rounded-lg bg-zinc-900 dark:bg-zinc-100 px-5 py-2 text-sm font-medium text-white dark:text-zinc-900 hover:bg-zinc-700 dark:hover:bg-zinc-300 transition-colors"
            >
              Opslaan
            </button>
            <Link
              href="/tenants"
              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>
  );
}