/* ============ Cargoes registry + cargo card ============ */
const ALL_COLS = [
  {k:'wagon', label:'№ вагона'},
  {k:'waybill', label:'Накладная'},
  {k:'cargo', label:'Груз'},
  {k:'operation', label:'Операция'},
  {k:'status', label:'Статус'},
  {k:'arrival', label:'Дата прибытия'},
  {k:'issue', label:'Дата выдачи'},
  {k:'route', label:'Маршрут'},
];

function Cargoes({search, openCargo, notify, archived}){
  const [statusF,setStatusF]=useState('all');
  const [opF,setOpF]=useState('all');
  const [tile,setTile]=useState(null);
  const [page,setPage]=useState(0);
  const [per,setPer]=useState(10);
  const [sel,setSel]=useState({});
  const [cols,setCols]=useState(()=>Object.fromEntries(ALL_COLS.map(c=>[c.k,true])));
  const [showCols,setShowCols]=useState(false);
  const [preview,setPreview]=useState(null);

  const base = archived ? SW.archive : SW.current;
  const rows = useMemo(()=>base.filter(c=>{
    if(tile==='__work' && c.status==='done') return false;
    if(tile && tile!=='__work' && c.status!==tile) return false;
    if(statusF!=='all' && c.status!==statusF) return false;
    if(opF!=='all' && c.operation!==opF) return false;
    const q=search.trim().toLowerCase();
    if(q && !(c.id.toLowerCase().includes(q)||c.wagon.includes(q)||c.waybill.toLowerCase().includes(q)||c.cargo.toLowerCase().includes(q))) return false;
    return true;
  }),[base,tile,statusF,opF,search]);

  const paged = rows.slice(page*per,(page+1)*per);
  const selCount = Object.values(sel).filter(Boolean).length;

  const rowClick=(e,c)=>{
    const r=e.currentTarget.getBoundingClientRect();
    setPreview({c, top:Math.min(r.top, window.innerHeight-360), left:r.right-330});
  };

  return (
    <div className="content fade-in">
      <PageHead title={archived?'Архив грузов':'Реестр грузов'} sub={archived?'Завершённые и выданные отправки':'Текущие и архивные отправки. Фильтруйте по вагону, накладной и датам.'}>
        <button className="btn btn-outline" onClick={()=>{setShowCols(s=>!s);}} style={{position:'relative'}}>
          <Icon name="columns" size={18}/>Настроить колонки
        </button>
        <button className="btn btn-dark" onClick={()=>notify('Экспорт сформирован: '+rows.length+' строк (XLSX)')}><Icon name="download" size={18}/>Экспорт (CSV/XLSX)</button>
      </PageHead>

      {/* column settings popover */}
      {showCols && (
        <>
          <div style={{position:'fixed',inset:0,zIndex:40}} onClick={()=>setShowCols(false)}></div>
          <div className="popover" style={{right:40,top:150,width:240}}>
            <div className="t-strong" style={{marginBottom:12}}>Колонки таблицы</div>
            {ALL_COLS.map(c=>(
              <div key={c.k} className="row" style={{gap:10,padding:'7px 0',cursor:'pointer'}} onClick={()=>setCols(s=>({...s,[c.k]:!s[c.k]}))}>
                <Checkbox on={cols[c.k]} onChange={()=>setCols(s=>({...s,[c.k]:!s[c.k]}))}/>
                <span style={{fontSize:14}}>{c.label}</span>
              </div>
            ))}
          </div>
        </>
      )}

      {/* KPI tiles */}
      {!archived && (
        <div className="tiles" style={{marginBottom:20}}>
          {SW.kpiTiles.map(t=>(
            <button key={t.key} className={'tile'+(tile===t.key?' sel':'')} onClick={()=>{setTile(tile===t.key?null:t.key);setPage(0);}}>
              <div className="tile-top">
                <span className="tile-lbl">{t.label}</span>
                <span className={'tile-ic tone-'+t.tone}><Icon name={t.ic} size={17}/></span>
              </div>
              <div className="tile-val">{t.value}</div>
            </button>
          ))}
        </div>
      )}

      {/* filters */}
      <div className="card" style={{padding:'14px 18px',marginBottom:16}}>
        <div className="row" style={{gap:12,flexWrap:'wrap'}}>
          <div className="tb-search" style={{margin:0,maxWidth:340,flex:1}}>
            <Icon name="search" size={16}/>
            <input style={{paddingTop:9,paddingBottom:9}} placeholder="Поиск по № вагона, накладной, грузу…" defaultValue="" onChange={()=>{}}/>
          </div>
          <select className="select" value={statusF} onChange={e=>{setStatusF(e.target.value);setPage(0);}}>
            <option value="all">Все статусы</option>
            {Object.entries(SW.STATUS).map(([k,v])=><option key={k} value={k}>{v.label}</option>)}
          </select>
          <select className="select" value={opF} onChange={e=>{setOpF(e.target.value);setPage(0);}}>
            <option value="all">Приём и Отправка</option><option value="Приём">Приём</option><option value="Отправка">Отправка</option>
          </select>
          <button className="btn btn-ghost btn-sm" onClick={()=>{setStatusF('all');setOpF('all');setTile(null);}}><Icon name="refresh" size={16}/>Сбросить</button>
          <div className="spacer" style={{flex:1}}></div>
          {selCount>0 && <span className="pill pill-blue"><span className="pdot"></span>Выбрано: {selCount}</span>}
        </div>
      </div>

      {/* table */}
      <div className="card" style={{padding:'8px 10px',position:'relative'}}>
        <table className="tbl">
          <thead><tr>
            <th style={{width:36}}><Checkbox on={paged.length>0&&paged.every(c=>sel[c.id])} onChange={v=>{const n={...sel};paged.forEach(c=>n[c.id]=v);setSel(n);}}/></th>
            <th>№ отправки</th>
            {cols.wagon&&<th>№ вагона</th>}
            {cols.waybill&&<th>Накладная</th>}
            {cols.cargo&&<th>Груз</th>}
            {cols.operation&&<th>Операция</th>}
            {cols.status&&<th>Статус</th>}
            {cols.arrival&&<th>Прибытие</th>}
            {cols.issue&&<th>Выдача</th>}
            {cols.route&&<th>Маршрут</th>}
          </tr></thead>
          <tbody>
            {paged.map(c=>(
              <tr key={c.id} onClick={e=>rowClick(e,c)}>
                <td onClick={e=>e.stopPropagation()}><Checkbox on={!!sel[c.id]} stop onChange={v=>setSel(s=>({...s,[c.id]:v}))}/></td>
                <td className="t-strong" style={{color:'var(--blue)'}}>{c.id}</td>
                {cols.wagon&&<td className="mono">{c.wagon}</td>}
                {cols.waybill&&<td className="mono" style={{color:'var(--sky)'}}>{c.waybill}</td>}
                {cols.cargo&&<td>{c.cargo}</td>}
                {cols.operation&&<td><span className="pill pill-gray">{c.operation}</span></td>}
                {cols.status&&<td><StatusPill status={c.status}/></td>}
                {cols.arrival&&<td className="mono">{SW.dstr(c.arrival)}</td>}
                {cols.issue&&<td className="mono">{SW.dstr(c.issue)}</td>}
                {cols.route&&<td className="t-mut" style={{fontSize:14}}>{c.route}</td>}
              </tr>
            ))}
            {paged.length===0 && <tr><td colSpan={10}><Empty text="Грузы не найдены по заданным фильтрам"/></td></tr>}
          </tbody>
        </table>
      </div>
      <Pager total={rows.length} page={page} per={per} setPage={setPage} setPer={setPer}/>

      {/* row preview popover */}
      {preview && (
        <>
          <div style={{position:'fixed',inset:0,zIndex:48}} onClick={()=>setPreview(null)}></div>
          <div className="popover" style={{position:'fixed',top:preview.top,left:preview.left,width:320}}>
            <div className="between" style={{marginBottom:10}}>
              <div style={{fontFamily:'var(--display)',fontWeight:700,fontSize:18}}>{preview.c.cargo}</div>
              <StatusPill status={preview.c.status}/>
            </div>
            <div className="def-row" style={{padding:'9px 0'}}><span className="k">Прибыл</span><span className="v mono">{SW.dstr(preview.c.arrival)}</span></div>
            <div className="def-row" style={{padding:'9px 0'}}><span className="k">План выдачи</span><span className="v mono">{SW.dstr(preview.c.issue)}</span></div>
            <div className="def-row" style={{padding:'9px 0'}}><span className="k">№ вагона</span><span className="v mono">{preview.c.wagon}</span></div>
            <div className="row" style={{gap:9,margin:'12px 0 16px'}}>
              <span className="muted" style={{fontSize:13}}>Ответственный:</span>
              <div className="av-sm">{preview.c.responsible.initials}</div>
              <span style={{fontSize:13.5}}>{preview.c.responsible.name}</span>
            </div>
            <button className="btn btn-dark btn-block btn-sm" onClick={()=>{const c=preview.c;setPreview(null);openCargo(c);}}>Открыть карточку<Icon name="arrow" size={16}/></button>
          </div>
        </>
      )}
    </div>
  );
}

