KanzlAI-mGMT/frontend/src/components/appointments/AppointmentList.tsx

"use client";

import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { api } from "@/lib/api";
import type { Appointment, Case } from "@/lib/types";
import { format, parseISO, isToday, isTomorrow, isThisWeek, isPast } from "date-fns";
import { de } from "date-fns/locale";
import { Calendar, Filter, MapPin, Trash2 } from "lucide-react";
import { toast } from "sonner";
import { useState, useMemo } from "react";

const TYPE_LABELS: Record<string, string> = {
  hearing: "Verhandlung",
  meeting: "Besprechung",
  consultation: "Beratung",
  deadline_hearing: "Fristanhorung",
  other: "Sonstiges",
};

const TYPE_COLORS: Record<string, string> = {
  hearing: "bg-blue-100 text-blue-700",
  meeting: "bg-violet-100 text-violet-700",
  consultation: "bg-emerald-100 text-emerald-700",
  deadline_hearing: "bg-amber-100 text-amber-700",
  other: "bg-neutral-100 text-neutral-600",
};

interface AppointmentListProps {
  onEdit: (appointment: Appointment) => void;
}

function groupByDate(appointments: Appointment[]): Map<string, Appointment[]> {
  const groups = new Map<string, Appointment[]>();
  for (const a of appointments) {
    const key = a.start_at.slice(0, 10);
    const group = groups.get(key) || [];
    group.push(a);
    groups.set(key, group);
  }
  return groups;
}

function formatDateLabel(dateStr: string): string {
  const d = parseISO(dateStr);
  if (isToday(d)) return "Heute";
  if (isTomorrow(d)) return "Morgen";
  return format(d, "EEEE, d. MMMM yyyy", { locale: de });
}

