/* ============ Dashboard / Analytics ============ */
function Dashboard({setView, openCargo, notify}){
  const a=SW.analytics;
  const [period,setPeriod]=useState('30');
  return (
    <div className="content fade-in">
      <PageHead title="Аналитика" sub="Сводные показатели по терминалу">
        <button className="btn btn-outline" onClick={()=>notify('Отчёт сформирован: PDF')}><Icon name="download" size={18}/>Экспорт PDF/Excel</button>
      </PageHead>

      {/* filters */}
      <div className="card" style={{padding:'14px 18px',marginBottom:20}}>
        <div className="row" style={{gap:12,flexWrap:'wrap'}}>
          <select className="select" value={period} onChange={e=>setPeriod(e.target.value)}>
            <option value="7">Последние 7 дней</option>
            <option value="30">Последние 30 дней</option>
            <option value="90">Квартал</option>
          </select>
          <select className="select"><option>Все компании</option>{SW.clients.map(c=><option key={c}>{c}</option>)}</select>
          <select className="select"><option>Приём / Отправка</option><option>Приём</option><option>Отправка</option></select>
          <select className="select"><option>Все статусы</option>{Object.values(SW.STATUS).map(s=><option key={s.label}>{s.label}</option>)}</select>
          <div className="spacer" style={{flex:1}}></div>
          <button className="btn btn-dark btn-sm">Применить</button>
          <button className="btn btn-ghost btn-sm"><Icon name="refresh" size={16}/>Сбросить</button>
        </div>
      </div>

      {/* KPI cards */}
      <div className="grid" style={{gridTemplateColumns:'repeat(4,1fr)',marginBottom:20}}>
        {a.kpis.map((k,i)=>{
          const up=k.delta>=0;
          return (
            <div className="akpi" key={i}>
              <div className="lbl">{k.label}</div>
              <div className="val">{k.value}<span className="u">{k.unit}</span></div>
              <div className="row" style={{justifyContent:'space-between'}}>
                <span className={'dlt '+(up?'up':'dn')}>{up?'▲':'▼'} {up?'+':''}{k.delta}%</span>
                <Sparkline data={k.spark} color={up?'#00a87e':'#e23b4a'}/>
              </div>
            </div>
          );
        })}
      </div>

      {/* charts */}
      <div className="grid" style={{gridTemplateColumns:'1.5fr 1fr',marginBottom:20}}>
        <div className="card">
          <div className="card-head">
            <h3>Динамика отгрузок за месяц</h3>
            <div className="row" style={{gap:16,marginLeft:'auto'}}>
              <span className="row" style={{gap:7,fontSize:13}}><span className="dot-tone" style={{background:'#494fdf'}}></span>Приём</span>
              <span className="row" style={{gap:7,fontSize:13}}><span className="dot-tone" style={{background:'#00a87e'}}></span>Отправка</span>
            </div>
          </div>
          <LineChart labels={a.line.labels} series={[
            {data:a.line.accept, color:'#494fdf'},
            {data:a.line.ship, color:'#00a87e'},
          ]}/>
        </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={a.donut}/>
              <div style={{position:'absolute',inset:0,display:'grid',placeItems:'center',textAlign:'center'}}>
                <div><div className="metric-lg" style={{fontSize:28}}>{a.donut.reduce((s,x)=>s+x.value,0)}</div><div className="muted" style={{fontSize:12}}>грузов</div></div>
              </div>
            </div>
            <div className="legend" style={{flex:1}}>
              {a.donut.map((s,i)=>(<div className="legend-row" key={i}><span className="sw" style={{background:s.color}}></span>{s.label}<span className="lv">{s.value}</span></div>))}
            </div>
          </div>
        </div>
      </div>

      {/* bottom: top idle + events */}
      <div className="grid" style={{gridTemplateColumns:'1.5fr 1fr'}}>
        <div className="card">
          <div className="card-head">
            <h3>ТОП вагонов по простою</h3>
            <select className="select" style={{marginLeft:'auto',padding:'7px 32px 7px 12px',fontSize:13}}><option>Простой ↓</option><option>Дата прибытия</option></select>
          </div>
          <table className="tbl">
            <thead><tr><th>№ вагона</th><th>Накладная</th><th>Клиент</th><th>Прибытие</th><th>Статус</th><th className="num">Простой</th><th>Причина</th><th></th></tr></thead>
            <tbody>
              {SW.topIdle.map((r,i)=>(
                <tr key={i} onClick={()=>openCargo(SW.cargoes.find(c=>c.id===r.id))}>
                  <td><span className="mono t-strong">{r.wagon}</span></td>
                  <td className="mono">{r.waybill}</td>
                  <td className="t-mut" style={{fontSize:14}}>{r.client.replace('ТОО ','').replace('АО ','').replace(/[«»]/g,'')}</td>
                  <td className="mono">{SW.dstr(r.arrival)}</td>
                  <td><StatusPill status={r.status}/></td>
                  <td className="num"><span className={'t-strong '+(r.idle>40?'':'')} style={{color:r.idle>40?'var(--danger)':'var(--tx)'}}>{r.idle} ч</span></td>
                  <td className="t-mut" style={{fontSize:14}}>{r.reason}</td>
                  <td className="num"><button className="link">Открыть</button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </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}}>
            {a.events.map((e,i)=>(
              <div key={i} className="row" style={{gap:13,padding:'13px 2px',borderBottom:i<a.events.length-1?'1px solid var(--line-2)':'none'}}>
                <div className={'tile-ic tone-'+e.tone} style={{width:36,height:36,flex:'0 0 36px'}}><Icon name="train" size={18}/></div>
                <div style={{flex:1}}>
                  <div style={{fontSize:14.5}}><span className="mono t-strong">Вагон {e.wagon}</span></div>
                  <div className="t-mut">→ {e.to}</div>
                </div>
                <span className="t-mut" style={{fontSize:13}}>{e.time}</span>
              </div>
            ))}
          </div>
          <button className="btn btn-light btn-block" style={{marginTop:16}} onClick={()=>setView('notifications')}>Все события</button>
        </div>
      </div>
    </div>
  );
}
window.Dashboard = Dashboard;