"use client";

import { useState, useMemo } from "react";
import {
  Baby,
  Contact,
  Mail,
  Phone,
  Search,
  ShieldCheck,
  SlidersHorizontal,
  UserRound,
  Home,
  MapPin,
} from "lucide-react";
import { format } from "date-fns";
import { de } from "date-fns/locale";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";

export type DirectoryParentDto = {
  id: string;
  firstName: string;
  lastName: string;
  hasDirectoryOptIn: boolean;
  email?: string;
  phone?: string;
  street?: string;
  postalCode?: string;
  city?: string;
  duties: {
    id: string;
    name: string;
  }[];
};

export type DirectoryFamilyDto = {
  id: string;
  name: string;
  children: {
    id: string;
    firstName: string;
    lastName: string;
    dateOfBirth?: Date | null;
  }[];
  parents: DirectoryParentDto[];
};

export function DirectoryClient({
  initialFamilies,
}: {
  initialFamilies: DirectoryFamilyDto[];
}) {
  const [searchQuery, setSearchQuery] = useState("");
  const [activeFilters, setActiveFilters] = useState<Set<string>>(new Set());
  const [selectedFamily, setSelectedFamily] = useState<DirectoryFamilyDto | null>(null);
  const [privacyDialogOpen, setPrivacyDialogOpen] = useState(false);

  const toggleFilter = (filterKey: string) => {
    setActiveFilters((prev) => {
      const next = new Set(prev);
      if (next.has(filterKey)) {
        next.delete(filterKey);
      } else {
        next.add(filterKey);
      }
      return next;
    });
  };

  const filteredFamilies = useMemo(() => {
    return initialFamilies.filter((family) => {
      // 1. Search Query filter
      const query = searchQuery.trim().toLowerCase();
      if (query) {
        const familyNameMatch = family.name.toLowerCase().includes(query);
        const childMatch = family.children.some(
          (c) =>
            c.firstName.toLowerCase().includes(query) ||
            c.lastName.toLowerCase().includes(query)
        );
        const parentMatch = family.parents.some(
          (p) =>
            p.firstName.toLowerCase().includes(query) ||
            p.lastName.toLowerCase().includes(query) ||
            (p.email && p.email.toLowerCase().includes(query))
        );
        if (!familyNameMatch && !childMatch && !parentMatch) return false;
      }

      // 2. Custom filters
      if (activeFilters.has("telefon")) {
        const hasPhone = family.parents.some((p) => p.hasDirectoryOptIn && p.phone);
        if (!hasPhone) return false;
      }

      if (activeFilters.has("aemter")) {
        const hasDuties = family.parents.some((p) => p.duties.length > 0);
        if (!hasDuties) return false;
      }

      if (activeFilters.has("optIn")) {
        // Show households where all parents in the system have opted in
        const allOptIn = family.parents.every((p) => p.hasDirectoryOptIn);
        if (!allOptIn) return false;
      }

      return true;
    });
  }, [initialFamilies, searchQuery, activeFilters]);

  // Recalculate metrics for filtered subset
  const visibleParentCount = useMemo(() => {
    return filteredFamilies.reduce(
      (count, fam) => count + fam.parents.filter((p) => p.hasDirectoryOptIn).length,
      0
    );
  }, [filteredFamilies]);

  const childCount = useMemo(() => {
    return filteredFamilies.reduce((count, fam) => count + fam.children.length, 0);
  }, [filteredFamilies]);

  const totalVisibleParentCount = useMemo(() => {
    return initialFamilies.reduce(
      (count, fam) => count + fam.parents.filter((p) => p.hasDirectoryOptIn).length,
      0
    );
  }, [initialFamilies]);

  const groupedFamilies = useMemo(() => {
    const groups = new Map<string, DirectoryFamilyDto[]>();
    filteredFamilies.forEach((family) => {
      const initial = family.name.trim().slice(0, 1).toUpperCase();
      const key = initial || "#";
      groups.set(key, [...(groups.get(key) ?? []), family]);
    });
    return Array.from(groups.entries())
      .map(([initial, families]) => ({ initial, families }))
      .sort((a, b) => a.initial.localeCompare(b.initial));
  }, [filteredFamilies]);

  return (
    <div className="mx-auto max-w-[1280px] px-11 py-9 pb-16 max-[760px]:px-5">
      {/* Header */}
      <header className="mb-7 flex items-end justify-between gap-8 max-[900px]:flex-col max-[900px]:items-start">
        <div>
          <p className="text-[11px] font-semibold uppercase text-[var(--accent-deep)] [letter-spacing:0.18em]">
            KONTAKTE · ADRESSBUCH
          </p>
          <h1 className="mt-2 text-[36px] font-normal leading-tight tracking-[-0.025em] text-[var(--ink)]">
            Freigegebene{" "}
            <em className="font-normal italic text-[var(--accent-deep)]">
              Kontakte
            </em>
          </h1>
          <p className="mt-2 max-w-2xl text-[15px] leading-6 text-[var(--ink-soft)]">
            Haushalte und Kontaktdaten, die explizit für das interne
            Kita-Adressbuch freigegeben wurden.
          </p>
        </div>
        <div className="flex shrink-0 flex-wrap gap-2">
          <span className="inline-flex h-9 items-center gap-2 rounded-full border border-[var(--hairline)] bg-[var(--surface)] px-4 text-[13px] font-semibold text-[var(--ink-soft)] tabular-nums">
            <ShieldCheck className="h-4 w-4 text-[var(--accent-deep)] [stroke-width:1.7]" />
            {totalVisibleParentCount} sichtbar
          </span>
          <Button variant="ghost" size="sm" onClick={() => setPrivacyDialogOpen(true)}>
            <SlidersHorizontal className="h-4 w-4 [stroke-width:1.7]" />
            Sichtbarkeit
          </Button>
        </div>
      </header>

      {/* Main Household List or Empty State */}
      {initialFamilies.length === 0 ? (
        <Card className="border-dashed">
          <CardContent className="flex max-h-[280px] min-h-[260px] flex-col items-center justify-center px-6 py-12 text-center">
            <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-[var(--accent-soft)] text-[var(--accent-deep)]">
              <Contact className="h-6 w-6 [stroke-width:1.7]" />
            </div>
            <h3 className="text-lg font-medium tracking-[-0.02em] text-[var(--ink)]">
              Keine freigegebenen Kontakte
            </h3>
            <p className="mt-2 max-w-sm text-sm leading-6 text-[var(--ink-soft)]">
              Sobald mindestens ein Elternteil eines Haushalts zustimmt,
              erscheint die Familie hier.
            </p>
          </CardContent>
        </Card>
      ) : (
        <div className="space-y-5">
          {/* Metrics & Search Bar */}
          <div className="flex flex-wrap items-center justify-between gap-3">
            <div className="flex flex-wrap gap-2">
              <DirectoryMetric label="Haushalte" value={filteredFamilies.length} />
              <DirectoryMetric label="Kontakte" value={visibleParentCount} />
              <DirectoryMetric label="Kinder" value={childCount} />
            </div>
            <div className="relative min-w-72 max-[760px]:w-full max-[760px]:min-w-0">
              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--ink-muted)] [stroke-width:1.7]" />
              <Input
                placeholder="Familien, Namen oder E-Mail suchen"
                className="pl-9"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
          </div>

          {/* Custom Filter Chips */}
          <div className="flex flex-wrap gap-1.5">
            <button
              type="button"
              onClick={() => setActiveFilters(new Set())}
              className={[
                "inline-flex h-9 items-center rounded-full border px-3 text-[13px] font-medium transition",
                activeFilters.size === 0
                  ? "border-[var(--accent-mid)] bg-[var(--accent-soft)] text-[var(--accent-deep)]"
                  : "border-[var(--hairline)] bg-[var(--surface)] text-[var(--ink-soft)] hover:bg-[var(--surface-2)]",
              ].join(" ")}
            >
              Alle anzeigen
            </button>
            <button
              type="button"
              onClick={() => toggleFilter("telefon")}
              className={[
                "inline-flex h-9 items-center rounded-full border px-3 text-[13px] font-medium transition",
                activeFilters.has("telefon")
                  ? "border-[var(--accent-mid)] bg-[var(--accent-soft)] text-[var(--accent-deep)]"
                  : "border-[var(--hairline)] bg-[var(--surface)] text-[var(--ink-soft)] hover:bg-[var(--surface-2)]",
              ].join(" ")}
            >
              Mit Telefon
            </button>
            <button
              type="button"
              onClick={() => toggleFilter("aemter")}
              className={[
                "inline-flex h-9 items-center rounded-full border px-3 text-[13px] font-medium transition",
                activeFilters.has("aemter")
                  ? "border-[var(--accent-mid)] bg-[var(--accent-soft)] text-[var(--accent-deep)]"
                  : "border-[var(--hairline)] bg-[var(--surface)] text-[var(--ink-soft)] hover:bg-[var(--surface-2)]",
              ].join(" ")}
            >
              Mit Ämtern
            </button>
            <button
              type="button"
              onClick={() => toggleFilter("optIn")}
              className={[
                "inline-flex h-9 items-center rounded-full border px-3 text-[13px] font-medium transition",
                activeFilters.has("optIn")
                  ? "border-[var(--accent-mid)] bg-[var(--accent-soft)] text-[var(--accent-deep)]"
                  : "border-[var(--hairline)] bg-[var(--surface)] text-[var(--ink-soft)] hover:bg-[var(--surface-2)]",
              ].join(" ")}
            >
              Haushalt komplett freigegeben
            </button>
          </div>

          {/* Household list cards wrapper */}
          {filteredFamilies.length === 0 ? (
            <Card className="border-dashed">
              <CardContent className="flex max-h-[280px] min-h-[260px] flex-col items-center justify-center px-6 py-12 text-center">
                <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-[var(--accent-soft)] text-[var(--accent-deep)]">
                  <SlidersHorizontal className="h-6 w-6 [stroke-width:1.7]" />
                </div>
                <h3 className="text-lg font-medium tracking-[-0.02em] text-[var(--ink)]">
                  Keine passenden Kontakte gefunden
                </h3>
                <p className="mt-2 max-w-sm text-sm leading-6 text-[var(--ink-soft)]">
                  Passe deine Suche oder die Filterchips an, um Einträge zu sehen.
                </p>
              </CardContent>
            </Card>
          ) : (
            <Card className="overflow-hidden p-0">
              {groupedFamilies.map((group) => (
                <section key={group.initial}>
                  <div className="flex items-center justify-between border-b border-[var(--hairline-soft)] bg-[var(--surface-2)] px-5 py-3">
                    <h2 className="text-[11px] font-semibold uppercase text-[var(--ink-muted)] [letter-spacing:0.14em]">
                      {group.initial}
                    </h2>
                    <span className="text-[11px] font-semibold text-[var(--ink-muted)] tabular-nums">
                      {group.families.length}
                    </span>
                  </div>
                  <div className="divide-y divide-[var(--hairline-soft)]">
                    {group.families.map((family) => {
                      const visibleParents = family.parents.filter(
                        (parent) => parent.hasDirectoryOptIn
                      );
                      const duties = family.parents.flatMap((parent) => parent.duties);

                      return (
                        <div
                          key={family.id}
                          className="grid grid-cols-[minmax(220px,0.8fr)_minmax(0,1.4fr)_minmax(220px,1fr)] gap-5 px-5 py-4 transition-colors hover:bg-[var(--surface-2)] max-[1050px]:grid-cols-1"
                        >
                          {/* Left: Family Name & Children */}
                          <div className="flex min-w-0 gap-3">
                            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[var(--accent-soft)] text-sm font-semibold uppercase text-[var(--accent-deep)]">
                              {family.name.slice(0, 1)}
                            </div>
                            <div className="min-w-0">
                              <h3 className="truncate text-[15px] font-semibold text-[var(--ink)]">
                                {family.name}
                              </h3>
                              <p className="mt-1 flex flex-wrap items-center gap-1.5 text-[13px] text-[var(--ink-soft)]">
                                <Baby className="h-3.5 w-3.5 [stroke-width:1.7]" />
                                {family.children.length === 0
                                  ? "Keine Kinder hinterlegt"
                                  : family.children
                                      .map((child) => `${child.firstName} ${child.lastName}`)
                                      .join(", ")}
                              </p>
                            </div>
                          </div>

                          {/* Middle: Parents */}
                          <div className="grid gap-3">
                            {family.parents.map((user) => (
                              <div key={user.id} className="min-w-0">
                                <div className="flex flex-wrap items-center gap-2">
                                  <UserRound className="h-3.5 w-3.5 text-[var(--ink-muted)] [stroke-width:1.7]" />
                                  <p className="text-sm font-medium text-[var(--ink)]">
                                    {user.firstName} {user.lastName}
                                  </p>
                                  {user.hasDirectoryOptIn ? (
                                    <Badge variant="success">Opt-in</Badge>
                                  ) : (
                                    <span className="text-xs italic text-[var(--ink-faint)]">
                                      nicht freigegeben
                                    </span>
                                  )}
                                </div>

                                {user.hasDirectoryOptIn && (
                                  <div className="mt-1 flex flex-wrap gap-x-4 gap-y-1 pl-5 text-[13px] text-[var(--ink-soft)]">
                                    {user.email && (
                                      <a
                                        href={`mailto:${user.email}`}
                                        className="inline-flex min-w-0 items-center gap-1.5 hover:text-[var(--accent-deep)]"
                                      >
                                        <Mail className="h-3.5 w-3.5 shrink-0 [stroke-width:1.7]" />
                                        <span className="break-words [overflow-wrap:anywhere]">
                                          {user.email}
                                        </span>
                                      </a>
                                    )}
                                    {user.phone ? (
                                      <a
                                        href={`tel:${user.phone}`}
                                        className="inline-flex items-center gap-1.5 hover:text-[var(--accent-deep)]"
                                      >
                                        <Phone className="h-3.5 w-3.5 shrink-0 [stroke-width:1.7]" />
                                        {user.phone}
                                      </a>
                                    ) : (
                                      <span className="italic text-[var(--ink-faint)]">
                                        Keine Telefonnummer
                                      </span>
                                    )}
                                  </div>
                                )}
                              </div>
                            ))}
                          </div>

                          {/* Right: Badges & Details Action */}
                          <div className="flex flex-col items-end justify-between gap-3 max-[1050px]:items-start">
                            <div className="flex flex-wrap justify-end gap-1.5 max-[1050px]:justify-start">
                              <Badge variant="secondary">
                                {visibleParents.length} von {family.parents.length} sichtbar
                              </Badge>
                              {duties.map((duty) => (
                                <Badge
                                  key={duty.id}
                                  variant="outline"
                                  className="border-[var(--accent-mid)] bg-[var(--accent-soft)] text-[var(--accent-deep)]"
                                >
                                  {duty.name}
                                </Badge>
                              ))}
                            </div>
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => setSelectedFamily(family)}
                            >
                              Kontakt öffnen
                            </Button>
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </section>
              ))}
            </Card>
          )}
        </div>
      )}

      {/* Household Detail Dialog */}
      <Dialog
        open={!!selectedFamily}
        onOpenChange={(open) => !open && setSelectedFamily(null)}
      >
        <DialogContent className="max-w-xl max-h-[85vh] overflow-y-auto">
          {selectedFamily && (
            <>
              <DialogHeader>
                <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[var(--accent-soft)] text-[var(--accent-deep)] text-xl font-bold uppercase mb-2">
                  {selectedFamily.name.slice(0, 1)}
                </div>
                <DialogTitle className="text-2xl">Familie {selectedFamily.name}</DialogTitle>
                <DialogDescription>
                  Detaillierte Kontaktdaten und Haushalts-Zugehörigkeiten.
                </DialogDescription>
              </DialogHeader>

              <div className="mt-4 space-y-6">
                {/* Children Details */}
                <div>
                  <h4 className="text-xs font-semibold uppercase tracking-wider text-[var(--ink-muted)] mb-3 flex items-center gap-1.5">
                    <Baby className="h-4 w-4" />
                    Kinder im Haushalt
                  </h4>
                  <div className="grid gap-2.5">
                    {selectedFamily.children.length === 0 ? (
                      <p className="text-sm italic text-[var(--ink-soft)]">Keine Kinder hinterlegt.</p>
                    ) : (
                      selectedFamily.children.map((child) => (
                        <div
                          key={child.id}
                          className="flex items-center justify-between rounded-xl border border-[var(--hairline)] bg-[var(--surface-2)] px-4 py-3"
                        >
                          <div className="flex items-center gap-2">
                            <Baby className="h-4 w-4 text-[var(--accent-deep)]" />
                            <span className="font-semibold text-sm text-[var(--ink)]">
                              {child.firstName} {child.lastName}
                            </span>
                          </div>
                          {child.dateOfBirth && (
                            <span className="text-xs text-[var(--ink-soft)] font-medium">
                              Geboren: {format(new Date(child.dateOfBirth), "dd.MM.yyyy", { locale: de })}
                            </span>
                          )}
                        </div>
                      ))
                    )}
                  </div>
                </div>

                {/* Parents/Users Details */}
                <div>
                  <h4 className="text-xs font-semibold uppercase tracking-wider text-[var(--ink-muted)] mb-3 flex items-center gap-1.5">
                    <UserRound className="h-4 w-4" />
                    Eltern & Kontakte
                  </h4>
                  <div className="space-y-4">
                    {selectedFamily.parents.map((parent) => (
                      <div
                        key={parent.id}
                        className="rounded-xl border border-[var(--hairline)] bg-[var(--surface)] p-4 shadow-sm"
                      >
                        <div className="flex items-center justify-between gap-2 border-b border-[var(--hairline-soft)] pb-2 mb-3">
                          <span className="font-semibold text-[15px] text-[var(--ink)] flex items-center gap-1.5">
                            <UserRound className="h-4 w-4 text-[var(--ink-muted)]" />
                            {parent.firstName} {parent.lastName}
                          </span>
                          {parent.hasDirectoryOptIn ? (
                            <Badge variant="success">Freigegeben</Badge>
                          ) : (
                            <Badge variant="secondary">Privat</Badge>
                          )}
                        </div>

                        {parent.hasDirectoryOptIn ? (
                          <div className="space-y-2.5 text-sm text-[var(--ink-soft)]">
                            {parent.email && (
                              <a
                                href={`mailto:${parent.email}`}
                                className="flex items-center gap-2.5 hover:text-[var(--accent-deep)]"
                              >
                                <Mail className="h-4 w-4 text-[var(--ink-muted)] shrink-0" />
                                <span className="break-all">{parent.email}</span>
                              </a>
                            )}
                            {parent.phone ? (
                              <a
                                href={`tel:${parent.phone}`}
                                className="flex items-center gap-2.5 hover:text-[var(--accent-deep)]"
                              >
                                <Phone className="h-4 w-4 text-[var(--ink-muted)] shrink-0" />
                                <span>{parent.phone}</span>
                              </a>
                            ) : (
                              <div className="flex items-center gap-2.5 italic text-[var(--ink-faint)]">
                                <Phone className="h-4 w-4 text-[var(--ink-muted)] shrink-0" />
                                <span>Keine Telefonnummer hinterlegt</span>
                              </div>
                            )}

                            {/* Address details */}
                            {(parent.street || parent.postalCode || parent.city) && (
                              <div className="flex items-start gap-2.5 border-t border-[var(--hairline-soft)] pt-2.5 mt-2.5">
                                <MapPin className="h-4 w-4 text-[var(--ink-muted)] shrink-0 mt-0.5" />
                                <div>
                                  {parent.street && <p>{parent.street}</p>}
                                  {(parent.postalCode || parent.city) && (
                                    <p>
                                      {parent.postalCode} {parent.city}
                                    </p>
                                  )}
                                </div>
                              </div>
                            )}
                          </div>
                        ) : (
                          <p className="text-xs italic text-[var(--ink-faint)]">
                            Dieser Kontakt hat seine Daten nicht für das Adressbuch freigegeben.
                          </p>
                        )}

                        {parent.duties.length > 0 && (
                          <div className="mt-3 border-t border-[var(--hairline-soft)] pt-3 flex flex-wrap gap-1.5">
                            {parent.duties.map((duty) => (
                              <Badge
                                key={duty.id}
                                variant="outline"
                                className="border-[var(--accent-mid)] bg-[var(--accent-soft)] text-[var(--accent-deep)] text-[10px]"
                              >
                                {duty.name}
                              </Badge>
                            ))}
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </>
          )}
        </DialogContent>
      </Dialog>

      {/* Global Privacy settings dialog */}
      <Dialog open={privacyDialogOpen} onOpenChange={setPrivacyDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <ShieldCheck className="h-5 w-5 text-[var(--accent-deep)]" />
              Sichtbarkeit & Datenschutz
            </DialogTitle>
            <DialogDescription className="mt-2 text-sm leading-6">
              Deine Privatsphäre ist uns wichtig. In diesem Adressbuch werden Kontaktdaten
              nur für Haushalte angezeigt, die dem Opt-in für das interne Kita-Adressbuch
              explizit zugestimmt haben.
              <br />
              <br />
              Du kannst deine eigene Zustimmung sowie deine E-Mail-Adresse und Telefonnummer
              jederzeit in deinen persönlichen Profileinstellungen einsehen und anpassen.
            </DialogDescription>
          </DialogHeader>
          <div className="flex justify-end gap-3 mt-4">
            <Button variant="ghost" onClick={() => setPrivacyDialogOpen(false)}>
              Schließen
            </Button>
            <a href="/dashboard/profil">
              <Button>Zu den Profileinstellungen</Button>
            </a>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
}

function DirectoryMetric({ label, value }: { label: string; value: number }) {
  return (
    <span className="inline-flex h-9 items-center gap-2 rounded-full border border-[var(--hairline)] bg-[var(--surface)] px-3 text-[13px] font-semibold text-[var(--ink-soft)]">
      <span className="text-[var(--ink)] tabular-nums">{value}</span>
      {label}
    </span>
  );
}
