/* ============ Sales Console — Аудит (compliance) ============ */

function Audit({openTrace, search}){
  const [agentF,setAgentF] = useState('all');

  const rows = SW_SALES.traces.filter(t => {
    if (agentF !== 'all' && t.agentId !== agentF) return false;
    if (search) {
      const q = search.toLowerCase();
      return t.id.toLowerCase().includes(q) || t.objectId.toLowerCase().includes(q);
    }
    return true;
  }).sort((a,b) => b.startedAt - a.startedAt);

  return (
    <div className="content fade-in">
      <PageHead title="Аудит действий" sub={`${SW_SALES.traces.length} автономных действий · иммутабельный лог для compliance`}>
        <button className="btn btn-outline btn-sm">
          <Icon name="download" size={15}/>Экспорт CSV
        </button>
      </PageHead>

      {/* Info banner — продаваемая ценность */}
      <div className="card" style={{padding:'14px 18px',background:'var(--surface-2)',marginBottom:18,display:'flex',gap:12,alignItems:'flex-start'}}>
        <Icon name="shield" size={20}/>
        <div style={{flex:1,fontSize:13,lineHeight:1.6}}>
          <strong>Сквозной аудит-трейл.</strong> Каждое автономное действие агента залогировано: триггер, шаги, вызовы инструментов, входы/выходы, артефакты, эскалации и человеческие подтверждения. Для СП с госакционером — отдельная коммерческая ценность.
        </div>
      </div>

      {/* Agent filter */}
      <div className="chips" style={{marginBottom:18}}>
        <button className={'chip'+(agentF==='all'?' active':'')} onClick={()=>setAgentF('all')}>
          Все агенты <span style={{opacity:.6,marginLeft:6}}>{SW_SALES.traces.length}</span>
        </button>
        {SW_SALES.agents.map(a => {
          const cnt = SW_SALES.traces.filter(t => t.agentId === a.id).length;
          return (
            <button key={a.id} className={'chip'+(agentF===a.id?' active':'')} onClick={()=>setAgentF(a.id)}>
              <AgentMark size="sm"/>{a.name} <span style={{opacity:.6,marginLeft:4}}>{cnt}</span>
            </button>
          );
        })}
      </div>

      {/* Table */}
      <div className="card" style={{padding:'8px 10px'}}>
        <table className="tbl">
          <thead>
            <tr>
              <th>Время</th>
              <th>Агент</th>
              <th>Объект</th>
              <th>Действие</th>
              <th>Статус</th>
              <th>Человек</th>
              <th className="num">Длительность</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {rows.map(t => {
              const agent = SW_SALES.agents.find(a => a.id === t.agentId);
              const human = t.steps.find(s => s.type === 'human');
              const last = t.steps[t.steps.length-1];
              return (
                <tr key={t.id} onClick={()=>openTrace(t.id)}>
                  <td>
                    <div className="mono" style={{fontSize:13}}>{t.startedAt.toLocaleTimeString('ru-RU',{hour:'2-digit',minute:'2-digit'})}</div>
                    <div className="t-mut" style={{fontSize:11}}>{SW_SALES.dstr(t.startedAt)}</div>
                  </td>
                  <td>
                    <div className="row" style={{gap:6,alignItems:'center'}}>
                      <AgentMark size="sm"/>
                      <span style={{fontSize:13}}>{agent?.name || t.agentId}</span>
                    </div>
                  </td>
                  <td><span className="mono" style={{fontSize:13}}>{t.objectId}</span></td>
                  <td style={{fontSize:13,maxWidth:300,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{last?.title}</td>
                  <td>
                    <span className={'pill '+(t.state==='completed'?'pill-teal':t.state==='escalated'?'pill-amber':'pill-gray')}>
                      <span className="pdot"></span>{t.state==='completed'?'авто':t.state==='escalated'?'эскалирован':t.state}
                    </span>
                  </td>
                  <td>
                    {human ? (
                      <div className="row" style={{gap:6,alignItems:'center',fontSize:13}}>
                        <div className="avatar" style={{width:24,height:24,fontSize:10}}>{human.user.initials}</div>
                        <span>{human.hitlState==='waiting' ? 'ждёт' : human.hitlState==='approved' ? '✓' : '✗'}</span>
                      </div>
                    ) : <span className="t-mut">—</span>}
                  </td>
                  <td className="num"><span className="mono">{(t.durationMs/1000).toFixed(1)}с</span></td>
                  <td><button className="link">открыть</button></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

window.Audit = Audit;