/* ============================================================
   FLOWSHIELD — Consola de scripts Python (on-premise)
   Repositorio de scripts + terminal con salida en vivo (SSE),
   prompt estilo zsh y render de color ANSI (incl. 256 colores).
   ============================================================ */

/* ---- Render de secuencias ANSI (SGR) a <span> con color ---- */
const ANSI_FG = {
  30: '#2e3440', 31: '#ff5c66', 32: '#2ee6a6', 33: '#ffb627', 34: '#4d7cff',
  35: '#b66bff', 36: '#29e0ff', 37: '#c7d0e0',
  90: '#6b7892', 91: '#ff8a92', 92: '#5cf0bf', 93: '#ffd27a', 94: '#86a5ff',
  95: '#d0a3ff', 96: '#8af0ff', 97: '#eaf1ff',
};
function xterm256(n) {
  const base = ['#000000', '#cd3131', '#2ee6a6', '#e5c07b', '#4d7cff', '#c678dd',
    '#29e0ff', '#c7d0e0', '#6b7892', '#ff5c66', '#5cf0bf', '#ffd27a', '#86a5ff',
    '#d0a3ff', '#8af0ff', '#ffffff'];
  if (n < 16) return base[n] || '#c7d0e0';
  if (n < 232) { n -= 16; const l = [0, 95, 135, 175, 215, 255];
    return `rgb(${l[Math.floor(n / 36) % 6]},${l[Math.floor(n / 6) % 6]},${l[n % 6]})`; }
  const v = 8 + (n - 232) * 10; return `rgb(${v},${v},${v})`;
}
function renderAnsi(text, state) {
  const st = { fg: state.fg || null, bold: !!state.bold };
  const parts = text.split(/\x1b\[([0-9;]*)m/);
  const nodes = [];
  for (let i = 0; i < parts.length; i++) {
    if (i % 2 === 0) { if (parts[i]) nodes.push({ t: parts[i], fg: st.fg, bold: st.bold }); continue; }
    const codes = parts[i].split(';').map(x => parseInt(x || '0', 10));
    for (let j = 0; j < codes.length; j++) {
      const c = codes[j];
      if (c === 0) { st.fg = null; st.bold = false; }
      else if (c === 1) st.bold = true;
      else if (c === 22) st.bold = false;
      else if (c === 39) st.fg = null;
      else if ((c >= 30 && c <= 37) || (c >= 90 && c <= 97)) st.fg = ANSI_FG[c];
      else if (c === 38) {
        if (codes[j + 1] === 5) { st.fg = xterm256(codes[j + 2]); j += 2; }
        else if (codes[j + 1] === 2) { st.fg = `rgb(${codes[j + 2]},${codes[j + 3]},${codes[j + 4]})`; j += 4; }
      }
    }
  }
  return { nodes, state: { fg: st.fg, bold: st.bold } };
}

/* ---- Editor de código ligero: gutter de líneas + Tab a 2 espacios ---- */
function CodeArea({ value, onChange, placeholder, minHeight = 220 }) {
  const taRef = useRefL(null);
  const gutRef = useRefL(null);
  const n = Math.max(1, (value || '').split('\n').length);
  const nums = Array.from({ length: n }, (_, i) => i + 1).join('\n');
  const sync = () => { if (gutRef.current && taRef.current) gutRef.current.scrollTop = taRef.current.scrollTop; };
  const onKeyDown = (e) => {
    if (e.key === 'Tab') {
      e.preventDefault();
      const ta = e.target, s = ta.selectionStart, en = ta.selectionEnd;
      onChange(value.slice(0, s) + '  ' + value.slice(en));
      requestAnimationFrame(() => { try { ta.selectionStart = ta.selectionEnd = s + 2; } catch (x) {} });
    }
  };
  const base = { fontSize: 12, lineHeight: 1.5, fontFamily: 'var(--font-mono)' };
  return (
    <div style={{ display: 'flex', border: '1px solid var(--line-bright)', borderRadius: 7, overflow: 'hidden', background: 'var(--bg-panel-2)' }}>
      <pre ref={gutRef} aria-hidden="true" className="hidden-scroll" style={{ ...base, margin: 0, padding: '8px 8px', textAlign: 'right', color: 'var(--txt-mute)', background: 'var(--bg-void)', borderRight: '1px solid var(--line)', userSelect: 'none', overflow: 'hidden', minWidth: 34 }}>{nums}</pre>
      <textarea ref={taRef} value={value} placeholder={placeholder} spellCheck={false}
                onChange={(e) => onChange(e.target.value)} onKeyDown={onKeyDown} onScroll={sync}
                style={{ ...base, flex: 1, margin: 0, padding: '8px 10px', border: 'none', outline: 'none', resize: 'vertical', background: 'transparent', color: 'var(--txt-hi)', minHeight, whiteSpace: 'pre', overflow: 'auto' }} />
    </div>
  );
}

/* ---- Plantillas de arranque (solo stdlib: corren bajo `python -I`) ---- */
const PY_TEMPLATES = [
  { label: '— Plantilla (opcional) —', name: '', code: '' },
  { label: 'Hola mundo', name: 'hola.py', code: 'print("Hola desde FlowShield")\n' },
  { label: 'Leer argumentos', name: 'args.py', code: 'import sys\n\nargs = sys.argv[1:]\nprint("Argumentos recibidos:", args)\nfor i, a in enumerate(args, 1):\n    print(f"  {i}: {a}")\n' },
  { label: 'Escaneo de puertos (TCP)', name: 'portscan.py', code: 'import socket, sys\n\nhost = sys.argv[1] if len(sys.argv) > 1 else "127.0.0.1"\nports = [21, 22, 23, 25, 53, 80, 110, 139, 143, 443, 445, 3306, 3389, 8080]\nprint(f"Escaneando {host}\\u2026")\nfor p in ports:\n    s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)\n    s.settimeout(0.6)\n    if s.connect_ex((host, p)) == 0:\n        print(f"  [+] {p}/tcp abierto")\n    s.close()\nprint("Hecho.")\n' },
  { label: 'Petición HTTP (stdlib)', name: 'http.py', code: 'import sys, urllib.request\n\nurl = sys.argv[1] if len(sys.argv) > 1 else "https://example.com"\nreq = urllib.request.Request(url, headers={"User-Agent": "FlowShield"})\nwith urllib.request.urlopen(req, timeout=10) as r:\n    print("HTTP", r.status, url)\n    for k, v in r.headers.items():\n        print(f"{k}: {v}")\n' },
  { label: 'Resolver DNS', name: 'dns.py', code: 'import socket, sys\n\nname = sys.argv[1] if len(sys.argv) > 1 else "example.com"\ntry:\n    _, _, ips = socket.gethostbyname_ex(name)\n    print(name, "->", ", ".join(ips))\nexcept socket.gaierror as e:\n    print("error:", e)\n' },
];

const _stripAnsi = (s) => (s || '').replace(/\x1b\[[0-9;]*m/g, '');
const downloadText = (text, filename) => {
  try {
    const blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob); a.download = filename;
    document.body.appendChild(a); a.click(); a.remove();
    setTimeout(() => URL.revokeObjectURL(a.href), 1000);
  } catch (x) {}
};

function Console() {
  const [data, setData] = useStateL(null);
  const [sel, setSel] = useStateL(null);
  const [out, setOut] = useStateL([]);
  const [running, setRunning] = useStateL(false);
  const [args, setArgs] = useStateL('');
  const [view, setView] = useStateL(null);           // null | 'new' | 'import'
  const [form, setForm] = useStateL({ name: '', code: '', url: '', repo: '' });
  const [busy, setBusy] = useStateL(false);
  const [err, setErr] = useStateL(null);
  const [openRun, setOpenRun] = useStateL(-1);        // índice de run expandido en el historial
  const esRef = useRefL(null);
  const runRef = useRefL(null);     // run_id en curso (para parar/reenganchar)
  const fileRef = useRefL(null);
  const termRef = useRefL(null);

  const load = () => window.fsApi('/api/console', { method: 'GET' })
    .then(d => setData(d)).catch(() => setData({ enabled: false, scripts: [], runs: [] }));
  useEffectL(() => { load(); return () => { if (esRef.current) esRef.current.close(); }; }, []);
  // Al entrar (o volver a la sección), si hay una ejecución en segundo plano nos
  // reenganchamos a ella en vivo en lugar de perderla.
  useEffectL(() => {
    if (!data || runRef.current || running) return;
    const a = (data.active_runs || [])[0];
    if (a) { const meta = (data.scripts || []).find(s => s.id === a.sid) || { id: a.sid, name: a.name };
      setOut(o => [...o, { kind: 'sys', text: '↻ reenganchado a «' + a.name + '» (en curso)' }]);
      attachRun(a.run_id, meta); }
  }, [data]);
  useEffectL(() => { if (termRef.current) termRef.current.scrollTop = termRef.current.scrollHeight; }, [out]);

  const push = (e) => setOut(o => [...o, e]);
  // Parar = cancelar en el SERVIDOR (mata el subproceso) + cerrar el stream. La
  // ejecución vive en segundo plano, así que abortar la conexión no la detiene.
  const stop = () => {
    const rid = runRef.current;
    if (rid) window.fsApi('/api/console/run/' + rid + '/cancel', { body: {} }).catch(() => {});
    if (esRef.current) { esRef.current.close(); esRef.current = null; }
    runRef.current = null; setRunning(false);
  };

  // Engancha a una ejecución por run_id (al lanzarla o al volver a la sección).
  const attachRun = (runId, meta) => {
    if (!runId) return;
    if (esRef.current) { esRef.current.close(); esRef.current = null; }
    runRef.current = runId; if (meta) setSel(meta); setRunning(true); setErr(null);
    const es = new EventSource('/api/console/stream/' + runId + '?after=0');
    esRef.current = es;
    es.onmessage = (e) => { try { const d = JSON.parse(e.data); if (d.line != null) push({ kind: 'line', text: d.line }); } catch (x) {} };
    const finish = (e) => {
      try { const d = JSON.parse(e.data); push({ kind: 'done', status: d.status, exit: d.exit, elapsed: d.elapsed }); }
      catch (x) { push({ kind: 'done', status: 'done', elapsed: '?' }); }
      if (esRef.current) { esRef.current.close(); esRef.current = null; }
      runRef.current = null; setRunning(false); load();
    };
    es.addEventListener('done', finish);
    es.addEventListener('cancelled', (e) => { push({ kind: 'done', status: 'cancelled' }); finish(e); });
    es.addEventListener('error', (e) => {
      // 'error' del servidor lleva data; un corte de red no (EventSource reintenta solo).
      if (e && e.data) { try { push({ kind: 'err', text: JSON.parse(e.data).message || 'error' }); } catch (x) {}
        if (esRef.current) { esRef.current.close(); esRef.current = null; } runRef.current = null; setRunning(false); }
    });
  };

  const run = async (meta) => {
    if (running) return;
    setSel(meta); setErr(null);
    const argv = args.trim() ? args.trim().split(/\s+/) : [];
    setOut(o => [...o, { kind: 'prompt', name: meta.name, args: argv }]);
    try {
      const r = await window.fsApi('/api/console/run/' + meta.id, { body: { args: argv } });
      attachRun(r.run_id, meta);
    } catch (e) { setErr(e.message || 'No se pudo lanzar el script.'); }
  };

  const upload = async (file) => {
    if (!file) return; setBusy(true); setErr(null);
    try { const fd = new FormData(); fd.append('file', file); fd.append('name', file.name);
      await window.fsApiForm('/api/console/scripts', fd); await load(); }
    catch (e) { setErr(e.message || 'No se pudo subir el script.'); }
    finally { setBusy(false); if (fileRef.current) fileRef.current.value = ''; }
  };
  const savePaste = async () => {
    if (!form.code.trim()) { setErr('El script está vacío.'); return; }
    setBusy(true); setErr(null);
    try { const fd = new FormData(); fd.append('name', form.name || 'script.py'); fd.append('content', form.code);
      if (form.repo) fd.append('repo', form.repo);
      await window.fsApiForm('/api/console/scripts', fd);
      setForm({ name: '', code: '', url: '', repo: '' }); setView(null); await load(); }
    catch (e) { setErr(e.message || 'No se pudo guardar.'); } finally { setBusy(false); }
  };
  const doImport = async () => {
    if (!form.url.trim()) { setErr('Indica una URL o repositorio git.'); return; }
    setBusy(true); setErr(null);
    try { const r = await window.fsApi('/api/console/scripts/import', { body: { url: form.url.trim(), repo: form.repo.trim() } });
      setForm({ name: '', code: '', url: '', repo: '' }); setView(null); await load();
      push({ kind: 'sys', text: '⇣ importados ' + (r.imported ? r.imported.length : 0) + ' script(s)' }); }
    catch (e) { setErr(e.message || 'No se pudo importar.'); } finally { setBusy(false); }
  };
  const del = async (meta) => {
    if (!confirm('¿Borrar el script «' + meta.name + '»?')) return;
    try { await window.fsApi('/api/console/scripts/' + meta.id, { method: 'DELETE' });
      if (sel && sel.id === meta.id) setSel(null); await load(); }
    catch (e) { setErr(e.message || 'No se pudo borrar.'); }
  };

  if (data === null) return <div className="mono" style={{ color: 'var(--txt-mute)', fontSize: 13 }}>Cargando…</div>;

  const scripts = data.scripts || [];
  const runs = data.runs || [];
  const lim = data.limits || {};
  const srcBadge = { upload: 'subido', paste: 'pegado', url: 'url', git: 'git' };
  const srcColor = { upload: 'var(--blue)', paste: 'var(--fs)', url: 'var(--amber)', git: 'var(--violet, #b66bff)' };
  const runTone = { done: 'var(--ok)', error: 'var(--red)', timeout: 'var(--amber)', cancelled: 'var(--txt-mute)', running: 'var(--acc)' };

  const renderOut = () => {
    let st = {};
    return out.map((l, i) => {
      if (l.kind === 'prompt') { st = {};
        return (
          <div key={i} style={{ marginTop: i ? 12 : 0 }}>
            <div><span style={{ color: 'var(--fs)' }}>┌──(</span><span style={{ color: 'var(--txt-hi)', fontWeight: 700 }}>flowshield㉿onprem</span><span style={{ color: 'var(--fs)' }}>)-[</span><span style={{ color: 'var(--blue)' }}>~</span><span style={{ color: 'var(--fs)' }}>]</span></div>
            <div><span style={{ color: 'var(--fs)' }}>└─$</span> <span style={{ color: 'var(--txt-hi)' }}>python {l.name}{l.args && l.args.length ? ' ' + l.args.join(' ') : ''}</span></div>
          </div>
        );
      }
      if (l.kind === 'sys') { st = {}; return <div key={i} style={{ color: 'var(--acc)' }}>{l.text}</div>; }
      if (l.kind === 'err') { st = {}; return <div key={i} style={{ color: 'var(--red)' }}>{'✖ ' + l.text}</div>; }
      if (l.kind === 'done') { st = {};
        const ok = l.status === 'done' || l.exit === 0;
        const col = ok ? 'var(--ok)' : (l.status === 'timeout' ? 'var(--amber)' : 'var(--red)');
        return <div key={i} style={{ color: col, marginBottom: 2 }}>{(ok ? '✔' : '■') + ' ' + (l.status || ('exit ' + l.exit)) + (l.exit != null && l.status !== 'done' ? '' : '') + ' · ' + l.elapsed + 's'}</div>;
      }
      const r = renderAnsi(l.text, st); st = r.state;
      return <div key={i}>{r.nodes.length ? r.nodes.map((n, j) => <span key={j} style={{ color: n.fg || 'inherit', fontWeight: n.bold ? 700 : 400 }}>{n.t}</span>) : ' '}</div>;
    });
  };

  const dot = (c) => <span style={{ width: 11, height: 11, borderRadius: '50%', background: c, boxShadow: '0 0 6px ' + c, display: 'inline-block' }} />;

  // Texto plano (sin ANSI) de la salida actual del terminal, para copiar/descargar.
  const outputText = () => _stripAnsi(out.map(l =>
    l.kind === 'prompt' ? '$ python ' + l.name + (l.args && l.args.length ? ' ' + l.args.join(' ') : '')
      : l.kind === 'done' ? '— ' + (l.status || ('exit ' + l.exit)) + ' · ' + l.elapsed + 's'
        : (l.text || '')).join('\n'));

  return (
    <div className="theme-fs">
      <div className="eyebrow theme-fs" style={{ marginBottom: 4 }}>Operaciones · On-premise</div>
      <h1 style={{ margin: '0 0 6px', fontSize: 26, color: 'var(--txt-hi)', fontFamily: 'var(--font-display)' }}>Scripting Python</h1>
      <div style={{ color: 'var(--txt-dim)', fontSize: 13, marginBottom: 18, maxWidth: 760 }}>
        Repositorio de scripts Python ejecutables en esta instancia. La salida se vuelca en vivo.
        Se ejecutan con privilegios reducidos y límites (CPU {lim.cpu_s}s · RAM {lim.mem_mb} MB · {lim.timeout_s}s de reloj).
      </div>

      {!data.enabled && (
        <div className="mono" style={{ fontSize: 12, color: 'var(--txt-dim)', background: 'var(--bg-panel-2)', border: '1px solid var(--line)', borderRadius: 8, padding: '10px 13px', marginBottom: 16, display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon name="lock" size={15} style={{ color: 'var(--acc)', flexShrink: 0 }} />
          <span>Aquí puedes <strong style={{ color: 'var(--txt-hi)' }}>gestionar tu repositorio</strong> de scripts (subir, pegar, organizar, descargar). La <strong style={{ color: 'var(--txt-hi)' }}>ejecución en vivo</strong> está disponible en el despliegue <strong style={{ color: 'var(--txt-hi)' }}>on-premise</strong> de FlowShield.</span>
        </div>
      )}
      {err && <div className="mono" style={{ fontSize: 12, color: 'var(--red)', marginBottom: 12 }}>{err}</div>}

      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(240px, 320px) 1fr', gap: 16, alignItems: 'start' }}>
        {/* ---- Repositorio ---- */}
        <div className="panel" style={{ padding: 14, borderRadius: 12, overflow: 'hidden' }}>
          <div className="eyebrow" style={{ margin: '0 0 9px' }}>Repositorio</div>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 12 }}>
            <Btn variant="ghost" size="sm" icon="upload" onClick={() => fileRef.current && fileRef.current.click()}>Subir</Btn>
            <Btn variant="ghost" size="sm" icon="plus" onClick={() => { setView(view === 'new' ? null : 'new'); setErr(null); }}>Nuevo</Btn>
            <Btn variant="ghost" size="sm" icon="download" onClick={() => { setView(view === 'import' ? null : 'import'); setErr(null); }}>Importar</Btn>
          </div>
          <input ref={fileRef} type="file" accept=".py,text/x-python,text/plain" style={{ display: 'none' }}
                 onChange={(e) => upload(e.target.files && e.target.files[0])} />

          {view === 'new' && (
            <div style={{ marginBottom: 12, padding: 11, background: 'var(--bg-void)', border: '1px solid var(--line)', borderRadius: 9, display: 'grid', gap: 8 }}>
              <select className="mono" value="" style={inp}
                      onChange={(e) => { const t = PY_TEMPLATES[Number(e.target.value)]; if (t && t.code) setForm(f => ({ ...f, name: f.name || t.name, code: t.code })); }}>
                {PY_TEMPLATES.map((t, i) => <option key={i} value={i}>{t.label}</option>)}
              </select>
              <input className="mono" placeholder="nombre.py" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} style={inp} />
              <CodeArea value={form.code} onChange={(v) => setForm(f => ({ ...f, code: v }))}
                        placeholder="# pega o escribe aquí tu script Python (Tab = 2 espacios)" minHeight={200} />
              <div style={{ display: 'flex', gap: 8 }}>
                <Btn variant="solid" size="sm" className="theme-fs" onClick={savePaste} style={{ opacity: busy ? 0.6 : 1 }}>{busy ? 'Guardando…' : 'Guardar'}</Btn>
                <Btn variant="ghost" size="sm" onClick={() => setView(null)}>Cancelar</Btn>
              </div>
            </div>
          )}
          {view === 'import' && (
            <div style={{ marginBottom: 12, padding: 11, background: 'var(--bg-void)', border: '1px solid var(--line)', borderRadius: 9, display: 'grid', gap: 8 }}>
              <input className="mono" placeholder="https://…/script.py o repo.git" value={form.url} onChange={(e) => setForm({ ...form, url: e.target.value })} style={inp} />
              <input className="mono" placeholder="carpeta/repo (opcional)" value={form.repo} onChange={(e) => setForm({ ...form, repo: e.target.value })} style={inp} />
              <div style={{ display: 'flex', gap: 8 }}>
                <Btn variant="solid" size="sm" className="theme-fs" onClick={doImport} style={{ opacity: busy ? 0.6 : 1 }}>{busy ? 'Importando…' : 'Importar'}</Btn>
                <Btn variant="ghost" size="sm" onClick={() => setView(null)}>Cancelar</Btn>
              </div>
              <div className="mono" style={{ fontSize: 10, color: 'var(--txt-mute)' }}>Código externo = no confiable: se ejecuta con el mismo aislamiento.</div>
            </div>
          )}

          <div style={{ display: 'grid', gap: 7, maxHeight: 520, overflow: 'auto' }} className="hidden-scroll">
            {scripts.length === 0 && <div className="mono" style={{ fontSize: 12, color: 'var(--txt-mute)' }}>Sin scripts todavía.</div>}
            {scripts.map(s => (
              <div key={s.id} onClick={() => setSel(s)}
                   style={{ padding: '9px 10px', background: sel && sel.id === s.id ? 'var(--acc-soft)' : 'var(--bg-void)', border: '1px solid ' + (sel && sel.id === s.id ? 'color-mix(in srgb,var(--acc) 45%,transparent)' : 'var(--line)'), borderRadius: 8, cursor: 'pointer' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 12.5, color: 'var(--txt-hi)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{s.name}</div>
                    <div className="mono" style={{ fontSize: 10, color: 'var(--txt-mute)', display: 'flex', alignItems: 'center', gap: 5, marginTop: 2 }}>
                      <span style={{ color: srcColor[s.source] || 'var(--txt-mute)' }}>{srcBadge[s.source] || s.source}</span>
                      {s.repo ? <span>· {s.repo}</span> : null}<span>· {s.lines} líneas</span>
                    </div>
                  </div>
                  <button title="Ejecutar" onClick={(e) => { e.stopPropagation(); run(s); }} disabled={running} style={iconBtn('var(--acc)')}><Icon name="play" size={14} /></button>
                  <button title="Descargar" onClick={(e) => { e.stopPropagation(); window.open('/api/console/scripts/' + s.id + '/download', '_blank'); }} style={iconBtn('var(--txt-dim)')}><Icon name="download" size={14} /></button>
                  <button title="Borrar" onClick={(e) => { e.stopPropagation(); del(s); }} style={iconBtn('var(--red)')}><Icon name="trash" size={14} /></button>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* ---- Terminal ---- */}
        <div style={{ display: 'grid', gap: 14, minWidth: 0 }}>
          {/* barra de control */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
            <span className="mono" style={{ fontSize: 12, color: sel ? 'var(--txt-hi)' : 'var(--txt-mute)', display: 'inline-flex', alignItems: 'center', gap: 7 }}>
              <Icon name="terminal" size={15} style={{ color: 'var(--acc)' }} />{sel ? sel.name : 'selecciona un script'}
            </span>
            <span style={{ flex: 1, minWidth: 120 }} />
            <input className="mono" placeholder="argumentos (opcional)" value={args} onChange={(e) => setArgs(e.target.value)}
                   style={{ ...inp, width: 220, maxWidth: '40vw', padding: '6px 9px' }} />
            {running
              ? <Btn variant="ghost" size="sm" icon="stop" onClick={stop}>Detener</Btn>
              : <Btn variant="solid" size="sm" className="theme-fs" icon="play" onClick={() => sel && run(sel)} style={{ opacity: sel ? 1 : 0.5 }}>Ejecutar</Btn>}
          </div>

          {/* ventana de terminal */}
          <div style={{ borderRadius: 12, overflow: 'hidden', border: '1px solid var(--line-bright)', boxShadow: '0 20px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(0,245,192,.04)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '9px 13px', background: 'linear-gradient(180deg,#0b1018,#080b12)', borderBottom: '1px solid var(--line)' }}>
              {dot('#ff5f57')}{dot('#febc2e')}{dot('#28c840')}
              <span className="mono" style={{ fontSize: 10.5, color: 'var(--txt-mute)', marginLeft: 8 }}>zsh — flowshield@onprem: ~{sel ? ' · ' + sel.name : ''}</span>
              <span style={{ flex: 1 }} />
              {running && <span className="mono" style={{ fontSize: 10, color: 'var(--acc)', display: 'inline-flex', alignItems: 'center', gap: 5 }}><span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--acc)', boxShadow: '0 0 7px var(--acc)' }} />en ejecución</span>}
              {out.length > 0 && (() => {
                const tbtn = { background: 'none', border: '1px solid var(--line-bright)', color: 'var(--txt-mute)', borderRadius: 6, padding: '2px 8px', fontSize: 10, cursor: 'pointer', marginLeft: 6 };
                return <>
                  <button title="Copiar salida" onClick={() => { try { navigator.clipboard.writeText(outputText()); } catch (x) {} }} className="mono" style={tbtn}>copiar</button>
                  <button title="Descargar salida" onClick={() => downloadText(outputText(), ((sel && sel.name) || 'salida').replace(/\.py$/, '') + '-' + Date.now() + '.txt')} className="mono" style={tbtn}>descargar</button>
                  {!running && <button onClick={() => setOut([])} className="mono" style={tbtn}>limpiar</button>}
                </>;
              })()}
            </div>
            <pre ref={termRef} className="mono hidden-scroll" style={{
              margin: 0, padding: '14px 16px', minHeight: 340, maxHeight: 520, overflow: 'auto',
              fontSize: 12, lineHeight: 1.55, whiteSpace: 'pre-wrap', wordBreak: 'break-word',
              color: '#c7d0e0',
              background: 'radial-gradient(900px 300px at 15% -10%, rgba(0,245,192,.06), transparent), #03060b',
            }}>
              {out.length === 0
                ? <div style={{ color: 'var(--txt-mute)' }}><span style={{ color: 'var(--fs)' }}>┌──(</span><span style={{ color: 'var(--txt-dim)' }}>flowshield㉿onprem</span><span style={{ color: 'var(--fs)' }}>)-[</span><span style={{ color: 'var(--blue)' }}>~</span><span style={{ color: 'var(--fs)' }}>]</span><br /><span style={{ color: 'var(--fs)' }}>└─$</span> <span className="cursor-blink" style={{ background: 'var(--fs)' }} /> <span style={{ color: 'var(--txt-mute)' }}>selecciona un script y pulsa Ejecutar…</span></div>
                : renderOut()}
              {running && <span className="cursor-blink" style={{ background: 'var(--fs)' }} />}
            </pre>
          </div>

          {/* historial */}
          <div className="panel" style={{ padding: 14, borderRadius: 12 }}>
            <div className="eyebrow" style={{ marginBottom: 10 }}>Historial de ejecuciones</div>
            {runs.length === 0 && <div className="mono" style={{ fontSize: 12, color: 'var(--txt-mute)' }}>Sin ejecuciones aún.</div>}
            <div style={{ display: 'grid', gap: 6 }}>
              {runs.slice(0, 20).map((r, i) => {
                const open = openRun === i;
                const hasOut = !!(r.output_tail && r.output_tail.trim());
                return (
                <div key={i} style={{ background: 'var(--bg-void)', border: '1px solid ' + (open ? 'color-mix(in srgb,var(--acc) 40%,transparent)' : 'var(--line)'), borderRadius: 7, overflow: 'hidden' }}>
                  <div onClick={() => setOpenRun(open ? -1 : i)} title={hasOut ? 'Ver la salida' : ''}
                       style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '7px 10px', cursor: hasOut ? 'pointer' : 'default' }}>
                    <span style={{ width: 8, height: 8, borderRadius: '50%', background: runTone[r.status] || 'var(--txt-mute)', flexShrink: 0 }} />
                    <span className="mono" style={{ fontSize: 11.5, color: 'var(--txt-hi)', flex: 1, minWidth: 0, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                      {r.name}{r.args && r.args.length ? <span style={{ color: 'var(--txt-mute)' }}> {r.args.join(' ')}</span> : null}
                    </span>
                    <span className="mono" style={{ fontSize: 10.5, color: runTone[r.status] || 'var(--txt-mute)' }}>{r.status}{r.exit != null ? ' · exit ' + r.exit : ''}</span>
                    <span className="mono" style={{ fontSize: 10, color: 'var(--txt-mute)' }}>{r.elapsed}s</span>
                    {hasOut && <Icon name="chevrond" size={13} style={{ color: 'var(--txt-mute)', transform: open ? 'rotate(180deg)' : 'none', flexShrink: 0 }} />}
                  </div>
                  {open && hasOut && (
                    <div style={{ borderTop: '1px solid var(--line)' }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px' }}>
                        <span className="mono" style={{ fontSize: 9.5, color: 'var(--txt-mute)', flex: 1 }}>{r.at || ''} · últimas líneas</span>
                        <button className="mono" title="Copiar" onClick={() => { try { navigator.clipboard.writeText(_stripAnsi(r.output_tail)); } catch (x) {} }} style={{ background: 'none', border: '1px solid var(--line-bright)', color: 'var(--txt-mute)', borderRadius: 6, padding: '1px 7px', fontSize: 9.5, cursor: 'pointer' }}>copiar</button>
                        <button className="mono" title="Descargar" onClick={() => downloadText(_stripAnsi(r.output_tail), r.name.replace(/\.py$/, '') + '-' + i + '.txt')} style={{ background: 'none', border: '1px solid var(--line-bright)', color: 'var(--txt-mute)', borderRadius: 6, padding: '1px 7px', fontSize: 9.5, cursor: 'pointer' }}>descargar</button>
                      </div>
                      <pre className="mono hidden-scroll" style={{ margin: 0, padding: '8px 12px', maxHeight: 220, overflow: 'auto', fontSize: 11, lineHeight: 1.5, whiteSpace: 'pre-wrap', wordBreak: 'break-word', color: '#c7d0e0', background: '#03060b' }}>{_stripAnsi(r.output_tail)}</pre>
                    </div>
                  )}
                </div>
              );})}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

const inp = { background: 'var(--bg-panel-2)', border: '1px solid var(--line-bright)', borderRadius: 7, padding: '7px 9px', color: 'var(--txt-hi)', fontSize: 12, outline: 'none', width: '100%' };
const iconBtn = (color) => ({ background: 'none', border: 'none', color, cursor: 'pointer', padding: 3, display: 'inline-flex', flexShrink: 0 });