/* ============ Агенты — центр управления (нативный паттерн портала) ============ */

function Agents({openTrace, notify}){
  const [openAgent,setOpenAgent]=useState(null);
  const total=SW_SALES.agents.reduce((s,a)=>s+a.today.actions,0);
  const autonomous=SW_SALES.agents.reduce((s,a)=>s+a.today.autonomous,0);
  const escalated=SW_SALES.agents.reduce((s,a)=>s+a.today.escalated,0);
  const escTraces=SW_SALES.traces.filter(t=>t.state==='escalated');

  return (
    <div className="content fade-in">
      <PageHead title="Агенты" sub={`6 активных · ${total} действий сегодня · ${autonomous} автономно завершены`}>
        <button className="btn btn-outline"><Icon name="info" size={18}/>Что такое guardrails</button>
      </PageHead>

      {/* KPI */}
      <div className="grid" style={{gridTemplateColumns:'repeat(4,1fr)',gap:14,marginBottom:20}}>
        <div className="akpi"><div className="lbl">Действий сегодня</div><div className="val">{total}</div><div className="between" style={{marginTop:6}}><span className="dlt up">▲ +12%</span><Sparkline data={[18,22,19,25,28,32,36,40,47]} color="#00a87e"/></div></div>
        <div className="akpi"><div className="lbl">Автономно завершено</div><div className="val">{autonomous}</div><div className="between" style={{marginTop:6}}><span className="dlt up">▲ +8%</span><Sparkline data={[15,18,16,22,24,27,30,34,38]} color="#00a87e"/></div></div>
        <div className="akpi" style={escalated>0?{borderColor:'var(--warning)',background:'var(--warning-soft)'}:{}}><div className="lbl">Эскалаций</div><div className="val">{escalated}</div><div style={{marginTop:6}}>{escalated>0?<span className="t-mut" style={{color:'var(--warning)',fontWeight:600}}>требует внимания</span>:<span className="t-mut">нет</span>}</div></div>
        <div className="akpi"><div className="lbl">Часов сэкономлено</div><div className="val">14<span className="u">ч</span></div><div className="between" style={{marginTop:6}}><span className="dlt up">▲ +22%</span><Sparkline data={[4,6,5,8,9,11,12,13,14]} color="#00a87e"/></div></div>
      </div>

      {/* 6 agent cards */}
      <div className="grid" style={{gridTemplateColumns:'repeat(3,1fr)',gap:14,marginBottom:20}}>
        {SW_SALES.agents.map(a=><AgentCard key={a.id} agent={a} onOpen={()=>setOpenAgent(a.id)}/>)}
      </div>

      {/* live + escalations */}
      <div className="grid" style={{gridTemplateColumns:'1.5fr 1fr',gap:14}}>
        <div className="card">
          <div className="card-head"><h3>Что делают агенты сейчас</h3><span className="pill pill-teal" style={{marginLeft:'auto'}}><span className="pdot"></span>live</span></div>
          {SW_SALES.traces.slice(0,7).map((t,i)=>{
            const ag=SW_SALES.agents.find(a=>a.id===t.agentId);
            const last=t.steps[t.steps.length-1];
            return (
              <div key={t.id} className="row" style={{gap:13,padding:'13px 2px',borderBottom:i<6?'1px solid var(--line-2)':'none',cursor:'pointer'}} onClick={()=>openTrace(t.id)}>
                <div className="tile-ic tone-violet" style={{width:36,height:36,flex:'0 0 36px'}}><Icon name="sparkle" size={18} fill="currentColor"/></div>
                <div style={{flex:1,minWidth:0}}>
                  <div style={{fontSize:14.5}}><span className="t-strong">{ag?.name}</span> · <span className="mono t-mut">{t.objectId}</span></div>
                  <div className="t-mut">{last?.title}</div>
                </div>
                <span className="t-mut">{t.startedAt.toLocaleTimeString('ru-RU',{hour:'2-digit',minute:'2-digit'})}</span>
              </div>
            );
          })}
        </div>
        <div className="card">
          <div className="card-head"><h3>Ждут вашего решения</h3>{escTraces.length>0 && <span className="pill pill-amber" style={{marginLeft:'auto'}}><span className="pdot"></span>{escTraces.length}</span>}</div>
          {escTraces.length===0 ? <Empty text="Стандартные кейсы агенты ведут сами"/> : escTraces.map((t,i)=>{
            const ag=SW_SALES.agents.find(a=>a.id===t.agentId);
            const human=t.steps.find(s=>s.type==='human');
            const reason=t.steps.find(s=>s.state==='warning')?.reasoning||'';
            return (
              <div key={t.id} className="row" style={{gap:11,padding:'13px 2px',borderBottom:i<escTraces.length-1?'1px solid var(--line-2)':'none',cursor:'pointer',alignItems:'flex-start'}} onClick={()=>openTrace(t.id)}>
                <span style={{width:8,height:8,borderRadius:'50%',background:'var(--warning)',marginTop:7,flex:'0 0 8px'}}/>
                <div style={{flex:1,minWidth:0}}>
                  <div style={{fontSize:14.5}} className="t-strong">{ag?.name}</div>
                  <div className="t-mut">{reason||t.objectId}</div>
                  {human && <div className="t-mut" style={{marginTop:2}}>⏳ {human.waitingFor||'ждёт подтверждения'}</div>}
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {openAgent && <AgentDrawer agentId={openAgent} onClose={()=>setOpenAgent(null)} openTrace={openTrace} notify={notify}/>}
    </div>
  );
}

function AgentCard({agent, onOpen}){
  const pill=agent.state==='active'?'pill-teal':agent.state==='escalating'?'pill-amber':'pill-gray';
  const lbl=agent.state==='active'?'активен':agent.state==='escalating'?'ждёт вас':'на паузе';
  return (
    <div className="card" style={{cursor:'pointer'}} onClick={onOpen}>
      <div className="between" style={{marginBottom:8,alignItems:'flex-start'}}>
        <div className="row" style={{gap:9}}>
          <span className="tile-ic tone-violet" style={{width:34,height:34,flex:'0 0 34px'}}><Icon name="sparkle" size={17} fill="currentColor"/></span>
          <div>
            <h3 style={{fontFamily:'var(--display)',fontWeight:700,fontSize:16,letterSpacing:'-.3px',margin:0}}>{agent.name}</h3>
            <div className="t-mut">{agent.tagline}</div>
          </div>
        </div>
        <span className={'pill '+pill}><span className="pdot"></span>{lbl}</span>
      </div>
      <div className="grid" style={{gridTemplateColumns:'1fr 1fr 1fr',gap:10,marginTop:14}}>
        <div><div className="t-mut">обработано</div><div className="metric-lg" style={{fontSize:22}}>{agent.today.actions}</div></div>
        <div><div className="t-mut">автономно</div><div className="metric-lg" style={{fontSize:22}}>{agent.today.autonomous}</div></div>
        <div><div className="t-mut">{agent.today.escalated>0?'эскалаций':'среднее'}</div><div className="metric-lg" style={{fontSize:22,color:agent.today.escalated>0?'var(--warning)':'var(--tx)'}}>{agent.today.escalated>0?agent.today.escalated:(agent.today.avgMs/1000).toFixed(1)+'с'}</div></div>
      </div>
    </div>
  );
}

function AgentDrawer({agentId, onClose, openTrace, notify}){
  const agent=SW_SALES.agents.find(a=>a.id===agentId);
  const [tab,setTab]=useState('guardrails');
  const [grails,setGrails]=useState(()=>JSON.parse(JSON.stringify(agent.guardrails)));
  if(!agent) return null;
  const agentTraces=SW_SALES.traces.filter(t=>t.agentId===agent.id);
  const pill=agent.state==='active'?'pill-teal':agent.state==='escalating'?'pill-amber':'pill-gray';
  const lbl=agent.state==='active'?'активен':agent.state==='escalating'?'ждёт вас':'на паузе';

  const setG=(key,num)=>{
    setGrails(prev=>prev.map(g=>{
      if(g.key!==key) return g;
      const value=g.unit===' ₸'?SW_SALES.fmt(num)+' ₸':num+(g.unit||'');
      return {...g,num,value};
    }));
    notify && notify('Правило обновлено · применено · запись в аудит создана');
  };

  return (
    <div className="scrim" onClick={onClose}>
      <div className="drawer wide" 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>
              <span className={'pill '+pill}><span className="pdot"></span>{lbl}</span>
            </div>
            <div style={{fontFamily:'var(--display)',fontWeight:700,fontSize:25,letterSpacing:'-.6px'}}>{agent.name}</div>
            <div className="muted" style={{marginTop:4}}>{agent.tagline}</div>
          </div>
          <button className="x-btn" onClick={onClose}><Icon name="x" size={18}/></button>
        </div>
        <div className="drawer-body">
          <div className="tabs">
            {[['guardrails','Правила'],['history','История ('+agentTraces.length+')'],['metrics','Метрики']].map(([k,l])=>(
              <button key={k} className={'tab'+(tab===k?' active':'')} onClick={()=>setTab(k)}>{l}</button>
            ))}
          </div>

          {tab==='guardrails' && <div>
            <div className="card-flat" style={{background:'var(--surface)',padding:'14px 16px',borderRadius:14,marginBottom:18}}>
              <div className="row" style={{gap:10,alignItems:'flex-start'}}><Icon name="info" size={18}/><span style={{fontSize:13.5,color:'var(--tx-2)'}}>Правила определяют, когда агент действует <b>автономно</b>, а когда <b>эскалирует менеджеру</b>. Изменения логируются в аудит.</span></div>
            </div>
            {grails.map(g=><GuardrailRow key={g.key} rule={g} onChange={setG}/>)}
            <div className="card-flat" style={{background:'var(--warning-soft)',padding:'12px 14px',borderRadius:12,marginTop:14}}>
              <div className="row" style={{gap:8,alignItems:'flex-start'}}><Icon name="shield" size={16}/><span style={{fontSize:12.5,color:'#b66100'}}>Полная автономия на тарифах запрещена политикой СП — исключает ценовые обязательства без человека.</span></div>
            </div>
          </div>}

          {tab==='history' && <div className="grid" style={{gap:0}}>
            {agentTraces.length===0 ? <Empty text="Действий пока нет"/> : agentTraces.map((t,i)=>(
              <div key={t.id} className="between" style={{padding:'13px 0',borderBottom:i<agentTraces.length-1?'1px solid var(--line-2)':'none',cursor:'pointer'}} onClick={()=>openTrace(t.id)}>
                <div><div style={{fontSize:14}}>{t.steps[t.steps.length-1]?.title}</div><div className="t-mut"><span className="mono">{t.objectId}</span> · {t.startedAt.toLocaleTimeString('ru-RU')} · {(t.durationMs/1000).toFixed(1)}с</div></div>
                <span className={'pill '+(t.state==='completed'?'pill-teal':t.state==='escalated'?'pill-amber':'pill-gray')}>{t.state==='completed'?'авто':t.state==='escalated'?'эскалирован':t.state}</span>
              </div>
            ))}
          </div>}

          {tab==='metrics' && <div className="grid" style={{gridTemplateColumns:'1fr 1fr',gap:14}}>
            <div className="card-flat" style={{background:'var(--surface)',padding:16,borderRadius:14}}><div className="t-mut">Действий сегодня</div><div className="metric-lg" style={{fontSize:30}}>{agent.today.actions}</div></div>
            <div className="card-flat" style={{background:'var(--surface)',padding:16,borderRadius:14}}><div className="t-mut">Среднее время</div><div className="metric-lg" style={{fontSize:30}}>{(agent.today.avgMs/1000).toFixed(1)}<span style={{fontSize:14,color:'var(--tx-3)'}}>с</span></div></div>
            <div className="card-flat" style={{background:'var(--surface)',padding:16,borderRadius:14}}><div className="t-mut">Автономия</div><div className="metric-lg" style={{fontSize:30}}>{Math.round(agent.today.autonomous/agent.today.actions*100)}<span style={{fontSize:14,color:'var(--tx-3)'}}>%</span></div></div>
            <div className="card-flat" style={{background:'var(--surface)',padding:16,borderRadius:14}}><div className="t-mut">Эскалаций</div><div className="metric-lg" style={{fontSize:30,color:agent.today.escalated>0?'var(--warning)':'var(--tx)'}}>{agent.today.escalated}</div></div>
          </div>}

          <div className="row" style={{gap:12,marginTop:22}}>
            <button className="btn btn-light btn-block">{agent.state==='paused'?'▶ Запустить':'⏸ Поставить на паузу'}</button>
            <button className="btn btn-outline btn-block" onClick={()=>{notify('Сброшено к дефолту'); setGrails(JSON.parse(JSON.stringify(agent.guardrails)));}}><Icon name="refresh" size={16}/>Сбросить правила</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function GuardrailRow({rule, onChange}){
  if(rule.type==='slider'){
    return (
      <div className="card-flat" style={{background:'var(--surface)',padding:'16px 18px',borderRadius:14,marginBottom:10}}>
        <div className="between" style={{marginBottom:10}}><span className="t-strong" style={{fontSize:14}}>{rule.label}</span><span className="mono t-strong">{rule.value}</span></div>
        <input type="range" min={rule.min} max={rule.max} step={rule.unit===' ₸'?100000:1} value={rule.num} onChange={e=>onChange(rule.key,parseInt(e.target.value))} style={{width:'100%'}}/>
        <div className="between t-mut" style={{marginTop:4}}><span>{rule.unit===' ₸'?SW_SALES.fmt(rule.min)+' ₸':rule.min+(rule.unit||'')}</span><span>{rule.unit===' ₸'?SW_SALES.fmt(rule.max)+' ₸':rule.max+(rule.unit||'')}</span></div>
      </div>
    );
  }
  return (
    <div className="card-flat" style={{background:'var(--surface)',padding:'14px 18px',borderRadius:14,marginBottom:10}}>
      <div className="between"><span className="t-strong" style={{fontSize:14}}>{rule.label}</span><span style={{fontSize:14}}>{rule.value}</span></div>
    </div>
  );
}

window.Agents = Agents;