// ── Script Editor (CodeMirror wrapper) ────────────────────────────────

function ScriptEditor({ value, onChange, minHeight = 300 }) {
  const containerRef = useRef(null);
  const editorRef = useRef(null);
  const callbackRef = useRef(onChange);
  callbackRef.current = onChange;

  useEffect(() => {
    if (!containerRef.current || editorRef.current) return;
    const cm = CodeMirror(containerRef.current, {
      value: value || '',
      mode: 'javascript',
      lineNumbers: true,
      matchBrackets: true,
      autoCloseBrackets: true,
      indentUnit: 2,
      tabSize: 2,
      indentWithTabs: false,
      lineWrapping: true,
      extraKeys: { 'Tab': (cm) => cm.replaceSelection('  ') },
    });
    cm.setSize(null, minHeight);
    cm.on('change', () => callbackRef.current(cm.getValue()));
    editorRef.current = cm;
    setTimeout(() => cm.refresh(), 50);
  }, []);

  useEffect(() => {
    if (editorRef.current && value !== editorRef.current.getValue()) {
      editorRef.current.setValue(value || '');
    }
  }, [value]);

  return (
    <div className="cm-wrapper" ref={containerRef} />
  );
}

// ── Client-side JS lint ───────────────────────────────────────────────

function lintScript(code) {
  try {
    new Function(code);
    return null;
  } catch (e) {
    let line = null;
    if (e.stack) {
      const m = e.stack.match(/<anonymous>:(\d+):(\d+)/);
      if (m) line = Math.max(1, parseInt(m[1]) - 2);
    }
    if (line === null && typeof e.lineNumber === 'number') {
      line = Math.max(1, e.lineNumber - 1);
    }
    return { message: e.message, line };
  }
}

// ── Workers ───────────────────────────────────────────────────────────

function CtxReference({ globalFns }) {
  const [open, setOpen] = useState(false);

  const builtins = [
    { section: 'request', items: [
      { sig: 'request.method', desc: 'HTTP method (GET, POST, etc.)' },
      { sig: 'request.url', desc: 'Full request URL' },
      { sig: 'request.path', desc: 'URL path portion' },
      { sig: 'request.query', desc: 'Query parameters object' },
      { sig: 'request.headers', desc: 'Request headers object' },
      { sig: 'request.body', desc: 'Request body (string or null)' },
    ]},
    { section: 'env', items: [
      { sig: 'env.vars.KEY', desc: 'Environment variables' },
      { sig: 'env.KV.get(key)', desc: 'Get value from KV store' },
      { sig: 'env.KV.put(key, val, {ttl})', desc: 'Put value with optional TTL (seconds)' },
      { sig: 'env.KV.delete(key)', desc: 'Delete a KV entry' },
      { sig: 'env.KV.list()', desc: 'List all KV keys' },
    ]},
    { section: 'ctx', items: [
      { sig: 'ctx.waitUntil()', desc: 'Placeholder (no-op)' },
    ]},
  ];

  return (
    <div style={{marginBottom:12}}>
      <button className="btn-sm btn-ghost" onClick={() => setOpen(!open)}
        style={{fontSize:12,padding:'4px 10px',display:'flex',alignItems:'center',gap:4}}>
        <span style={{fontSize:10,display:'inline-block',transform:open?'rotate(90deg)':'none',transition:'transform .15s'}}>▶</span>
        API Reference
      </button>
      {open && (
        <div style={{marginTop:8,padding:'12px 16px',background:'rgba(255,255,255,0.03)',border:'1px solid var(--border)',borderRadius:8,fontSize:12}}>
          {builtins.map(s => (
            <div key={s.section} style={{marginBottom:12}}>
              <div style={{fontWeight:700,color:'var(--accent)',marginBottom:4,textTransform:'uppercase',fontSize:10,letterSpacing:1}}>{s.section}</div>
              {s.items.map(i => (
                <div key={i.sig} style={{display:'flex',gap:12,padding:'3px 0'}}>
                  <code style={{fontFamily:'SF Mono,Menlo,Consolas,monospace',color:'var(--text)',minWidth:220}}>{i.sig}</code>
                  <span style={{color:'var(--text-dim)'}}>{i.desc}</span>
                </div>
              ))}
            </div>
          ))}
          {globalFns && globalFns.length > 0 && (
            <div>
              <div style={{fontWeight:700,color:'var(--accent)',marginBottom:4,textTransform:'uppercase',fontSize:10,letterSpacing:1}}>Global Context Functions</div>
              {globalFns.map(f => (
                <div key={f.name} style={{display:'flex',gap:12,padding:'3px 0'}}>
                  <code style={{fontFamily:'SF Mono,Menlo,Consolas,monospace',color:'var(--text)',minWidth:220}}>ctx.{f.name}({f.args})</code>
                  <span style={{color:'var(--text-dim)'}}>{f.description || '—'}</span>
                </div>
              ))}
            </div>
          )}
        </div>
      )}
    </div>
  );
}

