import { AdminEmptyState } from "@/components/admin/AdminEmptyState";
import { GrantWaitlistForm } from "@/components/admin/GrantWaitlistForm";

export type WaitlistAdminEntry = {
  id: string;
  conventionId: string;
  conventionName: string;
  conventionDateLabel: string;
  conventionLocation: string;
  conventionDays: { value: string; label: string }[];
  clientName: string;
  clientEmail: string;
  message: string;
  joinedAt: string;
  orderId: string | null;
  appointment: string | null;
};

export type DayBooking = { start: string; end: string; label: string };

// Zentrale Warteliste-Ansicht über ALLE Conventions — ein Ort zum Abarbeiten
// (genehmigen = Termin festlegen → Auftrag). Offene zuerst, Erledigte darunter.
export function AdminWaitlistList({
  entries,
  bookingsByDay = {},
}: {
  entries: WaitlistAdminEntry[];
  bookingsByDay?: Record<string, DayBooking[]>;
}) {
  const open = entries.filter((e) => !e.orderId);
  const done = entries.filter((e) => e.orderId);

  if (entries.length === 0) {
    return <AdminEmptyState message="Aktuell wartet niemand auf einen Slot." />;
  }

  return (
    <div className="flex flex-col gap-8">
      <section>
        <p className="mb-3 text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">
          Offen ({open.length})
        </p>
        {open.length === 0 ? (
          <p className="text-sm text-[var(--rk-ink-muted)]">Alles abgearbeitet — keine offenen Anfragen.</p>
        ) : (
          <div className="flex flex-col gap-3">
            {open.map((e) => (
              <div key={e.id} className="rounded-2xl border border-white/10 bg-[var(--rk-surface)] p-5">
                <p className="text-sm">
                  {e.conventionName}
                  <span className="text-[var(--rk-ink-muted)]">
                    {" · "}
                    {e.conventionDateLabel}
                    {e.conventionLocation ? ` · ${e.conventionLocation}` : ""}
                  </span>
                </p>
                <p className="mt-1 text-sm">
                  {e.clientName} <span className="text-[var(--rk-ink-muted)]">· {e.clientEmail}</span>
                </p>
                {e.message && (
                  <p className="mt-2 whitespace-pre-line rounded-lg border border-white/10 bg-black/20 p-3 text-xs text-[var(--rk-ink-muted)]">
                    {e.message}
                  </p>
                )}
                <p className="mt-2 text-[0.7rem] text-[var(--rk-ink-muted)]">Eingetragen am {e.joinedAt}</p>
                <div className="mt-3 border-t border-white/10 pt-3">
                  <GrantWaitlistForm
                    entryId={e.id}
                    defaultLocation={e.conventionLocation}
                    days={e.conventionDays}
                    bookingsByDay={bookingsByDay}
                  />
                </div>
              </div>
            ))}
          </div>
        )}
      </section>

      {done.length > 0 && (
        <section>
          <p className="mb-3 text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">
            Erledigt ({done.length})
          </p>
          <div className="flex flex-col gap-2">
            {done.map((e) => (
              <p
                key={e.id}
                className="rounded-lg border border-white/10 px-4 py-3 text-xs text-[var(--rk-ink-muted)]"
              >
                <span className="text-emerald-400">✓</span> {e.conventionName} · {e.clientName}
                {e.appointment ? ` · Termin: ${e.appointment}` : ""} ·{" "}
                <a href={`/de/admin/orders/${e.orderId}`} className="underline hover:text-[var(--rk-ink)]">
                  Zum Auftrag
                </a>
              </p>
            ))}
          </div>
        </section>
      )}
    </div>
  );
}