/* AZIS — Day-Edit Bottom Sheet (Phase 2.5 full-port from vanilla dialog) ==
   Statt der reduzierten Prototype-Felder enthaelt das Sheet jetzt alle
   Eingaben die der alte vanilla #dayDialog hatte (siehe index.html).
   - Status-Set umfasst zusaetzlich `gleitzeit` (Abbau), `wach_zusatzdienst`.
   - Zeit-Felder: 1. Block + 2. Block (optional), Reisezeit (Min).
   - Spezielle Blocks (sichtbar je nach Status):
     * stundenabbau: Modus ganzer_tag/stundenweise + Arbeitsbeginn/-Ende.
     * gleitzeit (Abbau): Modus stundenweise/halber/ganzer Tag, von/bis,
       Kernzeit-Ausnahme-Checkbox, Antrags-Referenz.
     * atb: Modus Abbau/Aufbau.
     * urlaub/krank/lehrgang: von/bis Datum (Lehrgang zusaetzlich Name).
     * stundenaufbau: Buchungsgrund-Preset (Bw-spezifisch) + Sonstiges-
       Textfeld.
     * wach_zusatzdienst: UVD/OVWA-Typ, Vordienst/Dienst/Endtag.
   - "Eintrag zuruecksetzen"-Button.
   Save-Phase 3 verdrahtet den Save mit app.js's setEntryAndApply.       */

const STATUS_ORDER = [
  ["standard",          "Standard",           "var(--success)"],
  ["abweichend",        "Gleitzeit-Aufbau",   "var(--violet)"],
  ["gleitzeit",         "Gleitzeit-Abbau",    "var(--violet)"],
  ["urlaub",            "Urlaub",             "var(--warning)"],
  ["krank",             "Krank",              "var(--muted)"],
  ["lehrgang",          "Lehrgang",           "var(--teal)"],
  ["wach_zusatzdienst", "Wach/Zusatz",        "var(--success)"],
  ["atb",               "ATB",                "var(--info)"],
  ["stundenabbau",      "Std. Abbau",         "var(--danger)"],
  ["stundenaufbau",     "Std. Aufbau",        "var(--success)"],
];

// Statuses die regulaere Zeit-Eingabe (1./2. Block) verwenden.
// Standard wird bewusst NICHT aufgenommen: standard heisst per Definition
// Soll = Standardzeiten (Mo–Do 07:00–16:30, Fr 07:00–12:00). Wer davon
// abweicht, hat einen anderen Status (abweichend / stundenaufbau etc.).
const STATUS_HAS_TIME = new Set(["abweichend", "stundenaufbau", "lehrgang"]);

// Bw-spezifische Buchungsgrund-Presets (aus altem dayBuchungsgrundPreset)
const BG_PRESETS = ["SERE-B", "CD/CBI", "eFP LTU", "MP 7", "EEH-B", "KFOR", "STTVV", "Sonstiges"];
const EMPTY_TIME = "00:00";

function displayTime(value) {
  return value || EMPTY_TIME;
}

function TimeInput({ id, value, onChange, placeholder }) {
  return (
    <input
      id={id}
      type="time"
      step="60"
      value={displayTime(value)}
      placeholder={placeholder}
      onChange={(e) => onChange(e.target.value || EMPTY_TIME)}
    />
  );
}