export function AppointmentList({ onEdit }: AppointmentListProps) {
  const queryClient = useQueryClient();
  const [caseFilter, setCaseFilter] = useState("all");
  const [typeFilter, setTypeFilter] = useState("all");

  const { data: appointments, isLoading } = useQuery({
    queryKey: ["appointments"],
    queryFn: () => api.get<Appointment[]>("/api/appointments"),
  });

  const { data: cases } = useQuery({
    queryKey: ["cases"],
    queryFn: () => api.get<{ cases: Case[]; total: number }>("/api/cases"),
  });

  const deleteMutation = useMutation({
    mutationFn: (id: string) => api.delete(`/api/appointments/${id}`),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["appointments"] });
      toast.success("Termin geloscht");
    },
    onError: () => toast.error("Fehler beim Loschen"),
  });

  const caseMap = useMemo(() => {
    const map = new Map<string, Case>();
    cases?.cases?.forEach((c) => map.set(c.id, c));
    return map;
  }, [cases]);

  const filtered = useMemo(() => {
    if (!appointments) return [];
    return appointments
      .filter((a) => {
        if (caseFilter !== "all" && a.case_id !== caseFilter) return false;
        if (typeFilter !== "all" && a.appointment_type !== typeFilter) return false;
        return true;
      })
      .sort((a, b) => a.start_at.localeCompare(b.start_at));
  }, [appointments, caseFilter, typeFilter]);

  const grouped = useMemo(() => groupByDate(filtered), [filtered]);

  const counts = useMemo(() => {
    if (!appointments) return { today: 0, thisWeek: 0, total: 0 };
    let today = 0;
    let thisWeek = 0;
    for (const a of appointments) {
      const d = parseISO(a.start_at);
      if (isToday(d)) today++;
      if (isThisWeek(d, { weekStartsOn: 1 })) thisWeek++;
    }
    return { today, thisWeek, total: appointments.length };
  }, [appointments]);

  if (isLoading) {
    return (
      <div className="space-y-3">
        {[1, 2, 3, 4].map((i) => (
          <div key={i} className="h-16 animate-pulse rounded-lg bg-neutral-100" />
        ))}
      </div>
    );
  }

  return (
    <div className="space-y-4">
      {/* Summary cards */}
      <div className="grid grid-cols-3 gap-3">
        <div className="rounded-lg border border-neutral-200 bg-white p-3">
          <div className="text-2xl font-semibold text-neutral-900">{counts.today}</div>
          <div className="text-xs text-neutral-500">Heute</div>
        </div>
        <div className="rounded-lg border border-neutral-200 bg-white p-3">
          <div className="text-2xl font-semibold text-neutral-900">{counts.thisWeek}</div>
          <div className="text-xs text-neutral-500">Diese Woche</div>
        </div>
        <div className="rounded-lg border border-neutral-200 bg-white p-3">
          <div className="text-2xl font-semibold text-neutral-900">{counts.total}</div>
          <div className="text-xs text-neutral-500">Gesamt</div>
        </div>
      </div>

      {/* Filters */}
      <div className="flex items-center gap-3">
        <div className="flex items-center gap-1.5 text-sm text-neutral-500">
          <Filter className="h-3.5 w-3.5" />
          <span>Filter:</span>
        </div>
        <select
          value={typeFilter}
          onChange={(e) => setTypeFilter(e.target.value)}
          className="rounded-md border border-neutral-200 bg-white px-2.5 py-1 text-sm text-neutral-700"
        >
          <option value="all">Alle Typen</option>
          {Object.entries(TYPE_LABELS).map(([value, label]) => (
            <option key={value} value={value}>
              {label}
            </option>
          ))}
        </select>
        {cases?.cases && cases.cases.length > 0 && (
          <select
            value={caseFilter}
            onChange={(e) => setCaseFilter(e.target.value)}
            className="rounded-md border border-neutral-200 bg-white px-2.5 py-1 text-sm text-neutral-700"
          >
            <option value="all">Alle Akten</option>
            {cases.cases.map((c) => (
              <option key={c.id} value={c.id}>
                {c.case_number} — {c.title}
              </option>
            ))}
          </select>
        )}
      </div>

      {/* Grouped list */}
      {filtered.length === 0 ? (
        <div className="rounded-lg border border-neutral-200 bg-white p-8 text-center">
          <Calendar className="mx-auto h-8 w-8 text-neutral-300" />
          <p className="mt-2 text-sm text-neutral-500">Keine Termine gefunden</p>
        </div>
      ) : (
        <div className="space-y-4">
          {Array.from(grouped.entries()).map(([dateKey, dayAppointments]) => {
            const dateIsPast = isPast(parseISO(dateKey + "T23:59:59"));
            return (
              <div key={dateKey}>
                <div className={`mb-2 text-xs font-medium uppercase tracking-wider ${dateIsPast ? "text-neutral-400" : "text-neutral-600"}`}>
                  {formatDateLabel(dateKey)}
                </div>
                <div className="space-y-1.5">
                  {dayAppointments.map((appt) => {
                    const caseInfo = appt.case_id ? caseMap.get(appt.case_id) : null;
                    const typeBadge = appt.appointment_type
                      ? TYPE_COLORS[appt.appointment_type] ?? TYPE_COLORS.other
                      : null;
                    const typeLabel = appt.appointment_type
                      ? TYPE_LABELS[appt.appointment_type] ?? appt.appointment_type
                      : null;

                    return (
                      <div
                        key={appt.id}
                        onClick={() => onEdit(appt)}
                        className={`flex cursor-pointer items-start gap-3 rounded-lg border px-4 py-3 transition-colors hover:bg-neutral-50 ${
                          dateIsPast
                            ? "border-neutral-150 bg-neutral-50/50"
                            : "border-neutral-200 bg-white"
                        }`}
                      >
                        <div className="shrink-0 pt-0.5 text-center">
                          <div className="text-xs font-medium text-neutral-900">
                            {format(parseISO(appt.start_at), "HH:mm")}
                          </div>
                          {appt.end_at && (
                            <div className="text-[10px] text-neutral-400">
                              {format(parseISO(appt.end_at), "HH:mm")}
                            </div>
                          )}
                        </div>
                        <div className="min-w-0 flex-1">
                          <div className="flex items-center gap-2">
                            <span className={`truncate text-sm font-medium ${dateIsPast ? "text-neutral-500" : "text-neutral-900"}`}>
                              {appt.title}
                            </span>
                            {typeBadge && typeLabel && (
                              <span className={`shrink-0 rounded px-1.5 py-0.5 text-xs font-medium ${typeBadge}`}>
                                {typeLabel}
                              </span>
                            )}
                          </div>
                          <div className="mt-0.5 flex items-center gap-2 text-xs text-neutral-500">
                            {appt.location && (
                              <span className="flex items-center gap-0.5">
                                <MapPin className="h-3 w-3" />
                                {appt.location}
                              </span>
                            )}
                            {appt.location && caseInfo && <span>·</span>}
                            {caseInfo && (
                              <span className="truncate">
                                {caseInfo.case_number} — {caseInfo.title}
                              </span>
                            )}
                          </div>
                          {appt.description && (
                            <p className="mt-1 truncate text-xs text-neutral-400">
                              {appt.description}
                            </p>
                          )}
                        </div>
                        <button
                          onClick={(e) => {
                            e.stopPropagation();
                            deleteMutation.mutate(appt.id);
                          }}
                          disabled={deleteMutation.isPending}
                          title="Loschen"
                          className="shrink-0 rounded-md p-1.5 text-neutral-300 hover:bg-red-50 hover:text-red-500"
                        >
                          <Trash2 className="h-3.5 w-3.5" />
                        </button>
                      </div>
                    );
                  })}
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}