// Employee add/edit modal

const EMPTY_EMPLOYEE = {
  number: "", first_name: "", last_name: "", email: "", bsn: "",
  dob: "", address: "", postcode: "", city: "", iban: "",
  function: "", hired_at: new Date().toISOString().slice(0, 10),
  base_salary: 3000, parttime: 100, hours: 174.00,
  lh_table: "Witte tabel", heffingskorting: true,
  bt_pct: 37.070, jaarloon_bt: 36000, status: "actief",
};

const EmployeeEditModal = ({ open, onClose, employee, onSaved, toast }) => {
  const isEdit = !!employee;
  const [form, setForm] = React.useState(() => ({ ...EMPTY_EMPLOYEE, ...(employee || {}) }));
  const [saving, setSaving] = React.useState(false);
  const [err, setErr] = React.useState(null);

  React.useEffect(() => {
    if (open) { setForm({ ...EMPTY_EMPLOYEE, ...(employee || {}) }); setErr(null); }
  }, [open, employee]);

  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const save = async () => {
    setSaving(true); setErr(null);
    try {
      const url = isEdit ? `/api/employees/${employee.id}` : "/api/employees";
      const res = await fetch(url, {
        method: isEdit ? "PUT" : "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
      await window.LS_store?.refreshEmployees?.();
      toast && toast(isEdit ? "Medewerker bijgewerkt" : "Medewerker toegevoegd");
      onSaved && onSaved(data);
      onClose && onClose();
    } catch (e) {
      setErr(e.message);
    } finally {
      setSaving(false);
    }
  };

  if (!open) return null;

  // Live payslip preview — recomputes as the user edits bruto, parttime, uren of BT.
  // Zo zie je meteen het effect op de loonstrook zonder eerst op te slaan.
  const preview = LS_computePayslip({
    base_salary: Number(form.base_salary) || 0,
    bt_pct: Number(form.bt_pct) || 0,
    parttime: Number(form.parttime) || 0,
  });
  const prevSalary = isEdit ? Number(employee?.base_salary) || 0 : null;
  const delta = prevSalary != null ? Number(form.base_salary) - prevSalary : 0;

  return (
    <Modal open={open} onClose={onClose} width={860}>
      <div style={{ padding: "16px 22px", borderBottom: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ fontSize: 15, fontWeight: 600 }}>{isEdit ? "Medewerker bewerken" : "Nieuwe medewerker"}</div>
        <Btn size="sm" variant="ghost" icon="x" onClick={onClose} />
      </div>

      <div style={{ padding: "20px 22px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        <InputField label="Voornaam" value={form.first_name} onChange={v => set("first_name", v)} />
        <InputField label="Achternaam" value={form.last_name} onChange={v => set("last_name", v)} />
        <InputField label="E-mail" value={form.email} onChange={v => set("email", v)} type="email" />
        <InputField label="BSN" value={form.bsn} onChange={v => set("bsn", v)} />
        <InputField label="Geboortedatum" value={form.dob || ""} onChange={v => set("dob", v)} type="date" />
        <InputField label="In dienst sinds" value={form.hired_at || ""} onChange={v => set("hired_at", v)} type="date" />
        <InputField label="Adres" value={form.address} onChange={v => set("address", v)} style={{ gridColumn: "1 / -1" }} />
        <InputField label="Postcode" value={form.postcode} onChange={v => set("postcode", v)} />
        <InputField label="Plaats" value={form.city} onChange={v => set("city", v)} />
        <InputField label="IBAN" value={form.iban} onChange={v => set("iban", v)} style={{ gridColumn: "1 / -1" }} />
        <InputField label="Functie" value={form.function} onChange={v => set("function", v)} style={{ gridColumn: "1 / -1" }} />
        <InputField label="Bruto / maand (€)" value={form.base_salary} onChange={v => set("base_salary", Number(v) || 0)} type="number" />
        <InputField label="Parttime %" value={form.parttime} onChange={v => set("parttime", Number(v) || 0)} type="number" />
        <InputField label="Uren / maand" value={form.hours} onChange={v => set("hours", Number(v) || 0)} type="number" />
        <InputField label="BT-percentage" value={form.bt_pct} onChange={v => set("bt_pct", Number(v) || 0)} type="number" step="0.001" />
        <InputField label="Jaarloon BT" value={form.jaarloon_bt} onChange={v => set("jaarloon_bt", Number(v) || 0)} type="number" />
        <SelectField label="LH-tabel" value={form.lh_table} onChange={v => set("lh_table", v)}
          options={["Witte tabel", "Groene tabel"]} />
        <div style={{ gridColumn: "1 / -1", display: "flex", gap: 12, alignItems: "center", padding: "6px 0" }}>
          <label style={{ display: "flex", gap: 8, alignItems: "center", fontSize: 13 }}>
            <input type="checkbox" checked={!!form.heffingskorting} onChange={e => set("heffingskorting", e.target.checked)} />
            Heffingskorting toepassen
          </label>
        </div>
      </div>

      <div style={{ margin: "6px 22px 16px", padding: "14px 16px", background: "var(--bg-2)", border: "1px solid var(--line)", borderRadius: 10 }}>
        <Row style={{ justifyContent: "space-between", marginBottom: 10 }}>
          <Row style={{ gap: 8 }}>
            <Icon name="sparkle" size={14} style={{ color: "var(--accent)" }} />
            <span style={{ fontSize: 11.5, fontWeight: 600, textTransform: "uppercase", letterSpacing: 0.6, color: "var(--ink-2)" }}>
              Live loonstrook-preview
            </span>
          </Row>
          {isEdit && delta !== 0 && (
            <Pill tone={delta > 0 ? "success" : "warn"} dot>
              {delta > 0 ? "+" : "−"}{LS_fmt.eurPlain(Math.abs(delta))} bruto t.o.v. huidig
            </Pill>
          )}
        </Row>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 10 }}>
          {[
            { l: "Bruto", v: preview.bruto },
            { l: "Loonheffing", v: preview.loonheffing },
            { l: "Bijdrage ZVW", v: preview.zvw },
            { l: "Netto", v: preview.net, strong: true },
          ].map(r => (
            <div key={r.l} style={{ background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 8, padding: "10px 12px" }}>
              <div style={{ fontSize: 10.5, textTransform: "uppercase", letterSpacing: 0.5, color: "var(--ink-3)", fontWeight: 500 }}>{r.l}</div>
              <div className="num" style={{ marginTop: 4, fontSize: r.strong ? 16 : 14, fontWeight: r.strong ? 700 : 500, color: r.strong ? "var(--ink)" : "var(--ink-2)" }}>
                {LS_fmt.eurSigned(r.v)}
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 10, fontSize: 11.5, color: "var(--ink-3)" }}>
          Berekend met rekenregels v2026.1 · De strook wordt bij opslaan ook direct bijgewerkt in het medewerkerprofiel.
        </div>
      </div>

      {err && (
        <div style={{ margin: "0 22px 14px", padding: "10px 12px", background: "var(--danger-2)", color: "var(--danger)", borderRadius: 8, fontSize: 12.5 }}>
          {err}
        </div>
      )}

      <div style={{ padding: "14px 22px", borderTop: "1px solid var(--line)", display: "flex", justifyContent: "flex-end", gap: 10 }}>
        <Btn variant="secondary" onClick={onClose} disabled={saving}>Annuleren</Btn>
        <Btn variant="primary" icon="check" onClick={save} disabled={saving || !form.first_name || !form.last_name}>
          {saving ? "Opslaan…" : (isEdit ? "Wijzigingen opslaan" : "Medewerker toevoegen")}
        </Btn>
      </div>
    </Modal>
  );
};

const InputField = ({ label, value, onChange, type = "text", step, style = {} }) => (
  <label style={{ display: "flex", flexDirection: "column", gap: 4, fontSize: 12, color: "var(--ink-3)", ...style }}>
    <span style={{ fontWeight: 500, letterSpacing: 0.3, textTransform: "uppercase", fontSize: 10.5 }}>{label}</span>
    <input
      type={type} step={step} value={value ?? ""} onChange={e => onChange(e.target.value)}
      style={{
        padding: "8px 10px", fontSize: 13, fontFamily: "inherit",
        border: "1px solid var(--line-2)", borderRadius: 6,
        background: "var(--surface)", color: "var(--ink)",
        outline: "none",
      }}
    />
  </label>
);

const SelectField = ({ label, value, onChange, options }) => (
  <label style={{ display: "flex", flexDirection: "column", gap: 4, fontSize: 12, color: "var(--ink-3)" }}>
    <span style={{ fontWeight: 500, letterSpacing: 0.3, textTransform: "uppercase", fontSize: 10.5 }}>{label}</span>
    <select value={value} onChange={e => onChange(e.target.value)}
      style={{
        padding: "8px 10px", fontSize: 13, fontFamily: "inherit",
        border: "1px solid var(--line-2)", borderRadius: 6,
        background: "var(--surface)", color: "var(--ink)", outline: "none",
      }}>
      {options.map(o => <option key={o} value={o}>{o}</option>)}
    </select>
  </label>
);

Object.assign(window, { EmployeeEditModal, InputField, SelectField });