// assets/prompts_feedback.jsx — C. Feedback (closing the learning loop)
function PromptFeedback({ agent, versions }) {
  const [ratingFilter, setRatingFilter] = React.useState('all');
  const [versionFilter, setVersionFilter] = React.useState('all');
  const [tagFilter, setTagFilter] = React.useState('all');

  const all = PROMPT_FEEDBACK.filter(f => f.agent === agent);
  const filtered = all.filter(f =>
    (ratingFilter === 'all' || f.rating === ratingFilter) &&
    (versionFilter === 'all' || f.version_id === versionFilter) &&
    (tagFilter === 'all' || f.tags.includes(tagFilter))
  );

  const up = all.filter(f => f.rating === 'up').length;
  const down = all.filter(f => f.rating === 'down').length;
  const rate = all.length ? (up / all.length * 100) : 0;

  // per-version aggregate (non-draft)
  const perVersion = versions.filter(v => v.status !== 'draft').map(v => {
    const items = all.filter(f => f.version_id === v.id);
    const u = items.filter(f => f.rating === 'up').length;
    const d = items.filter(f => f.rating === 'down').length;
    return { v, up: u, down: d, total: u + d, rate: (u + d) ? u / (u + d) * 100 : 0 };
  });

  // tag breakdown of downvotes
  const tagCounts = {};
  all.filter(f => f.rating === 'down').forEach(f => f.tags.forEach(tg => tagCounts[tg] = (tagCounts[tg] || 0) + 1));
  const tagArr = Object.entries(tagCounts).map(([label, value]) => ({ label, value })).sort((a, b) => b.value - a.value);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      {/* Stats */}
      <div className="grid cols-4">
        <KpiCard label="Total feedback" value={all.length} icon="message" />
        <div className="card kpi">
          <div className="kpi-label"><Icon name="trend" size={12} /> Thumbs-up rate</div>
          <div className="kpi-value">{rate.toFixed(0)}<span className="unit">%</span></div>
          <div className="kpi-delta mono" style={{ color: 'var(--text-tertiary)' }}>
            <span className="text-success">▲{up}</span> <span className="text-danger" style={{ marginLeft: 8 }}>▼{down}</span>
          </div>
        </div>
        <div className="card kpi">
          <div className="kpi-label"><Icon name="filter2" size={12} /> Top issue tag</div>
          <div className="kpi-value" style={{ fontSize: 20 }}>{tagArr[0]?.label || '—'}</div>
          <div className="kpi-delta neutral mono">{tagArr[0]?.value || 0} downvotes</div>
        </div>
        <KpiCard label={`Active rate (v${versions.find(v=>v.status==='active')?.v})`} value={`${perVersion.find(p => p.v.status === 'active')?.rate.toFixed(0) || 0}%`} icon="check2" />
      </div>

      <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        {/* Version comparison by feedback */}
        <div className="card">
          <div className="card-head"><h3>👍 rate by version</h3><span className="sub">does the new version actually do better?</span></div>
          <div className="card-body">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {perVersion.map(p => (
                <div key={p.v.id} style={{ display: 'grid', gridTemplateColumns: '54px 1fr 92px', alignItems: 'center', gap: 10 }}>
                  <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                    <Mono style={{ fontWeight: 600 }}>v{p.v.v}</Mono>
                    {p.v.status === 'active' && <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--success)' }} />}
                  </span>
                  <div style={{ height: 16, background: 'var(--bg-elevated)', borderRadius: 4, overflow: 'hidden', display: 'flex' }}>
                    <div style={{ width: `${p.rate}%`, background: 'var(--success)', height: '100%' }} />
                    <div style={{ width: `${100 - p.rate}%`, background: 'var(--danger)', opacity: .55, height: '100%' }} />
                  </div>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, textAlign: 'right' }}>
                    {p.rate.toFixed(0)}% <span className="dim">({p.total})</span>
                  </span>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 14, paddingTop: 12, borderTop: '1px solid var(--border-subtle)', fontSize: 11.5, color: 'var(--text-secondary)' }}>
              {(() => {
                const act = perVersion.find(p => p.v.status === 'active');
                const prev = perVersion.filter(p => p.v.status === 'archived').sort((a,b) => b.v.v - a.v.v)[0];
                if (act && prev) {
                  const delta = act.rate - prev.rate;
                  return <span><Mono>v{act.v.v}</Mono> is <span className={delta >= 0 ? 'text-success' : 'text-danger'} style={{ fontWeight: 600 }}>{delta >= 0 ? '+' : ''}{delta.toFixed(0)} pts</span> {delta >= 0 ? 'better' : 'worse'} than <Mono>v{prev.v.v}</Mono> on 👍 rate.</span>;
                }
                return null;
              })()}
            </div>
          </div>
        </div>

        {/* Tag breakdown */}
        <div className="card">
          <div className="card-head"><h3>Downvote reasons by tag</h3><span className="sub">what to fix next</span></div>
          <div className="card-body">
            {tagArr.length ? <HBarChart data={tagArr} maxBars={7} color="var(--danger)" /> : <div className="empty-state">No tagged downvotes.</div>}
          </div>
        </div>
      </div>

      {/* Feedback list */}
      <div className="card">
        <div className="card-head" style={{ gap: 8, flexWrap: 'wrap' }}>
          <h3>Feedback</h3>
          <div className="segmented">
            <button className={ratingFilter === 'all' ? 'active' : ''} onClick={() => setRatingFilter('all')}>all</button>
            <button className={ratingFilter === 'up' ? 'active' : ''} onClick={() => setRatingFilter('up')}>👍 up</button>
            <button className={ratingFilter === 'down' ? 'active' : ''} onClick={() => setRatingFilter('down')}>👎 down</button>
          </div>
          <select className="select" style={{ width: 'auto' }} value={versionFilter} onChange={e => setVersionFilter(e.target.value)}>
            <option value="all">All versions</option>
            {versions.filter(v => v.status !== 'draft').map(v => <option key={v.id} value={v.id}>v{v.v} ({v.status})</option>)}
          </select>
          <select className="select" style={{ width: 'auto' }} value={tagFilter} onChange={e => setTagFilter(e.target.value)}>
            <option value="all">All tags</option>
            {FB_TAGS.map(tg => <option key={tg} value={tg}>{tg}</option>)}
          </select>
          <span className="dim fs-11" style={{ marginLeft: 'auto' }}>{filtered.length} of {all.length}</span>
        </div>
        <div className="table-wrap" style={{ maxHeight: 360 }}>
          <table className="tbl">
            <thead><tr>
              <th style={{ width: 50 }}>Rating</th>
              <th style={{ width: 56 }}>Version</th>
              <th>Reason</th>
              <th>Tags</th>
              <th>Merchant</th>
              <th>When</th>
              <th style={{ width: 90 }}>Session</th>
            </tr></thead>
            <tbody>
              {filtered.slice(0, 80).map(f => (
                <tr key={f.id}>
                  <td>{f.rating === 'up'
                    ? <span className="text-success" style={{ fontSize: 14 }}>▲</span>
                    : <span className="text-danger" style={{ fontSize: 14 }}>▼</span>}</td>
                  <td><Mono>v{f.v}</Mono></td>
                  <td className="dim2" style={{ whiteSpace: 'normal', maxWidth: 420 }}>{f.reason}</td>
                  <td>{f.tags.map(tg => <Badge key={tg} kind="neutral" style={{ marginRight: 4 }}>{tg}</Badge>)}</td>
                  <td className="dim"><Mono>{f.merchant.split('@')[0]}</Mono></td>
                  <td className="dim"><Mono>{formatRel(f.created_at)}</Mono></td>
                  <td>{f.session_id
                    ? <a className="id text-accent" href={'#/sessions/' + f.session_id}>{shortId(f.session_id)} <Icon name="external" size={10} /></a>
                    : <span className="dim">—</span>}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PromptFeedback });