"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { setOrderShootDateAction } from "@/lib/actions/admin";

function toLocalInputValue(iso: string | null): string {
  if (!iso) return "";
  const d = new Date(iso);
  const pad = (n: number) => String(n).padStart(2, "0");
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
}

// Gleiches Aussehen wie Field aus components/auth/RegisterForm — dort aber
// unkontrolliert (nur defaultValue); hier bewusst kontrolliert, weil
// save() den aktuellen Wert synchron braucht, ohne extra ein <form> drumzubauen.
function AddressField({
  label,
  value,
  onChange,
  disabled,
  className,
}: {
  label: string;
  value: string;
  onChange: (v: string) => void;
  disabled?: boolean;
  className?: string;
}) {
  return (
    <label className={`flex flex-col gap-1.5 text-sm ${className ?? ""}`}>
      <span className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">{label}</span>
      <input
        type="text"
        value={value}
        disabled={disabled}
        onChange={(e) => onChange(e.target.value)}
        className="bg-transparent border border-white/15 rounded-lg px-3.5 py-2.5 text-[var(--rk-ink)] focus:outline-none focus:border-white/50 transition-colors disabled:opacity-50"
      />
    </label>
  );
}

export function ShootDatePanel({
  orderId,
  shootDate,
  shootEndDate,
  eventStreet,
  eventPostCode,
  eventCity,
  eventCountryCode,
  eventAddressNote,
  earlyDateRequested,
  earlyDateReason,
}: {
  orderId: string;
  shootDate: string | null;
  shootEndDate: string | null;
  eventStreet: string;
  eventPostCode: string;
  eventCity: string;
  eventCountryCode: string;
  eventAddressNote?: string;
  earlyDateRequested?: boolean;
  earlyDateReason?: string;
}) {
  const [pending, startTransition] = useTransition();
  const [value, setValue] = useState(toLocalInputValue(shootDate));
  const [endValue, setEndValue] = useState(toLocalInputValue(shootEndDate));
  const [street, setStreet] = useState(eventStreet);
  const [postCode, setPostCode] = useState(eventPostCode);
  const [city, setCity] = useState(eventCity);
  const [countryCode, setCountryCode] = useState(eventCountryCode || "DE");
  const [addressNote, setAddressNote] = useState(eventAddressNote || "");
  const [conflict, setConflict] = useState<string | null>(null);
  const [leadTimeWarningWeeks, setLeadTimeWarningWeeks] = useState<number | null>(null);
  const router = useRouter();

  function save(next: string, nextEnd: string, confirmLeadTimeOverride = false) {
    startTransition(async () => {
      const result = await setOrderShootDateAction(
        orderId,
        next,
        nextEnd,
        { street, postCode, city, countryCode, note: addressNote },
        confirmLeadTimeOverride
      );
      if (result.leadTimeWarningWeeks) {
        setLeadTimeWarningWeeks(result.leadTimeWarningWeeks);
        return;
      }
      setLeadTimeWarningWeeks(null);
      setConflict(result.conflict ?? null);
      router.refresh();
    });
  }

  const endBeforeStart = Boolean(value && endValue && endValue <= value);

  return (
    <div className="border border-white/10 rounded-xl p-5">
      <p className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)] mb-3">Termin</p>
      {earlyDateRequested && (
        <div className="mb-3 text-xs border border-amber-400/40 rounded-lg px-3 py-2 text-amber-400">
          ⚠ Kunde hat um einen früheren Termin gebeten{earlyDateReason ? `: „${earlyDateReason}"` : "."}
        </div>
      )}
      <div className="flex flex-wrap items-end gap-2">
        <label className="flex flex-col gap-1 text-xs">
          <span className="text-[var(--rk-ink-muted)]">Von</span>
          <input
            type="datetime-local"
            value={value}
            disabled={pending}
            onChange={(e) => setValue(e.target.value)}
            className="bg-[var(--rk-bg)] border border-white/15 rounded-lg px-2.5 py-1.5 text-xs text-[var(--rk-ink)] focus:outline-none focus:border-white/50 disabled:opacity-50"
          />
        </label>
        <label className="flex flex-col gap-1 text-xs">
          <span className="text-[var(--rk-ink-muted)]">Bis (optional)</span>
          <input
            type="datetime-local"
            value={endValue}
            disabled={pending}
            onChange={(e) => setEndValue(e.target.value)}
            className="bg-[var(--rk-bg)] border border-white/15 rounded-lg px-2.5 py-1.5 text-xs text-[var(--rk-ink)] focus:outline-none focus:border-white/50 disabled:opacity-50"
          />
        </label>
        <button
          disabled={pending || !value || endBeforeStart}
          onClick={() => save(value, endValue)}
          className="text-xs border border-white/30 rounded-lg px-3 py-1.5 hover:border-white disabled:opacity-50"
        >
          Speichern
        </button>
        {shootDate && (
          <button
            disabled={pending}
            onClick={() => {
              setValue("");
              setEndValue("");
              save("", "");
            }}
            className="text-xs text-red-400/80 hover:text-red-400 transition-colors disabled:opacity-50"
          >
            Termin entfernen
          </button>
        )}
      </div>

      <div className="flex flex-col gap-3 mt-4 max-w-md">
        <span className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">
          Adresse (Treffpunkt für den Kunden, erscheint auch im Kalender)
        </span>
        <AddressField label="Straße & Hausnummer" value={street} onChange={setStreet} disabled={pending} />
        <div className="grid grid-cols-[8rem_1fr] gap-4">
          <AddressField label="PLZ" value={postCode} onChange={setPostCode} disabled={pending} />
          <AddressField label="Ort" value={city} onChange={setCity} disabled={pending} />
        </div>
        <AddressField
          label="Land (Ländercode, z. B. DE)"
          value={countryCode}
          onChange={(v) => setCountryCode(v.toUpperCase())}
          disabled={pending}
        />
        <label className="flex flex-col gap-1.5 text-sm">
          <span className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">
            Notiz zum Treffpunkt (nur intern, Team-Ansicht)
          </span>
          <textarea
            value={addressNote}
            disabled={pending}
            onChange={(e) => setAddressNote(e.target.value)}
            rows={2}
            maxLength={500}
            placeholder="z. B. Parkmöglichkeit, Zugang, Klingel …"
            className="bg-transparent border border-white/15 rounded-lg px-3.5 py-2.5 text-[var(--rk-ink)] focus:outline-none focus:border-white/50 transition-colors disabled:opacity-50 resize-y"
          />
        </label>
      </div>

      {endBeforeStart && <p className="mt-2 text-xs text-amber-400">„Bis" muss nach „Von" liegen.</p>}
      {leadTimeWarningWeeks !== null && (
        <div className="mt-2 text-xs border border-amber-400/40 rounded-lg px-3 py-2 text-amber-400 flex flex-wrap items-center gap-2">
          <span>
            ⚠ Dieser Termin liegt unter der Mindestvorlaufzeit von {leadTimeWarningWeeks} Woche
            {leadTimeWarningWeeks === 1 ? "" : "n"} (siehe Einstellungen). Nur speichern, wenn das Team das bewusst
            entschieden hat.
          </span>
          <button
            type="button"
            disabled={pending}
            onClick={() => save(value, endValue, true)}
            className="shrink-0 border border-amber-400/50 rounded-lg px-2.5 py-1 hover:border-amber-400 disabled:opacity-50"
          >
            Ausnahme bestätigen & trotzdem speichern
          </button>
        </div>
      )}
      {conflict && (
        <p className="mt-2 text-xs text-amber-400">
          ⚠ Terminkonflikt: {conflict} Termin wurde trotzdem gespeichert — nur ein Hinweis.
        </p>
      )}
      <p className="mt-2 text-xs text-[var(--rk-ink-muted)]">
        Erscheint im <a href="/de/admin/calendar" className="underline hover:text-[var(--rk-ink)]">Kalender</a>, sobald ein Termin gesetzt ist.
        {" "}Ohne „Bis"-Zeit wird im Kalender/Export eine Stunde als Standarddauer angenommen. Die Adresse wird dem
        Kunden auf der Auftragsseite angezeigt und als Ort in Google Kalender übertragen (falls verbunden).
      </p>
    </div>
  );
}