// Employer — Settings (compact) + UWV Whk OCR upload

const WhkUploadCard = ({ onChange }) => {
  const [state, setState] = React.useState(window.LS_whk ? "saved" : "idle");
  const [extracted, setExtracted] = React.useState(() => window.LS_whk ? {
    wga_pct: Number(window.LS_whk.wga_pct), zw_flex_pct: Number(window.LS_whk.zw_flex_pct),
    employer_name: window.LS_whk.employer_name, year: window.LS_whk.year,
    confidence: window.LS_whk.confidence, filename: window.LS_whk.filename, notes: window.LS_whk.notes,
  } : null);
  const [err, setErr] = React.useState(null);
  const [fileInfo, setFileInfo] = React.useState(null);
  const fileRef = React.useRef();

  const onFile = async (file) => {
    if (!file) return;
    setState("uploading");
    setErr(null);
    setFileInfo({ name: file.name, size: file.size });
    try {
      const res = await window.LS_ai.ocrWhk(file);
      setExtracted({ ...res, filename: file.name, uploadedAt: new Date().toISOString() });
      setState("preview");
    } catch (e) {
      setErr(e.message || "onbekende fout");
      setState("error");
    }
  };

  const confirm = async () => {
    try {
      const res = await fetch("/api/whk", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(extracted),
      });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      await window.LS_store?.refreshWhk?.();
      setState("saved");
      onChange?.();
    } catch (e) {
      setErr(e.message); setState("error");
    }
  };

  const reset = () => {
    setExtracted(null);
    setFileInfo(null);
    setState("idle");
  };

  const onDrop = (e) => {
    e.preventDefault();
    const f = e.dataTransfer.files?.[0];
    if (f) onFile(f);
  };

  return (
    <Card pad={0} style={{ gridColumn: "1 / -1" }}>
      <div style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "14px 18px", borderBottom: "1px solid var(--line)",
      }}>
        <Row style={{ gap: 10 }}>
          <div style={{ fontSize: 12.5, fontWeight: 600, textTransform: "uppercase", letterSpacing: 0.8, color: "var(--ink-2)" }}>UWV Whk-beschikking · AI-extractie</div>
          {state === "saved" && <Pill tone="success" dot>Opgeslagen</Pill>}
          {state === "preview" && <Pill tone="warn" dot>Bevestigen</Pill>}
          {state === "uploading" && <Pill tone="neutral" dot>OCR loopt…</Pill>}
        </Row>
        <Pill tone="neutral">🔒 Gemini 2.5 Flash · EU-routing</Pill>
      </div>

      <div style={{ padding: 18 }}>
        {state === "idle" && (
          <div>
            <div style={{ fontSize: 13, color: "var(--ink-2)", marginBottom: 12 }}>
              Upload de jaarlijkse Whk-beschikkingsbrief van het UWV (PDF of foto). De AI haalt het WGA- en ZW-flex-percentage eruit; je bevestigt daarna handmatig.
            </div>
            <div
              onDragOver={e => e.preventDefault()}
              onDrop={onDrop}
              onClick={() => fileRef.current?.click()}
              style={{
                border: "2px dashed var(--line-2)", borderRadius: 10,
                padding: 24, textAlign: "center", cursor: "pointer",
                background: "var(--bg-2)",
              }}>
              <Icon name="upload" size={22} style={{ color: "var(--ink-3)" }} />
              <div style={{ marginTop: 8, fontSize: 13.5, fontWeight: 500 }}>Sleep bestand hierheen of klik om te kiezen</div>
              <div style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 4 }}>PDF, PNG of JPG · max 25 MB</div>
            </div>
            <input ref={fileRef} type="file" accept="application/pdf,image/*" style={{ display: "none" }}
              onChange={e => onFile(e.target.files?.[0])} />
          </div>
        )}

        {state === "uploading" && (
          <div style={{ fontSize: 13, color: "var(--ink-2)" }}>
            Bezig met OCR op <span className="num">{fileInfo?.name}</span>…
          </div>
        )}

        {state === "error" && (
          <div>
            <div style={{ fontSize: 13, color: "var(--danger)", marginBottom: 10 }}>
              OCR mislukt: <span className="num">{err}</span>
            </div>
            <Btn variant="secondary" onClick={() => setState("idle")}>Opnieuw proberen</Btn>
          </div>
        )}

        {(state === "preview" || state === "saved") && extracted && (
          <div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
              <Card>
                <div style={{ fontSize: 11.5, textTransform: "uppercase", letterSpacing: 0.7, color: "var(--ink-3)", fontWeight: 600 }}>WGA-premie</div>
                <div className="num" style={{ fontSize: 26, fontWeight: 600, marginTop: 8 }}>{extracted.wga_pct != null ? `${extracted.wga_pct}%` : "—"}</div>
              </Card>
              <Card>
                <div style={{ fontSize: 11.5, textTransform: "uppercase", letterSpacing: 0.7, color: "var(--ink-3)", fontWeight: 600 }}>ZW-flex-premie</div>
                <div className="num" style={{ fontSize: 26, fontWeight: 600, marginTop: 8 }}>{extracted.zw_flex_pct != null ? `${extracted.zw_flex_pct}%` : "—"}</div>
              </Card>
            </div>

            <div style={{ marginTop: 14, padding: "12px 14px", background: "var(--bg-2)", borderRadius: 8, fontSize: 12.5, color: "var(--ink-2)" }}>
              <Row style={{ gap: 8, flexWrap: "wrap" }}>
                <span><strong>Werkgever:</strong> {extracted.employer_name || "—"}</span>
                <span style={{ color: "var(--ink-3)" }}>·</span>
                <span><strong>Jaar:</strong> {extracted.year || "—"}</span>
                <span style={{ color: "var(--ink-3)" }}>·</span>
                <span><strong>Betrouwbaarheid:</strong> <Pill tone={extracted.confidence === "high" ? "success" : extracted.confidence === "medium" ? "warn" : "danger"} dot>{extracted.confidence || "—"}</Pill></span>
                {extracted.filename && (<><span style={{ color: "var(--ink-3)" }}>·</span><span><strong>Bron:</strong> {extracted.filename}</span></>)}
              </Row>
              {extracted.notes && <div style={{ marginTop: 6, fontSize: 12, color: "var(--ink-3)" }}>{extracted.notes}</div>}
            </div>

            <Row style={{ marginTop: 14, gap: 8, justifyContent: "flex-end" }}>
              {state === "preview" && (
                <>
                  <Btn variant="ghost" onClick={reset}>Annuleren</Btn>
                  <Btn variant="accent" icon="check" onClick={confirm}>Bevestigen &amp; opslaan</Btn>
                </>
              )}
              {state === "saved" && (
                <>
                  <Btn variant="ghost" icon="upload" onClick={() => setState("idle")}>Nieuwe beschikking uploaden</Btn>
                  <Btn variant="secondary" onClick={reset}>Verwijderen</Btn>
                </>
              )}
            </Row>
          </div>
        )}
      </div>
    </Card>
  );
};

