/* ============ Notifications: feed + summary + rules ============ */
function Notifications({notify}){
  const [tab,setTab]=useState('feed');
  const [items,setItems]=useState(SW.notifications);
  const [statusF,setStatusF]=useState('all');
  const [channelF,setChannelF]=useState('all');
  const [sel,setSel]=useState({});
  const [rules,setRules]=useState(SW.rules);
  const [showRule,setShowRule]=useState(false);
  const [dnd,setDnd]=useState(true);

  const rows=items.filter(n=>{
    if(statusF==='unread' && n.read) return false;
    if(channelF!=='all' && n.channel!==channelF) return false;
    return true;
  });
  const selCount=Object.values(sel).filter(Boolean).length;
  const unread=items.filter(n=>!n.read).length;
  const crit=items.filter(n=>n.crit).length;

  const markRead=ids=>setItems(items.map(n=>ids.includes(n.id)?{...n,read:true}:n));
  const chIc={email:'Email',push:'Push',sms:'SMS'};

  return (
    <div className="content fade-in">
      <PageHead title="Уведомления" sub="Настройте уведомления о критических статусах и событиях по вашим грузам">
        <div className="row" style={{gap:10}}>
          <span className="muted" style={{fontSize:13}}>Не беспокоить</span>
          <Toggle on={dnd} onChange={setDnd}/>
          <span className="t-strong" style={{fontSize:13}}>17:00–09:00</span>
        </div>
        <button className="btn btn-outline" onClick={()=>notify('Тестовое уведомление отправлено')}><Icon name="send" size={17}/>Тест</button>
        <button className="btn btn-dark" onClick={()=>setShowRule(true)}><Icon name="plus" size={18}/>Создать правило</button>
      </PageHead>

      <div className="tabs">
        <button className={'tab'+(tab==='feed'?' active':'')} onClick={()=>setTab('feed')}>Лента {unread>0&&<span className="cnt">{unread}</span>}</button>
        <button className={'tab'+(tab==='rules'?' active':'')} onClick={()=>setTab('rules')}>Правила <span className="cnt">{rules.length}</span></button>
      </div>

      {tab==='feed' && (
        <div className="grid" style={{gridTemplateColumns:'1fr 300px',alignItems:'start',gap:20}}>
          <div className="grid" style={{gap:16}}>
            <div className="card" style={{padding:'12px 16px'}}>
              <div className="row" style={{gap:10,flexWrap:'wrap'}}>
                <select className="select" value={statusF} onChange={e=>setStatusF(e.target.value)}><option value="all">Все</option><option value="unread">Непрочитанные</option></select>
                <select className="select" value={channelF} onChange={e=>setChannelF(e.target.value)}><option value="all">Все каналы</option><option value="email">Email</option><option value="push">Push</option><option value="sms">SMS</option></select>
                <div className="spacer" style={{flex:1}}></div>
                {selCount>0 && <>
                  <button className="btn btn-light btn-sm" onClick={()=>{markRead(Object.keys(sel).filter(k=>sel[k]).map(Number));setSel({});}}><Icon name="check" size={15}/>Прочитано</button>
                  <button className="btn btn-ghost btn-sm" onClick={()=>{setItems(items.filter(n=>!sel[n.id]));setSel({});}}><Icon name="trash" size={15}/>Удалить</button>
                </>}
              </div>
            </div>

            <div className="card" style={{padding:'6px 8px'}}>
              {rows.map(n=>{
                const m=SW.notifMeta[n.type];
                return (
                  <div key={n.id} className="row" style={{gap:14,alignItems:'flex-start',padding:'16px 12px',borderBottom:'1px solid var(--line-2)',background:n.read?'transparent':'rgba(73,79,223,.025)'}}>
                    <Checkbox on={!!sel[n.id]} onChange={v=>setSel(s=>({...s,[n.id]:v}))}/>
                    <div className={'tile-ic tone-'+m.tone} style={{width:40,height:40,flex:'0 0 40px',borderRadius:12}}><Icon name={m.ic} size={19}/></div>
                    <div style={{flex:1,minWidth:0}}>
                      <div className="between">
                        <div className="row" style={{gap:10}}>
                          <span className="t-strong" style={{fontSize:15}}>{n.title}</span>
                          {!n.read && <span className="pill pill-amber" style={{padding:'2px 9px',fontSize:12}}>Новое</span>}
                          {n.crit && <span className="pill pill-danger" style={{padding:'2px 9px',fontSize:12}}>Критич.</span>}
                        </div>
                        <span className="t-mut" style={{fontSize:13,whiteSpace:'nowrap'}}>{n.date}, {n.time}</span>
                      </div>
                      <div className="t-mut" style={{marginTop:4,lineHeight:1.5}}>{n.text}</div>
                      <div className="row" style={{gap:16,marginTop:10}}>
                        {n.type==='payment'
                          ? <button className="link" onClick={()=>notify('Переход к оплате')}>Перейти к оплате <Icon name="arrow" size={13}/></button>
                          : n.type==='document'
                          ? <button className="link" onClick={()=>notify('Открыт документ')}>Посмотреть документ <Icon name="arrow" size={13}/></button>
                          : <button className="link" onClick={()=>notify('Открыт груз '+n.cargo)}>Открыть груз <Icon name="arrow" size={13}/></button>}
                        <span className="t-mut" style={{fontSize:12.5}}><Icon name="bell" size={12} style={{verticalAlign:'-1px',marginRight:4}}/>{chIc[n.channel]}</span>
                      </div>
                    </div>
                  </div>
                );
              })}
              {rows.length===0 && <Empty ic="bell" text="Нет уведомлений по фильтрам"/>}
            </div>
          </div>

          {/* summary */}
          <div className="grid" style={{gap:16,position:'sticky',top:90}}>
            <div className="card">
              <div className="sect-title">Сводка</div>
              {[['Непрочитанные',unread,'amber'],['За сегодня',items.filter(n=>n.date==='Сегодня').length,'blue'],['Критические',crit,'danger']].map(([l,v,t],i)=>(
                <div key={i} className="between" style={{padding:'11px 0',borderBottom:i<2?'1px solid var(--line-2)':'none'}}>
                  <span className="row" style={{gap:10}}><span className="dot-tone" style={{background:t==='amber'?'#ec7e00':t==='blue'?'#494fdf':'#e23b4a'}}></span>{l}</span>
                  <span className="t-strong" style={{fontSize:18,fontFamily:'var(--display)'}}>{v}</span>
                </div>
              ))}
            </div>
            <div className="card">
              <div className="sect-title">Каналы доставки</div>
              {[['email','Email','on'],['push','Push (web)','on'],['sms','SMS','off']].map(([k,l,d])=>(
                <div key={k} className="between" style={{padding:'10px 0'}}>
                  <span style={{fontSize:14}}>{l}</span>
                  <Toggle on={d==='on'} onChange={()=>{}}/>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {tab==='rules' && (
        <div className="card" style={{padding:'8px 10px'}}>
          <table className="tbl">
            <thead><tr><th>Событие</th><th>Каналы</th><th>Получатели</th><th>Активно</th><th></th></tr></thead>
            <tbody>
              {rules.map((r,i)=>(
                <tr key={i} style={{cursor:'default'}}>
                  <td className="t-strong">{r.event}</td>
                  <td><div className="row" style={{gap:6}}>{r.channels.map(c=><span key={c} className="pill pill-gray" style={{fontSize:12,padding:'3px 10px'}}>{chIc[c]}</span>)}</div></td>
                  <td>{r.to}</td>
                  <td><Toggle on={r.on} onChange={v=>setRules(rules.map((x,j)=>j===i?{...x,on:v}:x))}/></td>
                  <td className="num"><button className="kebab" onClick={()=>setShowRule(true)}><Icon name="edit" size={16}/></button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {showRule && <RuleModal onClose={()=>setShowRule(false)} onSave={r=>{setRules([r,...rules]);setShowRule(false);notify('Правило создано');}}/>}
    </div>
  );
}

function RuleModal({onClose, onSave}){
  const events=['Груз готов к выдаче','Требуется оплата','Документ доступен','Простой вагона превышен','Статус изменён'];
  const [event,setEvent]=useState(events[0]);
  const [ch,setCh]=useState({email:true,push:true,sms:false});
  const [to,setTo]=useState('Логисты');
  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:18}}>
            <div className="field"><label>Тип события</label>
              <select className="input" value={event} onChange={e=>setEvent(e.target.value)}>{events.map(e=><option key={e}>{e}</option>)}</select></div>
            <div className="field"><label>Каналы доставки</label>
              <div className="row" style={{gap:10}}>
                {[['email','Email'],['push','Push (web)'],['sms','SMS']].map(([k,l])=>(
                  <button key={k} className={'chip'+(ch[k]?' active':'')} onClick={()=>setCh(s=>({...s,[k]:!s[k]}))}>{l}</button>
                ))}
              </div>
            </div>
            <div className="field"><label>Получатели</label>
              <select className="input" value={to} onChange={e=>setTo(e.target.value)}><option>Логисты</option><option>Бухгалтерия</option><option>Руководитель логистики</option><option>Все сотрудники</option></select></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" onClick={()=>onSave({event,channels:Object.keys(ch).filter(k=>ch[k]),to,on:true})}><Icon name="check" size={17} sw={2.4}/>Создать</button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.Notifications = Notifications;