/* ============ Claims + Support ============ */
function Claims({search, notify}){
  const [list,setList]=useState(SW.claims);
  const [show,setShow]=useState(false);
  const [open,setOpen]=useState(null);
  const rows=list.filter(c=>{
    const q=search.trim().toLowerCase();
    return !q||c.id.toLowerCase().includes(q)||c.subject.toLowerCase().includes(q)||c.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="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(c=>(
              <tr key={c.id} onClick={()=>setOpen(c)}>
                <td className="t-strong" style={{color:'var(--blue)'}}>{c.id}</td>
                <td>{c.subject}</td>
                <td><span className="pill pill-gray">{c.category}</span></td>
                <td><span className="mono" style={{color:'var(--blue)'}}>{c.cargo}</span></td>
                <td className="mono">{SW.dstr(c.created)}</td>
                <td><StatusPill status={c.status} map={SW.CLAIM_STATUS}/></td>
                <td className="num"><button className="link">Открыть</button></td>
              </tr>
            ))}
            {rows.length===0 && <tr><td colSpan={7}><Empty ic="claims" text="Претензий не найдено"/></td></tr>}
          </tbody>
        </table>
      </div>
      {open && <ClaimDrawer claim={open} onClose={()=>setOpen(null)} notify={notify}/>}
      {show && <ClaimModal onClose={()=>setShow(false)} onSave={c=>{setList([c,...list]);setShow(false);notify('Претензия '+c.id+' зарегистрирована');}}/>}
    </div>
  );
}

