/* ============ Admin (RBAC) ============ */
function Admin({notify}){
  const [tab,setTab]=useState('users');
  const [users,setUsers]=useState(SW.users);
  const [show,setShow]=useState(false);
  const roleTone={'Администратор клиента':'violet','Руководитель логистики':'blue','Логист':'teal','Бухгалтер':'amber','Только просмотр':'gray'};
  return (
    <div className="content fade-in">
      <PageHead title="Администрирование" sub="Сотрудники компании и разграничение доступа (RBAC)">
        {tab==='users' && <button className="btn btn-dark" onClick={()=>setShow(true)}><Icon name="plus" size={18}/>Добавить сотрудника</button>}
      </PageHead>
      <div className="tabs">
        <button className={'tab'+(tab==='users'?' active':'')} onClick={()=>setTab('users')}>Сотрудники <span className="cnt">{users.length}</span></button>
        <button className={'tab'+(tab==='roles'?' active':'')} onClick={()=>setTab('roles')}>Роли и права <span className="cnt">{SW.ROLES.length}</span></button>
      </div>

      {tab==='users' && (
        <div className="card" style={{padding:'8px 10px'}}>
          <table className="tbl">
            <thead><tr><th>Сотрудник</th><th>Email</th><th>Роль</th><th>Активность</th><th>Статус</th><th></th></tr></thead>
            <tbody>
              {users.map((u,i)=>(
                <tr key={i} style={{cursor:'default'}}>
                  <td><div className="row" style={{gap:11}}><div className="avatar" style={{width:36,height:36,fontSize:13,background:u.status==='blocked'?'var(--surface-2)':'linear-gradient(135deg,#494fdf,#7b61ff)',color:u.status==='blocked'?'var(--tx-3)':'#fff'}}>{u.initials}</div><span className="t-strong">{u.name}</span></div></td>
                  <td className="t-mut">{u.email}</td>
                  <td><span className={'pill pill-'+roleTone[u.role]}><span className="pdot"></span>{u.role}</span></td>
                  <td className="t-mut">{u.last}</td>
                  <td>{u.status==='active'?<span className="pill pill-teal"><span className="pdot"></span>Активен</span>:<span className="pill pill-danger"><span className="pdot"></span>Заблокирован</span>}</td>
                  <td className="num"><div className="row" style={{gap:4,justifyContent:'flex-end'}}>
                    <button className="kebab" onClick={()=>notify('Редактирование '+u.name)}><Icon name="edit" size={16}/></button>
                    <button className="kebab" onClick={()=>{setUsers(users.map((x,j)=>j===i?{...x,status:x.status==='active'?'blocked':'active'}:x));notify(u.status==='active'?'Сотрудник заблокирован':'Сотрудник разблокирован');}}><Icon name="lock" size={16}/></button>
                  </div></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {tab==='roles' && (
        <div className="grid" style={{gridTemplateColumns:'repeat(2,1fr)',gap:16}}>
          {SW.ROLES.map(r=>(
            <div className="card" key={r}>
              <div className="between" style={{marginBottom:14}}>
                <div className="row" style={{gap:11}}><div className={'tile-ic tone-'+roleTone[r]} style={{width:40,height:40}}><Icon name="shield" size={19}/></div><div className="t-strong" style={{fontSize:16}}>{r}</div></div>
                <span className="muted" style={{fontSize:13}}>{users.filter(u=>u.role===r).length} чел.</span>
              </div>
              <div className="row" style={{gap:8,flexWrap:'wrap'}}>
                {SW.rolePerms[r].map(p=><span key={p} className="pill pill-gray" style={{fontSize:12.5}}>{p}</span>)}
              </div>
            </div>
          ))}
        </div>
      )}

      {show && <AddUser onClose={()=>setShow(false)} onSave={u=>{setUsers([...users,u]);setShow(false);notify('Сотрудник '+u.name+' добавлен');}}/>}
    </div>
  );
}

function AddUser({onClose, onSave}){
  const [f,setF]=useState({name:'',email:'',role:'Логист'});
  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.name} onChange={e=>set('name',e.target.value)} placeholder="Иванов Иван"/></div>
            <div className="field"><label>Email</label><input className="input" value={f.email} onChange={e=>set('email',e.target.value)} placeholder="example@company.kz"/></div>
            <div className="field"><label>Роль</label><select className="input" value={f.role} onChange={e=>set('role',e.target.value)}>{SW.ROLES.map(r=><option key={r}>{r}</option>)}</select></div>
            <div className="card-flat" style={{background:'var(--surface)',padding:14,borderRadius:12}}>
              <div className="t-mut" style={{fontSize:13}}>Доступы роли «{f.role}»:</div>
              <div className="row" style={{gap:7,flexWrap:'wrap',marginTop:8}}>{SW.rolePerms[f.role].map(p=><span key={p} className="pill pill-gray" style={{fontSize:12}}>{p}</span>)}</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.name||!f.email} onClick={()=>onSave({name:f.name,email:f.email,role:f.role,status:'active',initials:f.name.split(' ').map(w=>w[0]).join('').slice(0,2)||'НС',last:'только что'})}><Icon name="check" size={17} sw={2.4}/>Создать</button>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============ Settings ============ */
function Settings({notify}){
  const [tab,setTab]=useState('profile');
  const [tfa,setTfa]=useState(false);
  const [lang,setLang]=useState('RU');
  return (
    <div className="content fade-in">
      <PageHead title="Настройки" sub="Профиль, безопасность и предпочтения"/>
      <div className="tabs">
        {[['profile','Профиль'],['security','Безопасность'],['notif','Уведомления'],['lang','Язык']].map(([k,l])=>(
          <button key={k} className={'tab'+(tab===k?' active':'')} onClick={()=>setTab(k)}>{l}</button>
        ))}
      </div>

      <div style={{maxWidth:640}}>
        {tab==='profile' && <div className="card">
          <div className="row" style={{gap:16,marginBottom:22}}>
            <div className="avatar" style={{width:64,height:64,fontSize:24}}>{SW.me.initials}</div>
            <div><div className="t-strong" style={{fontSize:18}}>{SW.me.name}</div><div className="t-mut">{SW.me.role} · {SW.me.company}</div></div>
          </div>
          <div className="grid" style={{gap:16}}>
            <div className="two-col">
              <div className="field"><label>Имя</label><input className="input" defaultValue="Ирина"/></div>
              <div className="field"><label>Фамилия</label><input className="input" defaultValue="Васильева"/></div>
            </div>
            <div className="field"><label>Email</label><input className="input" defaultValue={SW.me.email}/></div>
            <div className="field"><label>Телефон</label><input className="input" defaultValue="+7 700 123 45 67"/></div>
          </div>
          <button className="btn btn-dark" style={{marginTop:18}} onClick={()=>notify('Профиль сохранён')}>Сохранить</button>
        </div>}

        {tab==='security' && <div className="card">
          <div className="sect-title">Пароль</div>
          <div className="grid" style={{gap:16,marginBottom:8}}>
            <div className="field"><label>Текущий пароль</label><input className="input" type="password" defaultValue="secret123"/></div>
            <div className="two-col">
              <div className="field"><label>Новый пароль</label><input className="input" type="password"/></div>
              <div className="field"><label>Повтор</label><input className="input" type="password"/></div>
            </div>
          </div>
          <div className="divline"></div>
          <div className="between">
            <div><div className="t-strong">Двухфакторная аутентификация</div><div className="t-mut">Код через приложение или SMS при входе</div></div>
            <Toggle on={tfa} onChange={v=>{setTfa(v);notify(v?'2FA включена':'2FA отключена');}}/>
          </div>
          <button className="btn btn-dark" style={{marginTop:20}} onClick={()=>notify('Настройки безопасности сохранены')}>Сохранить</button>
        </div>}

        {tab==='notif' && <div className="card">
          <div className="sect-title">Каналы уведомлений</div>
          {[['Email','on'],['Push (web)','on'],['SMS','off']].map(([l,d],i)=>(
            <div key={i} className="between" style={{padding:'14px 0',borderBottom:i<2?'1px solid var(--line-2)':'none'}}>
              <span style={{fontSize:15}}>{l}</span><Toggle on={d==='on'} onChange={()=>{}}/>
            </div>
          ))}
          <div className="divline"></div>
          <div className="between">
            <div><div className="t-strong">Режим «Не беспокоить»</div><div className="t-mut">17:00 – 09:00</div></div>
            <Toggle on={true} onChange={()=>{}}/>
          </div>
        </div>}

        {tab==='lang' && <div className="card">
          <div className="sect-title">Язык интерфейса</div>
          <div className="grid" style={{gap:10}}>
            {[['RU','Русский'],['EN','English'],['KZ','Қазақша']].map(([k,l])=>(
              <div key={k} className="between" style={{border:'1px solid '+(lang===k?'var(--ink)':'var(--line)'),borderRadius:14,padding:'14px 18px',cursor:'pointer'}} onClick={()=>{setLang(k);notify('Язык: '+l);}}>
                <span className="row" style={{gap:12}}><span className="av-sm">{k}</span><span style={{fontSize:15}}>{l}</span></span>
                <Radio on={lang===k} label="" onClick={()=>setLang(k)}/>
              </div>
            ))}
          </div>
        </div>}
      </div>
    </div>
  );
}

window.Admin = Admin;
window.Settings = Settings;