// assets/screen_devtools.jsx
function ScreenDevTools({ t }) {
  const [tab, setTab] = React.useState('hook');
  return (
    <div className="page">
      <div className="page-head">
        <h1>Dev tools</h1>
        <span className="page-sub">P2 · admin-only · build when pain rõ</span>
        <div className="page-actions">
          <Badge kind="warning">internal</Badge>
        </div>
      </div>
      <div className="tabs">
        <div className={`tab ${tab === 'hook' ? 'active' : ''}`} onClick={() => setTab('hook')}>
          <Icon name="hook" size={12} /> Hook simulator
        </div>
        <div className={`tab ${tab === 'compare' ? 'active' : ''}`} onClick={() => setTab('compare')}>
          <Icon name="layers" size={12} /> Session compare
        </div>
        <div className={`tab ${tab === 'sql' ? 'active' : ''}`} onClick={() => setTab('sql')}>
          <Icon name="database" size={12} /> SQL runner
        </div>
      </div>
      {tab === 'hook' && <HookSimulator />}
      {tab === 'compare' && <SessionCompare />}
      {tab === 'sql' && <SqlRunner />}
    </div>
  );
}

function HookSimulator() {
  const [tool, setTool] = React.useState('Write');
  const [path, setPath] = React.useState('src/components/Hero.tsx');
  const [content, setContent] = React.useState(`import React from 'react';

export function Hero() {
  return (
    <div style={{ background: '#1a2b3c', padding: 40 }}>
      <h1 className="text-[#fff] text-[48px]">Welcome to Bloom</h1>
      <img src="/hero.png" />
      <button onClick={() => console.log('clicked')}>Shop now</button>
    </div>
  );
}`);
  const [results, setResults] = React.useState(null);

  const run = () => {
    const fires = [];
    if (content.includes('style={{') || content.includes('style="')) fires.push({ hook: 'block_inline_styles', decision: 'deny', msg: HOOK_SAMPLES.block_inline_styles });
    if (/text-\[#|bg-\[#|text-\[\d+/.test(content)) fires.push({ hook: 'enforce_tailwind_tokens', decision: 'soft', msg: HOOK_SAMPLES.enforce_tailwind_tokens });
    if (content.includes('console.log')) fires.push({ hook: 'block_console_logs', decision: 'soft', msg: HOOK_SAMPLES.block_console_logs });
    if (/<img(?![^>]*\balt=)/.test(content)) fires.push({ hook: 'require_alt_text', decision: 'soft', msg: HOOK_SAMPLES.require_alt_text });
    if (content.includes('dangerouslySetInnerHTML')) fires.push({ hook: 'block_dangerous_html', decision: 'deny', msg: HOOK_SAMPLES.block_dangerous_html });
    setResults(fires);
  };

  return (
    <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 12 }}>
      <div className="card">
        <div className="card-head" style={{ gap: 8 }}>
          <select className="select" value={tool} onChange={e => setTool(e.target.value)} style={{ width: 'auto' }}>
            <option>Write</option><option>Edit</option><option>NotebookEdit</option>
          </select>
          <input className="input" value={path} onChange={e => setPath(e.target.value)} style={{ flex: 1, maxWidth: 320 }} />
          <button className="btn primary" onClick={run} style={{ marginLeft: 'auto' }}><Icon name="play" size={11} /> Run hooks</button>
        </div>
        <div className="card-body flush">
          <textarea value={content} onChange={e => setContent(e.target.value)}
            style={{ width: '100%', height: 360, border: 0, padding: 14, background: 'var(--bg-base)', color: 'var(--text-primary)', fontFamily: 'var(--font-mono)', fontSize: 12, lineHeight: 1.6, resize: 'vertical', outline: 'none' }} />
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <h3>Results</h3>
          <span className="sub">{results ? `${results.length} hooks fired` : 'press Run hooks'}</span>
          {results && <Badge kind={results.some(r => r.decision === 'deny') ? 'danger' : results.length > 0 ? 'warning' : 'success'} style={{ marginLeft: 'auto' }}>
            {results.some(r => r.decision === 'deny') ? 'BLOCKED' : results.length > 0 ? 'soft warnings' : 'OK'}
          </Badge>}
        </div>
        <div className="card-body" style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {results === null && <div className="empty-state">Edit code on the left and press Run hooks to simulate.</div>}
          {results && results.length === 0 && (
            <div className="empty-state" style={{ color: 'var(--success)' }}>
              <Icon name="check2" size={28} /><br /><br />
              All 12 hooks passed. Would be written.
            </div>
          )}
          {results && results.map((r, i) => (
            <div key={i} style={{ padding: 10, background: r.decision === 'deny' ? 'var(--danger-muted)' : 'var(--warning-muted)', borderRadius: 'var(--radius)', borderLeft: `3px solid ${r.decision === 'deny' ? 'var(--danger)' : 'var(--warning)'}` }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <Badge kind={r.decision === 'deny' ? 'danger' : 'warning'}>{r.decision}</Badge>
                <Mono>{r.hook}</Mono>
              </div>
              <div style={{ fontSize: 12, marginTop: 6, color: r.decision === 'deny' ? 'var(--danger)' : 'var(--warning)' }}>{r.msg}</div>
            </div>
          ))}
          <div style={{ marginTop: 'auto', paddingTop: 12, borderTop: '1px solid var(--border-subtle)', display: 'flex', gap: 8 }}>
            <button className="btn"><Icon name="download" size={11} /> Save test case</button>
            <button className="btn ghost">Load test case</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function SessionCompare() {
  const [a, setA] = React.useState(SESSIONS[0].id);
  const [b, setB] = React.useState(SESSIONS[1].id);
  const sa = SESSIONS.find(s => s.id === a);
  const sb = SESSIONS.find(s => s.id === b);
  const row = (label, va, vb, fmt = v => v) => (
    <tr>
      <td style={{ fontSize: 11, color: 'var(--text-tertiary)', textTransform: 'uppercase', letterSpacing: '.04em' }}>{label}</td>
      <td><Mono>{fmt(va)}</Mono></td>
      <td><Mono>{fmt(vb)}</Mono></td>
      <td className={typeof va === 'number' && typeof vb === 'number' ? (vb > va ? 'text-danger' : vb < va ? 'text-success' : 'dim') : 'dim'} style={{ textAlign: 'right' }}>
        {typeof va === 'number' && typeof vb === 'number' ? <Mono>{vb > va ? '+' : ''}{(vb - va).toFixed(2)}</Mono> : '—'}
      </td>
    </tr>
  );
  return (
    <div>
      <div className="grid cols-2" style={{ marginBottom: 12 }}>
        <div className="card">
          <div className="card-head"><h3>Session A</h3></div>
          <div className="card-body">
            <select className="select" value={a} onChange={e => setA(e.target.value)}>
              {SESSIONS.slice(0, 20).map(s => <option key={s.id} value={s.id}>{shortId(s.id)} · {s.project_name}</option>)}
            </select>
          </div>
        </div>
        <div className="card">
          <div className="card-head"><h3>Session B</h3></div>
          <div className="card-body">
            <select className="select" value={b} onChange={e => setB(e.target.value)}>
              {SESSIONS.slice(0, 20).map(s => <option key={s.id} value={s.id}>{shortId(s.id)} · {s.project_name}</option>)}
            </select>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-head"><h3>Side-by-side diff</h3></div>
        <div className="table-wrap">
          <table className="tbl">
            <thead><tr><th>Field</th><th>A: {shortId(sa.id)}</th><th>B: {shortId(sb.id)}</th><th className="num">Δ</th></tr></thead>
            <tbody>
              {row('project', sa.project_name, sb.project_name)}
              {row('template', sa.template_kind, sb.template_kind)}
              {row('model', sa.model, sb.model)}
              {row('status', sa.status, sb.status)}
              {row('duration (s)', sa.duration, sb.duration, v => v + 's')}
              {row('tool calls', sa.tool_calls, sb.tool_calls)}
              {row('cost ($)', +sa.cost.toFixed(2), +sb.cost.toFixed(2), v => '$' + v)}
              {row('input tokens', sa.tokens.in, sb.tokens.in, v => v.toLocaleString())}
              {row('output tokens', sa.tokens.out, sb.tokens.out, v => v.toLocaleString())}
              {row('cache read', sa.tokens.cacheRead, sb.tokens.cacheRead, v => v.toLocaleString())}
              {row('hooks total', sa.hooks_total, sb.hooks_total)}
              {row('hooks deny', sa.hooks_deny, sb.hooks_deny)}
              {row('errors', sa.error_count, sb.error_count)}
              {row('files touched', sa.files_touched, sb.files_touched)}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

function SqlRunner() {
  const [query, setQuery] = React.useState(`-- Whitelisted SELECT only. Tables: sessions, messages, deployments, hooks_events
SELECT 
  template_kind,
  COUNT(*) as sessions,
  AVG(duration_seconds)::int as avg_dur,
  AVG(cost_usd)::numeric(10,2) as avg_cost
FROM sessions
WHERE started_at > now() - interval '24 hours'
GROUP BY template_kind
ORDER BY sessions DESC;`);
  const [ran, setRan] = React.useState(false);
  const rows = TEMPLATE_KINDS.map(k => ({
    template_kind: k.name,
    sessions: SESSIONS.filter(s => s.template_kind === k.name).length,
    avg_dur: Math.round(SESSIONS.filter(s => s.template_kind === k.name).reduce((s, x) => s + x.duration, 0) / Math.max(SESSIONS.filter(s => s.template_kind === k.name).length, 1)),
    avg_cost: +(SESSIONS.filter(s => s.template_kind === k.name).reduce((s, x) => s + x.cost, 0) / Math.max(SESSIONS.filter(s => s.template_kind === k.name).length, 1)).toFixed(2),
  })).sort((a, b) => b.sessions - a.sessions);

  return (
    <div>
      <div className="card" style={{ marginBottom: 12 }}>
        <div className="card-head" style={{ gap: 8 }}>
          <h3>SQL query</h3>
          <Badge kind="success">read-only</Badge>
          <Badge kind="neutral">SELECT only</Badge>
          <div className="actions" style={{ display: 'flex', gap: 6 }}>
            <button className="btn"><Icon name="layers" size={11} /> Examples</button>
            <button className="btn primary" onClick={() => setRan(true)}><Icon name="play" size={11} /> Run query</button>
          </div>
        </div>
        <div className="card-body flush">
          <textarea value={query} onChange={e => setQuery(e.target.value)}
            style={{ width: '100%', height: 220, border: 0, padding: 14, background: 'var(--bg-base)', color: 'var(--text-primary)', fontFamily: 'var(--font-mono)', fontSize: 12, lineHeight: 1.6, resize: 'vertical', outline: 'none' }} />
        </div>
      </div>

      {ran && (
        <div className="card">
          <div className="card-head">
            <h3>Results</h3>
            <span className="sub">{rows.length} rows · 0.124s</span>
            <div className="actions"><button className="btn xs"><Icon name="download" size={11} /> Export CSV</button></div>
          </div>
          <div className="table-wrap">
            <table className="tbl">
              <thead><tr><th>template_kind</th><th className="num">sessions</th><th className="num">avg_dur</th><th className="num">avg_cost</th></tr></thead>
              <tbody>
                {rows.map(r => (
                  <tr key={r.template_kind}>
                    <td><Mono>{r.template_kind}</Mono></td>
                    <td className="num"><Mono>{r.sessions}</Mono></td>
                    <td className="num"><Mono>{r.avg_dur}</Mono></td>
                    <td className="num"><Mono>${r.avg_cost}</Mono></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { ScreenDevTools });