/* ============ Sales Console — лёгкие экраны (Котировки, Контрагенты, Аналитика, Настройки) ============ */

function Quotes({openTrace, search}){
  const [f,setF]=useState('all');
  const all = SW_SALES.quotes.map(q=>{
    const d = SW_SALES.deals.find(dd=>dd.id===q.dealId);
    return {...q, company:d?.company.split('(')[0].trim()||'—', route:d?.route||'—', amount:q.rate||q.amount||d?.rateAmount||0, margin:q.marginPct||d?.marginPct||0};
  });
  const rows = all.filter(q=>{
    if(f==='auto' && !q.agentGenerated) return false;
    if(f==='low' && q.margin>=15) return false;
    if(search && !((q.id+' '+q.company).toLowerCase().includes(search.toLowerCase()))) return false;
    return true;
  });
  const avgMargin = Math.round(all.reduce((s,q)=>s+q.margin,0)/all.length);
  const tiles = [
    {key:'all', label:'Всего котировок', value:all.length, ic:'calc', tone:'ink'},
    {key:'auto', label:'Авто-расчёт', value:all.filter(q=>q.agentGenerated).length, ic:'sparkle', tone:'violet'},
    {key:'low', label:'Маржа ниже нормы', value:all.filter(q=>q.margin<15).length, ic:'flame', tone:'amber'},
    {key:'__avg', label:'Средняя маржа', value:avgMargin+'%', ic:'trend', tone:'teal'},
  ];
  return (
    <div className="content fade-in">
      <PageHead title="Котировки" sub={`${all.length} котировок · тарифная стойка считает ставку автоматически по стандарту`}/>

      <div className="tiles" style={{gridTemplateColumns:'repeat(4,1fr)',marginBottom:18}}>
        {tiles.map(t=>(
          <button key={t.key} className={'tile'+(f===t.key?' sel':'')} onClick={()=>t.key!=='__avg'&&setF(f===t.key?'all':t.key)}>
            <div className="tile-top"><span className="tile-lbl">{t.label}</span><span className={'tile-ic tone-'+t.tone}><Icon name={t.ic} size={17} fill={t.tone==='violet'?'currentColor':'none'}/></span></div>
            <div className="tile-val">{t.value}</div>
          </button>
        ))}
      </div>

      <div style={{marginBottom:16}}>
        <AnnotationStrip agent="Тарифная стойка" summary={`посчитала ${all.filter(q=>q.agentGenerated).length} из ${all.length} котировок автоматически`} confidence={88} artifactsCount={3} traceId="TR-2026-08900" onWhy={openTrace}/>
      </div>

      <div className="card" style={{padding:'8px 10px'}}>
        <table className="tbl">
          <thead><tr><th>№ котировки</th><th>Клиент · маршрут</th><th>Сделка</th><th className="num">Ставка</th><th className="num">Маржа</th><th>Статус</th><th>Агент</th></tr></thead>
          <tbody>
            {rows.map(q=>(
              <tr key={q.id}>
                <td className="t-strong" style={{color:'var(--blue)'}}>{q.id}</td>
                <td><div style={{fontSize:14}}>{q.company}</div><div className="t-mut">{q.route}</div></td>
                <td className="mono">{q.dealId}</td>
                <td className="num mono t-strong">{SW_SALES.fmt(q.amount)} ₸</td>
                <td className="num"><span style={{color:q.margin<15?'var(--warning)':q.margin>=20?'var(--teal)':'var(--tx)',fontWeight:600}}>{q.margin}%</span></td>
                <td><span className="pill pill-teal"><span className="pdot"></span>активна</span></td>
                <td>{q.agentGenerated && <AgentMark size="sm"/>}</td>
              </tr>
            ))}
            {rows.length===0 && <tr><td colSpan={7}><Empty text="Котировки не найдены"/></td></tr>}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function Contractors({search, openTrace}){
  const [f,setF]=useState('all');
  const dealCompanies = SW_SALES.deals.map(d=>({id:d.id,name:d.company.split('(')[0].trim(),country:d.lang==='zh'?'CN':d.lang==='uz'?'UZ':d.lang==='en'?'KZ':'KZ',type:'клиент',source:'сделка',activity:d.created,contact:d.contact}));
  const leadCompanies = SW_SALES.leads.slice(0,8).map(l=>({id:l.id,name:l.company,country:l.country,type:'лид',source:'проспектинг',activity:l.enrichedAt,contact:l.contact}));
  const all = [...dealCompanies, ...leadCompanies];
  const rows = all.filter(c=>{
    if(f!=='all' && c.type!==f) return false;
    if(search && !c.name.toLowerCase().includes(search.toLowerCase())) return false;
    return true;
  });
  const tiles = [
    {key:'all', label:'Всего в базе', value:all.length, ic:'admin', tone:'ink'},
    {key:'клиент', label:'Клиенты', value:all.filter(c=>c.type==='клиент').length, ic:'check', tone:'teal'},
    {key:'лид', label:'Лиды', value:all.filter(c=>c.type==='лид').length, ic:'users', tone:'blue'},
    {key:'__uz', label:'Из Узбекистана', value:all.filter(c=>c.country==='UZ').length, ic:'globe', tone:'violet'},
  ];
  return (
    <div className="content fade-in">
      <PageHead title="Контрагенты" sub={`${all.length} компаний в базе · CRM-гигиена ведётся агентом`}/>

      <div className="tiles" style={{gridTemplateColumns:'repeat(4,1fr)',marginBottom:18}}>
        {tiles.map(t=>(
          <button key={t.key} className={'tile'+(f===t.key?' sel':'')} onClick={()=>t.key!=='__uz'&&setF(f===t.key?'all':t.key)}>
            <div className="tile-top"><span className="tile-lbl">{t.label}</span><span className={'tile-ic tone-'+t.tone}><Icon name={t.ic} size={17} fill={t.tone==='violet'?'currentColor':'none'}/></span></div>
            <div className="tile-val">{t.value}</div>
          </button>
        ))}
      </div>

      <div style={{marginBottom:16}}>
        <AnnotationStrip agent="CRM-гигиена" summary={`обновила контактные данные ${SW_SALES.agents.find(a=>a.id==='crm').today.actions} компаний за сегодня · 0 дубликатов`} confidence={99} artifactsCount={0} traceId="TR-2026-08850" onWhy={openTrace}/>
      </div>

      <div className="card" style={{padding:'8px 10px'}}>
        <table className="tbl">
          <thead><tr><th>Компания</th><th>Контакт</th><th>Страна</th><th>Тип</th><th>Источник</th><th>Активность</th></tr></thead>
          <tbody>
            {rows.map((c,i)=>(
              <tr key={c.id+i}>
                <td><div style={{fontSize:14,fontWeight:500}}>{c.name}</div></td>
                <td className="t-mut" style={{fontSize:13}}>{c.contact||'—'}</td>
                <td><span className="pill pill-gray">{c.country}</span></td>
                <td><span className={'pill '+(c.type==='клиент'?'pill-teal':'pill-blue')}><span className="pdot"></span>{c.type}</span></td>
                <td className="t-mut" style={{fontSize:13}}>{c.source}</td>
                <td className="mono t-mut" style={{fontSize:13}}>{SW_SALES.dstr(c.activity)}</td>
              </tr>
            ))}
            {rows.length===0 && <tr><td colSpan={6}><Empty text="Контрагенты не найдены"/></td></tr>}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function Analytics(){
  // Простая страница со sparklines и базовой аналитикой
  const totalActions = SW_SALES.agents.reduce((s,a)=>s+a.today.actions,0);
  const agentSeries = SW_SALES.agents.map(a => ({name:a.name, value:a.today.actions, color:'#494fdf'}));
  const donutData = SW_SALES.agents.map((a,i) => ({label:a.name, value:a.today.actions, color:['#191c1f','#494fdf','#00a87e','#ec7e00','#e23b4a','#9aa3ab'][i]}));

  return (
    <div className="content fade-in">
      <PageHead title="Аналитика" sub="Сводные показатели по работе агентов и воронке"/>

      <div className="grid" style={{gridTemplateColumns:'1.5fr 1fr',gap:14,marginBottom:20}}>
        <div className="card">
          <div className="card-head"><h3>Действия агентов по дням</h3><span className="t-mut" style={{marginLeft:'auto',fontSize:13}}>30 дней</span></div>
          <LineChart labels={['1','3','5','7','9','11','13','15','17','19','21','23','25','27','29']} series={[
            {data:[28,32,29,35,38,42,40,45,48,44,49,52,55,53,58], color:'#494fdf'},
            {data:[22,25,23,28,30,33,32,36,38,35,40,42,44,42,47], color:'#00a87e'},
          ]}/>
          <div className="row" style={{gap:16,marginTop:12,fontSize:13}}>
            <span className="row" style={{gap:7}}><span className="dot-tone" style={{background:'#494fdf'}}></span>Всего действий</span>
            <span className="row" style={{gap:7}}><span className="dot-tone" style={{background:'#00a87e'}}></span>Автономно</span>
          </div>
        </div>

        <div className="card">
          <div className="card-head"><h3>Распределение по агентам</h3></div>
          <div className="row" style={{gap:24,marginTop:6}}>
            <div style={{position:'relative',flex:'0 0 auto'}}>
              <Donut segments={donutData}/>
              <div style={{position:'absolute',inset:0,display:'grid',placeItems:'center',textAlign:'center'}}>
                <div><div style={{fontFamily:'var(--display)',fontWeight:800,fontSize:28}}>{totalActions}</div><div className="t-mut" style={{fontSize:12}}>действий</div></div>
              </div>
            </div>
            <div style={{flex:1}}>
              {donutData.map((s,i) => (
                <div key={i} className="between" style={{padding:'6px 0',fontSize:13}}>
                  <span style={{display:'flex',alignItems:'center',gap:8}}><span style={{width:10,height:10,borderRadius:3,background:s.color}}/>{s.label}</span>
                  <span className="t-strong">{s.value}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div className="grid" style={{gridTemplateColumns:'repeat(4,1fr)',gap:14}}>
        {SW_SALES.agents.slice(0,4).map((a,i) => (
          <div className="akpi" key={a.id}>
            <div className="lbl">{a.name}</div>
            <div className="val">{a.today.actions}</div>
            <div className="row" style={{justifyContent:'space-between',marginTop:6}}>
              <span className="t-mut" style={{fontSize:12}}>сегодня</span>
              <Sparkline data={[3,5,4,8,6,10,12,9,a.today.actions]} color="#494fdf"/>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function Settings(){
  return (
    <div className="content fade-in">
      <PageHead title="Настройки" sub="Профиль и параметры аккаунта"/>
      <div className="grid" style={{gridTemplateColumns:'1fr 1fr',gap:14}}>
        <div className="card" style={{padding:24}}>
          <h3 style={{margin:'0 0 16px',fontFamily:'var(--display)'}}>Профиль</h3>
          <div className="row" style={{gap:16,marginBottom:20}}>
            <div className="avatar" style={{width:64,height:64,fontSize:24}}>{SW_SALES.me.initials}</div>
            <div>
              <div style={{fontSize:18,fontWeight:600}}>{SW_SALES.me.name}</div>
              <div className="t-mut" style={{fontSize:13}}>{SW_SALES.me.role}</div>
              <div className="t-mut" style={{fontSize:13}}>{SW_SALES.me.company}</div>
            </div>
          </div>
          <button className="btn btn-outline">Изменить профиль</button>
        </div>
        <div className="card" style={{padding:24}}>
          <h3 style={{margin:'0 0 16px',fontFamily:'var(--display)'}}>Безопасность</h3>
          <div style={{fontSize:14,marginBottom:16}}>Двухфакторная аутентификация: <strong style={{color:'var(--teal)'}}>включена</strong></div>
          <div style={{fontSize:14,marginBottom:16}}>Последний вход: <span className="mono">06.06.2026 07:42</span></div>
          <button className="btn btn-outline">Изменить пароль</button>
        </div>
      </div>
    </div>
  );
}

window.Quotes = Quotes;
window.Contractors = Contractors;
window.Analytics = Analytics;
window.Settings = Settings;