// F6.2 — Modal de gestión del token MCP personal (menú de usuario).
// Genera/regenera el token que cada persona pega en su cliente MCP. Rota
// ~10 días; regenerar revoca el anterior. El MCP lo reenvía al ERP, que
// aplica los permisos del usuario.
const McpTokenModal = ({ onClose, onToast }) => {
  const [data, setData] = React.useState(null);
  const [busy, setBusy] = React.useState(false);

  const generar = async () => {
    setBusy(true);
    try {
      const r = await API.post('/api/auth/mcp-token', {});
      setData(r);
    } catch (e) {
      onToast && onToast(e.message || 'Error al generar el token', true);
    } finally {
      setBusy(false);
    }
  };

  const copiar = () => {
    if (!data) return;
    if (navigator.clipboard?.writeText) {
      navigator.clipboard.writeText(data.token).then(
        () => onToast && onToast('Token copiado ✓'),
        () => onToast && onToast('Selecciona y copia manualmente', true)
      );
    }
  };

  return (
    <div className="modal-backdrop">
      <div className="modal-card">
        <header>
          <h2>Token MCP</h2>
          <button className="x" onClick={onClose}>×</button>
        </header>
        <div style={{ padding: '4px 2px', fontSize: 13 }}>
          <p style={{ marginTop: 0 }}>
            Genera tu token personal para conectar el <strong>MCP del ERP</strong> desde Claude o ChatGPT.
            Caduca <strong>~10 días</strong>; al <strong>regenerar</strong>, el anterior queda revocado.
            El MCP usa tu identidad, así que solo verás/harás lo que tu rol permite.
          </p>

          {!data && (
            <button className="btn primary" onClick={generar} disabled={busy}>
              {busy ? 'Generando…' : 'Generar mi token'}
            </button>
          )}

          {data && (
            <>
              <label style={{ display: 'block', fontSize: 11, fontWeight: 600, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: 0.4, margin: '6px 0 4px' }}>
                Tu token (rol {data.rol})
              </label>
              <textarea
                readOnly
                value={data.token}
                rows={4}
                onFocus={(e) => e.target.select()}
                style={{ width: '100%', fontSize: 12, fontFamily: 'monospace', padding: '8px 10px', border: '1px solid var(--line)', borderRadius: 8, resize: 'vertical' }}
              />
              <div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
                <button className="btn primary sm" onClick={copiar}>Copiar</button>
                <button className="btn ghost sm" onClick={generar} disabled={busy}>Regenerar</button>
              </div>
              <p className="muted" style={{ fontSize: 12, marginTop: 10 }}>
                Pégalo en la config del MCP: <code>ERP_TOKEN</code> (Claude Desktop / Cursor) o como
                <code> Authorization: Bearer</code> (remoto). Permisos: {(data.permisos || []).join(', ') || '—'}.
              </p>
            </>
          )}
        </div>
        <footer>
          <button className="btn ghost" onClick={onClose}>Cerrar</button>
        </footer>
      </div>
    </div>
  );
};

window.McpTokenModal = McpTokenModal;