/* ---- cargo card drawer ---- */
function CargoCard({cargo, onClose, setView, notify}){
  if(!cargo) return null;
  const c=cargo;
  const [tab,setTab]=useState('overview');
  const [doc,setDoc]=useState(null);
  const stage=SW.statusToStage[c.status];
  const docs=SW.documents.filter(d=>d.cargo===c.id);
  const cPasses=SW.passes.filter(p=>p.cargo===c.id);
  const timeline=[
    {s:SW.STATUS[c.status].label, t:SW.dstr(c.arrival)+', 14:20', loc:c.route, on:true},
    {s:'Прибыл на терминал', t:SW.dstr(c.arrival)+', 08:05', loc:'Станция '+c.from, on:false},
    {s:'Принят к перевозке', t:SW.dstr(new Date(c.arrival.getTime()-2*864e5)), loc:'Станция '+c.from, on:false},
    {s:'Заявка создана', t:SW.dstr(new Date(c.arrival.getTime()-4*864e5)), loc:'Портал', on:false},
  ];
  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}}>
              <StatusPill status={c.status}/><span className="pill pill-gray">{c.operation}</span>
            </div>
            <div style={{fontFamily:'var(--display)',fontWeight:700,fontSize:25,letterSpacing:'-.6px'}}>{c.id}</div>
            <div className="muted" style={{marginTop:4}}>{c.cargo} · {c.weight} т · {c.places} мест</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:'22px 18px',marginBottom:22}}>
            <Journey stageIndex={stage}/>
          </div>

          <div className="tabs">
            {[['overview','Обзор'],['timeline','История'],['docs','Документы ('+docs.length+')'],['passes','Пропуска ('+cPasses.length+')']].map(([k,l])=>(
              <button key={k} className={'tab'+(tab===k?' active':'')} onClick={()=>setTab(k)}>{l}</button>
            ))}
          </div>

          {tab==='overview' && <div>
            <div className="def-row"><span className="k">№ вагона</span><span className="v"><CopyMono text={c.wagon}/></span></div>
            <div className="def-row"><span className="k">Накладная</span><span className="v mono">{c.waybill}</span></div>
            <div className="def-row"><span className="k">Маршрут</span><span className="v">{c.from} → {c.to}</span></div>
            <div className="def-row"><span className="k">Место на терминале</span><span className="v">{c.route}</span></div>
            <div className="def-row"><span className="k">Контрагент</span><span className="v">{c.client}</span></div>
            <div className="def-row"><span className="k">Прибытие</span><span className="v mono">{SW.dstr(c.arrival)}</span></div>
            <div className="def-row"><span className="k">План выдачи</span><span className="v mono">{SW.dstr(c.issue)}</span></div>
            <div className="def-row"><span className="k">Простой</span><span className="v" style={{color:c.idle>40?'var(--danger)':'var(--tx)'}}>{c.idle} ч</span></div>
            <div className="def-row"><span className="k">Ответственный</span><span className="v"><span className="row" style={{gap:8,justifyContent:'flex-end'}}><span className="av-sm">{c.responsible.initials}</span>{c.responsible.name}</span></span></div>
            <div className="card-flat" style={{background:'var(--surface)',padding:18,borderRadius:16,marginTop:18}}>
              <div className="between"><span className="muted">Стоимость услуг</span><span className="metric-lg" style={{fontSize:24}}>{SW.fmtMoney(c.sum)}</span></div>
              {c.status==='awaiting_payment' && <button className="btn btn-dark btn-block" style={{marginTop:14}} onClick={()=>notify('Переход к оплате счёта')}><Icon name="wallet" size={17}/>Оплатить</button>}
            </div>
            <div className="row" style={{gap:12,marginTop:18}}>
              <button className="btn btn-outline btn-block" onClick={()=>{onClose();setView('passes');}}><Icon name="pass" size={17}/>Заказать пропуск</button>
              <button className="btn btn-light btn-block" onClick={()=>notify('Запрос в поддержку отправлен')}>Поддержка</button>
            </div>
          </div>}

          {tab==='timeline' && <div style={{paddingLeft:6}}>
            {timeline.map((h,i)=>(
              <div key={i} className="row" style={{alignItems:'flex-start',gap:14,paddingBottom:i<timeline.length-1?22:0}}>
                <div style={{display:'flex',flexDirection:'column',alignItems:'center'}}>
                  <span style={{width:13,height:13,borderRadius:'50%',background:h.on?'var(--ink)':'#fff',border:'2px solid '+(h.on?'var(--ink)':'var(--line)'),zIndex:1}}></span>
                  {i<timeline.length-1 && <span style={{width:2,flex:1,minHeight:30,background:'var(--line)',marginTop:2}}></span>}
                </div>
                <div><div className="t-strong" style={{fontSize:14.5}}>{h.s}</div><div className="t-mut">{h.loc} · {h.t}</div></div>
              </div>
            ))}
          </div>}

          {tab==='docs' && <div className="grid" style={{gap:10}}>
            {docs.length===0 && <Empty ic="doc" text="Документы по грузу пока не сформированы"/>}
            {docs.map(d=>(
              <div key={d.id} className="between" style={{border:'1px solid var(--line)',borderRadius:14,padding:'13px 16px',cursor:'pointer'}} onClick={()=>setDoc(d)}>
                <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}}>{SW.DOC_TYPE[d.type]} {d.id}</div><div className="t-mut">{SW.dstr(d.date)} · {d.size}</div></div>
                </div>
                <button className="icon-btn" style={{width:36,height:36}} onClick={e=>{e.stopPropagation();setDoc(d);}}><Icon name="eye" size={16}/></button>
              </div>
            ))}
          </div>}

          {tab==='passes' && <div className="grid" style={{gap:10}}>
            {cPasses.length===0 && <Empty ic="pass" text="Пропуска по грузу не заказаны"/>}
            {cPasses.map(p=>(
              <div key={p.id} className="between" style={{border:'1px solid var(--line)',borderRadius:14,padding:'13px 16px'}}>
                <div><div className="t-strong" style={{fontSize:14}}>{p.driver} · {p.car}</div><div className="t-mut">{p.model} · {p.when.toLocaleString('ru-RU',{day:'2-digit',month:'2-digit',hour:'2-digit',minute:'2-digit'})}</div></div>
                <StatusPill status={p.status} map={SW.PASS_STATUS}/>
              </div>
            ))}
          </div>}
        </div>
      </div>
      {doc && <DocModal doc={doc} onClose={()=>setDoc(null)} notify={notify}/>}
    </div>
  );
}

window.Cargoes = Cargoes;
window.CargoCard = CargoCard;