/* ============ Applications: list + create wizard ============ */
function Applications({search, openCreate, notify}){
  const [statusF,setStatusF]=useState('all');
  const [open,setOpen]=useState(null);
  const rows=SW.applications.filter(a=>{
    if(statusF!=='all' && a.status!==statusF) return false;
    const q=search.trim().toLowerCase();
    return !q || a.id.toLowerCase().includes(q)||a.wagon.includes(q)||a.cargo.toLowerCase().includes(q);
  });
  return (
    <div className="content fade-in">
      <PageHead title="Заявки" sub="Заявки на приём и отправку груза">
        <button className="btn btn-dark" onClick={openCreate}><Icon name="plus" size={18}/>Создать заявку</button>
      </PageHead>
      <div className="chips" style={{marginBottom:16}}>
        {[['all','Все'],['processing','В обработке'],['approved','Согласованы'],['rejected','Отклонены'],['draft','Черновики']].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><th className="num">Сумма</th></tr></thead>
          <tbody>
            {rows.map(a=>(
              <tr key={a.id} onClick={()=>setOpen(a)}>
                <td className="t-strong" style={{color:'var(--blue)'}}>{a.id}</td>
                <td><span className="pill pill-gray">{a.op}</span></td>
                <td>{a.cargo}</td>
                <td className="mono">{a.wagon}</td>
                <td>{a.station}</td>
                <td className="mono">{SW.dstr(a.created)}</td>
                <td><StatusPill status={a.status} map={SW.APP_STATUS}/></td>
                <td className="num mono t-strong">{a.sum?SW.fmtMoney(a.sum):'—'}</td>
              </tr>
            ))}
            {rows.length===0 && <tr><td colSpan={8}><Empty ic="doc" text="Заявок не найдено"/></td></tr>}
          </tbody>
        </table>
      </div>
      {open && <ApplicationDrawer app={open} onClose={()=>setOpen(null)} openCreate={openCreate} notify={notify}/>}
    </div>
  );
}

/* ---- application detail drawer ---- */
function ApplicationDrawer({app, onClose, openCreate, notify}){
  const a=app;
  const svcMap={'Хранение':1200,'ПРР':38000,'Взвешивание':6000,'Охрана':2500,'Оформление документов':12000};
  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={a.status} map={SW.APP_STATUS}/><span className="pill pill-gray">{a.op}</span>
              {a.danger && <span className="pill pill-danger"><span className="pdot"></span>Опасный груз</span>}
            </div>
            <div style={{fontFamily:'var(--display)',fontWeight:700,fontSize:25,letterSpacing:'-.6px'}}>{a.id}</div>
            <div className="muted" style={{marginTop:4}}>{a.cargo} · {a.weight} т · {a.places} мест</div>
          </div>
          <button className="x-btn" onClick={onClose}><Icon name="x" size={18}/></button>
        </div>
        <div className="drawer-body">
          {a.status==='rejected' && a.reject && (
            <div className="card-flat" style={{background:'var(--danger-soft)',padding:'14px 16px',borderRadius:14,marginBottom:18}}>
              <div className="row" style={{gap:10,color:'#c42a39'}}><Icon name="info" size={18}/><div><div className="t-strong" style={{fontSize:14}}>Причина отклонения</div><div style={{fontSize:13.5,marginTop:3,color:'#a3303c'}}>{a.reject}</div></div></div>
            </div>
          )}

          <div className="sect-title">Параметры заявки</div>
          <div className="def-row"><span className="k">Операция</span><span className="v">{a.op}</span></div>
          <div className="def-row"><span className="k">Тип груза</span><span className="v">{a.cargo}</span></div>
          <div className="def-row"><span className="k">№ вагона</span><span className="v"><CopyMono text={a.wagon}/></span></div>
          <div className="def-row"><span className="k">Маршрут</span><span className="v">{a.station} → {a.dest}</span></div>
          <div className="def-row"><span className="k">Вес / мест</span><span className="v">{a.weight} т / {a.places}</span></div>
          <div className="def-row"><span className="k">Создана</span><span className="v mono">{SW.dstr(a.created)}</span></div>

          <div className="sect-title" style={{marginTop:24}}>Контакты</div>
          <div className="def-row"><span className="k">Ответственный</span><span className="v">{a.fio}</span></div>
          <div className="def-row"><span className="k">Телефон</span><span className="v mono">{a.phone}</span></div>

          <div className="sect-title" style={{marginTop:24}}>Услуги</div>
          <div className="row" style={{gap:8,flexWrap:'wrap',marginBottom:16}}>
            {a.services.map(s=><span key={s} className="pill pill-gray">{s}</span>)}
          </div>
          {a.sum>0 && <div className="card-flat" style={{background:'var(--surface)',padding:18,borderRadius:16}}>
            <div className="between"><span className="muted">Стоимость услуг</span><span className="metric-lg" style={{fontSize:24}}>{SW.fmtMoney(a.sum)}</span></div>
          </div>}

          <div className="sect-title" style={{marginTop:24}}>Документы заявки</div>
          {a.docs.length===0 ? <Empty ic="doc" text="Документы не прикреплены"/> : (
            <div className="grid" style={{gap:10}}>
              {a.docs.map((d,i)=>(
                <div key={i} className="between" style={{border:'1px solid var(--line)',borderRadius:14,padding:'12px 16px'}}>
                  <div className="row" style={{gap:11}}><div className="tile-ic tone-sky" style={{width:36,height:36}}><Icon name="doc" size={17}/></div><span style={{fontSize:14}}>{d}</span></div>
                  <button className="icon-btn" style={{width:34,height:34}} onClick={()=>notify('Скачивание '+d)}><Icon name="download" size={15}/></button>
                </div>
              ))}
            </div>
          )}

          <div className="sect-title" style={{marginTop:24}}>История обработки</div>
          <div style={{paddingLeft:6}}>
            {a.log.map((h,i)=>(
              <div key={i} className="row" style={{alignItems:'flex-start',gap:14,paddingBottom:i<a.log.length-1?20:0}}>
                <div style={{display:'flex',flexDirection:'column',alignItems:'center'}}>
                  <span style={{width:11,height:11,borderRadius:'50%',background:i===0?'var(--ink)':'#fff',border:'2px solid '+(i===0?'var(--ink)':'var(--line)'),zIndex:1}}></span>
                  {i<a.log.length-1 && <span style={{width:2,flex:1,minHeight:24,background:'var(--line)',marginTop:2}}></span>}
                </div>
                <div><div className="t-strong" style={{fontSize:14}}>{h.s}</div><div className="t-mut">{h.t}</div></div>
              </div>
            ))}
          </div>

          <div className="row" style={{gap:12,marginTop:26}}>
            {a.status==='draft' && <button className="btn btn-dark btn-block" onClick={()=>{onClose();openCreate();}}><Icon name="edit" size={17}/>Продолжить заполнение</button>}
            {a.status==='rejected' && <button className="btn btn-dark btn-block" onClick={()=>{onClose();openCreate();}}><Icon name="refresh" size={17}/>Создать повторно</button>}
            {(a.status==='approved'||a.status==='processing') && <button className="btn btn-outline btn-block" onClick={()=>notify('Запрос статуса отправлен')}>Уточнить статус</button>}
            <button className="btn btn-light" onClick={()=>notify('Заявка продублирована')}><Icon name="copy" size={16}/></button>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---- validators ---- */
const vWagon=v=>/^\d{8}$/.test(v.trim());
const vEmail=v=>/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.trim());
const vPhone=v=>/^\+?[\d\s()-]{10,}$/.test(v.trim());

function FloatField({label, value, onChange, valid, placeholder, type}){
  const [touched,setTouched]=useState(false);
  const state = !touched||value==='' ? '' : valid(value)?'ok':'err';
  return (
    <div className="field">
      <label>{label}</label>
      <div className="in-wrap has-ic">
        <input className={'input '+state} type={type||'text'} value={value} placeholder={placeholder}
          onChange={e=>onChange(e.target.value)} onBlur={()=>setTouched(true)}/>
        {state&&<span className="in-ic"><Icon name={state==='ok'?'check':'x'} size={17} sw={2.4} style={{color:state==='ok'?'#067a5d':'var(--danger)'}}/></span>}
      </div>
      {state==='err' && <div className="field-msg err"><Icon name="info" size={13}/>{label==='Email'?'Неверный формат':label.includes('вагона')?'Введите 8 цифр':'Проверьте формат'}</div>}
    </div>
  );
}

function CreateApplication({onClose, notify}){
  const [step,setStep]=useState(0);
  const [op,setOp]=useState('Приём');
  const [f,setF]=useState({wagon:'',waybill:'',cargo:'',weight:'',places:'',station:'',dest:'',contractor:'',date:'',fio:'',phone:'+7 ',email:'',danger:false});
  const set=(k,v)=>setF(s=>({...s,[k]:v}));
  const [files,setFiles]=useState([]);
  const [services,setServices]=useState({storage:true, prr:true, weigh:false, guard:false});
  const [days,setDays]=useState(5);

  const reqOk = vWagon(f.wagon) && f.cargo && f.station && vPhone(f.phone);
  const docsOk = files.length>0;
  const cost = (services.storage?days*1200:0)+(services.prr?38000:0)+(services.weigh?6000:0)+(services.guard?days*2500:0);

  const checks=[
    {label:'Заполнены обязательные поля', ok:reqOk},
    {label:'Корректный № вагона (8 цифр)', ok:vWagon(f.wagon)},
    {label:'Контактный телефон указан', ok:vPhone(f.phone)},
    {label:'Прикреплены документы', ok:docsOk},
  ];

  const steps=['Данные груза','Услуги и сроки','Подтверждение'];

  return (
    <div className="scrim center" onClick={onClose} style={{alignItems:'stretch',padding:0}}>
      <div onClick={e=>e.stopPropagation()} style={{background:'var(--surface)',width:'100%',height:'100vh',overflowY:'auto',animation:'fade .2s ease'}}>
        {/* header */}
        <div className="topbar" style={{position:'sticky'}}>
          <div className="tb-title">Создание заявки</div>
          <div className="spacer" style={{flex:1}}></div>
          <button className="x-btn" onClick={onClose}><Icon name="x" size={18}/></button>
        </div>

        <div className="content" style={{maxWidth:1240}}>
          <div className="muted" style={{marginBottom:22}}>Заполните данные — заявка автоматически попадёт в обработку</div>

          {/* stepper */}
          <div className="stepper" style={{marginBottom:28}}>
            {steps.map((s,i)=>(
              <React.Fragment key={i}>
                {i>0 && <div className={'stp-line'+(i<=step?' on':'')}></div>}
                <div className={'stp'+(i===step?' active':i<step?' done':'')} onClick={()=>i<step&&setStep(i)}>
                  <div className="n">{i<step?<Icon name="check" size={15} sw={2.6}/>:i+1}</div>
                  <div className="t">{s}</div>
                </div>
              </React.Fragment>
            ))}
          </div>

          <div className="grid" style={{gridTemplateColumns:'1fr 320px',alignItems:'start',gap:20}}>
            <div className="grid" style={{gap:20}}>
              {step===0 && <>
                <div className="card">
                  <div className="sect-title">Тип операции</div>
                  <div className="row" style={{gap:28}}>
                    <Radio on={op==='Приём'} label="Приём груза" onClick={()=>setOp('Приём')}/>
                    <Radio on={op==='Отправка'} label="Отправка груза" onClick={()=>setOp('Отправка')}/>
                  </div>
                  <div className="divline"></div>
                  <div className="sect-title">Данные отправки / получения</div>
                  <div className="grid" style={{gap:16}}>
                    <div className="field"><label>Терминал / площадка</label>
                      <select className="input"><option>Терминал Silkway · Алматы</option><option>Площадка Достык</option></select></div>
                    <div className="two-col">
                      <div className="field"><label>Станция отправления</label>
                        <select className="input" value={f.station} onChange={e=>set('station',e.target.value)}><option value="">Выберите станцию</option>{SW.stations.map(s=><option key={s}>{s}</option>)}</select></div>
                      <div className="field"><label>Станция назначения</label>
                        <select className="input" value={f.dest} onChange={e=>set('dest',e.target.value)}><option value="">Выберите станцию</option>{SW.stations.map(s=><option key={s}>{s}</option>)}</select></div>
                    </div>
                    <div className="field"><label>Контрагент (ИНН / Название)</label>
                      <div className="in-wrap has-ic"><input className="input" value={f.contractor} onChange={e=>set('contractor',e.target.value)} placeholder="Начните вводить ИНН или название"/><span className="in-ic" style={{color:'var(--tx-3)'}}><Icon name="search" size={16}/></span></div>
                    </div>
                  </div>
                </div>

                <div className="card">
                  <div className="sect-title">Данные по вагону / накладной</div>
                  <div className="grid" style={{gap:16}}>
                    <div className="two-col">
                      <FloatField label="№ вагона" value={f.wagon} onChange={v=>set('wagon',v)} valid={vWagon} placeholder="8 цифр"/>
                      <div className="field"><label>№ ж/д накладной</label><input className="input" value={f.waybill} onChange={e=>set('waybill',e.target.value)} placeholder="ЗТРАН-00000"/></div>
                    </div>
                    <div className="two-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>
                        <select className="input" value={f.cargo} onChange={e=>set('cargo',e.target.value)}><option value="">Выберите тип</option>{SW.goods.map(g=><option key={g}>{g}</option>)}</select></div>
                    </div>
                    <div className="two-col">
                      <div className="field"><label>Количество мест</label><input className="input" value={f.places} onChange={e=>set('places',e.target.value)} placeholder="0"/></div>
                      <div className="field"><label>Вес, т</label><input className="input" value={f.weight} onChange={e=>set('weight',e.target.value)} placeholder="0,0"/></div>
                    </div>
                    <div className="between" style={{padding:'8px 0'}}>
                      <div className="row" style={{gap:10}}><Icon name="claims" size={18} style={{color:'var(--warning)'}}/><span style={{fontWeight:600}}>Опасный груз</span><Icon name="info" size={15} style={{color:'var(--tx-3)'}}/></div>
                      <Toggle on={f.danger} onChange={v=>set('danger',v)}/>
                    </div>
                  </div>
                </div>

                <div className="card">
                  <div className="sect-title">Контактные данные</div>
                  <div className="grid" style={{gap:16}}>
                    <div className="field"><label>ФИО ответственного</label><input className="input" value={f.fio} onChange={e=>set('fio',e.target.value)} placeholder="Иванов Иван Иванович"/></div>
                    <div className="two-col">
                      <FloatField label="Телефон" value={f.phone} onChange={v=>set('phone',v)} valid={vPhone} placeholder="+7 700 000 00 00"/>
                      <FloatField label="Email" value={f.email} onChange={v=>set('email',v)} valid={vEmail} placeholder="example@company.kz"/>
                    </div>
                    <div>
                      <label style={{fontSize:13,fontWeight:600,color:'var(--tx-2)'}}>Документы</label>
                      <div className="dropzone" style={{marginTop:8}} onClick={()=>setFiles(f=>[...f,{n:'Накладная_'+(f.length+1)+'.pdf',s:'1,2 МБ'}])}>
                        <Icon name="upload" size={22} style={{marginBottom:8}}/>
                        <div className="t-strong" style={{color:'var(--tx)'}}>Перетащите файлы или нажмите</div>
                        <div className="t-mut">PDF, JPG, PNG до 20 МБ</div>
                      </div>
                      {files.map((fl,i)=>(
                        <div key={i} className="between" style={{border:'1px solid var(--line)',borderRadius:12,padding:'10px 14px',marginTop:8}}>
                          <div className="row" style={{gap:10}}><Icon name="doc" size={17} style={{color:'var(--sky)'}}/><span style={{fontSize:14}}>{fl.n}</span><span className="t-mut">{fl.s}</span></div>
                          <button className="kebab" onClick={()=>setFiles(files.filter((_,j)=>j!==i))}><Icon name="trash" size={16}/></button>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </>}

              {step===1 && <div className="card">
                <div className="sect-title">Услуги терминала</div>
                <div className="grid" style={{gap:2}}>
                  {[['storage','Хранение груза','1 200 ₸ / сутки'],['prr','Погрузочно-разгрузочные работы','38 000 ₸'],['weigh','Взвешивание','6 000 ₸'],['guard','Охрана груза','2 500 ₸ / сутки']].map(([k,l,p])=>(
                    <div key={k} className="between" style={{padding:'14px 0',borderBottom:'1px solid var(--line-2)'}}>
                      <div className="row" style={{gap:12}}><Toggle on={services[k]} onChange={v=>setServices(s=>({...s,[k]:v}))}/><div><div className="t-strong" style={{fontSize:15}}>{l}</div><div className="t-mut">{p}</div></div></div>
                    </div>
                  ))}
                </div>
                <div className="divline"></div>
                <div className="two-col">
                  <div className="field"><label>Срок хранения, суток</label><input className="input" type="number" value={days} onChange={e=>setDays(+e.target.value||0)}/></div>
                  <div className="field"><label>Желаемая дата выдачи</label><input className="input" type="date"/></div>
                </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:26}}>{SW.fmtMoney(cost)}</span></div>
                </div>
              </div>}

              {step===2 && <div className="card">
                <div className="sect-title">Проверьте данные заявки</div>
                <div className="card-flat" style={{background:'var(--surface)',padding:'16px 18px',borderRadius:16,marginBottom:10}}>
                  <div className="row" style={{gap:10}}><span className="pill pill-gray">{op}</span><span className="t-strong" style={{fontSize:16}}>{f.cargo||'Груз не указан'}</span></div>
                  <div className="muted" style={{marginTop:6}}>{f.station||'—'} → {f.dest||'—'}</div>
                </div>
                <div className="def-row"><span className="k">№ вагона</span><span className="v mono">{f.wagon||'—'}</span></div>
                <div className="def-row"><span className="k">Накладная</span><span className="v mono">{f.waybill||'—'}</span></div>
                <div className="def-row"><span className="k">Вес / мест</span><span className="v">{f.weight||'—'} т / {f.places||'—'}</span></div>
                <div className="def-row"><span className="k">Опасный груз</span><span className="v">{f.danger?'Да':'Нет'}</span></div>
                <div className="def-row"><span className="k">Документы</span><span className="v">{files.length} файл(ов)</span></div>
                <div className="def-row"><span className="k">Стоимость услуг</span><span className="v mono" style={{fontSize:18}}>{SW.fmtMoney(cost)}</span></div>
              </div>}

              {/* nav */}
              <div className="between">
                <button className="btn btn-light" onClick={()=>notify('Черновик сохранён')}><Icon name="doc" size={17}/>Сохранить черновик</button>
                <div className="row" style={{gap:12}}>
                  {step>0 && <button className="btn btn-outline" onClick={()=>setStep(s=>s-1)}><Icon name="chevL" size={16}/>Назад</button>}
                  {step<2
                    ? <button className="btn btn-dark" disabled={step===0&&!reqOk} onClick={()=>setStep(s=>s+1)}>Далее<Icon name="arrow" size={17}/></button>
                    : <button className="btn btn-dark" onClick={()=>{notify('Заявка отправлена в обработку');onClose();}}><Icon name="check" size={17} sw={2.4}/>Отправить заявку</button>}
                </div>
              </div>
            </div>

            {/* right checklist */}
            <div className="grid" style={{gap:16,position:'sticky',top:90}}>
              <div className="card">
                <div className="sect-title">Проверка данных</div>
                {checks.map((c,i)=>(
                  <div key={i} className={'check-item '+(c.ok?'ok':'no')}>
                    <span className="ck"><Icon name={c.ok?'check':'lock'} size={13} sw={2.4}/></span>{c.label}
                  </div>
                ))}
              </div>
              <div className="card">
                <div className="sect-title">Какие документы нужны</div>
                <div className="grid" style={{gap:10}}>
                  <button className="link" style={{justifyContent:'flex-start',alignItems:'flex-start',textAlign:'left',lineHeight:1.35,gap:8}}><Icon name="doc" size={15} style={{flexShrink:0,marginTop:1}}/>Ж/д накладная (обязательно)</button>
                  <button className="link" style={{justifyContent:'flex-start',alignItems:'flex-start',textAlign:'left',lineHeight:1.35,gap:8}}><Icon name="doc" size={15} style={{flexShrink:0,marginTop:1}}/>Доверенность на груз</button>
                  <button className="link" style={{justifyContent:'flex-start',alignItems:'flex-start',textAlign:'left',lineHeight:1.35,gap:8}}><Icon name="doc" size={15} style={{flexShrink:0,marginTop:1}}/>Паспорт качества (опц.)</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.Applications = Applications;
window.CreateApplication = CreateApplication;