function toDateInputValue(d: Date | null | undefined): string {
  if (!d) return "";
  return new Date(d).toISOString().slice(0, 10);
}

export function TierExtrasFields({
  defaults,
}: {
  defaults?: {
    addOns?: { label: string; labelEn: string; priceSurcharge: number }[];
    promoPrice?: number | null;
    promoLabel?: string;
    promoFrom?: Date | string | null;
    promoUntil?: Date | string | null;
  };
}) {
  const addOnsText = (defaults?.addOns || []).map((a) => `${a.label} | ${a.priceSurcharge}`).join("\n");
  const addOnsTextEn = (defaults?.addOns || []).map((a) => a.labelEn).join("\n");

  return (
    <details className="border-t border-white/10 pt-3">
      <summary className="text-xs uppercase tracking-[0.08em] text-[var(--rk-ink-muted)] cursor-pointer hover:text-[var(--rk-ink)]">
        Zusatzoptionen &amp; Aktionspreis ▾
      </summary>
      <div className="mt-3 flex flex-col gap-3">
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <label className="flex flex-col gap-1 text-sm">
            <span className="text-xs uppercase tracking-[0.08em] text-[var(--rk-ink-muted)]">
              Zusatzoptionen (DE) — eine pro Zeile: „Label | Preis"
            </span>
            <textarea
              name="addOns"
              defaultValue={addOnsText}
              rows={3}
              placeholder={"Express-Bearbeitung | 50\nZusätzliches Outfit | 30"}
              className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50 resize-y font-mono"
            />
          </label>
          <label className="flex flex-col gap-1 text-sm">
            <span className="text-xs uppercase tracking-[0.08em] text-[var(--rk-ink-muted)]">
              Zusatzoptionen (EN) — nur Label, gleiche Reihenfolge
            </span>
            <textarea
              name="addOnsEn"
              defaultValue={addOnsTextEn}
              rows={3}
              placeholder={"Express editing\nExtra outfit"}
              className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50 resize-y font-mono"
            />
          </label>
        </div>

        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
          <label className="flex flex-col gap-1 text-sm">
            <span className="text-xs uppercase tracking-[0.08em] text-[var(--rk-ink-muted)]">Aktionspreis in €</span>
            <input
              name="promoPrice"
              type="number"
              min="0"
              step="1"
              defaultValue={defaults?.promoPrice ?? ""}
              className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
            />
          </label>
          <label className="flex flex-col gap-1 text-sm">
            <span className="text-xs uppercase tracking-[0.08em] text-[var(--rk-ink-muted)]">Aktions-Label</span>
            <input
              name="promoLabel"
              type="text"
              defaultValue={defaults?.promoLabel ?? ""}
              placeholder="z. B. Nur im Dezember"
              className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
            />
          </label>
          <label className="flex flex-col gap-1 text-sm">
            <span className="text-xs uppercase tracking-[0.08em] text-[var(--rk-ink-muted)]">Aktion ab</span>
            <input
              name="promoFrom"
              type="date"
              defaultValue={toDateInputValue(defaults?.promoFrom as Date)}
              className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
            />
          </label>
          <label className="flex flex-col gap-1 text-sm">
            <span className="text-xs uppercase tracking-[0.08em] text-[var(--rk-ink-muted)]">Aktion bis</span>
            <input
              name="promoUntil"
              type="date"
              defaultValue={toDateInputValue(defaults?.promoUntil as Date)}
              className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
            />
          </label>
        </div>
        <p className="text-[0.65rem] text-[var(--rk-ink-muted)]">
          Aktionspreis ohne Zeitraum gilt sofort und unbegrenzt. Zeitraum ohne Aktionspreis wird ignoriert.
        </p>
      </div>
    </details>
  );
}