function WorkersPage({ user }) {
  const [workers, setWorkers] = useState([]);
  const [loading, setLoading] = useState(false);
  const [showCreate, setShowCreate] = useState(false);
  const [newName, setNewName] = useState('');
  const [newScript, setNewScript] = useState('function fetch(request, env, ctx) {\n  return {\n    status: 200,\n    headers: { "content-type": "application/json" },\n    body: JSON.stringify({ hello: "world" })\n  };\n}');
  const [selected, setSelected] = useState(null);
  const [detail, setDetail] = useState(null);
  const [editScript, setEditScript] = useState('');
  const [tab, setTab] = useState('code');
  const [envVars, setEnvVars] = useState([]);
  const [kvEntries, setKvEntries] = useState([]);
  const [runs, setRuns] = useState([]);
  const [crons, setCrons] = useState([]);
  const [newCron, setNewCron] = useState('');
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState('');
  const [scriptError, setScriptError] = useState(null);
  const [ctxFns, setCtxFns] = useState([]);

  const loadWorkers = useCallback(async () => {
    setLoading(true);
    try { setWorkers(await api('/api/workers/list')); setError(''); }
    catch (e) { setError(e.message); }
    finally { setLoading(false); }
  }, []);

  const loadCtxRef = useCallback(async () => {
    try { setCtxFns(await api('/api/workers/ctx-reference')); } catch {}
  }, []);

  useEffect(() => { loadWorkers(); loadCtxRef(); }, [loadWorkers, loadCtxRef]);

  const loadDetail = async (name) => {
    setSelected(name);
    setTab('code');
    setScriptError(null);
    try {
      const d = await api(`/api/workers/detail/${name}`);
      setDetail(d);
      setEditScript(d.script);
      setEnvVars(d.envVars || []);
      setCrons(d.crons || []);
      setRuns(d.recentRuns || []);
      loadKv(name);
    } catch (e) { setError(e.message); }
  };

  const loadKv = async (name) => {
    try { setKvEntries(await api(`/api/workers/detail/${name}/kv`)); } catch {}
  };

  const createWorker = async () => {
    if (!newName || !newScript) return;
    const lint = lintScript(newScript);
    if (lint) { setScriptError(lint); return; }
    setScriptError(null);
    setSaving(true);
    try {
      await api('/api/workers/create', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: newName, script: newScript }) });
      setShowCreate(false);
      setNewName('');
      loadWorkers();
    } catch (e) { setError(e.message); }
    finally { setSaving(false); }
  };

  const saveScript = async () => {
    if (!selected) return;
    const lint = lintScript(editScript);
    if (lint) { setScriptError(lint); return; }
    setScriptError(null);
    setSaving(true);
    try {
      await api(`/api/workers/update/${selected}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ script: editScript }) });
      loadDetail(selected);
      setError('');
    } catch (e) { setError(e.message); }
    finally { setSaving(false); }
  };

  const toggleWorker = async (name, enabled) => {
    try {
      await api(`/api/workers/update/${name}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ enabled: !enabled }) });
      loadWorkers();
      if (selected === name) loadDetail(name);
    } catch (e) { setError(e.message); }
  };

  const deleteWorker = async (name) => {
    if (!confirm(`Delete worker "${name}"? This cannot be undone.`)) return;
    try {
      await api(`/api/workers/delete/${name}`, { method: 'DELETE' });
      if (selected === name) { setSelected(null); setDetail(null); }
      loadWorkers();
    } catch (e) { setError(e.message); }
  };

  const saveEnv = async () => {
    if (!selected) return;
    setSaving(true);
    try {
      await api(`/api/workers/detail/${selected}/env`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ vars: envVars }) });
      setError('');
    } catch (e) { setError(e.message); }
    finally { setSaving(false); }
  };

  const addCron = async () => {
    if (!selected || !newCron) return;
    try {
      await api(`/api/workers/detail/${selected}/crons`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ expression: newCron }) });
      setNewCron('');
      const c = await api(`/api/workers/detail/${selected}/crons`);
      setCrons(c);
    } catch (e) { setError(e.message); }
  };

  const deleteCron = async (cronId) => {
    if (!selected) return;
    try {
      await api(`/api/workers/detail/${selected}/crons/${cronId}`, { method: 'DELETE' });
      const c = await api(`/api/workers/detail/${selected}/crons`);
      setCrons(c);
    } catch (e) { setError(e.message); }
  };

  const clearLogs = async () => {
    if (!selected || !confirm('Clear all logs for this worker?')) return;
    try {
      await api(`/api/workers/detail/${selected}/runs`, { method: 'DELETE' });
      setRuns([]);
    } catch (e) { setError(e.message); }
  };

  const fmtTime = (t) => t ? t.replace('T', ' ').slice(0, 19) : '-';
  const fmtBytes = (b) => {
    if (!b) return '0 B';
    const u = ['B', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(b) / Math.log(1024));
    return (b / Math.pow(1024, i)).toFixed(i > 0 ? 1 : 0) + ' ' + u[i];
  };

  if (selected && detail) {
    return (
      <>
        <div style={{display:'flex',alignItems:'center',gap:12,marginBottom:8}}>
          <button className="btn-sm btn-ghost" onClick={() => { setSelected(null); setDetail(null); }}>← Back</button>
          <h2 style={{margin:0}}>{detail.name}</h2>
          <span style={{fontSize:12,padding:'2px 8px',borderRadius:6,background:detail.enabled?'rgba(52,199,89,0.15)':'rgba(255,69,58,0.15)',color:detail.enabled?'var(--green)':'var(--red)'}}>{detail.enabled ? 'Active' : 'Disabled'}</span>
        </div>
        <div className="page-sub" style={{marginBottom:16}}>
          <code style={{fontSize:12,color:'var(--text-dim)'}}>https://workers.vibey.cloud/w/{detail.name}</code>
          {' · '}{detail.total_runs} runs · {detail.total_errors} errors · {fmtBytes(detail.size_bytes)}
        </div>

        {error && <div style={{background:'rgba(255,69,58,0.1)',border:'1px solid var(--red)',borderRadius:8,padding:'8px 12px',marginBottom:12,fontSize:13,color:'var(--red)'}}>{error}</div>}

        <div style={{display:'flex',gap:8,marginBottom:16,flexWrap:'wrap'}}>
          {['code','env','kv','crons','logs'].map(t => (
            <button key={t} className={tab === t ? 'btn-sm' : 'btn-sm btn-ghost'} onClick={() => { setTab(t); if (t === 'logs') api(`/api/workers/detail/${selected}/runs?limit=50`).then(setRuns).catch(() => {}); if (t === 'kv') loadKv(selected); }}
              style={tab === t ? {background:'var(--accent)',color:'#fff'} : {}}>
              {t === 'code' ? 'Script' : t === 'env' ? 'Env Vars' : t === 'kv' ? 'KV Store' : t === 'crons' ? 'Cron Triggers' : 'Logs'}
            </button>
          ))}
        </div>

        {tab === 'code' && (
          <div className="profile-card" style={{maxWidth:'none'}}>
            <h3>Worker Script</h3>
            <p style={{fontSize:12,color:'var(--text-dim)',marginBottom:8}}>
              Export a <code>fetch(request, env, ctx)</code> function. Return an object with <code>status</code>, <code>headers</code>, and <code>body</code>.
            </p>
            <CtxReference globalFns={ctxFns} />
            <ScriptEditor value={editScript} onChange={v => { setEditScript(v); if (scriptError) setScriptError(null); }} minHeight={300} />
            {scriptError && (
              <div style={{background:'rgba(255,69,58,0.1)',border:'1px solid var(--red)',borderRadius:8,padding:'10px 14px',marginTop:8}}>
                <div style={{fontWeight:600,fontSize:13,color:'var(--red)',marginBottom:4}}>
                  Syntax Error{scriptError.line ? ` on line ${scriptError.line}` : ''}
                </div>
                <code style={{fontSize:12,color:'var(--text)',fontFamily:'SF Mono,Menlo,Consolas,monospace'}}>{scriptError.message}</code>
              </div>
            )}
            <div style={{display:'flex',gap:8,marginTop:12}}>
              <button className="btn-sm" onClick={saveScript} disabled={saving}>{saving ? 'Saving...' : 'Deploy'}</button>
              <button className="btn-sm btn-ghost" onClick={() => toggleWorker(selected, detail.enabled)}>{detail.enabled ? 'Disable' : 'Enable'}</button>
              <button className="btn-sm btn-ghost" style={{color:'var(--red)'}} onClick={() => deleteWorker(selected)}>Delete</button>
            </div>
          </div>
        )}

        {tab === 'env' && (
          <div className="profile-card" style={{maxWidth:'none'}}>
            <h3>Environment Variables</h3>
            <p style={{fontSize:12,color:'var(--text-dim)',marginBottom:12}}>Available in your worker as <code>env.vars.KEY_NAME</code></p>
            {envVars.map((v, i) => (
              <div key={i} style={{display:'flex',gap:8,marginBottom:8}}>
                <input value={v.key} onChange={e => { const nv = [...envVars]; nv[i] = {...nv[i], key: e.target.value}; setEnvVars(nv); }} placeholder="KEY" style={{flex:1,fontFamily:'monospace',fontSize:13,padding:'6px 10px',background:'var(--bg)',border:'1px solid var(--border)',borderRadius:6,color:'var(--text)'}} />
                <input value={v.value} onChange={e => { const nv = [...envVars]; nv[i] = {...nv[i], value: e.target.value}; setEnvVars(nv); }} placeholder="value" style={{flex:2,fontFamily:'monospace',fontSize:13,padding:'6px 10px',background:'var(--bg)',border:'1px solid var(--border)',borderRadius:6,color:'var(--text)'}} />
                <button className="btn-sm btn-ghost" onClick={() => setEnvVars(envVars.filter((_, j) => j !== i))} style={{color:'var(--red)'}}>×</button>
              </div>
            ))}
            <div style={{display:'flex',gap:8,marginTop:8}}>
              <button className="btn-sm btn-ghost" onClick={() => setEnvVars([...envVars, {key:'', value:''}])}>+ Add Variable</button>
              <button className="btn-sm" onClick={saveEnv} disabled={saving}>{saving ? 'Saving...' : 'Save'}</button>
            </div>
          </div>
        )}

        {tab === 'kv' && (
          <div className="profile-card" style={{maxWidth:'none'}}>
            <h3>KV Store</h3>
            <p style={{fontSize:12,color:'var(--text-dim)',marginBottom:12}}>Key-value storage available in your worker as <code>env.KV.get(key)</code>, <code>env.KV.put(key, value)</code></p>
            {kvEntries.length === 0 && <p style={{color:'var(--text-dim)',fontSize:13}}>No KV entries yet. Workers can write to KV at runtime.</p>}
            {kvEntries.length > 0 && (
              <div style={{overflowX:'auto'}}>
                <table style={{width:'100%',borderCollapse:'collapse',fontSize:13}}>
                  <thead><tr style={{borderBottom:'1px solid var(--border)'}}>
                    <th style={{textAlign:'left',padding:'8px',color:'var(--text-dim)'}}>Key</th>
                    <th style={{textAlign:'left',padding:'8px',color:'var(--text-dim)'}}>Value</th>
                    <th style={{textAlign:'left',padding:'8px',color:'var(--text-dim)'}}>Expires</th>
                  </tr></thead>
                  <tbody>{kvEntries.map(e => (
                    <tr key={e.key} style={{borderBottom:'1px solid var(--border)'}}>
                      <td style={{padding:'8px',fontFamily:'monospace'}}>{e.key}</td>
                      <td style={{padding:'8px',fontFamily:'monospace',maxWidth:300,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{e.value}</td>
                      <td style={{padding:'8px',color:'var(--text-dim)'}}>{e.expires_at ? fmtTime(e.expires_at) : 'Never'}</td>
                    </tr>
                  ))}</tbody>
                </table>
              </div>
            )}
          </div>
        )}

        {tab === 'crons' && (
          <div className="profile-card" style={{maxWidth:'none'}}>
            <h3>Cron Triggers</h3>
            <p style={{fontSize:12,color:'var(--text-dim)',marginBottom:12}}>Schedule your worker to run periodically. Uses standard cron syntax.</p>
            {crons.map(c => (
              <div key={c.id} style={{display:'flex',alignItems:'center',gap:12,padding:'8px 0',borderBottom:'1px solid var(--border)'}}>
                <code style={{fontSize:13,flex:1}}>{c.expression}</code>
                <span style={{fontSize:12,color:'var(--text-dim)'}}>Last: {fmtTime(c.last_run_at)}</span>
                <button className="btn-sm btn-ghost" onClick={() => deleteCron(c.id)} style={{color:'var(--red)'}}>×</button>
              </div>
            ))}
            <div style={{display:'flex',gap:8,marginTop:12}}>
              <input value={newCron} onChange={e => setNewCron(e.target.value)} placeholder="*/5 * * * *" style={{flex:1,fontFamily:'monospace',fontSize:13,padding:'6px 10px',background:'var(--bg)',border:'1px solid var(--border)',borderRadius:6,color:'var(--text)'}} />
              <button className="btn-sm" onClick={addCron}>Add</button>
            </div>
          </div>
        )}

        {tab === 'logs' && (
          <div className="profile-card" style={{maxWidth:'none'}}>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:20}}>
              <h3 style={{margin:0}}>Recent Runs</h3>
              {runs.length > 0 && <button className="btn-sm btn-ghost" onClick={clearLogs} style={{color:'var(--red)',fontSize:11}}>Clear Logs</button>}
            </div>
            {runs.length === 0 && <p style={{color:'var(--text-dim)',fontSize:13}}>No runs recorded yet.</p>}
            {runs.length > 0 && (
              <div style={{overflowX:'auto'}}>
                <table style={{width:'100%',borderCollapse:'collapse',fontSize:13}}>
                  <thead><tr style={{borderBottom:'1px solid var(--border)'}}>
                    <th style={{textAlign:'left',padding:'8px',color:'var(--text-dim)'}}>Time</th>
                    <th style={{textAlign:'left',padding:'8px',color:'var(--text-dim)'}}>Trigger</th>
                    <th style={{textAlign:'left',padding:'8px',color:'var(--text-dim)'}}>Status</th>
                    <th style={{textAlign:'left',padding:'8px',color:'var(--text-dim)'}}>Duration</th>
                    <th style={{textAlign:'left',padding:'8px',color:'var(--text-dim)'}}>Error</th>
                  </tr></thead>
                  <tbody>{runs.map(r => (
                    <tr key={r.id} style={{borderBottom:'1px solid var(--border)'}}>
                      <td style={{padding:'8px'}}>{fmtTime(r.created_at)}</td>
                      <td style={{padding:'8px'}}><span style={{fontSize:11,padding:'2px 6px',borderRadius:4,background:r.trigger_type==='cron'?'rgba(175,130,255,0.15)':'rgba(52,199,89,0.15)',color:r.trigger_type==='cron'?'#af82ff':'var(--green)'}}>{r.trigger_type}</span></td>
                      <td style={{padding:'8px'}}><span style={{color:r.status_code < 400 ? 'var(--green)' : 'var(--red)'}}>{r.status_code}</span></td>
                      <td style={{padding:'8px'}}>{r.duration_ms}ms</td>
                      <td style={{padding:'8px',color:'var(--red)',maxWidth:400,fontSize:12,fontFamily:'SF Mono,Menlo,Consolas,monospace',whiteSpace:'pre-wrap',wordBreak:'break-word'}}>{r.error || '-'}</td>
                    </tr>
                  ))}</tbody>
                </table>
              </div>
            )}
          </div>
        )}
      </>
    );
  }

  return (
    <>
      <h2>Workers</h2>
      <div className="page-sub">Deploy serverless JavaScript functions with V8 sandboxing</div>

      {error && <div style={{background:'rgba(255,69,58,0.1)',border:'1px solid var(--red)',borderRadius:8,padding:'8px 12px',marginBottom:12,fontSize:13,color:'var(--red)'}}>{error}</div>}

      <div style={{display:'flex',gap:8,marginBottom:16}}>
        <button className="btn-sm" onClick={() => setShowCreate(!showCreate)}>{showCreate ? 'Cancel' : '+ New Worker'}</button>
        <button className="btn-sm btn-ghost" onClick={loadWorkers} disabled={loading}>{loading ? 'Loading...' : 'Refresh'}</button>
      </div>

      {showCreate && (
        <div className="profile-card" style={{maxWidth:'none',marginBottom:16}}>
          <h3>Create Worker</h3>
          <div style={{marginBottom:12}}>
            <label style={{fontSize:12,color:'var(--text-dim)',display:'block',marginBottom:4}}>Name (lowercase, alphanumeric, hyphens)</label>
            <input value={newName} onChange={e => setNewName(e.target.value)} placeholder="my-worker"
              style={{width:'100%',maxWidth:400,padding:'8px 12px',background:'var(--bg)',border:'1px solid var(--border)',borderRadius:8,fontSize:14,color:'var(--text)',fontFamily:'monospace'}} />
          </div>
          <div style={{marginBottom:12}}>
            <label style={{fontSize:12,color:'var(--text-dim)',display:'block',marginBottom:4}}>Script</label>
            <CtxReference globalFns={ctxFns} />
            <ScriptEditor value={newScript} onChange={v => { setNewScript(v); if (scriptError) setScriptError(null); }} minHeight={200} />
          </div>
          {scriptError && (
            <div style={{background:'rgba(255,69,58,0.1)',border:'1px solid var(--red)',borderRadius:8,padding:'10px 14px',marginBottom:12}}>
              <div style={{fontWeight:600,fontSize:13,color:'var(--red)',marginBottom:4}}>
                Syntax Error{scriptError.line ? ` on line ${scriptError.line}` : ''}
              </div>
              <code style={{fontSize:12,color:'var(--text)',fontFamily:'SF Mono,Menlo,Consolas,monospace'}}>{scriptError.message}</code>
            </div>
          )}
          <div style={{fontSize:12,color:'var(--text-dim)',marginBottom:12}}>
            Invoke at: <code>https://workers.vibey.cloud/w/{newName || 'name'}</code>
          </div>
          <button className="btn-sm" onClick={createWorker} disabled={saving || !newName}>{saving ? 'Creating...' : 'Create & Deploy'}</button>
        </div>
      )}

      {workers.length === 0 && !loading && !showCreate && (
        <div className="profile-card" style={{textAlign:'center',padding:'40px 20px'}}>
          <div style={{fontSize:32,marginBottom:12}}>⬢</div>
          <p style={{color:'var(--text-dim)',marginBottom:16}}>No workers yet. Create your first serverless function.</p>
          <button className="btn-sm" onClick={() => setShowCreate(true)}>+ New Worker</button>
        </div>
      )}

      {workers.length > 0 && (
        <div style={{display:'grid',gap:12}}>
          {workers.map(w => (
            <div key={w.id} className="profile-card" style={{cursor:'pointer',padding:'16px 20px'}} onClick={() => loadDetail(w.name)}>
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
                <div>
                  <div style={{display:'flex',alignItems:'center',gap:8}}>
                    <span style={{fontWeight:600,fontSize:15}}>{w.name}</span>
                    <span style={{fontSize:11,padding:'2px 6px',borderRadius:4,background:w.enabled?'rgba(52,199,89,0.15)':'rgba(255,69,58,0.15)',color:w.enabled?'var(--green)':'var(--red)'}}>{w.enabled ? 'Active' : 'Disabled'}</span>
                  </div>
                  <div style={{fontSize:12,color:'var(--text-dim)',marginTop:4}}>
                    {w.total_runs} runs · {w.total_errors} errors · {fmtBytes(w.size_bytes)} · Last run: {fmtTime(w.last_run_at)}
                  </div>
                </div>
                <div style={{display:'flex',gap:6}} onClick={e => e.stopPropagation()}>
                  <button className="btn-sm btn-ghost" onClick={() => toggleWorker(w.name, w.enabled)} style={{fontSize:11}}>{w.enabled ? 'Disable' : 'Enable'}</button>
                  <button className="btn-sm btn-ghost" onClick={() => deleteWorker(w.name)} style={{fontSize:11,color:'var(--red)'}}>Delete</button>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </>
  );
}