/* ============ ReasoningDrawer — "почему?" трейс агента ============ */
/* Нативный паттерн портала (.scrim + .drawer) + живая пошаговая анимация при открытии */

function ToolStep({step, anim, expanded, onToggle, isLast}){
  // anim: 'done' | 'running' | 'queued'
  // если анимация «прогнала» шаг (anim==='done'), но в данных он был pending — считаем выполненным
  const effState = (anim === 'done' && step.state === 'pending') ? 'done' : step.state;
  const realDot = effState === 'warning' ? 'r-step-dot--warn' : effState === 'pending' ? 'r-step-dot--pending' : '';
  const realSym = effState === 'done' ? '✓' : effState === 'warning' ? '⚠' : effState === 'pending' ? '—' : effState === 'failed' ? '✗' : '✓';
  const isRunning = anim === 'running';
  const isQueued = anim === 'queued';
  const canExpand = anim === 'done' && effState !== 'pending';
  const warnBg = (anim === 'done' && step.state === 'warning') ? {background:'var(--warning-soft)',borderRadius:10,paddingLeft:8,paddingRight:8,marginLeft:-8,marginRight:-8} : {};
  return (
    <div className={'r-step'+(canExpand?'':' r-step--static')} onClick={canExpand?onToggle:undefined} style={{...warnBg, opacity: isQueued?0.4:1, cursor: canExpand?'pointer':'default', transition:'opacity .3s'}}>
      <div className="r-step-rail">
        {isRunning
          ? <span className="live-pulse" style={{marginTop:6}}/>
          : <div className={'r-step-dot '+(isQueued?'r-step-dot--pending':realDot)}/>}
        {!isLast && <div className="r-step-line"/>}
      </div>
      <div className="r-step-content">
        <div className="between">
          <div className="r-step-title" style={isQueued?{color:'var(--tx-3)'}:{}}>{step.n}. {step.title}</div>
          {isRunning ? <span className="t-mut" style={{color:'var(--accent)'}}>выполняется…</span>
            : isQueued ? <span style={{fontSize:13,color:'var(--tx-3)'}}>—</span>
            : <span style={{fontSize:13,color:step.state==='warning'?'#b66100':'var(--tx-3)'}}>{realSym}</span>}
        </div>
        {anim==='done' && step.state==='warning' && <div style={{fontSize:12.5,color:'#b66100',marginTop:4}}>{step.reasoning}</div>}
        {expanded && canExpand && (
          <div className="r-step-expanded">
            <div style={{color:'var(--accent)',marginBottom:4}}>tool: <strong>{step.tool}</strong></div>
            <pre>input:  {JSON.stringify(step.input, null, 2)}</pre>
            <pre>output: {JSON.stringify(step.output, null, 2)}</pre>
            <div style={{color:'var(--tx-3)',marginTop:8,fontFamily:'var(--text)'}}>{step.durationMs} мс · {step.reasoning}</div>
            {step.artifact && (
              <div className="row" style={{marginTop:10,padding:'8px 10px',background:'var(--paper)',borderRadius:10,fontFamily:'var(--text)',fontSize:12.5,gap:8}}>
                <Icon name="doc" size={15}/><strong style={{flex:1}}>{step.artifact.name}</strong><span className="link">открыть</span>
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

function HumanCheckpoint({step, anim, isLast, onApprove, onReject}){
  const state = step.hitlState;
  const [comment, setComment] = useState('');
  const isQueued = anim === 'queued';
  const isActive = anim === 'running' || (anim === 'done' && state === 'waiting');
  const avatarBg = state === 'approved' ? 'var(--teal)' : state === 'rejected' ? 'var(--danger)' : 'var(--ink)';
  return (
    <div className="r-step" style={{cursor:'default', opacity:isQueued?0.4:1, transition:'opacity .3s'}}>
      <div className="r-step-rail">
        <div className="r-step-avatar" style={{background:avatarBg}}>{step.user.initials}</div>
        {!isLast && <div className="r-step-line"/>}
      </div>
      <div className="r-step-content">
        <div className="r-step-title" style={isQueued?{color:'var(--tx-3)'}:{}}>
          {step.user.name}
          {isActive && state==='waiting' && <span style={{color:'#b66100',marginLeft:8,fontSize:13}}>— ожидает решения</span>}
        </div>
        <div className="r-step-meta">
          {isActive && state==='waiting' && (
            <div className="card-flat" style={{background:'var(--warning-soft)',padding:'14px 16px',marginTop:8,borderRadius:12}}>
              <div style={{fontSize:13.5,color:'var(--tx)',marginBottom:10}}><strong>Просит подтвердить:</strong> {step.askingFor}</div>
              <textarea placeholder="Комментарий (попадёт в аудит)" rows={2} value={comment} onChange={e=>setComment(e.target.value)} style={{width:'100%',fontSize:13.5,padding:10,border:'1px solid var(--line)',borderRadius:10,fontFamily:'var(--text)',resize:'vertical',background:'var(--paper)'}}/>
              <div className="row" style={{gap:8,marginTop:10}}>
                <button className="btn btn-dark btn-sm" onClick={()=>onApprove && onApprove(comment||'объём оправдывает')}><Icon name="check" size={16}/>Утвердить</button>
                <button className="btn btn-outline btn-sm" onClick={()=>onReject && onReject(comment||'не подходит')}>Отказать</button>
              </div>
            </div>
          )}
          {state==='approved' && <span style={{color:'#067a5d'}}>Утверждено{step.comment?` · «${step.comment}»`:''}</span>}
          {state==='rejected' && <span style={{color:'var(--danger)'}}>Отказано{step.reason?` · ${step.reason}`:''}</span>}
        </div>
      </div>
    </div>
  );
}

function ReasoningDrawer({traceId, onClose, notify}){
  // если конкретный трейс не засеян — показываем представительный трейс диспетчера
  const original = SW_SALES.traces.find(t => t.id === traceId)
    || SW_SALES.traces.find(t => t.agentId === 'dispatcher')
    || SW_SALES.traces[0];
  const [trace, setTrace] = useState(() => original ? JSON.parse(JSON.stringify(original), (k,v) => (k==='at'||k.endsWith('At'))&&v ? new Date(v) : v) : null);
  const [expandedStep, setExpandedStep] = useState(null);
  // playIdx — индекс шага, который агент «выполняет» сейчас; playing — идёт ли анимация
  const [playIdx, setPlayIdx] = useState(0);
  const [playing, setPlaying] = useState(true);

  // Прогон анимации: шаг за шагом, как будто агент работает в реальном времени
  useEffect(() => {
    if (!playing || !trace) return;
    const step = trace.steps[playIdx];
    if (!step) { setPlaying(false); return; }
    // на human-checkpoint, который ждёт решения — останавливаемся (агент ждёт человека)
    if (step.type === 'human' && step.hitlState === 'waiting') { setPlaying(false); return; }
    const dur = Math.min(1300, Math.max(600, (step.durationMs || 800) / 2));
    const id = setTimeout(() => setPlayIdx(i => i + 1), dur);
    return () => clearTimeout(id);
  }, [playing, playIdx, trace]);

  if (!trace) return null;
  const agent = SW_SALES.agents.find(a => a.id === trace.agentId);
  const agentName = agent ? agent.name : trace.agentId;
  const fmtTime = d => d ? d.toLocaleTimeString('ru-RU',{hour:'2-digit',minute:'2-digit',second:'2-digit'}) : '';
  const animOf = i => i < playIdx ? 'done' : i === playIdx ? (playing ? 'running' : 'done') : 'queued';
  const revealedAll = !playing && playIdx >= trace.steps.length;
  const artifactSteps = trace.steps.filter((s,i) => s.artifact && animOf(i) === 'done');

  const statePill = trace.state==='escalated'?'pill-amber':trace.state==='completed'?'pill-teal':trace.state==='failed'?'pill-danger':'pill-blue';
  const stateLabel = trace.state==='escalated'?'эскалирован':trace.state==='completed'?'завершён':trace.state==='failed'?'остановлен':'выполняется';

  const replay = () => { setExpandedStep(null); setPlayIdx(0); setPlaying(true); };

  const handleApprove = (humanStepN, comment) => {
    setTrace(prev => ({...prev, steps: prev.steps.map(s => s.n===humanStepN?{...s,hitlState:'approved',comment}:s)}));
    notify && notify('Утверждено · агент продолжает');
    // продолжаем прогон оставшихся шагов
    setPlaying(true); setPlayIdx(i => i + 1);
  };
  const handleReject = (humanStepN, reason) => {
    setTrace(prev => ({...prev, steps: prev.steps.map(s => s.n===humanStepN?{...s,hitlState:'rejected',reason}:s), state:'failed'}));
    notify && notify('Отклонено · агент остановлен');
    setPlaying(false);
  };

  return (
    <div className="scrim" onClick={onClose}>
      <div className="drawer xwide" onClick={e=>e.stopPropagation()}>
        <div className="drawer-head">
          <div style={{flex:1}}>
            <div className="row" style={{gap:10,marginBottom:8}}>
              <span className="pill" style={{background:'var(--surface-2)',color:'var(--tx-2)'}}><AgentMark size="sm"/>агент</span>
              {playing
                ? <span className="pill pill-blue"><span className="live-pulse" style={{width:6,height:6}}/>работает…</span>
                : <span className={'pill '+statePill}><span className="pdot"></span>{stateLabel}</span>}
            </div>
            <div style={{fontFamily:'var(--display)',fontWeight:700,fontSize:25,letterSpacing:'-.6px'}}>{agentName}</div>
            <div className="muted" style={{marginTop:4}}><span className="mono">{trace.objectId}</span> · {SW_SALES.dstr(trace.startedAt)} {fmtTime(trace.startedAt)} · {(trace.durationMs/1000).toFixed(1)}с</div>
          </div>
          <button className="x-btn" onClick={onClose}><Icon name="x" size={18}/></button>
        </div>

        <div className="drawer-body">
          <div className="card-flat" style={{background:'var(--surface)',padding:'14px 18px',marginBottom:20,borderRadius:16}}>
            <div className="t-mut" style={{textTransform:'uppercase',letterSpacing:'.5px',marginBottom:4}}>Триггер</div>
            <div style={{fontSize:14.5}}>{trace.trigger.description}</div>
            <div className="t-mut" style={{marginTop:4}}>источник: {trace.trigger.source} · {fmtTime(trace.trigger.at)}</div>
          </div>

          <div className="between" style={{marginBottom:8}}>
            <div className="t-strong" style={{fontSize:14}}>
              {playing ? 'Агент работает…' : 'Что сделал агент'} · {Math.min(playIdx, trace.steps.length)} / {trace.steps.length} шагов
            </div>
          </div>
          {trace.steps.map((step, i) => step.type==='human'
            ? <HumanCheckpoint key={step.n} step={step} anim={animOf(i)} isLast={i===trace.steps.length-1} onApprove={c=>handleApprove(step.n,c)} onReject={r=>handleReject(step.n,r)}/>
            : <ToolStep key={step.n} step={step} anim={animOf(i)} expanded={expandedStep===step.n} onToggle={()=>setExpandedStep(expandedStep===step.n?null:step.n)} isLast={i===trace.steps.length-1}/>
          )}

          {artifactSteps.length > 0 && (
            <div style={{marginTop:24}}>
              <div className="t-mut" style={{textTransform:'uppercase',letterSpacing:'.5px',marginBottom:10}}>Артефакты ({artifactSteps.length})</div>
              <div className="grid" style={{gap:10}}>
                {artifactSteps.map(s => (
                  <div key={s.n} className="between" style={{border:'1px solid var(--line)',borderRadius:14,padding:'13px 16px',cursor:'pointer'}} onClick={()=>notify && notify('Артефакт: '+s.artifact.name)}>
                    <div className="row" style={{gap:12}}>
                      <div className="tile-ic tone-sky" style={{width:38,height:38}}><Icon name="doc" size={18}/></div>
                      <div><div className="t-strong" style={{fontSize:14}}>{s.artifact.name}</div><div className="t-mut">{s.artifact.preview}</div></div>
                    </div>
                    <button className="icon-btn" style={{width:36,height:36}}><Icon name="eye" size={16}/></button>
                  </div>
                ))}
              </div>
            </div>
          )}

          <div className="between" style={{marginTop:24,paddingTop:18,borderTop:'1px solid var(--line-2)'}}>
            <span className="t-mut">{trace.toolCalls} вызовов · {(trace.tokens/1000).toFixed(1)}k токенов · уверенность {trace.confidence}%</span>
            <button className="btn btn-light btn-sm" onClick={replay} disabled={playing}><Icon name="refresh" size={15}/>Проиграть заново</button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.ReasoningDrawer = ReasoningDrawer;
window.ToolStep = ToolStep;
window.HumanCheckpoint = HumanCheckpoint;