const EmployerSettings = ({ toast }) => {
  const [, forceRender] = React.useReducer(x => x + 1, 0);
  const e = LS_employer;
  const [whk, setWhk] = React.useState(window.LS_whk);
  const [adminEmailOpen, setAdminEmailOpen] = React.useState(false);
  const [mfaOpen, setMfaOpen] = React.useState(false);
  const refresh = async () => {
    await window.LS_store?.refreshWhk?.();
    setWhk(window.LS_whk);
  };

  return (
    <div style={{ padding: "28px 32px 48px", maxWidth: 1080, margin: "0 auto" }}>
      <div style={{ marginBottom: 22 }}>
        <div style={{ fontSize: 12.5, color: "var(--ink-3)", fontWeight: 500, letterSpacing: 0.5, textTransform: "uppercase", marginBottom: 6 }}>Beheer</div>
        <h1 style={{ fontSize: 28 }}>Instellingen</h1>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
        <WhkUploadCard onChange={refresh} />

        <Section title="Bedrijfsgegevens">
          <Field label="Naam" value={e.legal_name} />
          <Field label="KvK" value={e.kvk} mono />
          <Field label="Adres" value={`${e.address}, ${e.postcode} ${e.city}`} />
          <Field label="Loonheffingennummer" value={e.loonheffingen_nr} mono />
          <Field label="IBAN" value={e.iban} mono />
        </Section>
        <Section title="Portal & branding">
          <Field label="Subdomein" value={e.subdomain} mono />
          <Field label="Primaire kleur" value={<Row style={{ gap: 6 }}><span style={{ width: 14, height: 14, borderRadius: 4, background: "var(--accent)" }} />#2E7D4F</Row>} />
          <Field label="Logo" value="ehold_logo.png · 512×512" />
          <Field label="E-mail afzender" value="loon@ehold.nl · DKIM ✓" mono />
        </Section>
        <Section title="CAO & regelingen">
          <Field label="CAO" value={e.cao} />
          <Field label="Pensioenfonds" value="Niet ingesteld" />
          <Field label="Rekenregels" value="v2026.1 · auto-update" />
        </Section>
        <Section title="UWV & afdrachten">
          <Field label="WGA-premie" value={<span className="num">{whk?.wga_pct != null ? `${whk.wga_pct}%` : "0,78%"}</span>} mono />
          <Field label="ZW-flex" value={<span className="num">{whk?.zw_flex_pct != null ? `${whk.zw_flex_pct}%` : "0,41%"}</span>} mono />
          <Field label="Whk-beschikking" value={<Row style={{ gap: 6 }}><Icon name="pdf" size={13} />{whk?.filename || "whk_2026.pdf"}</Row>} />
          <Field label="Administratie-e-mail" value={e.admin_email} mono
            action={<button onClick={() => setAdminEmailOpen(true)} style={editLink}>wijzigen</button>} />
          <Field label="Gebruikers & MFA" value="Beheer admins en MFA-vereisten"
            action={<button onClick={() => setMfaOpen(true)} style={editLink}>openen</button>} />
        </Section>
      </div>

      <AdminEmailModal open={adminEmailOpen} onClose={() => setAdminEmailOpen(false)} toast={toast}
        onSaved={() => forceRender()} />
      <UsersMfaModal open={mfaOpen} onClose={() => setMfaOpen(false)} toast={toast} />
    </div>
  );
};

const editLink = {
  background: "none", border: "none", cursor: "pointer",
  color: "var(--accent)", fontSize: 12, fontWeight: 500,
  padding: "2px 6px", borderRadius: 4, fontFamily: "inherit",
};

Object.assign(window, { EmployerSettings });