/* ============ Passes: list + create ============ */
function Passes({search, notify}){
  const [list,setList]=useState(SW.passes);
  const [statusF,setStatusF]=useState('all');
  const [show,setShow]=useState(false);
  const rows=list.filter(p=>{
    if(statusF!=='all'&&p.status!==statusF) return false;
    const q=search.trim().toLowerCase();
    return !q||p.driver.toLowerCase().includes(q)||p.car.toLowerCase().includes(q)||p.cargo.toLowerCase().includes(q);
  });
  return (
    <div className="content fade-in">
      <PageHead title="Пропуска" sub="Заявки на пропуск водителей и автотранспорта на терминал">
        <button className="btn btn-dark" onClick={()=>setShow(true)}><Icon name="plus" size={18}/>Заказать пропуск</button>
      </PageHead>
      <div className="chips" style={{marginBottom:16}}>
        {[['all','Все'],['pending','На согласовании'],['approved','Согласованы'],['used','Использованы'],['rejected','Отклонены']].map(([k,l])=>(
          <button key={k} className={'chip'+(statusF===k?' active':'')} onClick={()=>setStatusF(k)}>{l}</button>
        ))}
      </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><th>Статус</th></tr></thead>
          <tbody>
            {rows.map(p=>(
              <tr key={p.id} style={{cursor:'default'}}>
                <td className="t-strong">{p.id}</td>
                <td><div className="row" style={{gap:9}}><div className="av-sm">{p.driver.split(' ').map(w=>w[0]).join('')}</div>{p.driver}</div></td>
                <td className="mono t-mut">{p.doc}</td>
                <td><span className="mono t-strong">{p.car}</span><div className="t-mut">{p.model}</div></td>
                <td className="mono">{p.when.toLocaleString('ru-RU',{day:'2-digit',month:'2-digit',hour:'2-digit',minute:'2-digit'})}</td>
                <td><button className="link" onClick={()=>notify('Открыт груз '+p.cargo)}>{p.cargo}</button></td>
                <td><StatusPill status={p.status} map={SW.PASS_STATUS}/></td>
              </tr>
            ))}
            {rows.length===0 && <tr><td colSpan={7}><Empty ic="pass" text="Пропусков не найдено"/></td></tr>}
          </tbody>
        </table>
      </div>
      {show && <CreatePass onClose={()=>setShow(false)} onSave={p=>{setList([p,...list]);setShow(false);notify('Заявка на пропуск '+p.id+' создана');}}/>}
    </div>
  );
}

function CreatePass({onClose, onSave}){
  const [f,setF]=useState({driver:'',doc:'',car:'',model:'',date:'',time:'',cargo:''});
  const set=(k,v)=>setF(s=>({...s,[k]:v}));
  const ok=f.driver&&f.car&&f.date;
  return (
    <div className="scrim center" onClick={onClose}>
      <div className="modal" onClick={e=>e.stopPropagation()}>
        <div className="between" style={{padding:'26px 30px 0'}}>
          <div style={{fontFamily:'var(--display)',fontWeight:700,fontSize:23,letterSpacing:'-.5px'}}>Заявка на пропуск</div>
          <button className="x-btn" onClick={onClose}><Icon name="x" size={18}/></button>
        </div>
        <div style={{padding:'22px 30px 30px'}}>
          <div className="grid" style={{gap:16}}>
            <div className="sect-title" style={{margin:0}}>Данные водителя</div>
            <div className="two-col">
              <div className="field"><label>ФИО водителя</label><input className="input" value={f.driver} onChange={e=>set('driver',e.target.value)} placeholder="Иванов Иван"/></div>
              <div className="field"><label>Документ (паспорт / в/у)</label><input className="input" value={f.doc} onChange={e=>set('doc',e.target.value)} placeholder="УВ 000000"/></div>
            </div>
            <div className="sect-title" style={{margin:'6px 0 0'}}>Автомобиль</div>
            <div className="two-col">
              <div className="field"><label>Госномер</label><input className="input" value={f.car} onChange={e=>set('car',e.target.value)} placeholder="A 000 BC 00"/></div>
              <div className="field"><label>Марка / модель</label><input className="input" value={f.model} onChange={e=>set('model',e.target.value)} placeholder="КамАЗ 65117"/></div>
            </div>
            <div className="sect-title" style={{margin:'6px 0 0'}}>Прибытие и груз</div>
            <div className="three-col">
              <div className="field"><label>Дата</label><input className="input" type="date" value={f.date} onChange={e=>set('date',e.target.value)}/></div>
              <div className="field"><label>Время</label><input className="input" type="time" value={f.time} onChange={e=>set('time',e.target.value)}/></div>
              <div className="field"><label>Груз / вагон</label>
                <select className="input" value={f.cargo} onChange={e=>set('cargo',e.target.value)}><option value="">Выберите</option>{SW.current.slice(0,8).map(c=><option key={c.id}>{c.id}</option>)}</select></div>
            </div>
          </div>
          <div className="row" style={{justifyContent:'flex-end',gap:12,marginTop:26}}>
            <button className="btn btn-light" onClick={onClose}>Отмена</button>
            <button className="btn btn-dark" disabled={!ok} onClick={()=>onSave({id:'ПРП-0'+(422+Math.floor(Math.random()*50)),driver:f.driver||'—',doc:f.doc||'—',car:f.car||'—',model:f.model||'—',when:new Date(f.date+'T'+(f.time||'10:00')),cargo:f.cargo||SW.current[0].id,status:'pending'})}><Icon name="check" size={17} sw={2.4}/>Отправить</button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.Passes = Passes;