"use client";

import { useMemo, useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { grantWaitlistEntryAction } from "@/lib/actions/conventions";

type DayOption = { value: string; label: string };
type DayBooking = { start: string; end: string; label: string };

// <option> im nativen Popup erbt sonst helle Schrift auf hellem Grund -> unlesbar.
const optionStyle = { backgroundColor: "#17171a", color: "#f5f5f4" };

// "HH:MM"-Strings lassen sich direkt lexikografisch vergleichen.
function overlaps(aStart: string, aEnd: string, bStart: string, bEnd: string) {
  if (!aStart || !aEnd) return false;
  const bE = bEnd || bStart;
  return aStart < bE && bStart < aEnd;
}

// Genehmigt einen Warteliste-Eintrag: fixer Termin (Datum + Uhrzeit) →
// grantWaitlistEntryAction legt daraus direkt einen Auftrag an. Der Kunde
// erstellt keinen eigenen Auftrag mehr. Das Datum ist auf die Convention-Tage
// beschränkt (Dropdown), und für den gewählten Tag werden bereits geplante
// Termine als Kollisions-Check angezeigt.
export function GrantWaitlistForm({
  entryId,
  defaultLocation,
  days = [],
  bookingsByDay = {},
}: {
  entryId: string;
  defaultLocation: string;
  days?: DayOption[];
  bookingsByDay?: Record<string, DayBooking[]>;
}) {
  const [pending, startTransition] = useTransition();
  const [error, setError] = useState<string | null>(null);
  const router = useRouter();

  const [date, setDate] = useState(days.length === 1 ? days[0].value : "");
  const [startTime, setStartTime] = useState("");
  const [endTime, setEndTime] = useState("");

  const dayBookings = useMemo(() => (date ? bookingsByDay[date] ?? [] : []), [date, bookingsByDay]);
  const hasClash = useMemo(
    () => dayBookings.some((b) => overlaps(startTime, endTime, b.start, b.end)),
    [dayBookings, startTime, endTime]
  );

  function submit(form: HTMLFormElement) {
    const data = new FormData(form);
    startTransition(async () => {
      const res = await grantWaitlistEntryAction(entryId, data);
      if (res?.error) {
        setError(res.error);
        return;
      }
      setError(null);
      router.refresh();
    });
  }

  const inputCls =
    "rounded-lg border border-white/15 bg-transparent px-2.5 py-1.5 text-xs text-[var(--rk-ink)] focus:border-white/50 focus:outline-none";

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        submit(e.currentTarget);
      }}
      className="flex flex-col gap-2"
    >
      <p className="text-xs text-[var(--rk-ink-muted)]">
        Genehmigen: Termin festlegen — es wird direkt ein Auftrag mit diesem Termin erstellt und der Kunde benachrichtigt.
      </p>
      <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
        <label className="flex flex-col gap-1 text-[0.7rem] text-[var(--rk-ink-muted)]">
          Datum
          {days.length > 0 ? (
            <select
              name="date"
              required
              value={date}
              onChange={(e) => setDate(e.target.value)}
              className={`${inputCls} [color-scheme:dark]`}
            >
              {days.length !== 1 && (
                <option value="" disabled style={optionStyle}>
                  Tag wählen …
                </option>
              )}
              {days.map((d) => (
                <option key={d.value} value={d.value} style={optionStyle}>
                  {d.label}
                </option>
              ))}
            </select>
          ) : (
            <input
              name="date"
              type="date"
              required
              value={date}
              onChange={(e) => setDate(e.target.value)}
              className={`${inputCls} [color-scheme:dark]`}
            />
          )}
        </label>
        <label className="flex flex-col gap-1 text-[0.7rem] text-[var(--rk-ink-muted)]">
          Von
          <input
            name="startTime"
            type="time"
            required
            value={startTime}
            onChange={(e) => setStartTime(e.target.value)}
            className={`${inputCls} [color-scheme:dark]`}
          />
        </label>
        <label className="flex flex-col gap-1 text-[0.7rem] text-[var(--rk-ink-muted)]">
          Bis (optional)
          <input
            name="endTime"
            type="time"
            value={endTime}
            onChange={(e) => setEndTime(e.target.value)}
            className={`${inputCls} [color-scheme:dark]`}
          />
        </label>
        <label className="flex flex-col gap-1 text-[0.7rem] text-[var(--rk-ink-muted)]">
          Ort
          <input name="location" defaultValue={defaultLocation} className={inputCls} />
        </label>
      </div>

      {date && (
        <div
          className={`rounded-lg border p-2.5 text-[0.7rem] ${
            hasClash ? "border-red-400/40 bg-red-400/5" : "border-white/10 bg-black/20"
          }`}
        >
          {dayBookings.length === 0 ? (
            <span className="text-emerald-400/80">✓ Noch keine Termine an diesem Tag.</span>
          ) : (
            <>
              <p className="mb-1 text-[var(--rk-ink-muted)]">Schon geplant an diesem Tag:</p>
              <ul className="flex flex-col gap-0.5">
                {dayBookings.map((b, i) => {
                  const clash = overlaps(startTime, endTime, b.start, b.end);
                  return (
                    <li key={i} className={clash ? "text-red-400" : "text-[var(--rk-ink)]"}>
                      {b.start}
                      {b.end ? `–${b.end}` : ""}
                      {b.label ? ` · ${b.label}` : ""}
                      {clash ? " · Überschneidung" : ""}
                    </li>
                  );
                })}
              </ul>
              {hasClash && (
                <p className="mt-1 text-red-400">⚠ Die gewählte Zeit überschneidet sich mit einem bestehenden Termin.</p>
              )}
            </>
          )}
        </div>
      )}

      {error && <p className="text-xs text-red-400">{error}</p>}
      <button
        type="submit"
        disabled={pending}
        className="self-start rounded-lg bg-[var(--rk-accent)] px-3.5 py-1.5 text-[0.7rem] font-semibold uppercase tracking-[0.1em] text-[#141413] transition-opacity hover:opacity-90 disabled:opacity-50"
      >
        {pending ? "…" : "Auftrag erstellen"}
      </button>
    </form>
  );
}