/* ============ Sales Console — Dashboard (Акт 1) ============ */

function Dashboard({setView, openTrace, notify}){
  const totalActions = SW_SALES.agents.reduce((s,a)=>s+a.today.actions,0);
  const totalAutonomous = SW_SALES.agents.reduce((s,a)=>s+a.today.autonomous,0);
  const totalEscalated = SW_SALES.agents.reduce((s,a)=>s+a.today.escalated,0);
  const escalatedTraces = SW_SALES.traces.filter(t=>t.state==='escalated');

  // KPI-ряд (паттерн akpi из портала)
  const kpis = [
    {label:'Действий агентов сегодня', value:totalActions, unit:'', delta:12, spark:[18,22,19,25,28,32,36,40,47]},
    {label:'Автономно завершено',     value:totalAutonomous, unit:'', delta:8,  spark:[15,18,16,22,24,27,30,34,38]},
    {label:'Эскалаций ждут вас',      value:totalEscalated, unit:'', delta:null, warn:totalEscalated>0},
    {label:'Сэкономлено часов',       value:14,    unit:'ч',  delta:22, spark:[4,6,5,8,9,11,12,13,14]},
  ];

  // funnel KPI (вторая полоса)
  const todayInbox = SW_SALES.inbox.length;
  const todayQualified = SW_SALES.inbox.filter(m=>m.agentStatus==='qualified').length;
  const todayKpSent = SW_SALES.deals.filter(d=>d.stage==='kp_sent' || d.stage==='negotiating' || d.stage==='won').length;
  const todayWon = SW_SALES.deals.filter(d=>d.stage==='won').length;

  return (
    <div className="content fade-in">
      <PageHead title="Сегодня · 6 июня" sub={`Утро коммерческого директора · агенты обработали ${totalActions} запросов с ночи`}>
        <button className="btn btn-outline" onClick={()=>notify && notify('Отчёт сформирован')}>
          <Icon name="download" size={18}/>Сводка за день
        </button>
      </PageHead>

      {/* Эскалации сверху — то, что ждёт человека */}
      {escalatedTraces.length > 0 && (
        <div style={{marginBottom:24}}>
          {escalatedTraces.map(t => {
            const agent = SW_SALES.agents.find(a => a.id === t.agentId);
            const objectStr = t.objectId;
            const reason = t.steps.find(s => s.state === 'warning')?.reasoning || 'требуется подтверждение';
            return (
              <EscalationBanner
                key={t.id}
                agent={agent ? agent.name : t.agentId}
                dealId={objectStr}
                reason={reason}
                onOpen={()=>openTrace(t.id)}
              />
            );
          })}
        </div>
      )}

      {/* KPI агентов */}
      <div className="grid" style={{gridTemplateColumns:'repeat(4,1fr)',marginBottom:20}}>
        {kpis.map((k,i)=>{
          const isWarn = k.warn;
          return (
            <div className="akpi" key={i} style={isWarn ? {borderColor:'var(--warning)', background:'var(--warning-soft)'} : {}}>
              <div className="lbl">{k.label}</div>
              <div className="val">{k.value}{k.unit && <span className="u">{k.unit}</span>}</div>
              <div className="row" style={{justifyContent:'space-between',marginTop:6}}>
                {k.delta != null
                  ? <span className={'dlt '+(k.delta>=0?'up':'dn')}>{k.delta>=0?'▲':'▼'} {k.delta>=0?'+':''}{k.delta}%</span>
                  : isWarn ? <span style={{fontSize:12,color:'var(--warning)',fontWeight:600}}>требует внимания</span>
                  : <span/>}
                {k.spark && <Sparkline data={k.spark} color={k.delta>=0?'#00a87e':'#e23b4a'}/>}
              </div>
            </div>
          );
        })}
      </div>

      {/* Воронка дня + Live-фид */}
      <div className="grid" style={{gridTemplateColumns:'1.5fr 1fr',marginBottom:20}}>
        <div className="card">
          <div className="card-head">
            <h3>Воронка за сегодня</h3>
            <span className="pill pill-teal" style={{marginLeft:'auto'}}><span className="pdot"></span>live</span>
          </div>
          <div className="row" style={{gap:0,marginTop:8}}>
            <FunnelStep label="Входящие" value={todayInbox} delta="+3 за час" wide/>
            <FunnelArrow/>
            <FunnelStep label="Квалифицированы" value={todayQualified} delta={`${Math.round(todayQualified/todayInbox*100)}%`} wide/>
            <FunnelArrow/>
            <FunnelStep label="КП отправлено" value={todayKpSent} delta="+2 за час" wide/>
            <FunnelArrow/>
            <FunnelStep label="Выиграно" value={todayWon} delta="—" wide/>
          </div>
          <div style={{marginTop:18,padding:'14px 16px',background:'var(--surface-2)',borderRadius:14,fontSize:13,color:'var(--tx-2)',display:'flex',alignItems:'center',gap:10}}>
            <AgentMark size="sm"/>
            <span>Из 9 входящих за сегодня <strong style={{color:'var(--tx)'}}>{todayQualified} квалифицированы агентом</strong> без участия менеджера. Среднее время разбора — 1.8с.</span>
          </div>
        </div>

        <div className="card">
          <div className="card-head"><h3>Что делают агенты прямо сейчас</h3><span className="pill pill-teal" style={{marginLeft:'auto'}}><span className="pdot"></span>live</span></div>
          <div className="grid" style={{gap:2}}>
            {SW_SALES.traces.slice(0,6).map((t,i)=>{
              const agent = SW_SALES.agents.find(a => a.id === t.agentId);
              const last = t.steps[t.steps.length-1];
              const lastStepTitle = last?.title || '';
              return (
                <div key={t.id} className="row" style={{gap:13,padding:'13px 2px',borderBottom:i<5?'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}}><strong>{agent?.name || t.agentId}</strong></div>
                    <div className="t-mut" style={{fontSize:13,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{lastStepTitle}</div>
                  </div>
                  <span className="t-mut" style={{fontSize:13}}>{t.startedAt.toLocaleTimeString('ru-RU',{hour:'2-digit',minute:'2-digit'})}</span>
                </div>
              );
            })}
          </div>
          <button className="btn btn-light btn-block" style={{marginTop:16}} onClick={()=>setView('audit')}>Полный аудит действий</button>
        </div>
      </div>

      {/* Карточки 6 агентов — состояние */}
      <div className="card">
        <div className="card-head">
          <h3>Агенты в работе</h3>
          <button className="btn btn-ghost btn-sm" style={{marginLeft:'auto'}} onClick={()=>setView('agents')}>Управлять <Icon name="chevR" size={15}/></button>
        </div>
        <div className="grid" style={{gridTemplateColumns:'repeat(3,1fr)',gap:14,marginTop:6}}>
          {SW_SALES.agents.map(a => (
            <div key={a.id} className="card" style={{padding:'14px 16px',background:'var(--surface-2)',cursor:'pointer'}} onClick={()=>setView('agents')}>
              <div className="row" style={{justifyContent:'space-between',alignItems:'center',marginBottom:4}}>
                <div className="row" style={{gap:8,alignItems:'center'}}>
                  <AgentMark size="sm"/>
                  <strong style={{fontSize:14}}>{a.name}</strong>
                </div>
                <span className={'pill '+(a.state==='active'?'pill-teal':a.state==='escalating'?'pill-amber':'pill-gray')}>
                  <span className="pdot"></span>{a.state==='active'?'активен':a.state==='escalating'?'ждёт вас':'на паузе'}
                </span>
              </div>
              <div className="t-mut" style={{fontSize:12,marginBottom:8}}>{a.tagline}</div>
              <div className="row" style={{gap:14,fontSize:12,color:'var(--tx-2)'}}>
                <span>обработано <strong style={{color:'var(--tx)'}}>{a.today.actions}</strong></span>
                <span>автономно <strong style={{color:'var(--tx)'}}>{a.today.autonomous}</strong></span>
                {a.today.escalated > 0 && <span>эскалаций <strong style={{color:'var(--warning)'}}>{a.today.escalated}</strong></span>}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* small funnel helpers */
function FunnelStep({label, value, delta, wide}){
  return (
    <div style={{flex:1,padding:'14px 12px'}}>
      <div className="t-mut" style={{fontSize:12,marginBottom:4}}>{label}</div>
      <div style={{fontFamily:'var(--display)',fontWeight:700,fontSize:32,letterSpacing:'-0.5px',lineHeight:1}}>{value}</div>
      <div className="t-mut" style={{fontSize:12,marginTop:6}}>{delta}</div>
    </div>
  );
}
function FunnelArrow(){
  return (
    <div style={{display:'flex',alignItems:'center',color:'var(--tx-3)',padding:'0 4px'}}>
      <Icon name="chevR" size={20}/>
    </div>
  );
}

window.Dashboard = Dashboard;