import { notFound } from "next/navigation";
import { format } from "date-fns";
import { de } from "date-fns/locale";
import { BellRing, ShieldCheck, XCircle } from "lucide-react";
import { NotdienstAlertStatus } from "@prisma/client";

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

export const metadata = { title: "Notdienst Alarm · Kita-Planer" };

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

  const alert = await prisma.notdienstAlert.findUnique({
    where: { confirmationToken: token },
    select: {
      status: true,
      parentUser: {
        select: {
          firstName: true,
        },
      },
      kita: {
        select: {
          name: true,
        },
      },
      assignment: {
        select: {
          date: true,
          child: {
            select: {
              firstName: true,
              lastName: true,
            },
          },
        },
      },
    },
  });

  if (!alert) {
    notFound();
  }

  const isPending = alert.status === NotdienstAlertStatus.PENDING;
  const isConfirmed = alert.status === NotdienstAlertStatus.CONFIRMED;

  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-muted/30 px-4 py-12">
      <Card className="w-full max-w-md shadow-lg border-primary/20">
        <CardHeader className="text-center pb-2">
          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10 text-primary">
            {isPending ? (
              <BellRing className="h-8 w-8 animate-pulse text-destructive" />
            ) : isConfirmed ? (
              <ShieldCheck className="h-8 w-8 text-success" />
            ) : (
              <XCircle className="h-8 w-8 text-muted-foreground" />
            )}
          </div>
          <CardTitle className="text-2xl">
            {isPending
              ? "Notdienst Einsatz!"
              : isConfirmed
                ? "Einsatz bestätigt"
                : "Alarm abgebrochen"}
          </CardTitle>
          <CardDescription className="text-base mt-2">
            Kita {alert.kita.name}
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6 pt-4">
          <div className="rounded-lg bg-background border p-4 text-center space-y-1">
            <p className="text-sm text-muted-foreground">Datum</p>
            <p className="font-semibold text-lg">
              {format(alert.assignment.date, "EEEE, dd. MMMM yyyy", {
                locale: de,
              })}
            </p>
            <div className="h-2" />
            <p className="text-sm text-muted-foreground">Eingeteiltes Kind</p>
            <p className="font-medium">
              {alert.assignment.child.firstName}{" "}
              {alert.assignment.child.lastName}
            </p>
          </div>

          <div className="text-center">
            {isPending ? (
              <>
                <p className="mb-6 text-sm text-muted-foreground">
                  Hallo {alert.parentUser.firstName}, eine Fachkraft hat sich
                  krankgemeldet und du bist heute für den Notdienst eingeteilt.
                  Bitte bestätige deinen Einsatz schnellstmöglich!
                </p>
                <AlertConfirmForm token={token} />
              </>
            ) : isConfirmed ? (
              <p className="text-sm text-muted-foreground">
                Danke, {alert.parentUser.firstName}! Dein Einsatz wurde
                erfolgreich bestätigt. Die Kita rechnet mit dir.
              </p>
            ) : (
              <p className="text-sm text-muted-foreground">
                Dieser Einsatz wurde vom Koordinator abgebrochen. Du musst nicht
                einspringen.
              </p>
            )}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
