// Admin / settings / scheduling / notifications modals

const AdminEmailModal = ({ open, onClose, onSaved, toast }) => {
  const [email, setEmail] = React.useState(() => window.LS_employer?.admin_email || "");
  const [saving, setSaving] = React.useState(false);
  const [err, setErr] = React.useState(null);
  React.useEffect(() => { if (open) { setEmail(window.LS_employer?.admin_email || ""); setErr(null); } }, [open]);

  const save = async () => {
    setSaving(true); setErr(null);
    try {
      const res = await fetch("/api/employer", {
        method: "PUT", headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ admin_email: email }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
      await window.LS_store?.refreshEmployer?.();
      toast && toast("Administratie-e-mail opgeslagen");
      onSaved && onSaved(data);
      onClose && onClose();
    } catch (e) {
      setErr(e.message);
    } finally { setSaving(false); }
  };

  if (!open) return null;
  return (
    <Modal open={open} onClose={onClose} width={480}>
      <div style={{ padding: "16px 22px", borderBottom: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ fontSize: 15, fontWeight: 600 }}>Administratie-e-mail wijzigen</div>
        <Btn size="sm" variant="ghost" icon="x" onClick={onClose} />
      </div>
      <div style={{ padding: "20px 22px" }}>
        <div style={{ fontSize: 13, color: "var(--ink-2)", marginBottom: 14 }}>
          Journaalposten en systeemmeldingen worden naar dit adres gestuurd.
        </div>
        <InputField label="E-mailadres" value={email} onChange={setEmail} type="email" />
        {err && <div style={{ marginTop: 12, padding: "8px 10px", background: "var(--danger-2)", color: "var(--danger)", borderRadius: 6, fontSize: 12.5 }}>{err}</div>}
      </div>
      <div style={{ padding: "14px 22px", borderTop: "1px solid var(--line)", display: "flex", justifyContent: "flex-end", gap: 10 }}>
        <Btn variant="secondary" onClick={onClose}>Annuleren</Btn>
        <Btn variant="primary" icon="check" onClick={save} disabled={saving || !email}>Opslaan</Btn>
      </div>
    </Modal>
  );
};

const UsersMfaModal = ({ open, onClose, toast }) => {
  const [state, setState] = React.useState({ admins: [], mfa_required: true });
  const [loading, setLoading] = React.useState(true);
  const [adding, setAdding] = React.useState(false);
  const [newName, setNewName] = React.useState("");
  const [newEmail, setNewEmail] = React.useState("");
  const [err, setErr] = React.useState(null);

  const reload = async () => {
    setLoading(true);
    try {
      const res = await fetch("/api/admins");
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
      setState(data);
    } catch (e) { setErr(e.message); }
    finally { setLoading(false); }
  };

  React.useEffect(() => { if (open) { setErr(null); reload(); } }, [open]);

  const add = async () => {
    if (!newName || !newEmail) return;
    setAdding(true); setErr(null);
    try {
      const res = await fetch("/api/admins", {
        method: "POST", headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name: newName, email: newEmail }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
      setNewName(""); setNewEmail("");
      await reload();
      toast && toast("Admin toegevoegd");
    } catch (e) { setErr(e.message); }
    finally { setAdding(false); }
  };

  const remove = async (id) => {
    try {
      await fetch(`/api/admins/${id}`, { method: "DELETE" });
      await reload();
      toast && toast("Admin verwijderd");
    } catch (e) { setErr(e.message); }
  };

  const toggleMfa = async (v) => {
    try {
      await fetch("/api/admins/mfa", {
        method: "PUT", headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ mfa_required: v }),
      });
      setState(s => ({ ...s, mfa_required: v }));
      toast && toast(v ? "MFA verplicht" : "MFA optioneel");
    } catch (e) { setErr(e.message); }
  };

  if (!open) return null;
  return (
    <Modal open={open} onClose={onClose} width={620}>
      <div style={{ padding: "16px 22px", borderBottom: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ fontSize: 15, fontWeight: 600 }}>Gebruikers & MFA beheren</div>
        <Btn size="sm" variant="ghost" icon="x" onClick={onClose} />
      </div>

      <div style={{ padding: "18px 22px" }}>
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          padding: "12px 14px", background: "var(--bg-2)", borderRadius: 8, marginBottom: 14,
        }}>
          <div>
            <div style={{ fontSize: 13, fontWeight: 500 }}>MFA verplicht voor alle admins</div>
            <div style={{ fontSize: 11.5, color: "var(--ink-3)" }}>Vereist een tweede factor bij inloggen.</div>
          </div>
          <label style={{ position: "relative", display: "inline-block", width: 40, height: 22 }}>
            <input type="checkbox" checked={!!state.mfa_required} onChange={e => toggleMfa(e.target.checked)}
              style={{ opacity: 0, width: 0, height: 0 }} />
            <span style={{
              position: "absolute", inset: 0, borderRadius: 999,
              background: state.mfa_required ? "var(--accent)" : "var(--line-2)",
              transition: "background 120ms", cursor: "pointer",
            }}>
              <span style={{
                position: "absolute", left: state.mfa_required ? 20 : 2, top: 2,
                width: 18, height: 18, borderRadius: 999, background: "#fff",
                transition: "left 120ms",
              }} />
            </span>
          </label>
        </div>

        <div style={{ fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: 0.6, color: "var(--ink-3)", marginBottom: 8 }}>Admins</div>
        {loading ? <div style={{ fontSize: 13, color: "var(--ink-3)" }}>Laden…</div> : (
          <Card pad={0}>
            {state.admins.map((a, i) => (
              <Row key={a.id} style={{ justifyContent: "space-between", padding: "12px 14px", borderTop: i === 0 ? "none" : "1px solid var(--line)" }}>
                <div>
                  <div style={{ fontSize: 13.5, fontWeight: 500 }}>{a.name}</div>
                  <div style={{ fontSize: 12, color: "var(--ink-3)" }} className="num">{a.email} · {a.role}</div>
                </div>
                <Row style={{ gap: 6 }}>
                  {a.mfa_enabled && <Pill tone="success" dot>MFA</Pill>}
                  {a.role !== "owner" && (
                    <Btn size="sm" variant="ghost" icon="x" onClick={() => remove(a.id)} />
                  )}
                </Row>
              </Row>
            ))}
            {!state.admins.length && <div style={{ padding: "14px", fontSize: 12.5, color: "var(--ink-3)" }}>Nog geen admins.</div>}
          </Card>
        )}

        <div style={{ marginTop: 16, fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: 0.6, color: "var(--ink-3)", marginBottom: 8 }}>Nieuwe admin</div>
        <Row style={{ gap: 8 }}>
          <input placeholder="Naam" value={newName} onChange={e => setNewName(e.target.value)}
            style={inputStyle} />
          <input placeholder="e-mail" type="email" value={newEmail} onChange={e => setNewEmail(e.target.value)}
            style={inputStyle} />
          <Btn variant="primary" icon="plus" onClick={add} disabled={adding || !newName || !newEmail}>Toevoegen</Btn>
        </Row>

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

      <div style={{ padding: "14px 22px", borderTop: "1px solid var(--line)", display: "flex", justifyContent: "flex-end" }}>
        <Btn variant="secondary" onClick={onClose}>Sluiten</Btn>
      </div>
    </Modal>
  );
};