function DaySheet({ day, open, onClose, onSave, reduced }) {
  const sheetRef = useRef(null);
  const dragRef = useRef({ y0: 0, dy: 0, active: false });

  // Swipe-down-to-close — Griff oder Header runter ziehen schliesst Sheet.
  const onDragStart = (e) => {
    const y = e.clientY != null ? e.clientY : (e.touches && e.touches[0] ? e.touches[0].clientY : 0);
    dragRef.current = { y0: y, dy: 0, active: true };
    if (sheetRef.current) sheetRef.current.style.transition = "none";
  };
  const onDragMove = (e) => {
    if (!dragRef.current.active) return;
    const y = e.clientY != null ? e.clientY : (e.touches && e.touches[0] ? e.touches[0].clientY : 0);
    const dy = Math.max(0, y - dragRef.current.y0);
    dragRef.current.dy = dy;
    if (sheetRef.current) sheetRef.current.style.transform = "translateY(" + dy + "px)";
  };
  const onDragEnd = () => {
    if (!dragRef.current.active) return;
    const dy = dragRef.current.dy;
    dragRef.current.active = false;
    if (sheetRef.current) {
      sheetRef.current.style.transition = "";
      sheetRef.current.style.transform = "";
    }
    if (dy > 90) onClose();
  };

  const [status, setStatus] = useState("standard");
  const [b1s, setB1s] = useState("07:00");
  const [b1e, setB1e] = useState("16:30");
  const [b2s, setB2s] = useState(EMPTY_TIME);
  const [b2e, setB2e] = useState(EMPTY_TIME);
  const [reisezeitMin, setReisezeitMin] = useState("");

  const [atbMode, setAtbMode] = useState("abbau");
  const [stundenabbauMode, setStundenabbauMode] = useState("ganzer_tag");
  const [abbauStart, setAbbauStart] = useState(EMPTY_TIME);
  const [abbauEnd, setAbbauEnd] = useState(EMPTY_TIME);

  const [gleitMode, setGleitMode] = useState("stundenweise");
  const [gleitStart, setGleitStart] = useState(EMPTY_TIME);
  const [gleitEnd, setGleitEnd] = useState(EMPTY_TIME);
  const [gleitCoreException, setGleitCoreException] = useState(false);
  const [gleitAntragRef, setGleitAntragRef] = useState("");

  const [vacationFrom, setVacationFrom] = useState("");
  const [vacationTo, setVacationTo] = useState("");
  const [sickFrom, setSickFrom] = useState("");
  const [sickTo, setSickTo] = useState("");
  const [lehrgangFrom, setLehrgangFrom] = useState("");
  const [lehrgangTo, setLehrgangTo] = useState("");
  const [lehrgangName, setLehrgangName] = useState("");

  const [buchungsgrundPreset, setBuchungsgrundPreset] = useState("");
  const [buchungsgrundCustom, setBuchungsgrundCustom] = useState("");

  const [watchType, setWatchType] = useState("");
  const [watchVordienstStart, setWatchVordienstStart] = useState(EMPTY_TIME);
  const [watchVordienstEnd, setWatchVordienstEnd] = useState(EMPTY_TIME);
  const [watchStart, setWatchStart] = useState(EMPTY_TIME);
  const [watchEnd, setWatchEnd] = useState(EMPTY_TIME);

  useEffect(() => {
    if (!day) return;
    const startStatus = day.status === "wochenende" ? "standard" : day.status;
    setStatus(startStatus);
    setB1s(day.b1s || "07:00");
    setB1e(day.b1e || (day.isoDow === 5 ? "12:00" : "16:30"));
    setB2s(displayTime(day.b2s));
    setB2e(displayTime(day.b2e));
    setReisezeitMin(day.reisezeitGleitzeitMin ? String(day.reisezeitGleitzeitMin) : "");
    setAtbMode(day.atbMode || "abbau");
    setStundenabbauMode(day.stundenabbauMode || "ganzer_tag");
    setAbbauStart(displayTime(day.abbauStart));
    setAbbauEnd(displayTime(day.abbauEnd));
    setGleitMode(day.gleitzeitMode || "stundenweise");
    setGleitStart(displayTime(day.gleitStart));
    setGleitEnd(displayTime(day.gleitEnd));
    setGleitCoreException(!!day.gleitCoreExceptionApproved);
    setGleitAntragRef(day.gleitAntragRef || "");
    setLehrgangName(day.lehrgangName || "");
    setBuchungsgrundCustom(day.grund || "");
    // Datumsfelder default auf den Tag selbst
    const isoDate = `${day.year}-${String(day.month + 1).padStart(2, "0")}-${String(day.dom).padStart(2, "0")}`;
    setVacationFrom(isoDate); setVacationTo(isoDate);
    setSickFrom(isoDate); setSickTo(isoDate);
    setLehrgangFrom(isoDate); setLehrgangTo(isoDate);
    // Watch- + BG-Felder neutral initialisieren; optionale 00:00-Bloecke
    // werden im Save-Adapter fachlich als "nicht genutzt" behandelt.
    setWatchType(""); setWatchVordienstStart(EMPTY_TIME); setWatchVordienstEnd(EMPTY_TIME);
    setWatchStart(EMPTY_TIME); setWatchEnd(EMPTY_TIME);
    setBuchungsgrundPreset("");
  }, [day]);

  if (!day) return null;

  // ----- Live-Berechnung Ist/Soll/Saldo --------------------------------
  const soll = day.soll || AZIS.sollFor(day.isoDow);
  const hasTime = STATUS_HAS_TIME.has(status);
  let ist = 0, saldo = 0;
  if (status === "standard" || status === "urlaub" || status === "atb" || status === "krank" || (status === "lehrgang" && !hasTime)) {
    ist = soll;
    saldo = 0;
  } else if (status === "stundenabbau") {
    if (stundenabbauMode === "stundenweise" && abbauStart && abbauEnd) {
      const worked = AZIS.istFromBlocks(abbauStart, abbauEnd);
      ist = Math.min(soll, worked);
      saldo = ist - soll;
    } else {
      ist = 0; saldo = -soll;
    }
  } else if (status === "gleitzeit") {
    if (gleitMode === "ganzer_tag") { ist = soll; saldo = -soll; }
    else if (gleitMode === "halber_tag") { ist = Math.round(soll / 2); saldo = ist - soll; }
    else if (gleitStart && gleitEnd) { const w = AZIS.toMin(gleitEnd) - AZIS.toMin(gleitStart); ist = 0; saldo = -w; }
    else { ist = 0; saldo = 0; }
  } else if (hasTime) {
    ist = AZIS.istFromBlocks(b1s, b1e, b2s, b2e);
    saldo = ist - soll;
  }
  const saldoCls = saldo > 0 ? "val-pos" : saldo < 0 ? "val-neg" : "val-zero";

  const handleSave = () => {
    onSave(day.dom, {
      status, b1s, b1e, b2s, b2e, ist, saldo, soll,
      reisezeitMin: reisezeitMin ? Number(reisezeitMin) : 0,
      atbMode, stundenabbauMode, abbauStart, abbauEnd,
      gleitMode, gleitStart, gleitEnd, gleitCoreException, gleitAntragRef,
      vacationFrom, vacationTo, sickFrom, sickTo,
      lehrgangFrom, lehrgangTo, lehrgangName,
      grund: buchungsgrundPreset === "Sonstiges" ? buchungsgrundCustom : buchungsgrundPreset,
      buchungsgrundPreset, buchungsgrundCustom,
      watchType, watchVordienstStart, watchVordienstEnd, watchStart, watchEnd,
    });
  };

  const handleReset = () => {
    // Eintrag zuruecksetzen — Phase 3 wird das echt machen.
    onSave(day.dom, { status: "standard", reset: true });
  };

  // ----- Render --------------------------------------------------------
  return (
    <React.Fragment>
      <div className={"scrim" + (open ? " show" : "")} onClick={onClose} />
      <div ref={sheetRef} className={"sheet" + (open ? " show" : "")} role="dialog" aria-modal="true">
        <div className="sheet__grip-wrap"
          onPointerDown={onDragStart} onPointerMove={onDragMove}
          onPointerUp={onDragEnd} onPointerCancel={onDragEnd}
          onTouchStart={onDragStart} onTouchMove={onDragMove}
          onTouchEnd={onDragEnd}
          style={{ padding: "8px 0 4px", cursor: "grab", touchAction: "none" }}>
          <div className="sheet__grip" />
        </div>
        <div className="sheet__head">
          <div className="sheet__date">
            <div className="sheet__dow">{day.dowLong}</div>
            <div className="sheet__title">{String(day.dom).padStart(2, "0")}. {day.monthName} {day.year}</div>
          </div>
          <button className="sheet__close" onClick={onClose} aria-label="Schließen">
            <Icon name="close" />
          </button>
        </div>

        <div className="sheet__body">
          {/* Tagesstatus */}
          <div className="field">
            <div className="flabel">Tagesstatus</div>
            <div className="statuschips">
              {STATUS_ORDER.map(([key, lbl, tone]) => (
                <button key={key}
                  className={"schip" + (status === key ? " active" : "")}
                  style={{ "--tone": tone }}
                  onClick={() => setStatus(key)}>
                  {lbl}
                </button>
              ))}
            </div>
          </div>

          {/* Zeit-Bloecke */}
          {hasTime && (
            <React.Fragment>
              <div className="field">
                <div className="flabel">Erster Block</div>
                <div className="timegrid">
                  <div className="timefield">
                    <label htmlFor="b1s">Beginn</label>
                    <TimeInput id="b1s" value={b1s} onChange={setB1s} />
                  </div>
                  <div className="timefield">
                    <label htmlFor="b1e">Ende</label>
                    <TimeInput id="b1e" value={b1e} onChange={setB1e} />
                  </div>
                </div>
              </div>
              <div className="field">
                <div className="flabel">Zweiter Block (optional)</div>
                <div className="timegrid">
                  <div className="timefield">
                    <label htmlFor="b2s">Beginn</label>
                    <TimeInput id="b2s" value={b2s} placeholder="—" onChange={setB2s} />
                  </div>
                  <div className="timefield">
                    <label htmlFor="b2e">Ende</label>
                    <TimeInput id="b2e" value={b2e} placeholder="—" onChange={setB2e} />
                  </div>
                </div>
              </div>
              <div className="field">
                <div className="flabel">Reisezeit (1/3) / Gleitzeit (Min)</div>
                <input className="ainput mono" type="number" min="0" max="1440"
                  value={reisezeitMin} onChange={(e) => setReisezeitMin(e.target.value)}
                  placeholder="0" />
              </div>
            </React.Fragment>
          )}

          {/* Stundenabbau */}
          {status === "stundenabbau" && (
            <div className="field">
              <div className="flabel">Stundenabbau-Modus</div>
              <div className="statuschips">
                {[["ganzer_tag", "Ganzer Tag"], ["stundenweise", "Stundenweise"]].map(([k, lbl]) => (
                  <button key={k} className={"schip" + (stundenabbauMode === k ? " active" : "")}
                    style={{ "--tone": "var(--danger)" }}
                    onClick={() => setStundenabbauMode(k)}>{lbl}</button>
                ))}
              </div>
              {stundenabbauMode === "stundenweise" && (
                <div className="timegrid" style={{ marginTop: 10 }}>
                  <div className="timefield">
                    <label htmlFor="abS">Arbeitsbeginn</label>
                    <TimeInput id="abS" value={abbauStart} onChange={setAbbauStart} />
                  </div>
                  <div className="timefield">
                    <label htmlFor="abE">Arbeitsende</label>
                    <TimeInput id="abE" value={abbauEnd} onChange={setAbbauEnd} />
                  </div>
                </div>
              )}
            </div>
          )}

          {/* Gleitzeit-Abbau */}
          {status === "gleitzeit" && (
            <div className="field">
              <div className="flabel">Gleitzeitabbau-Art</div>
              <div className="statuschips">
                {[["stundenweise", "Stundenweise"], ["halber_tag", "Halber Gleittag"], ["ganzer_tag", "Ganzer Gleittag"]].map(([k, lbl]) => (
                  <button key={k} className={"schip" + (gleitMode === k ? " active" : "")}
                    style={{ "--tone": "var(--violet)" }}
                    onClick={() => setGleitMode(k)}>{lbl}</button>
                ))}
              </div>
              {gleitMode === "stundenweise" && (
                <React.Fragment>
                  <div className="timegrid" style={{ marginTop: 10 }}>
                    <div className="timefield">
                      <label htmlFor="gS">Gleitzeit von</label>
                      <TimeInput id="gS" value={gleitStart} onChange={setGleitStart} />
                    </div>
                    <div className="timefield">
                      <label htmlFor="gE">Gleitzeit bis</label>
                      <TimeInput id="gE" value={gleitEnd} onChange={setGleitEnd} />
                    </div>
                  </div>
                  <label style={{ display: "flex", gap: 8, alignItems: "center", marginTop: 10, fontSize: 12.5 }}>
                    <input type="checkbox" checked={gleitCoreException} onChange={(e) => setGleitCoreException(e.target.checked)} />
                    Kernarbeitszeit-Ausnahme genehmigt
                  </label>
                </React.Fragment>
              )}
              <div className="field" style={{ marginTop: 12 }}>
                <label htmlFor="gAntrag">Antrags-/Genehmigungsreferenz</label>
                <input id="gAntrag" className="ainput" type="text" placeholder="z. B. Antrag Nr." value={gleitAntragRef} onChange={(e) => setGleitAntragRef(e.target.value)} />
              </div>
            </div>
          )}

          {/* ATB */}
          {status === "atb" && (
            <div className="field">
              <div className="flabel">ATB-Modus</div>
              <div className="statuschips">
                {[["abbau", "Abbau (ATB nehmen)"], ["aufbau", "Aufbau (ATB gutschreiben)"]].map(([k, lbl]) => (
                  <button key={k} className={"schip" + (atbMode === k ? " active" : "")}
                    style={{ "--tone": "var(--info)" }}
                    onClick={() => setAtbMode(k)}>{lbl}</button>
                ))}
              </div>
            </div>
          )}

          {/* Urlaub von/bis */}
          {status === "urlaub" && (
            <div className="field">
              <div className="flabel">Urlaub Zeitraum</div>
              <div className="timegrid">
                <div className="timefield"><label htmlFor="vF">Von</label><input id="vF" type="date" value={vacationFrom} onChange={(e) => setVacationFrom(e.target.value)} /></div>
                <div className="timefield"><label htmlFor="vT">Bis</label><input id="vT" type="date" value={vacationTo} onChange={(e) => setVacationTo(e.target.value)} /></div>
              </div>
            </div>
          )}

          {/* Krank von/bis */}
          {status === "krank" && (
            <div className="field">
              <div className="flabel">Krank Zeitraum</div>
              <div className="timegrid">
                <div className="timefield"><label htmlFor="sF">Von</label><input id="sF" type="date" value={sickFrom} onChange={(e) => setSickFrom(e.target.value)} /></div>
                <div className="timefield"><label htmlFor="sT">Bis</label><input id="sT" type="date" value={sickTo} onChange={(e) => setSickTo(e.target.value)} /></div>
              </div>
            </div>
          )}

          {/* Lehrgang von/bis + Name */}
          {status === "lehrgang" && (
            <React.Fragment>
              <div className="field">
                <div className="flabel">Lehrgang Zeitraum</div>
                <div className="timegrid">
                  <div className="timefield"><label htmlFor="lF">Von</label><input id="lF" type="date" value={lehrgangFrom} onChange={(e) => setLehrgangFrom(e.target.value)} /></div>
                  <div className="timefield"><label htmlFor="lT">Bis</label><input id="lT" type="date" value={lehrgangTo} onChange={(e) => setLehrgangTo(e.target.value)} /></div>
                </div>
              </div>
              <div className="field">
                <label htmlFor="lN">Lehrgangsname</label>
                <input id="lN" className="ainput" type="text" placeholder="z. B. C/CE" value={lehrgangName} onChange={(e) => setLehrgangName(e.target.value)} />
              </div>
            </React.Fragment>
          )}

          {/* Buchungsgrund-Preset (bei Mehrarbeit) */}
          {status === "stundenaufbau" && (
            <React.Fragment>
              <div className="field">
                <div className="flabel">Buchungsgrund Mehrarbeit</div>
                <div className="statuschips">
                  {BG_PRESETS.map((g) => (
                    <button key={g} className={"schip" + (buchungsgrundPreset === g ? " active" : "")}
                      style={{ "--tone": "var(--success)" }}
                      onClick={() => setBuchungsgrundPreset(g)}>{g}</button>
                  ))}
                </div>
              </div>
              {buchungsgrundPreset === "Sonstiges" && (
                <div className="field">
                  <label htmlFor="bgC">Sonstiger Buchungsgrund</label>
                  <input id="bgC" className="ainput" type="text" placeholder="Grund eingeben" value={buchungsgrundCustom} onChange={(e) => setBuchungsgrundCustom(e.target.value)} />
                </div>
              )}
            </React.Fragment>
          )}

          {/* Wach/Zusatzdienste */}
          {status === "wach_zusatzdienst" && (
            <React.Fragment>
              <div className="field">
                <div className="flabel">Wach/Zusatz-Typ</div>
                <div className="statuschips">
                  {["UVD", "OVWA"].map((t) => (
                    <button key={t} className={"schip" + (watchType === t ? " active" : "")}
                      style={{ "--tone": "var(--success)" }}
                      onClick={() => setWatchType(t)}>{t}</button>
                  ))}
                </div>
              </div>
              <div className="field">
                <div className="flabel">Vordienst (optional)</div>
                <div className="timegrid">
                  <div className="timefield"><label htmlFor="wVs">Beginn</label><TimeInput id="wVs" value={watchVordienstStart} onChange={setWatchVordienstStart} /></div>
                  <div className="timefield"><label htmlFor="wVe">Ende</label><TimeInput id="wVe" value={watchVordienstEnd} onChange={setWatchVordienstEnd} /></div>
                </div>
              </div>
              <div className="field">
                <div className="flabel">Dienst</div>
                <div className="timegrid">
                  <div className="timefield"><label htmlFor="wS">Beginn</label><TimeInput id="wS" value={watchStart} onChange={setWatchStart} /></div>
                  <div className="timefield"><label htmlFor="wE">Ende (Folgetag)</label><TimeInput id="wE" value={watchEnd} onChange={setWatchEnd} /></div>
                </div>
              </div>
              <p style={{ margin: "2px 2px 12px", fontSize: 11, color: "var(--text-muted)", lineHeight: 1.5 }}>
                UVD/OVWA werden ohne Pausenabzug gerechnet. Endetag ist fest auf den direkt folgenden Kalendertag gesetzt.
              </p>
            </React.Fragment>
          )}

          {/* Live-Berechnung */}
          <div className="flabel">Berechnung · inkl. Pausenregel</div>
          <div className="compute">
            <div className="compute__cell">
              <div className="compute__k">Ist</div>
              <div className="compute__v">{AZIS.fmt(ist)}</div>
            </div>
            <div className="compute__cell">
              <div className="compute__k">Soll</div>
              <div className="compute__v" style={{ color: "var(--muted)" }}>{AZIS.fmt(soll)}</div>
            </div>
            <div className="compute__cell">
              <div className="compute__k">Saldo</div>
              <div className={"compute__v " + saldoCls}>{AZIS.fmt(saldo, { plus: true })}</div>
            </div>
          </div>

          {hasTime && AZIS.pause(AZIS.toMin(b1e) - AZIS.toMin(b1s) + (b2s && b2e ? AZIS.toMin(b2e) - AZIS.toMin(b2s) : 0)) > 0 && (
            <p style={{ margin: "0 2px 14px", fontSize: 11.5, color: "var(--text-muted)", fontFamily: "var(--font-num)", lineHeight: 1.5 }}>
              − {AZIS.pause(AZIS.toMin(b1e) - AZIS.toMin(b1s) + (b2s && b2e ? AZIS.toMin(b2e) - AZIS.toMin(b2s) : 0))} Min Pause automatisch abgezogen.
            </p>
          )}

          <p style={{ margin: "0 2px 8px", fontSize: 11, color: "var(--text-muted)", lineHeight: 1.5 }}>
            TEFhr, NZ Sdt, DV und DzuZ bleiben fuer Unterschriften frei.
          </p>

          {/* Reset als dezenter Text-Link statt eigener Footer-Button —
              Footer enthaelt nur noch die zwei primaeren Aktionen. */}
          <button onClick={handleReset}
            style={{
              display: "block", margin: "4px auto 14px", padding: "8px 12px",
              background: "transparent", border: "none", color: "var(--danger)",
              fontSize: 12.5, fontWeight: 600, cursor: "pointer", textDecoration: "underline"
            }}>
            Eintrag zurücksetzen
          </button>
        </div>

        <div className="sheet__foot">
          <button className="btn btn--ghost" onClick={onClose}>Abbrechen</button>
          <button className="btn btn--primary" onClick={handleSave}>Speichern</button>
        </div>
      </div>
    </React.Fragment>
  );
}

window.DaySheet = DaySheet;