import { notFound } from "next/navigation";
import Link from "next/link";
import { Baby } from "lucide-react";

import { prisma } from "@/lib/prisma";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { InviteForm } from "./invite-form";

export const metadata = { title: "Konto aktivieren · Kita-Planer" };

// =====================================================================
// /invite/[token] · Öffentliche Seite (kein Auth erforderlich)
// ---------------------------------------------------------------------
// 1. Token gegen DB prüfen (existiert + nicht abgelaufen)
// 2. User laden (Name für personalisierte Begrüßung)
// 3. Invite bereits eingelöst → Hinweis
// 4. Gültiger Token → InviteForm
// =====================================================================

export default async function InvitePage({
  params,
}: {
  params: Promise<{ token: string }>;
}) {
  const { token } = await params;

  // Token in DB nachschlagen
  const verificationToken = await prisma.verificationToken.findUnique({
    where: { token },
  });

  // Unbekannter Token → 404
  if (!verificationToken) {
    notFound();
  }

  const isExpired = verificationToken.expires < new Date();

  // User über identifier (= userId) laden
  const user = await prisma.user.findUnique({
    where: { id: verificationToken.identifier },
    select: {
      firstName: true,
      lastName: true,
      emailVerifiedAt: true,
      kita: { select: { name: true } },
    },
  });

  if (!user) notFound();

  const userName = `${user.firstName} ${user.lastName}`;
  const alreadyAccepted = !!user.emailVerifiedAt;

  return (
    <div className="flex min-h-screen flex-col bg-muted/30">
      {/* Mini-Header */}
      <header className="border-b bg-background">
        <div className="mx-auto flex h-14 max-w-5xl items-center gap-2.5 px-6">
          <div className="flex h-7 w-7 items-center justify-center rounded-md bg-primary text-primary-foreground">
            <Baby className="h-4 w-4" />
          </div>
          <span className="text-sm font-semibold">Kita-Planer</span>
          {user.kita && (
            <>
              <span className="text-sm text-muted-foreground">·</span>
              <span className="text-sm text-muted-foreground">
                {user.kita.name}
              </span>
            </>
          )}
        </div>
      </header>

      <main className="flex flex-1 items-center justify-center px-4 py-12">
        <Card className="w-full max-w-md">
          <CardHeader className="space-y-2">
            {isExpired ? (
              <>
                <CardTitle>Einladungslink abgelaufen</CardTitle>
                <CardDescription>
                  Dieser Link ist nicht mehr gültig. Bitte wende dich an deinen
                  Kita-Administrator, um einen neuen Link zu erhalten.
                </CardDescription>
              </>
            ) : alreadyAccepted ? (
              <>
                <CardTitle>Konto bereits aktiviert</CardTitle>
                <CardDescription>
                  Du hast diesen Einladungslink bereits verwendet. Melde dich
                  einfach mit deiner E-Mail-Adresse an.
                </CardDescription>
              </>
            ) : (
              <>
                <CardTitle>Willkommen, {user.firstName}!</CardTitle>
                <CardDescription>
                  Du wurdest zur Kita <strong>{user.kita?.name ?? "—"}</strong>{" "}
                  eingeladen. Setze dein Passwort, um dein Konto zu aktivieren.
                </CardDescription>
              </>
            )}
          </CardHeader>

          <CardContent>
            {isExpired || alreadyAccepted ? (
              <div className="text-center">
                <Link
                  href="/login"
                  className="text-sm font-medium underline underline-offset-4"
                >
                  Zur Anmeldung →
                </Link>
              </div>
            ) : (
              <InviteForm token={token} userName={userName} />
            )}
          </CardContent>
        </Card>
      </main>
    </div>
  );
}
