// ─── صفحه مدیریت کاربران (فقط superadmin) ─────────────────────────

const ACTION_LABELS = {
  login:       { label: 'ورود به سیستم',   icon: 'log-in',      color: '#34D399' },
  create_user: { label: 'ساخت کاربر جدید', icon: 'user-plus',   color: '#60A5FA' },
  update_user: { label: 'ویرایش کاربر',    icon: 'pencil',      color: '#FB923C' },
  delete_user: { label: 'حذف کاربر',       icon: 'trash-2',     color: '#F87171' },
  toggle_user: { label: 'تغییر وضعیت',     icon: 'toggle-left', color: '#A78BFA' },
};

const Users = () => {
  const { Icon, Button, Modal, SlidePanel, useToast } = window.SB_UI;
  const { ROLE_LABELS, ROLE_DEFAULT_PERMS, MODULE_GROUPS, NAV, fa } = window.SB_DATA;
  const { useState, useEffect, useMemo } = React;
  const toast = useToast();
  const [tab, setTab] = window.useStickyState('users_tab', 'admins');

  const token = localStorage.getItem(window.TOKEN_KEY);
  const headers = { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` };
  const api = (url, opts = {}) => fetch('/api' + url, { headers, ...opts }).then(r => r.json());

  // ── ادمین‌ها ──
  const [admins,  setAdmins]  = useState([]);
  const [aLoad,   setALoad]   = useState(true);
  const [modal,   setModal]   = useState(null);
  const [form,    setForm]    = useState({ username:'', password:'', name:'', role:'sales_manager', permissions:[] });
  const [saving,  setSaving]  = useState(false);
  const [delConf, setDelConf] = useState(null);
  const [logPanel,setLogPanel]= useState(null);
  const [logLoad, setLogLoad] = useState(false);

  // ── فروشندگان ──
  const [sellers, setSellers] = useState([]);
  const [sLoad,   setSLoad]   = useState(true);
  const [sSearch, setSSearch] = useState('');

  const navMap       = useMemo(() => Object.fromEntries(NAV.map(n => [n.id, n.name])), []);
  const allModuleIds = useMemo(() => NAV.map(n => n.id), []);

  const loadAdmins = () => {
    setALoad(true);
    api('/auth/users').then(d => { if (d.success) setAdmins(d.data.users||[]); setALoad(false); }).catch(()=>setALoad(false));
  };
  const loadSellers = () => {
    setSLoad(true);
    api('/market/sellers').then(d => { if (d.success) setSellers(d.data.sellers||[]); setSLoad(false); }).catch(()=>setSLoad(false));
  };

  useEffect(() => { loadAdmins(); loadSellers(); }, []);

  // ── helpers ──
  const formatDatetime = (dt) => {
    if (!dt) return '—';
    try {
      const diff = Date.now() - new Date(dt);
      if (diff < 60000)   return 'همین الان';
      if (diff < 3600000) return `${Math.floor(diff/60000)} دقیقه پیش`;
      if (diff < 86400000)return `${Math.floor(diff/3600000)} ساعت پیش`;
      return new Date(dt).toLocaleString('fa-IR',{month:'short',day:'numeric',hour:'2-digit',minute:'2-digit'});
    } catch { return dt; }
  };
  const formatDate = (dt) => { try { return new Date(dt).toLocaleDateString('fa-IR'); } catch { return dt||'—'; } };

  const RoleBadge = ({ role }) => {
    const ri = ROLE_LABELS[role]||{label:role,color:'#94a3b8'};
    return <span style={{fontSize:11,padding:'2px 10px',borderRadius:20,fontWeight:700,background:ri.color+'20',color:ri.color,border:`1px solid ${ri.color}40`}}>{ri.label}</span>;
  };

  const PermSummary = ({ permissions, role }) => {
    if (role==='superadmin'||permissions===null) return <span style={{fontSize:11,color:'#A78BFA',fontWeight:600}}>همه ماژول‌ها</span>;
    if (!permissions||permissions.length===0) return <span style={{fontSize:11,color:'#F87171'}}>بدون دسترسی</span>;
    return (
      <div style={{display:'flex',gap:4,flexWrap:'wrap'}}>
        {permissions.slice(0,3).map(p=>(
          <span key={p} style={{fontSize:10,padding:'1px 7px',borderRadius:20,background:'rgba(255,255,255,0.07)',color:'var(--text-2)',border:'1px solid rgba(255,255,255,0.1)'}}>{navMap[p]||p}</span>
        ))}
        {permissions.length>3&&<span style={{fontSize:10,color:'var(--text-3)'}}>+{fa(permissions.length-3)}</span>}
      </div>
    );
  };

  const ActiveToggle = ({ isActive, onToggle }) => (
    <div onClick={onToggle} style={{width:36,height:20,borderRadius:10,cursor:'pointer',flexShrink:0,position:'relative',transition:'background .2s',background:isActive?'#22c55e':'rgba(255,255,255,0.12)'}}>
      <div style={{position:'absolute',top:2,transition:'left .2s',left:isActive?18:2,width:16,height:16,borderRadius:'50%',background:'#fff',boxShadow:'0 1px 3px rgba(0,0,0,0.3)'}}/>
    </div>
  );

  // ── admin actions ──
  const openCreate = () => {
    setForm({username:'',password:'',name:'',role:'sales_manager',permissions:ROLE_DEFAULT_PERMS['sales_manager']||[]});
    setModal({mode:'create'});
  };
  const openEdit = (u) => { setForm({username:u.username,password:'',name:u.name||'',role:u.role,permissions:u.permissions}); setModal({mode:'edit',user:u}); };
  const closeModal = () => { setModal(null); setSaving(false); };
  const onRoleChange = (r) => setForm(f=>({...f,role:r,permissions:ROLE_DEFAULT_PERMS[r]}));
  const togglePerm = (id) => setForm(f=>{ const c=f.permissions||[]; return{...f,permissions:c.includes(id)?c.filter(p=>p!==id):[...c,id]}; });

  const saveAdmin = async () => {
    if (modal.mode==='create'&&(!form.username.trim()||!form.password.trim())) { toast.error('نام کاربری و رمز الزامی است'); return; }
    setSaving(true);
    const perms = form.role==='superadmin'?null:form.permissions;
    let r;
    if (modal.mode==='create') r=await api('/auth/users',{method:'POST',body:JSON.stringify({...form,permissions:perms})});
    else {
      const body={name:form.name,role:form.role,permissions:perms};
      if (form.password.trim()) body.password=form.password;
      r=await api(`/auth/users/${modal.user.id}`,{method:'PUT',body:JSON.stringify(body)});
    }
    setSaving(false);
    if (r.success){toast.success(modal.mode==='create'?'کاربر ساخته شد':'ذخیره شد');closeModal();loadAdmins();}
    else toast.error(r.message||'خطا');
  };

  const toggleAdmin = async (u) => {
    const r=await api(`/auth/users/${u.id}/toggle`,{method:'PATCH'});
    if (r.success){toast.success(r.data.is_active?`${u.username} فعال شد`:`${u.username} غیرفعال شد`);loadAdmins();}
    else toast.error(r.message||'خطا');
  };

  const deleteAdmin = async (u) => {
    const r=await api(`/auth/users/${u.id}`,{method:'DELETE'});
    if (r.success){toast.success('کاربر حذف شد');loadAdmins();}else toast.error(r.message||'خطا');
    setDelConf(null);
  };

  const openLogs = async (u) => {
    setLogPanel({user:u,logs:[]});setLogLoad(true);
    const r=await api(`/auth/users/${u.id}/logs?limit=60`);
    setLogLoad(false);
    if (r.success) setLogPanel({user:u,logs:r.data.logs||[]});
  };

  // ── seller actions ──
  const toggleSeller = async (s) => {
    const newVal = s.is_active?0:1;
    const r=await api(`/market/sellers/${s.id}`,{method:'PUT',body:JSON.stringify({is_active:newVal})});
    if (r.success){toast.success(newVal?`${s.name} فعال شد`:`${s.name} غیرفعال شد`);loadSellers();}
    else toast.error(r.message||'خطا');
  };

  const filteredSellers = sellers.filter(s => !sSearch || s.name?.includes(sSearch) || s.login_username?.includes(sSearch) || s.phone?.includes(sSearch));

  // ── پنل دسترسی‌ها ──
  const PermissionsPanel = () => {
    if (form.role==='superadmin') return (
      <div style={{padding:'12px 14px',borderRadius:10,background:'rgba(167,139,250,0.1)',border:'1px solid rgba(167,139,250,0.25)',color:'#A78BFA',fontSize:12,display:'flex',alignItems:'center',gap:8}}>
        <Icon name="shield-check" size={14}/>مدیر ارشد به همه ماژول‌ها دسترسی کامل دارد
      </div>
    );
    const cur=form.permissions||[];
    return (
      <div>
        <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:10}}>
          <span style={{fontSize:12,fontWeight:700,color:'var(--text-2)'}}>دسترسی ماژول‌ها</span>
          <div style={{display:'flex',gap:6}}>
            <button onClick={()=>setForm(f=>({...f,permissions:[...allModuleIds]}))} style={{fontSize:11,padding:'3px 10px',borderRadius:6,border:'1px solid rgba(255,255,255,0.1)',background:'rgba(255,255,255,0.05)',color:'var(--text-2)',cursor:'pointer'}}>انتخاب همه</button>
            <button onClick={()=>setForm(f=>({...f,permissions:[]}))} style={{fontSize:11,padding:'3px 10px',borderRadius:6,border:'1px solid rgba(255,255,255,0.1)',background:'rgba(255,255,255,0.05)',color:'var(--text-3)',cursor:'pointer'}}>پاک کردن</button>
          </div>
        </div>
        <div style={{display:'flex',flexDirection:'column',gap:8}}>
          {MODULE_GROUPS.map(group=>(
            <div key={group.label} style={{borderRadius:8,border:'1px solid rgba(255,255,255,0.07)',overflow:'hidden'}}>
              <div style={{padding:'6px 12px',background:'rgba(255,255,255,0.04)',display:'flex',alignItems:'center',gap:7}}>
                <Icon name={group.icon} size={12} color="var(--text-3)"/>
                <span style={{fontSize:11,fontWeight:700,color:'var(--text-3)'}}>{group.label}</span>
              </div>
              <div style={{padding:'8px 12px',display:'flex',flexWrap:'wrap',gap:6}}>
                {group.ids.map(id=>{
                  const checked=Array.isArray(cur)?cur.includes(id):true;
                  return (
                    <div key={id} onClick={()=>togglePerm(id)} style={{display:'flex',alignItems:'center',gap:6,cursor:'pointer',padding:'4px 10px',borderRadius:6,userSelect:'none',background:checked?'rgba(99,102,241,0.18)':'rgba(255,255,255,0.03)',border:`1px solid ${checked?'rgba(99,102,241,0.4)':'rgba(255,255,255,0.07)'}`,transition:'all .15s'}}>
                      <div style={{width:14,height:14,borderRadius:4,flexShrink:0,background:checked?'#6366F1':'transparent',border:`1.5px solid ${checked?'#6366F1':'rgba(255,255,255,0.2)'}`,display:'grid',placeItems:'center'}}>
                        {checked&&<svg width="9" height="9" viewBox="0 0 10 10"><path d="M1.5 5L4 7.5 8.5 2.5" stroke="white" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>}
                      </div>
                      <span style={{fontSize:12,color:checked?'var(--text-1)':'var(--text-3)',fontWeight:checked?600:400}}>{navMap[id]||id}</span>
                    </div>
                  );
                })}
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  };

  // ════════════════════════════════════════════════════════
  return (
    <div style={{padding:24}}>
      {/* هدر */}
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:20}}>
        <div>
          <div style={{fontSize:18,fontWeight:700,color:'var(--text-1)'}}>کاربران سیستم</div>
          <div style={{fontSize:12,color:'var(--text-3)',marginTop:3}}>
            {fa(admins.length)} ادمین · {fa(sellers.length)} فروشنده
          </div>
        </div>
        {tab==='admins'&&<Button kind="primary" icon="user-plus" onClick={openCreate}>کاربر جدید</Button>}
      </div>

      {/* تب‌ها */}
      <div style={{display:'flex',gap:4,marginBottom:20,borderBottom:'1px solid rgba(255,255,255,0.07)',paddingBottom:0}}>
        {[
          {id:'admins',  label:'ادمین‌ها',   icon:'shield',      count:admins.length},
          {id:'sellers', label:'فروشندگان',   icon:'user-check',  count:sellers.length},
        ].map(t=>(
          <button key={t.id} onClick={()=>setTab(t.id)} style={{
            display:'flex',alignItems:'center',gap:6,padding:'8px 18px',borderRadius:'8px 8px 0 0',
            fontSize:13,cursor:'pointer',fontWeight:600,transition:'all .15s',border:'none',
            background:tab===t.id?'var(--bg-3,#1e2130)':'transparent',
            color:tab===t.id?'var(--text-1)':'var(--text-3)',
            borderBottom:tab===t.id?'2px solid #6366F1':'2px solid transparent',
          }}>
            <Icon name={t.icon} size={14}/>
            {t.label}
            <span style={{fontSize:10,padding:'1px 7px',borderRadius:20,background:'rgba(255,255,255,0.08)',color:'var(--text-3)'}}>{fa(t.count)}</span>
          </button>
        ))}
      </div>

      {/* ══ تب ادمین‌ها ══ */}
      {tab==='admins'&&(
        <>
          <div className="card" style={{overflow:'hidden',marginBottom:20}}>
            {aLoad?(
              <div style={{padding:40,textAlign:'center',color:'var(--text-3)'}}><span className="spinner"/><br/>در حال بارگذاری...</div>
            ):(
              <table style={{width:'100%',borderCollapse:'collapse'}}>
                <thead>
                  <tr style={{borderBottom:'1px solid var(--border-soft)'}}>
                    {['کاربر','نقش','دسترسی‌ها','آخرین ورود','وضعیت',''].map((h,i)=>(
                      <th key={i} style={{padding:'10px 14px',textAlign:'right',fontSize:11,fontWeight:700,color:'var(--text-3)'}}>{h}</th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {admins.map(u=>(
                    <tr key={u.id} style={{borderBottom:'1px solid rgba(255,255,255,0.04)',opacity:u.is_active?1:0.45,transition:'all .1s'}}
                      onMouseEnter={e=>e.currentTarget.style.background='rgba(255,255,255,0.025)'}
                      onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
                      <td style={{padding:'12px 14px'}}>
                        <div style={{display:'flex',alignItems:'center',gap:10}}>
                          <div style={{width:34,height:34,borderRadius:9,flexShrink:0,background:(ROLE_LABELS[u.role]?.color||'#6366F1')+'22',color:ROLE_LABELS[u.role]?.color||'#6366F1',display:'grid',placeItems:'center',fontSize:12,fontWeight:700}}>{(u.name||u.username||'?').slice(0,2)}</div>
                          <div>
                            <div style={{fontSize:13,fontWeight:600,color:'var(--text-1)'}}>{u.name||u.username}</div>
                            <div className="mono" style={{fontSize:11,color:'var(--text-3)',marginTop:1}}>{u.username}</div>
                          </div>
                        </div>
                      </td>
                      <td style={{padding:'12px 14px'}}><RoleBadge role={u.role}/></td>
                      <td style={{padding:'12px 14px',maxWidth:220}}><PermSummary permissions={u.permissions} role={u.role}/></td>
                      <td style={{padding:'12px 14px',fontSize:12,color:'var(--text-3)'}}>{formatDatetime(u.last_login)}</td>
                      <td style={{padding:'12px 14px'}}><ActiveToggle isActive={u.is_active} onToggle={()=>toggleAdmin(u)}/></td>
                      <td style={{padding:'12px 14px'}}>
                        <div style={{display:'flex',gap:4,justifyContent:'flex-end'}}>
                          <button className="icon-btn" onClick={()=>openLogs(u)} title="تاریخچه"><Icon name="history" size={13}/></button>
                          <button className="icon-btn" onClick={()=>openEdit(u)} title="ویرایش"><Icon name="pencil" size={13}/></button>
                          <button className="icon-btn" onClick={()=>setDelConf(u)} title="حذف" style={{color:'#F87171'}}><Icon name="trash-2" size={13}/></button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
          </div>

          {/* راهنمای نقش‌ها */}
          <div style={{display:'flex',gap:12,flexWrap:'wrap'}}>
            {[{role:'superadmin',desc:'دسترسی کامل + مدیریت کاربران. غیرقابل محدودسازی.'},{role:'admin',desc:'همه ماژول‌ها. می‌توان دسترسی را محدود کرد.'},{role:'sales_manager',desc:'پیش‌فرض: لیدها، فروشندگان، کمپین‌ها. قابل تنظیم.'}].map(({role,desc})=>{
              const ri=ROLE_LABELS[role];
              return (
                <div key={role} className="card" style={{padding:'12px 16px',flex:1,minWidth:180}}>
                  <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:5}}>
                    <div style={{width:8,height:8,borderRadius:'50%',background:ri.color}}/>
                    <span style={{fontWeight:700,color:ri.color,fontSize:13}}>{ri.label}</span>
                  </div>
                  <div style={{fontSize:11,color:'var(--text-3)',lineHeight:1.6}}>{desc}</div>
                </div>
              );
            })}
          </div>
        </>
      )}

      {/* ══ تب فروشندگان ══ */}
      {tab==='sellers'&&(
        <>
          {/* جستجو */}
          <div style={{marginBottom:14}}>
            <input className="input" value={sSearch} onChange={e=>setSSearch(e.target.value)}
              placeholder="جستجو نام، نام کاربری، شماره..." style={{maxWidth:320}}/>
          </div>

          <div className="card" style={{overflow:'hidden'}}>
            {sLoad?(
              <div style={{padding:40,textAlign:'center',color:'var(--text-3)'}}><span className="spinner"/><br/>در حال بارگذاری...</div>
            ):filteredSellers.length===0?(
              <div style={{padding:40,textAlign:'center',color:'var(--text-3)'}}>
                <Icon name="users" size={24}/><br/>
                {sSearch?'موردی یافت نشد':'هیچ فروشنده‌ای ثبت نشده'}
              </div>
            ):(
              <table style={{width:'100%',borderCollapse:'collapse'}}>
                <thead>
                  <tr style={{borderBottom:'1px solid var(--border-soft)'}}>
                    {['فروشنده','نام کاربری','تلفن','لیدهای فعال','تاریخ عضویت','وضعیت',''].map((h,i)=>(
                      <th key={i} style={{padding:'10px 14px',textAlign:'right',fontSize:11,fontWeight:700,color:'var(--text-3)'}}>{h}</th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {filteredSellers.map(s=>(
                    <tr key={s.id} style={{borderBottom:'1px solid rgba(255,255,255,0.04)',opacity:s.is_active?1:0.45,transition:'all .1s'}}
                      onMouseEnter={e=>e.currentTarget.style.background='rgba(255,255,255,0.025)'}
                      onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
                      <td style={{padding:'12px 14px'}}>
                        <div style={{display:'flex',alignItems:'center',gap:10}}>
                          <div style={{width:34,height:34,borderRadius:9,flexShrink:0,background:'rgba(52,211,153,0.15)',color:'#34D399',display:'grid',placeItems:'center',fontSize:12,fontWeight:700}}>{(s.name||'?').slice(0,2)}</div>
                          <div>
                            <div style={{fontSize:13,fontWeight:600,color:'var(--text-1)'}}>{s.name}</div>
                            <RoleBadge role="seller"/>
                          </div>
                        </div>
                      </td>
                      <td style={{padding:'12px 14px'}}>
                        <span className="mono" style={{fontSize:12,color:s.login_username?'var(--text-2)':'var(--text-4,#475569)'}}>
                          {s.login_username||<span style={{color:'var(--text-4,#475569)',fontStyle:'italic'}}>تنظیم نشده</span>}
                        </span>
                      </td>
                      <td style={{padding:'12px 14px'}}>
                        <span className="mono" style={{fontSize:12,color:'var(--text-3)'}}>{s.phone||'—'}</span>
                      </td>
                      <td style={{padding:'12px 14px',fontSize:13,color:'var(--text-2)',textAlign:'center'}}>
                        <span style={{fontWeight:700,color:s.active_leads>0?'#60A5FA':'var(--text-3)'}}>{fa(s.active_leads||0)}</span>
                      </td>
                      <td style={{padding:'12px 14px',fontSize:12,color:'var(--text-3)'}}>{formatDate(s.created_at)}</td>
                      <td style={{padding:'12px 14px'}}>
                        <ActiveToggle isActive={!!s.is_active} onToggle={()=>toggleSeller(s)}/>
                      </td>
                      <td style={{padding:'12px 14px'}}>
                        <button className="icon-btn" onClick={()=>window.SB_setPage?.('sellers')} title="مدیریت کامل در صفحه فروشندگان">
                          <Icon name="external-link" size={13}/>
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
          </div>

          <div style={{marginTop:12,fontSize:12,color:'var(--text-3)',display:'flex',alignItems:'center',gap:6}}>
            <Icon name="info" size={13}/>
            برای ویرایش اطلاعات کامل فروشنده (پورسانت، محصولات، تعلیق) از صفحه
            <span onClick={()=>window.SB_setPage?.('sellers')} style={{color:'#6366F1',cursor:'pointer',fontWeight:600}}>فروشندگان</span>
            استفاده کنید.
          </div>
        </>
      )}

      {/* ─── Modal ادمین ─── */}
      {modal&&(
        <Modal open={true} width={600} title={modal.mode==='create'?'کاربر جدید':`ویرایش: ${modal.user?.username}`} onClose={closeModal}
          footer={<div style={{display:'flex',gap:8,justifyContent:'flex-end'}}><Button kind="ghost" onClick={closeModal}>انصراف</Button><Button kind="primary" onClick={saveAdmin} loading={saving}>{modal.mode==='create'?'ساخت کاربر':'ذخیره'}</Button></div>}>
          <div style={{display:'flex',flexDirection:'column',gap:14}}>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
              {modal.mode==='create'&&<div><label className="label">نام کاربری *</label><input className="input" value={form.username} autoFocus onChange={e=>setForm(f=>({...f,username:e.target.value}))} placeholder="manager1"/></div>}
              <div><label className="label">نام نمایشی</label><input className="input" value={form.name} onChange={e=>setForm(f=>({...f,name:e.target.value}))} placeholder="علی احمدی"/></div>
              <div><label className="label">نقش *</label><select className="input" value={form.role} onChange={e=>onRoleChange(e.target.value)}><option value="superadmin">{ROLE_LABELS.superadmin.label}</option><option value="admin">{ROLE_LABELS.admin.label}</option><option value="sales_manager">{ROLE_LABELS.sales_manager.label}</option></select></div>
              <div><label className="label">{modal.mode==='create'?'رمز عبور *':'رمز جدید (خالی = بدون تغییر)'}</label><input className="input" type="password" value={form.password} onChange={e=>setForm(f=>({...f,password:e.target.value}))} placeholder="••••••••"/></div>
            </div>
            <div style={{height:1,background:'rgba(255,255,255,0.07)'}}/>
            <PermissionsPanel/>
          </div>
        </Modal>
      )}

      {/* ─── SlidePanel لاگ ─── */}
      <SlidePanel open={!!logPanel} onClose={()=>setLogPanel(null)} width={420}>
        {logPanel&&(
          <div style={{display:'flex',flexDirection:'column',height:'100%'}}>
            <div style={{padding:'20px 24px 16px',borderBottom:'1px solid rgba(255,255,255,0.07)'}}>
              <div style={{display:'flex',alignItems:'center',gap:10}}>
                <div style={{width:36,height:36,borderRadius:10,background:(ROLE_LABELS[logPanel.user.role]?.color||'#6366F1')+'22',color:ROLE_LABELS[logPanel.user.role]?.color||'#6366F1',display:'grid',placeItems:'center',fontSize:13,fontWeight:700}}>{(logPanel.user.name||logPanel.user.username||'?').slice(0,2)}</div>
                <div>
                  <div style={{fontSize:14,fontWeight:700,color:'var(--text-1)'}}>{logPanel.user.name||logPanel.user.username}</div>
                  <div style={{fontSize:11,color:'var(--text-3)'}}>تاریخچه فعالیت</div>
                </div>
              </div>
            </div>
            <div style={{flex:1,overflowY:'auto',padding:'12px 0'}}>
              {logLoad?(
                <div style={{padding:32,textAlign:'center',color:'var(--text-3)'}}><span className="spinner"/></div>
              ):logPanel.logs.length===0?(
                <div style={{padding:32,textAlign:'center',color:'var(--text-3)',fontSize:13}}><Icon name="inbox" size={24}/><br/>هیچ فعالیتی ثبت نشده</div>
              ):(
                logPanel.logs.map((log,i)=>{
                  const al=ACTION_LABELS[log.action]||{label:log.action,icon:'activity',color:'#94a3b8'};
                  return (
                    <div key={log.id} style={{display:'flex',gap:12,padding:'10px 24px',borderBottom:i<logPanel.logs.length-1?'1px solid rgba(255,255,255,0.04)':'none'}}>
                      <div style={{width:32,height:32,borderRadius:8,flexShrink:0,marginTop:1,background:al.color+'18',color:al.color,display:'grid',placeItems:'center'}}><Icon name={al.icon} size={14}/></div>
                      <div style={{flex:1,minWidth:0}}>
                        <div style={{fontSize:13,fontWeight:600,color:'var(--text-1)'}}>{al.label}</div>
                        {log.detail&&<div className="mono" style={{fontSize:11,color:'var(--text-3)',marginTop:2}}>{log.detail}</div>}
                        <div style={{display:'flex',gap:10,marginTop:4}}>
                          <span style={{fontSize:11,color:'var(--text-3)'}}>{formatDatetime(log.created_at)}</span>
                          {log.ip&&<span className="mono" style={{fontSize:10,color:'#475569',background:'rgba(255,255,255,0.05)',padding:'1px 6px',borderRadius:4}}>{log.ip}</span>}
                        </div>
                      </div>
                    </div>
                  );
                })
              )}
            </div>
          </div>
        )}
      </SlidePanel>

      {/* ─── Modal حذف ─── */}
      {delConf&&(
        <Modal open={true} title="حذف کاربر" onClose={()=>setDelConf(null)}
          footer={<div style={{display:'flex',gap:8,justifyContent:'flex-end'}}><Button kind="ghost" onClick={()=>setDelConf(null)}>انصراف</Button><button onClick={()=>deleteAdmin(delConf)} style={{padding:'7px 18px',borderRadius:8,fontSize:13,fontWeight:600,cursor:'pointer',background:'rgba(248,113,113,0.15)',color:'#F87171',border:'1px solid rgba(248,113,113,0.3)'}}>حذف کاربر</button></div>}>
          <div style={{color:'var(--text-2)',lineHeight:1.8}}>
            آیا از حذف <strong style={{color:'var(--text-1)'}}>{delConf.name||delConf.username}</strong> مطمئن هستید؟<br/>
            <span style={{fontSize:12,color:'var(--text-3)'}}>این عمل قابل بازگشت نیست.</span>
          </div>
        </Modal>
      )}
    </div>
  );
};
window.Users = Users;