/* ---- claim detail drawer with thread ---- */
function ClaimDrawer({claim, onClose, notify}){
  const c=claim;
  const [msg,setMsg]=useState('');
  const [thread,setThread]=useState(c.thread||[]);
  const send=()=>{ if(!msg.trim())return; setThread([...thread,{who:'me',name:SW.me.name,time:'сейчас',text:msg.trim()}]); setMsg(''); notify('Сообщение отправлено'); };
  return (
    <div className="scrim" onClick={onClose}>
      <div className="drawer" onClick={e=>e.stopPropagation()} style={{display:'flex',flexDirection:'column'}}>
        <div className="drawer-head">
          <div style={{flex:1}}>
            <div className="row" style={{gap:10,marginBottom:8}}>
              <StatusPill status={c.status} map={SW.CLAIM_STATUS}/><span className="pill pill-gray">{c.category}</span>
            </div>
            <div style={{fontFamily:'var(--display)',fontWeight:700,fontSize:22,letterSpacing:'-.5px'}}>{c.subject}</div>
            <div className="muted" style={{marginTop:4}}>{c.id} · груз {c.cargo} · {SW.dstr(c.created)}</div>
          </div>
          <button className="x-btn" onClick={onClose}><Icon name="x" size={18}/></button>
        </div>
        <div className="drawer-body" style={{flex:1,overflowY:'auto'}}>
          <div className="card-flat" style={{background:'var(--surface)',padding:'14px 16px',borderRadius:14,marginBottom:22}}>
            <div className="t-mut" style={{fontSize:12.5,marginBottom:5,textTransform:'uppercase',letterSpacing:'.4px'}}>Суть обращения</div>
            <div style={{fontSize:14.5,lineHeight:1.55}}>{c.desc}</div>
          </div>

          <div className="sect-title">Переписка</div>
          <div className="grid" style={{gap:14}}>
            {thread.map((m,i)=>{
              const mine=m.who==='me';
              return (
                <div key={i} style={{display:'flex',flexDirection:'column',alignItems:mine?'flex-end':'flex-start'}}>
                  <div style={{maxWidth:'82%',background:mine?'var(--ink)':'var(--surface)',color:mine?'#fff':'var(--tx)',borderRadius:mine?'16px 16px 4px 16px':'16px 16px 16px 4px',padding:'12px 15px'}}>
                    <div style={{fontSize:14.5,lineHeight:1.5}}>{m.text}</div>
                  </div>
                  <div className="t-mut" style={{fontSize:12,marginTop:5}}>{m.name} · {m.time}</div>
                </div>
              );
            })}
          </div>
          {c.status==='resolved' && <div className="card-flat" style={{background:'var(--teal-soft)',color:'#067a5d',padding:'12px 16px',borderRadius:12,marginTop:18,fontSize:14,fontWeight:600}}><Icon name="check" size={16} sw={2.4} style={{verticalAlign:'-3px',marginRight:7}}/>Претензия удовлетворена</div>}
          {c.status==='declined' && <div className="card-flat" style={{background:'var(--danger-soft)',color:'#c42a39',padding:'12px 16px',borderRadius:12,marginTop:18,fontSize:14,fontWeight:600}}><Icon name="info" size={16} style={{verticalAlign:'-3px',marginRight:7}}/>Претензия отклонена</div>}
        </div>
        {c.status==='open' && (
          <div style={{padding:'16px 30px',borderTop:'1px solid var(--line)',background:'var(--paper)'}}>
            <div className="row" style={{gap:10}}>
              <button className="icon-btn" style={{width:40,height:40}} onClick={()=>notify('Прикрепить файл')}><Icon name="paperclip" size={18}/></button>
              <input className="input" value={msg} onChange={e=>setMsg(e.target.value)} onKeyDown={e=>e.key==='Enter'&&send()} placeholder="Сообщение оператору…" style={{flex:1}}/>
              <button className="btn btn-dark" onClick={send}><Icon name="send" size={17}/></button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function ClaimModal({onClose, onSave}){
  const [f,setF]=useState({subject:'',category:'Сохранность груза',cargo:'',text:''});
  const set=(k,v)=>setF(s=>({...s,[k]:v}));
  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="field"><label>Тема обращения</label><input className="input" value={f.subject} onChange={e=>set('subject',e.target.value)} placeholder="Кратко опишите проблему"/></div>
            <div className="two-col">
              <div className="field"><label>Категория</label><select className="input" value={f.category} onChange={e=>set('category',e.target.value)}><option>Сохранность груза</option><option>Сроки</option><option>Финансы</option><option>Прочее</option></select></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 className="field"><label>Описание</label><textarea className="input" value={f.text} onChange={e=>set('text',e.target.value)} placeholder="Подробности обращения…"/></div>
            <div className="dropzone"><Icon name="paperclip" size={20} style={{marginBottom:6}}/><div className="t-mut">Прикрепить фото/документы</div></div>
          </div>
          <div className="row" style={{justifyContent:'flex-end',gap:12,marginTop:24}}>
            <button className="btn btn-light" onClick={onClose}>Отмена</button>
            <button className="btn btn-dark" disabled={!f.subject} onClick={()=>onSave({id:'ПРТ-00'+(62+Math.floor(Math.random()*30)),subject:f.subject,category:f.category,cargo:f.cargo||SW.current[0].id,created:SW.today,status:'open',desc:f.text||'—',thread:[{who:'me',name:SW.me.name,time:'сейчас',text:f.text||'Прошу рассмотреть обращение.'}]})}><Icon name="check" size={17} sw={2.4}/>Отправить</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function Support({notify}){
  const topics=[
    {ic:'orders',t:'Вопрос по грузу',d:'Статусы, выдача, простой'},
    {ic:'wallet',t:'Финансы и оплата',d:'Счета, акты, возвраты'},
    {ic:'pass',t:'Пропуска и доступ',d:'Заезд транспорта на терминал'},
    {ic:'admin',t:'Учётная запись',d:'Доступы, роли, пароль'},
  ];
  const faq=[
    'Как отследить статус вагона в реальном времени?',
    'Где скачать счёт-фактуру и акт?',
    'Сколько действует пропуск на территорию?',
    'Как добавить сотрудника и назначить роль?',
  ];
  return (
    <div className="content fade-in">
      <PageHead title="Поддержка" sub="Мы на связи в рабочие часы терминала, 08:00–20:00"/>
      <div className="grid" style={{gridTemplateColumns:'1fr 360px',alignItems:'start',gap:20}}>
        <div className="grid" style={{gap:20}}>
          <div className="card">
            <div className="sect-title">Создать обращение</div>
            <div className="two-col" style={{marginBottom:14}}>
              {topics.map(t=>(
                <button key={t.t} className="row" style={{gap:13,border:'1px solid var(--line)',borderRadius:16,padding:16,cursor:'pointer',background:'none',textAlign:'left',fontFamily:'inherit'}} onClick={()=>notify('Открыта форма: '+t.t)}>
                  <div className="tile-ic tone-gray" style={{width:42,height:42}}><Icon name={t.ic} size={19}/></div>
                  <div><div className="t-strong" style={{fontSize:15}}>{t.t}</div><div className="t-mut">{t.d}</div></div>
                </button>
              ))}
            </div>
            <div className="field"><label>Опишите вопрос</label><textarea className="input" placeholder="Чем можем помочь?"></textarea></div>
            <button className="btn btn-dark" style={{marginTop:14}} onClick={()=>notify('Обращение отправлено, № SR-2041')}><Icon name="send" size={17}/>Отправить обращение</button>
          </div>
          <div className="card">
            <div className="sect-title">Частые вопросы</div>
            {faq.map((q,i)=>(
              <div key={i} className="between" style={{padding:'14px 0',borderBottom:i<faq.length-1?'1px solid var(--line-2)':'none',cursor:'pointer'}} onClick={()=>notify('Открыт ответ')}>
                <span style={{fontSize:15}}>{q}</span><Icon name="chevR" size={16} style={{color:'var(--tx-3)'}}/>
              </div>
            ))}
          </div>
        </div>
        <div className="card-dark" style={{position:'sticky',top:90}}>
          <div className="kpi-label" style={{marginBottom:16}}><Icon name="support" size={16}/>Прямые контакты</div>
          <div style={{fontFamily:'var(--display)',fontWeight:700,fontSize:22,marginBottom:4}}>+7 (727) 000-00-00</div>
          <div style={{color:'rgba(255,255,255,.6)',fontSize:14}}>support@silkway.kz</div>
          <div className="divline" style={{background:'rgba(255,255,255,.12)'}}></div>
          <div className="row" style={{gap:12}}>
            <div className="tile-ic" style={{width:40,height:40,background:'rgba(255,255,255,.12)',color:'#fff'}}><Icon name="support" size={19}/></div>
            <div><div className="t-strong" style={{color:'#fff'}}>Онлайн-чат</div><div style={{color:'rgba(255,255,255,.55)',fontSize:13}}>Среднее время ответа ~3 мин</div></div>
          </div>
          <button className="btn btn-light btn-block" style={{marginTop:18}} onClick={()=>notify('Чат открыт')}>Открыть чат</button>
        </div>
      </div>
    </div>
  );
}

window.Claims = Claims;
window.Support = Support;