/* global React, window */
/* IMPORT MODAL — colagem de código de ficha para sobrescrever personagem atual. */

(function () {
  "use strict";
  const { useState, useEffect, useRef } = React;

  function ImportSheetModal({ open, onClose }) {
    const [code, setCode]       = useState("");
    const [preview, setPreview] = useState(null);
    const [error, setError]     = useState(null);
    const [busy, setBusy]       = useState(false);
    const taRef = useRef(null);

    useEffect(() => {
      if (open) {
        setCode(""); setPreview(null); setError(null); setBusy(false);
        setTimeout(() => taRef.current && taRef.current.focus(), 50);
      }
    }, [open]);

    function tryDecode(text) {
      setError(null); setPreview(null);
      if (!text.trim()) return;
      try {
        const payload = window.SHEET_EXPORT.decodeCode(text.trim());
        const classes = (payload.classes || []).map(c => `${c.className} ${c.level}`).join(" · ") || "—";
        const race    = payload.race ? `Raça #${payload.race.id}` : null;
        setPreview({
          char_name: payload.char_name || "(sem nome)",
          classes,
          race,
          version:   payload.version,
        });
      } catch (e) {
        setError(e.message || "Código inválido");
      }
    }

    async function onImport() {
      setError(null); setBusy(true);
      try {
        const payload = window.SHEET_EXPORT.decodeCode(code.trim());
        let cur = "";
        try { cur = JSON.parse(localStorage.getItem("arton_char_name")) || ""; } catch {}
        if (cur && !confirm(`Sobrescrever o personagem atual${cur ? ` (${cur})` : ""}?`)) {
          setBusy(false);
          return;
        }
        await window.SHEET_EXPORT.applyPayload(payload);
        // pequena espera defensiva para garantir que o evento se propague
        // antes do modal fechar e os componentes re-renderem
        setBusy(false);
        onClose();
      } catch (e) {
        setBusy(false);
        setError(e.message || "Falha ao importar");
      }
    }

    if (!open) return null;
    return (
      <div className="imp-backdrop" onClick={onClose} role="presentation">
        <div className="imp-modal" onClick={e => e.stopPropagation()} role="dialog" aria-modal="true">
          <h2 className="imp-title">Importar ficha</h2>
          <p className="imp-help">
            Cole o código gerado por outro PDF do Escriba para carregar o personagem aqui.
            <strong> Isso substitui o personagem atual.</strong>
          </p>
          <textarea
            ref={taRef}
            className="imp-textarea"
            placeholder="Cole o código aqui..."
            value={code}
            onChange={(e) => { setCode(e.target.value); tryDecode(e.target.value); }}
            rows={8}
          />
          {preview && !error && (
            <div className="imp-preview">
              <strong>{preview.char_name}</strong>
              {preview.classes !== "—" && <> · {preview.classes}</>}
              <span className="imp-preview-meta"> · ficha v{preview.version}</span>
            </div>
          )}
          {error && <div className="imp-error">{error}</div>}
          <div className="imp-actions">
            <button className="imp-cancel" onClick={onClose} disabled={busy}>Cancelar</button>
            <button className="imp-confirm" onClick={onImport} disabled={!preview || !!error || busy}>
              {busy ? "Importando…" : "Importar"}
            </button>
          </div>
        </div>
      </div>
    );
  }

  window.ImportSheetModal = ImportSheetModal;
})();