import { requireKitaSession } from "@/lib/auth-utils";
import { prisma } from "@/lib/prisma";
import { format } from "date-fns";
import { de } from "date-fns/locale";
import { UserCircle, Mail, Baby, Shield, CalendarHeart } from "lucide-react";

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { DeleteAccountDialog } from "./_components/delete-account-dialog";

export const metadata = { title: "Mein Profil · Kita-Planer" };

export default async function ProfilPage() {
  const session = await requireKitaSession();

  const user = await prisma.user.findUniqueOrThrow({
    where: { id: session.user.id },
    include: {
      childLinks: {
        include: { child: true },
      },
      dutyAssignments: {
        include: { duty: true },
      },
    },
  });

  return (
    <div className="flex h-full flex-col gap-6 p-6 max-w-4xl mx-auto w-full">
      <div>
        <h1 className="text-2xl font-bold tracking-tight">Mein Profil</h1>
        <p className="text-muted-foreground">
          Deine persönlichen Daten, verknüpfte Kinder und DSGVO-Einstellungen.
        </p>
      </div>

      <div className="grid gap-6 md:grid-cols-2">
        {/* Persönliche Daten */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <UserCircle className="h-5 w-5" />
              Persönliche Daten
            </CardTitle>
          </CardHeader>
          <CardContent className="flex flex-col gap-4">
            <div>
              <div className="text-sm text-muted-foreground">Name</div>
              <div className="font-medium text-lg">
                {user.firstName} {user.lastName}
              </div>
            </div>
            <div>
              <div className="text-sm text-muted-foreground flex items-center gap-1">
                <Mail className="h-3.5 w-3.5" /> E-Mail
              </div>
              <div className="font-medium">{user.email}</div>
            </div>
            <div>
              <div className="text-sm text-muted-foreground">Rolle im Verein</div>
              <Badge variant={user.role === "ELTERN" ? "secondary" : "default"} className="mt-1">
                {user.role}
              </Badge>
            </div>
            <div className="pt-2 border-t mt-2">
              <div className="text-sm text-muted-foreground flex items-center gap-1">
                <CalendarHeart className="h-3.5 w-3.5" /> Mitglied seit
              </div>
              <div className="text-sm">
                {format(user.createdAt, "PPP", { locale: de })}
              </div>
            </div>
          </CardContent>
        </Card>

        <div className="flex flex-col gap-6">
          {/* Kinder */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Baby className="h-5 w-5" />
                Meine Kinder
              </CardTitle>
            </CardHeader>
            <CardContent>
              {user.childLinks.length === 0 ? (
                <p className="text-sm text-muted-foreground">Keine Kinder verknüpft.</p>
              ) : (
                <div className="flex flex-col gap-2">
                  {user.childLinks.map((link) => (
                    <div key={link.child.id} className="flex items-center justify-between p-2 rounded-md bg-muted/50">
                      <span className="font-medium">
                        {link.child.firstName} {link.child.lastName}
                      </span>
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>

          {/* Ämter */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Shield className="h-5 w-5" />
                Meine Ämter & Dienste
              </CardTitle>
            </CardHeader>
            <CardContent>
              {user.dutyAssignments.length === 0 ? (
                <p className="text-sm text-muted-foreground">Du hast aktuell keine festen Ämter übernommen.</p>
              ) : (
                <div className="flex flex-wrap gap-2">
                  {user.dutyAssignments.map((assignment) => (
                    <Badge key={assignment.id} variant="default" className="text-sm py-1 px-3">
                      {assignment.duty.name}
                    </Badge>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>
        </div>
      </div>

      {/* Danger Zone */}
      <Card className="border-destructive/20 mt-8">
        <CardHeader>
          <CardTitle className="text-destructive">Danger Zone</CardTitle>
          <CardDescription>
            Hier kannst du dein Profil und alle zugehörigen Daten DSGVO-konform löschen.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <DeleteAccountDialog />
        </CardContent>
      </Card>

    </div>
  );
}