// assets/prompts_skills_ops.jsx — D. Skills + E. Ops

// ─── D. SKILLS ──────────────────────────────────────────────────────────────
function PromptSkills({ agent, active }) {
  const [skills, setSkills] = React.useState(() => JSON.parse(JSON.stringify(PROMPT_SKILLS[agent])));
  React.useEffect(() => { setSkills(JSON.parse(JSON.stringify(PROMPT_SKILLS[agent]))); }, [agent]);

  const toggle = (id) => setSkills(prev => prev.map(s => s.id === id ? { ...s, enabled: !s.enabled } : s));
  const enabled = skills.filter(s => s.enabled);
  const baseTokens = Math.round(active.content.length / 4);
  const skillTokens = enabled.reduce((s, x) => s + x.tokens, 0);
  const overrides = SKILL_STORE_OVERRIDES.filter(o => o.agent === agent);

  const typeColor = { clone: 'info', transfer: 'accent', brief: 'success', localize: 'warning' };

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 380px', gap: 12, flex: 1, minHeight: 0 }}>
      {/* Composition view */}
      <div className="card" style={{ display: 'flex', flexDirection: 'column', minHeight: 0 }}>
        <div className="card-head">
          <h3>Composed prompt</h3>
          <span className="sub">base + enabled skills = what the agent actually runs</span>
          <span className="actions mono fs-11 dim">~{(baseTokens + skillTokens).toLocaleString()} tokens</span>
        </div>
        <div style={{ flex: 1, overflowY: 'auto', padding: 16 }}>
          {/* base */}
          <div style={{ border: '1px solid var(--border-default)', borderRadius: 'var(--radius)', overflow: 'hidden', marginBottom: 10 }}>
            <div style={{ padding: '8px 12px', background: 'var(--accent-muted)', display: 'flex', alignItems: 'center', gap: 8 }}>
              <Icon name="fileText" size={13} className="text-accent" />
              <span style={{ fontWeight: 600, fontSize: 12.5 }}>Base prompt</span>
              <Badge kind="success" dot>v{active.v} active</Badge>
              <span className="mono fs-11 dim" style={{ marginLeft: 'auto' }}>~{baseTokens.toLocaleString()} tok</span>
            </div>
            <div style={{ padding: '8px 12px', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-tertiary)', lineHeight: 1.5, maxHeight: 80, overflow: 'hidden', position: 'relative' }}>
              {active.content.split('\n').slice(0, 4).join('\n')}
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(transparent, var(--bg-surface))' }} />
            </div>
          </div>

          {/* skill layers */}
          {enabled.length === 0 && <div className="empty-state" style={{ padding: 24 }}>No skills enabled — agent runs base prompt only.</div>}
          {enabled.map(s => (
            <div key={s.id} style={{ position: 'relative', paddingLeft: 20, marginBottom: 8 }}>
              <div style={{ position: 'absolute', left: 7, top: -8, bottom: '50%', width: 1, background: 'var(--border-default)' }} />
              <div style={{ position: 'absolute', left: 7, top: '50%', width: 10, height: 1, background: 'var(--border-default)' }} />
              <div style={{ border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius)', padding: '8px 12px', display: 'flex', alignItems: 'center', gap: 8, background: 'var(--bg-base)' }}>
                <Icon name="layers" size={12} className="dim" />
                <Mono style={{ fontWeight: 600 }}>{s.name}</Mono>
                <Badge kind={typeColor[s.type] || 'neutral'}>{s.type}</Badge>
                <span className="dim fs-11" style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{s.desc}</span>
                <span className="mono fs-11 dim">+{s.tokens}</span>
              </div>
            </div>
          ))}

          <div style={{ marginTop: 12, padding: 10, borderRadius: 'var(--radius)', background: 'var(--bg-elevated)', fontSize: 11.5, color: 'var(--text-secondary)', display: 'flex', alignItems: 'center', gap: 8 }}>
            <Icon name="zap" size={13} className="dim" />
            Effective prompt = base v{active.v} + {enabled.length} skill{enabled.length !== 1 ? 's' : ''} ≈ <Mono style={{ color: 'var(--text-primary)' }}>{(baseTokens + skillTokens).toLocaleString()} tokens</Mono>
            <Badge kind="warning" style={{ marginLeft: 'auto' }}>base/skill split — partial</Badge>
          </div>
        </div>
      </div>

      {/* Skill list + per-store */}
      <div className="flex col gap-3" style={{ gap: 12, minHeight: 0, overflowY: 'auto' }}>
        <div className="card">
          <div className="card-head"><h3>Skills for {AGENT_META[agent].title}</h3><span className="sub">{enabled.length}/{skills.length} on</span></div>
          <div className="card-body" style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {skills.map(s => (
              <div key={s.id} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, padding: '8px 10px', borderRadius: 'var(--radius)', border: '1px solid var(--border-subtle)', background: s.enabled ? 'var(--bg-base)' : 'transparent' }}>
                <span className={`toggle ${s.enabled ? 'on' : ''}`} onClick={() => toggle(s.id)} style={{ marginTop: 2 }} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                    <Mono style={{ fontWeight: 600 }}>{s.name}</Mono>
                    <Badge kind={typeColor[s.type] || 'neutral'}>{s.type}</Badge>
                  </div>
                  <div className="dim fs-11" style={{ marginTop: 2, lineHeight: 1.4 }}>{s.desc}</div>
                </div>
                <span className="mono fs-11 dim" style={{ flexShrink: 0 }}>{s.tokens} tok</span>
              </div>
            ))}
          </div>
        </div>

        <div className="card">
          <div className="card-head"><h3>Per-store overrides</h3><span className="sub">bật/tắt skill cho store cụ thể</span></div>
          <div className="card-body flush">
            <table className="tbl">
              <thead><tr><th>Store</th><th>Skill</th><th>State</th></tr></thead>
              <tbody>
                {overrides.length === 0 && <tr><td colSpan={3} className="empty-state" style={{ padding: 20 }}>No overrides for this agent.</td></tr>}
                {overrides.map((o, i) => (
                  <tr key={i}>
                    <td>{o.store}</td>
                    <td><Mono>{o.skill}</Mono></td>
                    <td><Badge kind={o.enabled ? 'success' : 'neutral'} dot>{o.enabled ? 'enabled' : 'disabled'}</Badge></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <div style={{ padding: 10, borderTop: '1px solid var(--border-subtle)' }}>
            <button className="btn sm" style={{ width: '100%', justifyContent: 'center' }}><Icon name="plus" size={11} /> Add store override</button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── E. OPS ──────────────────────────────────────────────────────────────────
function PromptOps({ versions }) {
  const [cache, setCache] = React.useState(CACHE);
  const clearCache = (key) => setCache(prev => prev.map(c => c.key === key ? { ...c, status: 'cleared', ttl: '—', hits_24h: 0 } : c));
  const clearAll = () => setCache(prev => prev.map(c => ({ ...c, status: 'cleared', ttl: '—' })));

  const actionColor = { activate: 'success', create: 'info', rollback: 'warning', archive: 'neutral', cache: 'accent' };

  // cost per version (all agents, non-draft)
  const costRows = [];
  Object.values(versions).forEach(arr => arr.forEach(v => { if (v.status !== 'draft') costRows.push(v); }));
  costRows.sort((a, b) => b.cost.avg_cost_cents - a.cost.avg_cost_cents);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      {/* Active across system */}
      <div className="grid cols-2">
        {Object.entries(versions).map(([name, arr]) => {
          const act = arr.find(v => v.status === 'active');
          const draft = arr.find(v => v.status === 'draft');
          return (
            <div key={name} className="card" style={{ padding: 14 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ width: 30, height: 30, borderRadius: 8, background: 'var(--bg-elevated)', display: 'grid', placeItems: 'center', color: 'var(--text-secondary)' }}>
                  <Icon name={AGENT_META[name].icon} size={15} />
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 600, fontSize: 13 }}>{AGENT_META[name].title}</div>
                  <div className="dim mono fs-11">{AGENT_META[name].file}</div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ fontSize: 22, fontWeight: 600, fontFamily: 'var(--font-mono)' }}>v{act?.v}</div>
                  <Badge kind="success" dot>active</Badge>
                </div>
              </div>
              <div style={{ display: 'flex', gap: 16, marginTop: 12, fontSize: 11.5, color: 'var(--text-secondary)', fontFamily: 'var(--font-mono)' }}>
                <span><span className="dim">sessions</span> {act?.impact.sessions.toLocaleString()}</span>
                <span><span className="dim">stores</span> {act?.impact.stores.toLocaleString()}</span>
                <span><span className="dim">avg cost</span> ${(act?.cost.avg_cost_cents / 100).toFixed(2)}</span>
                {draft && <Badge kind="warning" style={{ marginLeft: 'auto' }}>v{draft.v} draft pending review</Badge>}
              </div>
            </div>
          );
        })}
      </div>

      {/* Cache + cost */}
      <div className="grid" style={{ gridTemplateColumns: '1.3fr 1fr', gap: 12 }}>
        <div className="card">
          <div className="card-head">
            <h3>Redis cache status</h3>
            <span className="sub">prompt:* keys</span>
            <div className="actions"><button className="btn xs danger" onClick={clearAll}><Icon name="refresh" size={11} /> Clear all</button></div>
          </div>
          <div className="card-body flush">
            <table className="tbl">
              <thead><tr><th>Key</th><th>Version</th><th>TTL</th><th className="num">Size</th><th className="num">Hits 24h</th><th>Status</th><th style={{ width: 70 }}></th></tr></thead>
              <tbody>
                {cache.map(c => (
                  <tr key={c.key}>
                    <td className="mono dim2">{c.key}</td>
                    <td className="mono">{c.version}</td>
                    <td className="mono dim">{c.ttl}</td>
                    <td className="num mono">{c.size_kb} kB</td>
                    <td className="num mono">{c.hits_24h.toLocaleString()}</td>
                    <td><Badge kind={c.status === 'fresh' ? 'success' : c.status === 'stale' ? 'warning' : 'neutral'} dot>{c.status}</Badge></td>
                    <td>{c.status !== 'cleared' && <button className="btn xs ghost" onClick={() => clearCache(c.key)}>clear</button>}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        <div className="card">
          <div className="card-head"><h3>Cost per version</h3><span className="sub">avg $/session · join sessions.total_cost</span></div>
          <div className="card-body">
            <HBarChart data={costRows.map(v => ({ label: `${v.agent.split('_')[0]} v${v.v}`, value: +(v.cost.avg_cost_cents / 100).toFixed(2) }))}
              valueFmt={v => '$' + v.toFixed(2)} maxBars={9} color="var(--chart-1)" />
          </div>
        </div>
      </div>

      {/* Audit log */}
      <div className="card">
        <div className="card-head"><h3>Audit log</h3><span className="sub">who activated / created / rolled back, when</span></div>
        <div className="table-wrap" style={{ maxHeight: 300 }}>
          <table className="tbl">
            <thead><tr><th>When</th><th>Actor</th><th>Action</th><th>Target</th><th>Note</th></tr></thead>
            <tbody>
              {AUDIT.map((a, i) => (
                <tr key={i}>
                  <td className="dim"><Mono>{formatRel(a.ts)}</Mono></td>
                  <td><div style={{ display: 'flex', alignItems: 'center', gap: 6 }}><UserAvatar username={a.actor} size={20} /><Mono>{a.actor}</Mono></div></td>
                  <td><Badge kind={actionColor[a.kind] || 'neutral'}>{a.action}</Badge></td>
                  <td><Mono>{a.target}</Mono></td>
                  <td className="dim2">{a.note}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PromptSkills, PromptOps });