/* ============================================================
   EFFECTEN-IMPORT — laad je eigen kaartendataset in de browser.
   Wordt alleen lokaal (localStorage) bewaard; niets gaat de
   app uit. Vult de effect-teksten bij upgrades & squadrons.
   ============================================================ */
const { useState: useStateEff, useRef: useRefEff } = React;

function EffectsDialog({ onClose, onChanged }) {
  const [txt, setTxt] = useStateEff("");
  const [err, setErr] = useStateEff(null);
  const [counts, setCounts] = useStateEff(effectsCounts());
  const [loaded, setLoaded] = useStateEff(effectsLoaded());
  const fileRef = useRefEff(null);

  const doImport = (raw) => {
    setErr(null);
    try {
      const c = importEffectsFromJSON(raw);
      setCounts(c); setLoaded(true); setTxt("");
      if (onChanged) onChanged();
    } catch (e) { setErr(e.message || String(e)); }
  };
  const onFile = (e) => {
    const f = e.target.files && e.target.files[0]; if (!f) return;
    const r = new FileReader();
    r.onload = () => doImport(String(r.result || ""));
    r.onerror = () => setErr("Kon het bestand niet lezen.");
    r.readAsText(f);
  };
  const doClear = () => { clearEffects(); setLoaded(false); setCounts({}); if (onChanged) onChanged(); };

  return (
    <Dialog title="Kaarteffecten laden" onClose={onClose}
      foot={<><span className="mono" style={{ flex: 1, color: "var(--text-dim)", fontSize: 12 }}>
               {loaded ? `Geladen: ${counts.upgrades || 0} upgrades · ${counts.squadrons || 0} squadrons` : "Nog niets geladen"}
             </span>
             {loaded ? <button className="btn btn-ghost" onClick={doClear}>Wis</button> : null}
             <button className="btn btn-accent" onClick={onClose}>Klaar</button></>}>
      <div className="mono up-note-info" style={{ marginBottom: 12 }}>
        Laad je eigen kaartendataset (JSON) uit een bron waarvoor je gemachtigd bent.
        Hij blijft alleen in <b>deze browser</b> — hij wordt nergens verstuurd en zit niet in de app zelf.
        Daarna zie je de effect-teksten bij het kiezen van upgrades en in het schip-paneel.
      </div>

      <div className="field">
        <span className="lbl">Bestand</span>
        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <button className="btn btn-ghost" onClick={() => fileRef.current && fileRef.current.click()}>📂 Kies JSON-bestand…</button>
          <input ref={fileRef} type="file" accept=".json,application/json" style={{ display: "none" }} onChange={onFile} />
        </div>
      </div>

      <div className="field" style={{ marginBottom: 0 }}>
        <span className="lbl">…of plak de JSON</span>
        <textarea className="textarea mono" style={{ minHeight: 120 }} value={txt} spellCheck={false}
                  placeholder='{ "upgrades": [ … ], "squadrons": [ … ] }' onChange={(e) => setTxt(e.target.value)} />
        <button className="btn btn-accent" style={{ marginTop: 8, alignSelf: "flex-start" }}
                disabled={!txt.trim()} onClick={() => doImport(txt)}>Importeer geplakte tekst</button>
      </div>

      {err ? <div className="import-error" style={{ marginTop: 12 }}>{err}</div> : null}
    </Dialog>
  );
}

Object.assign(window, { EffectsDialog });