"use client";

import { useState } from "react";
import Link from "next/link";
import { DeleteEventButton } from "@/components/admin/DeleteEventButton";

export type DayItem = {
  id: string;
  label: string;
  color: string;
  href: string | null;
  tooltip: string;
  deletable: boolean;
};

// Eine Tageszelle im Monatsraster. Zeigt bis zu 3 Einträge; hat der Tag mehr,
// öffnet ein Klick auf die Zelle einen Dialog mit der vollständigen Liste
// (vorher endete es bei "+N mehr" ohne Möglichkeit, den Rest zu sehen).
export function CalendarDay({
  dayNum,
  dateLabel,
  isToday,
  inMonth,
  items,
  deleteAction,
}: {
  dayNum: number;
  dateLabel: string;
  isToday: boolean;
  inMonth: boolean;
  items: DayItem[];
  deleteAction: (eventId: string) => Promise<void>;
}) {
  const [open, setOpen] = useState(false);
  const hasMore = items.length > 3;

  const chip = (item: DayItem, full: boolean) =>
    item.href ? (
      <Link
        key={item.id}
        href={item.href}
        title={item.tooltip}
        onClick={(e) => e.stopPropagation()}
        className="block rounded px-1.5 py-1 text-[0.65rem] leading-tight truncate transition-opacity hover:opacity-80"
        style={{ backgroundColor: `${item.color}22`, color: item.color }}
      >
        {item.label}
      </Link>
    ) : (
      <span
        key={item.id}
        title={item.tooltip}
        className="flex items-center gap-1 rounded px-1.5 py-1 text-[0.65rem] leading-tight"
        style={{ backgroundColor: `${item.color}22`, color: item.color }}
      >
        <span className={full ? "flex-1" : "flex-1 truncate"}>{item.label}</span>
        {item.deletable && (
          <DeleteEventButton eventId={item.id.replace("event-", "")} action={deleteAction} compact />
        )}
      </span>
    );

  return (
    <>
      <div
        onClick={() => items.length > 0 && setOpen(true)}
        className={`flex min-h-[6rem] flex-col gap-1 rounded-lg border p-1.5 ${
          isToday ? "border-white/40 bg-white/5" : "border-white/10"
        } ${inMonth ? "" : "opacity-30"} ${items.length ? "cursor-pointer hover:border-white/25" : ""}`}
      >
        <span className="text-[0.65rem] text-[var(--rk-ink-muted)]">{dayNum}</span>
        {items.slice(0, 3).map((it) => chip(it, false))}
        {hasMore && (
          <span className="mt-auto text-[0.6rem] text-[var(--rk-accent)]">+{items.length - 3} mehr</span>
        )}
      </div>

      {open && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4" role="dialog" aria-modal="true" aria-label={dateLabel}>
          <div className="absolute inset-0 bg-black/70" onClick={() => setOpen(false)} />
          <div className="relative w-full max-w-sm rounded-2xl border border-white/10 bg-[var(--rk-surface)] p-5 shadow-[0_30px_80px_-20px_rgba(0,0,0,0.7)]">
            <div className="flex items-center justify-between gap-2">
              <h3 className="text-sm font-medium text-[var(--rk-ink)]">{dateLabel}</h3>
              <button
                type="button"
                onClick={() => setOpen(false)}
                aria-label="Schließen"
                className="text-[var(--rk-ink-muted)] transition-colors hover:text-[var(--rk-ink)]"
              >
                ✕
              </button>
            </div>
            <div className="mt-3 flex flex-col gap-1.5">
              {items.length === 0 ? (
                <p className="text-xs text-[var(--rk-ink-muted)]">Keine Einträge.</p>
              ) : (
                items.map((it) => chip(it, true))
              )}
            </div>
          </div>
        </div>
      )}
    </>
  );
}