const inputStyle = {
  flex: 1, padding: "8px 10px", fontSize: 13, fontFamily: "inherit",
  border: "1px solid var(--line-2)", borderRadius: 6,
  background: "var(--surface)", color: "var(--ink)", outline: "none",
};

const ReschedulePopover = ({ open, onClose, currentDate, onSaved, toast }) => {
  const [date, setDate] = React.useState(currentDate || "2026-04-25");
  const [saving, setSaving] = React.useState(false);
  const [err, setErr] = React.useState(null);

  React.useEffect(() => { if (open) { setDate(currentDate || "2026-04-25"); setErr(null); } }, [open, currentDate]);

  const save = async () => {
    setSaving(true); setErr(null);
    try {
      const year = Number(date.slice(0, 4));
      const period = Number(date.slice(5, 7));
      const runId = `r${year}-${String(period).padStart(2, "0")}-planned`;
      const res = await fetch(`/api/runs/${runId}/reschedule`, {
        method: "POST", headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ planned_at: date }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
      toast && toast(`Loonrun verplaatst naar ${date}`);
      onSaved && onSaved(date);
      onClose && onClose();
    } catch (e) { setErr(e.message); }
    finally { setSaving(false); }
  };

  if (!open) return null;
  return (
    <Modal open={open} onClose={onClose} width={420}>
      <div style={{ padding: "16px 22px", borderBottom: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ fontSize: 15, fontWeight: 600 }}>Loonrun herplannen</div>
        <Btn size="sm" variant="ghost" icon="x" onClick={onClose} />
      </div>
      <div style={{ padding: "20px 22px" }}>
        <div style={{ fontSize: 13, color: "var(--ink-2)", marginBottom: 14 }}>
          Kies een nieuwe datum voor de automatische loonrun.
        </div>
        <InputField label="Nieuwe datum" value={date} onChange={setDate} type="date" />
        {err && <div style={{ marginTop: 12, padding: "8px 10px", background: "var(--danger-2)", color: "var(--danger)", borderRadius: 6, fontSize: 12.5 }}>{err}</div>}
      </div>
      <div style={{ padding: "14px 22px", borderTop: "1px solid var(--line)", display: "flex", justifyContent: "flex-end", gap: 10 }}>
        <Btn variant="secondary" onClick={onClose}>Annuleren</Btn>
        <Btn variant="primary" icon="calendar" onClick={save} disabled={saving || !date}>Opslaan</Btn>
      </div>
    </Modal>
  );
};

const NOTIF_LABELS = {
  "run.created": "Loonrun berekend",
  "run.confirmed": "Loonrun bevestigd en verzonden",
  "run.rescheduled": "Loonrun herplanning opgeslagen",
  "run.downloaded": "Run-PDF gedownload",
  "payslip.sent": "Strook verstuurd",
  "payslip.downloaded": "Loonstrook gedownload",
  "whk.confirmed": "UWV Whk-beschikking opgeslagen",
  "employer.updated": "Werkgevergegevens gewijzigd",
  "employee.created": "Medewerker toegevoegd",
  "employee.updated": "Medewerker bijgewerkt",
  "employee.terminated": "Medewerker uit dienst",
  "admin.added": "Admin toegevoegd",
  "admin.removed": "Admin verwijderd",
};

const NotificationsMenu = ({ open, onClose, onNavigate }) => {
  const items = window.LS_notifications || [];
  if (!open) return null;
  return (
    <div
      onClick={onClose}
      style={{ position: "fixed", inset: 0, zIndex: 80 }}
    >
      <div
        onClick={e => e.stopPropagation()}
        style={{
          position: "absolute", top: 60, right: 70, width: 340,
          background: "var(--surface)", border: "1px solid var(--line)",
          borderRadius: 10, boxShadow: "0 20px 50px -20px oklch(20% 0.01 85 / 0.3)",
          overflow: "hidden",
        }}
      >
        <div style={{ padding: "12px 14px", borderBottom: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div style={{ fontSize: 13, fontWeight: 600 }}>Meldingen</div>
          <span style={{ fontSize: 11, color: "var(--ink-3)" }}>{items.length}</span>
        </div>
        <div style={{ maxHeight: 420, overflowY: "auto" }}>
          {items.length === 0 && (
            <div style={{ padding: "16px", fontSize: 12.5, color: "var(--ink-3)" }}>Geen meldingen.</div>
          )}
          {items.map(n => {
            const label = NOTIF_LABELS[n.action] || n.action;
            const go = () => {
              onClose && onClose();
              if (n.action.startsWith("run.") || n.action === "payslip.sent" || n.action === "payslip.downloaded") onNavigate && onNavigate("documents");
              else if (n.action.startsWith("employee.")) onNavigate && onNavigate("employees");
              else if (n.action.startsWith("whk.") || n.action.startsWith("employer.") || n.action.startsWith("admin.")) onNavigate && onNavigate("settings");
            };
            return (
              <button key={n.id} onClick={go} style={{
                display: "flex", gap: 10, width: "100%",
                padding: "10px 14px", background: "transparent",
                border: "none", borderTop: "1px solid var(--line)",
                cursor: "pointer", textAlign: "left", fontFamily: "inherit",
              }}
                onMouseEnter={e => e.currentTarget.style.background = "var(--bg-2)"}
                onMouseLeave={e => e.currentTarget.style.background = "transparent"}>
                <div style={{ width: 28, height: 28, borderRadius: 6, background: "var(--bg-3)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--ink-2)" }}>
                  <Icon name="bell" size={13} />
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 12.5, fontWeight: 500 }}>{label}</div>
                  <div style={{ fontSize: 11, color: "var(--ink-3)" }}>
                    {LS_fmt.date(n.created_at)}{n.entity_id ? ` · ${n.entity_id}` : ""}
                  </div>
                </div>
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { AdminEmailModal, UsersMfaModal, ReschedulePopover, NotificationsMenu });