/* AZIS 6.0 · Kalender-Tab ================================================
   Dienstliche Terminverwaltung — Uebungen, Lehrgaenge, Urlaub, Sonstiges.
   Speicherung liegt im verschluesselten Pool (state.events) via app.js
   CRUD. Dieser Screen ist reines UI + Bridge-Aufrufe.

   6.7.1: EventDialog wird von root.jsx auf .app-Ebene gerendert
   (ausserhalb von .scroll), damit der Subscreen die AppBar ueberdeckt.
   KalenderScreen dispatcht via CustomEvents, welche Events geoeffnet
   werden sollen — analog zum tour-go-tab-Pattern.
   ======================================================================= */

(function () {
  "use strict";

  const CATS = {
    uebung:     { label: "Übung",        short: "Üb",  color: "var(--danger)"  },
    lehrgang:   { label: "Lehrgang",     short: "Lg",  color: "var(--info)"    },
    urlaub:     { label: "Urlaub",       short: "Ur",  color: "var(--warning)" },
    sonstiges:  { label: "Sonstiges",    short: "So",  color: "var(--accent)"  },
  };
  const CAT_KEYS = ["uebung", "lehrgang", "urlaub", "sonstiges"];
  const ANZUG_PRESETS = ["Feldanzug", "Kampfanzug", "Dienstanzug", "gr. Dienstanzug"];

  function pad(n) { return String(n).padStart(2, "0"); }
  function isoOf(date) {
    return date.getFullYear() + "-" + pad(date.getMonth() + 1) + "-" + pad(date.getDate());
  }
  function dateFromIso(iso) {
    if (!iso || typeof iso !== "string") return null;
    const [y, m, d] = iso.split("-").map(Number);
    if (!y || !m || !d) return null;
    return new Date(y, m - 1, d);
  }
  function isoAddDays(iso, delta) {
    const d = dateFromIso(iso);
    if (!d) return iso;
    d.setDate(d.getDate() + delta);
    return isoOf(d);
  }
  function fmtRange(fromIso, toIso, fromTime, toTime) {
    if (!fromIso) return "";
    const single = !toIso || toIso === fromIso;
    const label = single ? fmtDay(fromIso) : (fmtDay(fromIso) + " – " + fmtDay(toIso));
    if (fromTime || toTime) {
      const t = fromTime && toTime ? (fromTime + "–" + toTime)
              : fromTime ? ("ab " + fromTime)
              : ("bis " + toTime);
      return label + " · " + t;
    }
    return label;
  }
  function fmtDay(iso) {
    const d = dateFromIso(iso);
    if (!d) return iso;
    const dowShort = ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"][d.getDay()];
    return dowShort + " " + pad(d.getDate()) + "." + pad(d.getMonth() + 1) + "." + d.getFullYear();
  }

  const EMPTY_EVENT = {
    id: "",
    category: "uebung",
    title: "",
    fromDate: "",
    toDate: "",
    fromTime: "",
    toTime: "",
    anzug: "",
    ort: "",
    notes: "",
  };

  /* ---------- KalenderScreen ---------- */
  function KalenderScreen() {
    const now = new Date();
    const [viewY, setViewY] = useState(now.getFullYear());
    const [viewM, setViewM] = useState(now.getMonth());
    const [selectedIso, setSelectedIso] = useState(isoOf(now));
    const [events, setEvents] = useState(() => (window.AZIS?.getEvents?.() || []));

    // Nach jeder Aenderung frisch aus dem Pool ziehen.
    const refresh = React.useCallback(() => {
      try { setEvents(window.AZIS?.getEvents?.() || []); } catch { setEvents([]); }
    }, []);
    // Wenn der Dialog irgendwo schliesst und Aenderungen gemacht wurden,
    // reloadet root.jsx den State und feuert das Event.
    useEffect(() => {
      const onChange = () => refresh();
      window.addEventListener("kal:events-changed", onChange);
      return () => window.removeEventListener("kal:events-changed", onChange);
    }, [refresh]);

    const cycleMonth = (dir) => {
      const d = new Date(viewY, viewM + dir, 1);
      setViewY(d.getFullYear());
      setViewM(d.getMonth());
    };
    const jumpToday = () => {
      const t = new Date();
      setViewY(t.getFullYear());
      setViewM(t.getMonth());
      setSelectedIso(isoOf(t));
    };

    const cells = React.useMemo(() => {
      const first = new Date(viewY, viewM, 1);
      const firstDow = (first.getDay() + 6) % 7; // Mo=0..So=6
      const start = new Date(viewY, viewM, 1 - firstDow);
      const out = [];
      for (let i = 0; i < 42; i++) {
        const d = new Date(start);
        d.setDate(start.getDate() + i);
        out.push({
          iso: isoOf(d),
          dom: d.getDate(),
          inMonth: d.getMonth() === viewM,
          weekend: d.getDay() === 0 || d.getDay() === 6,
        });
      }
      return out;
    }, [viewY, viewM]);

    const eventsPerDay = React.useMemo(() => {
      const map = new Map();
      events.forEach((e) => {
        if (!e.fromDate) return;
        let cur = e.fromDate;
        const to = e.toDate || e.fromDate;
        while (cur <= to) {
          const arr = map.get(cur) || [];
          arr.push(e);
          map.set(cur, arr);
          cur = isoAddDays(cur, 1);
          if (arr.length > 400) break;
        }
      });
      return map;
    }, [events]);

    const monthEvents = React.useMemo(() => {
      const firstIso = viewY + "-" + pad(viewM + 1) + "-01";
      const lastDom = new Date(viewY, viewM + 1, 0).getDate();
      const lastIso = viewY + "-" + pad(viewM + 1) + "-" + pad(lastDom);
      return events.filter((e) => !(e.toDate < firstIso || e.fromDate > lastIso));
    }, [events, viewY, viewM]);

    const requestOpenEvent = (evt) => {
      try {
        window.dispatchEvent(new CustomEvent("kal:open-event", {
          detail: { event: evt, defaultIso: selectedIso },
        }));
      } catch {}
    };

    const monthLabel = (typeof AZIS !== "undefined" && Array.isArray(AZIS.MONTHS))
      ? AZIS.MONTHS[viewM] : "Monat";

    return (
      <div className="kal stagger" style={{ animationDelay: "40ms" }}>
        <div className="kal__head">
          <div className="mnav">
            <button onClick={() => cycleMonth(-1)} aria-label="Vorheriger Monat">‹</button>
            <span className="mnav__label">{monthLabel} {viewY}</span>
            <button onClick={() => cycleMonth(1)} aria-label="Nächster Monat">›</button>
          </div>
          <div className="kal__head-actions">
            <button className="kal__today" onClick={jumpToday}>Heute</button>
            <button className="kal__new" onClick={() => requestOpenEvent(null)}>
              <Icon name="plus" />
              <span>Neu</span>
            </button>
          </div>
        </div>

        <div className="kal__grid card">
          <div className="kal__dowrow">
            {["Mo","Di","Mi","Do","Fr","Sa","So"].map((d) => (
              <div key={d} className="kal__dow">{d}</div>
            ))}
          </div>
          <div className="kal__days">
            {cells.map((c) => {
              const evts = eventsPerDay.get(c.iso) || [];
              const isSel = c.iso === selectedIso;
              const isToday = c.iso === isoOf(new Date());
              return (
                <button key={c.iso}
                  className={"kal__day"
                    + (c.inMonth ? "" : " kal__day--out")
                    + (c.weekend ? " kal__day--weekend" : "")
                    + (isSel ? " kal__day--sel" : "")
                    + (isToday ? " kal__day--today" : "")}
                  onClick={() => setSelectedIso(c.iso)}>
                  <span className="kal__day-num">{c.dom}</span>
                  {evts.length > 0 && (
                    <span className="kal__day-dots">
                      {evts.slice(0, 3).map((e, i) => (
                        <span key={i} className="kal__day-dot"
                          style={{ background: CATS[e.category]?.color || "var(--accent)" }} />
                      ))}
                      {evts.length > 3 && <span className="kal__day-more">+{evts.length - 3}</span>}
                    </span>
                  )}
                </button>
              );
            })}
          </div>
        </div>

        <div className="kal__section-title">{monthEvents.length} Termine im {monthLabel}</div>
        {monthEvents.length === 0 ? (
          <p className="kal__empty">Noch keine Termine. Tippe oben auf „Neu".</p>
        ) : (
          <div className="kal__list">
            {monthEvents.map((e) => (
              <button key={e.id} className="kal__evt" onClick={() => requestOpenEvent(e)}>
                <span className="kal__evt-stripe" style={{ background: CATS[e.category]?.color || "var(--accent)" }} />
                <div className="kal__evt-body">
                  <div className="kal__evt-top">
                    <span className="kal__evt-title">{e.title}</span>
                    <span className="kal__evt-cat">{CATS[e.category]?.label || "Termin"}</span>
                  </div>
                  <div className="kal__evt-when">{fmtRange(e.fromDate, e.toDate, e.fromTime, e.toTime)}</div>
                  {(e.anzug || e.ort) && (
                    <div className="kal__evt-meta">
                      {e.anzug ? (<span><Icon name="shirt" />{e.anzug}</span>) : null}
                      {e.ort ? (<span><Icon name="map-pin" />{e.ort}</span>) : null}
                    </div>
                  )}
                </div>
                <span className="kal__evt-chev">›</span>
              </button>
            ))}
          </div>
        )}
      </div>
    );
  }

  /* ---------- EventDialog ---------- */
  // Wird von root.jsx auf .app-Ebene gerendert, damit der Subscreen die
  // AppBar zuverlaessig ueberdeckt. Erhaelt initial + open + onClose.
  function EventDialog({ open, initial, onClose }) {
    const src = initial || EMPTY_EVENT;
    const [category, setCategory] = useState(src.category || "uebung");
    const [title, setTitle] = useState(src.title || "");
    const [fromDate, setFromDate] = useState(src.fromDate || "");
    const [toDate, setToDate] = useState(src.toDate || src.fromDate || "");
    const [fromTime, setFromTime] = useState(src.fromTime || "");
    const [toTime, setToTime] = useState(src.toTime || "");
    const isPreset = ANZUG_PRESETS.includes(src.anzug);
    const [anzugPreset, setAnzugPreset] = useState(isPreset ? src.anzug : (src.anzug ? "custom" : ""));
    const [anzugCustom, setAnzugCustom] = useState(!isPreset && src.anzug ? src.anzug : "");
    const [ort, setOrt] = useState(src.ort || "");
    const [notes, setNotes] = useState(src.notes || "");

    // Wenn ein neues Event geladen wird (id/initial wechselt), Felder resetten.
    useEffect(() => {
      const s = initial || EMPTY_EVENT;
      setCategory(s.category || "uebung");
      setTitle(s.title || "");
      setFromDate(s.fromDate || "");
      setToDate(s.toDate || s.fromDate || "");
      setFromTime(s.fromTime || "");
      setToTime(s.toTime || "");
      const preset = ANZUG_PRESETS.includes(s.anzug);
      setAnzugPreset(preset ? s.anzug : (s.anzug ? "custom" : ""));
      setAnzugCustom(!preset && s.anzug ? s.anzug : "");
      setOrt(s.ort || "");
      setNotes(s.notes || "");
    }, [initial]);

    useEffect(() => {
      if (fromDate && toDate && toDate < fromDate) setToDate(fromDate);
    }, [fromDate, toDate]);

    const handleSaveClick = () => {
      if (!title.trim()) { alert("Titel eingeben."); return; }
      if (!fromDate) { alert("Startdatum eingeben."); return; }
      const anzugFinal = anzugPreset === "custom" ? anzugCustom.trim() : (anzugPreset || "");
      const patch = {
        id: src.id || "",
        category,
        title: title.trim(),
        fromDate,
        toDate: toDate || fromDate,
        fromTime,
        toTime,
        anzug: anzugFinal,
        ort: ort.trim(),
        notes,
      };
      try {
        if (patch.id) window.AZIS.updateEvent(patch.id, patch);
        else window.AZIS.addEvent(patch);
        window.dispatchEvent(new CustomEvent("kal:events-changed"));
        onClose();
      } catch (e) {
        alert("Speichern fehlgeschlagen: " + (e?.message || e));
      }
    };
    const handleDeleteClick = () => {
      if (!src.id) return;
      if (!confirm("Diesen Termin wirklich löschen?")) return;
      try {
        window.AZIS.deleteEvent(src.id);
        window.dispatchEvent(new CustomEvent("kal:events-changed"));
        onClose();
      } catch (e) {
        alert("Löschen fehlgeschlagen: " + (e?.message || e));
      }
    };

    return (
      <div className={"subscreen" + (open ? " show" : "")}>
        <div className="sub-head">
          <button className="sub-head__back" onClick={onClose} aria-label="Zurück"><Icon name="arrow" /></button>
          <div>
            <div className="sub-head__title">{src.id ? "Termin bearbeiten" : "Neuer Termin"}</div>
            <div className="sub-head__sub">Erscheint im Kalender + als Marker im Monat</div>
          </div>
        </div>
        <div className="sub-body">
          <div className="section-title">Kategorie</div>
          <div className="statuschips" style={{ marginBottom: 14 }}>
            {CAT_KEYS.map((k) => (
              <button key={k}
                className={"schip" + (category === k ? " active" : "")}
                style={{ "--tone": CATS[k].color }}
                onClick={() => setCategory(k)}>
                {CATS[k].label}
              </button>
            ))}
          </div>

          <div className="sfield">
            <label htmlFor="kalTitle">Titel</label>
            <input id="kalTitle" className="ainput" value={title}
              onChange={(e) => setTitle(e.target.value)}
              placeholder={category === "urlaub" ? "z. B. Jahresurlaub" : "z. B. Übung Wachtruppe"} />
          </div>

          <div className="sfield-2">
            <div className="sfield">
              <label htmlFor="kalFrom">Von</label>
              <input id="kalFrom" className="ainput" type="date" value={fromDate}
                onChange={(e) => setFromDate(e.target.value)} />
            </div>
            <div className="sfield">
              <label htmlFor="kalTo">Bis</label>
              <input id="kalTo" className="ainput" type="date" value={toDate}
                onChange={(e) => setToDate(e.target.value)} />
            </div>
          </div>

          <div className="sfield-2">
            <div className="sfield">
              <label htmlFor="kalFromT">Uhrzeit von</label>
              <input id="kalFromT" className="ainput mono" type="time" step="60"
                value={fromTime} onChange={(e) => setFromTime(e.target.value)} />
            </div>
            <div className="sfield">
              <label htmlFor="kalToT">Uhrzeit bis</label>
              <input id="kalToT" className="ainput mono" type="time" step="60"
                value={toTime} onChange={(e) => setToTime(e.target.value)} />
            </div>
          </div>

          <div className="section-title">Anzugordnung</div>
          <div className="statuschips" style={{ marginBottom: 10 }}>
            {ANZUG_PRESETS.map((a) => (
              <button key={a}
                className={"schip" + (anzugPreset === a ? " active" : "")}
                style={{ "--tone": "var(--accent)" }}
                onClick={() => setAnzugPreset(a)}>
                {a}
              </button>
            ))}
            <button
              className={"schip" + (anzugPreset === "custom" ? " active" : "")}
              style={{ "--tone": "var(--muted)" }}
              onClick={() => setAnzugPreset("custom")}>Anderer</button>
          </div>
          {anzugPreset === "custom" && (
            <div className="sfield">
              <label htmlFor="kalAnzug">Freitext</label>
              <input id="kalAnzug" className="ainput" value={anzugCustom}
                onChange={(e) => setAnzugCustom(e.target.value)}
                placeholder="z. B. Sportanzug" />
            </div>
          )}

          <div className="sfield">
            <label htmlFor="kalOrt">Ort</label>
            <input id="kalOrt" className="ainput" value={ort}
              onChange={(e) => setOrt(e.target.value)}
              placeholder="z. B. TrÜbPl Grafenwöhr" />
          </div>

          <div className="sfield">
            <label htmlFor="kalNotes">Notizen</label>
            <textarea id="kalNotes" className="ainput" rows="3" value={notes}
              onChange={(e) => setNotes(e.target.value)}
              placeholder="Weitere Infos zum Termin" />
          </div>

          {category === "urlaub" && (
            <p className="sub-note">
              Urlaub wird zusätzlich als Tagesstatus in den Stundenzettel geschrieben — Werktage im Zeitraum bekommen automatisch Status „Urlaub". Wochenenden und Feiertage bleiben unangetastet.
            </p>
          )}

          {src.id && (
            <button
              className="abtn abtn--danger"
              style={{ marginTop: 18, width: "100%" }}
              onClick={handleDeleteClick}>
              <Icon name="trash" /> Termin löschen
            </button>
          )}
        </div>
        <div className="sub-save">
          <button onClick={handleSaveClick}>Speichern</button>
        </div>
      </div>
    );
  }

  window.KalenderScreen = KalenderScreen;
  window.KalenderEventDialog = EventDialog;
  window.KALENDER_CATS = CATS;
})();