import Icon from "../components/Icon";
import { ZEITRAEUME } from "./cards";
import { locationOptions } from "../locationPath";

/**
 * Konfig-Dialog einer Karte – wie in HomeAssistant: ein eigener Dialog mit den
 * Optionen der Karte, statt Dropdowns im Kartenkopf. Welche Felder erscheinen,
 * bestimmt `karte.config`. Die Werte landen in den Karten-Props (bzw. `tage`
 * beim Zeitraum) und werden mit dem Layout gespeichert.
 */
export default function KartenConfig({
  karte, props: karteProps = {}, tage,
  produkte = [], locations = [], onProps, onTage, onClose,
}) {
  const felder = karte?.config || [];

  function feld(f) {
    if (f.type === "product") {
      return (
        <label key={f.key}>
          {f.label}
          <select value={karteProps[f.key] ?? ""}
            onChange={(e) => onProps({ [f.key]: e.target.value ? Number(e.target.value) : undefined })}>
            <option value="">– Artikel wählen –</option>
            {produkte.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
          </select>
        </label>
      );
    }
    if (f.type === "location") {
      return (
        <label key={f.key}>
          {f.label}{f.hint ? <span className="muted small"> ({f.hint})</span> : null}
          <select value={karteProps[f.key] ?? ""}
            onChange={(e) => onProps({ [f.key]: e.target.value || undefined })}>
            <option value="">– alle Orte –</option>
            {locationOptions(locations).map((o) => <option key={o.id} value={o.id}>{o.label}</option>)}
          </select>
        </label>
      );
    }
    if (f.type === "zeitraum") {
      return (
        <label key="zeitraum">
          {f.label}
          <select value={tage ?? karte.zeitraum} onChange={(e) => onTage(Number(e.target.value))}>
            {ZEITRAEUME.map((z) => <option key={z.tage} value={z.tage}>{z.label}</option>)}
          </select>
        </label>
      );
    }
    if (f.type === "select") {
      return (
        <label key={f.key}>
          {f.label}{f.hint ? <span className="muted small"> ({f.hint})</span> : null}
          <select value={karteProps[f.key] ?? f.default ?? ""}
            onChange={(e) => onProps({ [f.key]: e.target.value })}>
            {(f.optionen || []).map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
          </select>
        </label>
      );
    }
    if (f.type === "boolean") {
      return (
        <label key={f.key} className="check-inline">
          <input type="checkbox" checked={karteProps[f.key] ?? f.default ?? false}
            onChange={(e) => onProps({ [f.key]: e.target.checked })} />
          <span>{f.label}</span>
        </label>
      );
    }
    return null;
  }

  return (
    <div className="modal-backdrop" onClick={(e) => e.target === e.currentTarget && onClose()}>
      <div className="modal" role="dialog" aria-modal="true">
        <div className="modal-head">
          <Icon name="settings" size={18} />
          <h2>{karte?.titel} einstellen</h2>
        </div>
        <div className="modal-body" style={{ display: "grid", gap: "var(--sp-3)" }}>
          {felder.length === 0
            ? <p className="muted">Diese Karte hat keine Einstellungen.</p>
            : felder.map(feld)}
        </div>
        <div className="btn-pair">
          <button type="button" className="btn primary" onClick={onClose}>Fertig</button>
        </div>
      </div>
    </div>
  );
}