import { requireKitaSession } from "@/lib/auth-utils";
import { prisma } from "@/lib/prisma";
import { Contact, Mail, Phone, Baby } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";

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

  // Fetch only users who opted in to the directory
  const users = await prisma.user.findMany({
    where: {
      kitaId: session.user.kitaId,
      directoryOptInAt: { not: null },
    },
    include: {
      childLinks: {
        include: { child: true },
      },
      dutyAssignments: {
        include: { duty: true },
      },
    },
    orderBy: { lastName: "asc" },
  });

  return (
    <div className="flex h-full flex-col gap-6 p-6">
      <div>
        <h1 className="text-2xl font-bold tracking-tight">Adressbuch</h1>
        <p className="text-muted-foreground">
          Kontaktinformationen aller Eltern, die der Freigabe zugestimmt haben.
        </p>
      </div>

      {users.length === 0 ? (
        <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-8 text-center animate-in fade-in-50">
          <Contact className="h-10 w-10 text-muted-foreground mb-4" />
          <h3 className="mt-4 text-lg font-semibold">Keine Kontakte</h3>
          <p className="mb-4 mt-2 text-sm text-muted-foreground">
            Bisher hat niemand der Veröffentlichung im Adressbuch zugestimmt.
          </p>
        </div>
      ) : (
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {users.map((u) => (
            <Card key={u.id} className="flex flex-col">
              <CardHeader className="pb-3">
                <CardTitle className="flex justify-between items-start">
                  <span className="text-lg">
                    {u.firstName} {u.lastName}
                  </span>
                  {u.role === "ADMIN" || u.role === "KOORDINATOR" ? (
                    <Badge variant="secondary" className="text-[10px]">Vorstand</Badge>
                  ) : null}
                </CardTitle>
              </CardHeader>
              <CardContent className="flex flex-col gap-3 text-sm flex-1">
                <div className="flex items-center gap-2 text-muted-foreground">
                  <Mail className="h-4 w-4 shrink-0" />
                  <a href={`mailto:${u.email}`} className="hover:text-primary transition-colors truncate">
                    {u.email}
                  </a>
                </div>
                {u.phone && (
                  <div className="flex items-center gap-2 text-muted-foreground">
                    <Phone className="h-4 w-4 shrink-0" />
                    <a href={`tel:${u.phone}`} className="hover:text-primary transition-colors">
                      {u.phone}
                    </a>
                  </div>
                )}
                
                {u.childLinks.length > 0 && (
                  <div className="flex items-start gap-2 text-muted-foreground mt-1">
                    <Baby className="h-4 w-4 shrink-0 mt-0.5" />
                    <div className="flex flex-wrap gap-1">
                      {u.childLinks.map(link => (
                        <span key={link.child.id} className="bg-muted px-1.5 py-0.5 rounded-md text-xs">
                          {link.child.firstName}
                        </span>
                      ))}
                    </div>
                  </div>
                )}

                {u.dutyAssignments.length > 0 && (
                  <div className="mt-auto pt-3 border-t">
                    <span className="text-xs font-medium text-muted-foreground mb-1 block">Ämter / Dienste:</span>
                    <div className="flex flex-wrap gap-1">
                      {u.dutyAssignments.map((assignment) => (
                        <Badge key={assignment.duty.id} variant="outline" className="bg-primary/5 text-primary border-primary/20">
                          {assignment.duty.name}
                        </Badge>
                      ))}
                    </div>
                  </div>
                )}
              </CardContent>
            </Card>
          ))}
        </div>
      )}
    </div>
  );
}