// ─── صفحه مدیریت کاربران (فقط 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' },
  // قانونِ کاربر (۲۰۲۶-۰۷-۲۹): ردیابیلیتیِ فعالیت‌هایِ استخرِ لید (نه فقط مدیریتِ کاربر)
  create_lead:      { label: 'ثبتِ دستیِ لید',    icon: 'user-plus',   color: '#60A5FA' },
  bulk_delete_leads:{ label: 'حذفِ گروهیِ لید',   icon: 'trash-2',     color: '#F87171' },
  add_tag:          { label: 'زدنِ تگ',           icon: 'tag',         color: '#818CF8' },
  remove_tag:       { label: 'حذفِ تگ',           icon: 'tag',         color: '#F87171' },
  assign_lead:      { label: 'تخصیصِ لید',        icon: 'user-check',  color: '#34D399' },
  create_segment:   { label: 'ساختِ سگمنت',       icon: 'target',      color: '#60A5FA' },
  update_segment:   { label: 'ویرایشِ سگمنت',     icon: 'target',      color: '#FB923C' },
  delete_followup_thread: { label: 'حذفِ رشته‌یِ پیگیری', icon: 'trash-2', color: '#F87171' },
  update_lead:      { label: 'ویرایشِ لید',       icon: 'pencil',      color: '#FB923C' },
  create_label:     { label: 'ساختِ لیبل',        icon: 'tag',         color: '#60A5FA' },
  log_call:         { label: 'ثبتِ تماس',         icon: 'phone',       color: '#34D399' },
  refer_lead:       { label: 'ارجاعِ لید',        icon: 'user-check',  color: '#818CF8' },
  create_seller:    { label: 'ساختِ فروشنده',     icon: 'user-plus',   color: '#60A5FA' },
  update_seller:    { label: 'ویرایشِ فروشنده',   icon: 'pencil',      color: '#FB923C' },
  delete_seller:    { label: 'حذفِ فروشنده',      icon: 'trash-2',     color: '#F87171' },
  return_lead:      { label: 'برگشتِ لید به مارکت', icon: 'rotate-ccw', color: '#94A3B8' },
  freeze_lead:      { label: 'فریزِ لید',         icon: 'snowflake',   color: '#60A5FA' },
  unfreeze_lead:    { label: 'رفعِ فریزِ لید',    icon: 'sun',         color: '#FBBF24' },
  transfer_lead:    { label: 'انتقالِ لید',       icon: 'user-check',  color: '#34D399' },
  create_product:   { label: 'ساختِ محصول',       icon: 'package',     color: '#60A5FA' },
  update_product:   { label: 'ویرایشِ محصول',     icon: 'pencil',      color: '#FB923C' },
  delete_product:   { label: 'حذفِ محصول',        icon: 'trash-2',     color: '#F87171' },
  add_product_prize:    { label: 'افزودنِ جایزه',   icon: 'gift', color: '#818CF8' },
  remove_product_prize: { label: 'حذفِ جایزه',      icon: 'gift', color: '#F87171' },
  link_seller_product:   { label: 'اختصاصِ محصول به فروشنده', icon: 'link', color: '#818CF8' },
  unlink_seller_product: { label: 'قطعِ محصولِ فروشنده',     icon: 'link', color: '#F87171' },
  graveyard_restore:   { label: 'بازگردانیِ از قبرستان', icon: 'rotate-ccw', color: '#34D399' },
  run_segment_actions: { label: 'اجرایِ اکشنِ سگمنت',    icon: 'zap',        color: '#818CF8' },
  delete_segment:      { label: 'حذفِ سگمنت',            icon: 'trash-2',    color: '#F87171' },
  create_rule:      { label: 'ساختِ قانونِ تگ',   icon: 'zap', color: '#60A5FA' },
  update_rule:      { label: 'ویرایشِ قانونِ تگ', icon: 'zap', color: '#FB923C' },
  delete_rule:      { label: 'حذفِ قانونِ تگ',    icon: 'trash-2', color: '#F87171' },
  send_platform_message: { label: 'ارسالِ پیامِ پلتفرمی', icon: 'send', color: '#60A5FA' },
  import_leads:     { label: 'ایمپورتِ لید',      icon: 'upload', color: '#60A5FA' },
  import_novinhub:  { label: 'ایمپورتِ نوین‌هاب', icon: 'upload', color: '#60A5FA' },
  update_product_types:      { label: 'ویرایشِ انواعِ محصول',  icon: 'package', color: '#FB923C' },
  update_segment_thresholds: { label: 'ویرایشِ آستانه‌یِ سگمنت', icon: 'target', color: '#FB923C' },
  update_status_rule:  { label: 'ویرایشِ قانونِ وضعیت', icon: 'zap', color: '#FB923C' },
  update_outcome_rule: { label: 'ویرایشِ قانونِ نتیجه',  icon: 'zap', color: '#FB923C' },
  update_resurrection_settings: { label: 'ویرایشِ تنظیماتِ بازگشت', icon: 'settings', color: '#FB923C' },
  create_auto_tag_rule: { label: 'ساختِ قانونِ تگِ خودکار', icon: 'zap', color: '#60A5FA' },
  update_auto_tag_rule: { label: 'ویرایشِ قانونِ تگِ خودکار', icon: 'zap', color: '#FB923C' },
  delete_auto_tag_rule: { label: 'حذفِ قانونِ تگِ خودکار', icon: 'trash-2', color: '#F87171' },
  create_campaign: { label: 'ساختِ کمپین', icon: 'zap', color: '#60A5FA' },
  update_campaign: { label: 'ویرایشِ کمپین', icon: 'zap', color: '#FB923C' },
  delete_campaign: { label: 'حذفِ کمپین', icon: 'trash-2', color: '#F87171' },
  update_campaign_flow: { label: 'ویرایشِ فلویِ کمپین', icon: 'zap', color: '#FB923C' },
  add_leads_to_campaign: { label: 'افزودنِ لید به کمپین', icon: 'user-plus', color: '#818CF8' },
  remove_lead_from_campaign: { label: 'حذفِ لید از کمپین', icon: 'trash-2', color: '#F87171' },
  update_campaign_lead: { label: 'ویرایشِ لیدِ کمپین', icon: 'pencil', color: '#FB923C' },
  create_template: { label: 'ساختِ قالبِ پیام', icon: 'file-text', color: '#60A5FA' },
  update_template: { label: 'ویرایشِ قالبِ پیام', icon: 'file-text', color: '#FB923C' },
  delete_template: { label: 'حذفِ قالبِ پیام', icon: 'trash-2', color: '#F87171' },
  // فعالیت‌هایِ فروش‌یار
  delete_lead:   { label: 'حذفِ لید', icon: 'trash-2', color: '#F87171' },
  add_note:      { label: 'افزودنِ یادداشت', icon: 'file-text', color: '#818CF8' },
  add_activity:  { label: 'ثبتِ فعالیت', icon: 'check-circle', color: '#818CF8' },
  set_seller_target: { label: 'تعیینِ تارگتِ فروشنده', icon: 'target', color: '#60A5FA' },
  update_product_plan: { label: 'ویرایشِ پلنِ محصول', icon: 'target', color: '#FB923C' },
  update_seller_product_plan: { label: 'ویرایشِ پلنِ فروشنده×محصول', icon: 'target', color: '#FB923C' },
};

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 [showPass,setShowPass]= 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 ──
  // قانونِ کاربر (۲۰۲۶-۰۸-۰۱): created_at/last_login توی دیتابیس UTCه و بدونِ پسوندِ Z
  // ذخیره می‌شه — new Date(dt) خام اونو به‌غلط به‌عنوانِ ساعتِ محلی می‌خوند (تا ۳:۳۰
  // ساعت جابه‌جا). این تابع صریح UTC رو پارس می‌کنه.
  const parseDbUTC = (dt) => {
    const m = String(dt).match(/^(\d{4})-(\d{2})-(\d{2})[ T](\d{2}):(\d{2})(?::(\d{2}))?/);
    if (m) return new Date(Date.UTC(+m[1], +m[2]-1, +m[3], +m[4], +m[5], +(m[6]||0)));
    return new Date(dt);
  };
  const formatDatetime = (dt) => {
    if (!dt) return '—';
    try { return parseDbUTC(dt).toLocaleString('fa-IR', { year:'numeric', month:'2-digit', day:'2-digit', hour:'2-digit', minute:'2-digit' }); }
    catch { return dt; }
  };
  const formatDate = (dt) => { try { return parseDbUTC(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']||[]});
    setShowPass(false);
    setModal({mode:'create'});
  };
  const openEdit = (u) => { setForm({username:u.username,password:'',name:u.name||'',role:u.role,permissions:u.permissions}); setShowPass(false); 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 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="filter" size={12} color="var(--text-3)"/>
              <span style={{fontSize:11,fontWeight:700,color:'var(--text-3)'}}>دسترسی‌های ویژه</span>
            </div>
            <div style={{padding:'8px 12px',display:'flex',flexWrap:'wrap',gap:6}}>
              {(() => {
                const id='pool_filter_by_seller';
                const checked=Array.isArray(cur)?cur.includes(id):true;
                return (
                  <div 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}}>فیلترِ آمارِ استخرِ لید بر اساسِ فروشنده</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},
          {id:'activity', label:'فعالیت‌ها',  icon:'activity',    count:null},
        ].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}
            {t.count != null && <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>
        </>
      )}

      {/* ══ تب فعالیت‌ها — قانونِ کاربر (۲۰۲۶-۰۷-۲۹): لاگِ یکپارچه‌ی ادمین‌ها + فروش‌یارها،
          مستقیم به‌صورتِ جدول، نه پنهان‌شده پشتِ آیکونِ هر ردیف ══ */}
      {tab==='activity'&&<ActivityTab api={api} headers={headers}/>}

      {/* ─── 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>
                <div style={{position:'relative'}}>
                  <input className="input" type={showPass?'text':'password'} value={form.password} onChange={e=>setForm(f=>({...f,password:e.target.value}))} placeholder="••••••••" style={{paddingLeft:34}}/>
                  <button type="button" onClick={()=>setShowPass(s=>!s)} title={showPass?'مخفی کردن رمز':'نمایش رمز'}
                    style={{position:'absolute',left:8,top:'50%',transform:'translateY(-50%)',background:'transparent',border:'none',cursor:'pointer',color:'var(--text-muted)',padding:2,display:'flex'}}>
                    <Icon name={showPass?'eye-off':'eye'} size={16}/>
                  </button>
                </div>
              </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>
  );
};
// ═══════════════════════════════════════════════════════════
// تبِ «فعالیت‌ها» — لاگِ یکپارچه‌ی ادمین‌ها + فروش‌یارها (قانونِ کاربر ۲۰۲۶-۰۷-۲۹)
// ═══════════════════════════════════════════════════════════
const ActivityTab = ({ api }) => {
  const { Icon, useToast } = window.SB_UI;
  const { fa } = window.SB_DATA;
  const { useState, useEffect } = React;
  const toast = useToast();
  const [logs, setLogs] = useState(null);
  const [filter, setFilter] = useState(''); // '' | 'admin' | 'seller'
  const [actorFilter, setActorFilter] = useState(''); // قانونِ کاربر (۲۰۲۶-۰۷-۲۹): کلیک رویِ اسمِ کاربر → فقط فعالیتِ خودش

  // قانونِ کاربر (۲۰۲۶-۰۸-۰۱): همون فیکسِ UTC که در Users هست — created_at بدونِ Z
  // ذخیره می‌شه، new Date(dt) خام غلط می‌خوند. کاربر خواسته بود «زمانِ دقیقِ شمسی»
  // ببینه، نه برچسبِ نسبیِ مبهم («۲ ساعت پیش») — پس همیشه تاریخ/ساعتِ کاملِ شمسی نشون می‌ده.
  const parseDbUTC = (dt) => {
    const m = String(dt).match(/^(\d{4})-(\d{2})-(\d{2})[ T](\d{2}):(\d{2})(?::(\d{2}))?/);
    if (m) return new Date(Date.UTC(+m[1], +m[2]-1, +m[3], +m[4], +m[5], +(m[6]||0)));
    return new Date(dt);
  };
  const formatDatetime = (dt) => {
    if (!dt) return '—';
    try { return parseDbUTC(dt).toLocaleString('fa-IR', { year:'numeric', month:'2-digit', day:'2-digit', hour:'2-digit', minute:'2-digit' }); }
    catch { return dt; }
  };

  const load = () => {
    // وقتی رویِ یه کاربرِ خاص فیلتر کردیم، حجمِ بیشتری بگیر تا واقعاً «صفر تا صد»یِ
    // فعالیتِ همون فرد باشه، نه فقط چندتایِ آخرِ لاگِ کلی.
    const limit = actorFilter ? 1000 : 300;
    api(`/auth/all-logs?limit=${limit}`).then(d => { if (d.success) setLogs(d.data.logs); else toast.error(d.message||'خطا'); });
  };
  useEffect(() => { load(); const t = setInterval(load, 30000); return () => clearInterval(t); }, [actorFilter]);

  const filtered = (logs||[]).filter(l => (!filter || l.actor_type === filter) && (!actorFilter || l.actor === actorFilter));

  return (
    <div>
      <div style={{display:'flex',gap:8,marginBottom:14,alignItems:'center'}}>
        {[{v:'',l:'همه'},{v:'admin',l:'ادمین‌ها'},{v:'seller',l:'فروش‌یارها'}].map(o=>(
          <button key={o.v} onClick={()=>setFilter(o.v)} style={{
            padding:'6px 14px',borderRadius:20,fontSize:12,fontWeight:600,cursor:'pointer',border:'none',
            background:filter===o.v?'#6366F1':'rgba(255,255,255,0.05)',
            color:filter===o.v?'#fff':'var(--text-3)',
          }}>{o.l}</button>
        ))}
        {actorFilter && (
          <span style={{display:'flex',alignItems:'center',gap:6,padding:'6px 12px',borderRadius:20,fontSize:12,fontWeight:600,background:'rgba(99,102,241,0.15)',color:'#818CF8'}}>
            فعالیتِ «{actorFilter}»
            <span onClick={()=>setActorFilter('')} style={{cursor:'pointer',color:'#F87171'}} title="پاک کردنِ فیلتر">✕</span>
          </span>
        )}
        <div style={{flex:1}}/>
        <button onClick={load} className="icon-btn" title="بروزرسانی"><Icon name="refresh-cw" size={14}/></button>
      </div>

      <div className="card" style={{overflow:'hidden'}}>
        {logs===null ? (
          <div style={{padding:40,textAlign:'center',color:'var(--text-3)'}}><span className="spinner"/><br/>در حال بارگذاری...</div>
        ) : filtered.length===0 ? (
          <div style={{padding:40,textAlign:'center',color:'var(--text-3)'}}><Icon name="inbox" size={24}/><br/>هیچ فعالیتی ثبت نشده</div>
        ) : (
          // قانونِ کاربر (۲۰۲۶-۰۸-۰۱): والدِ این جدول overflow:'hidden' داره (برایِ
          // گردیِ گوشه‌ها) — رویِ صفحه‌نمایشِ باریک، ستونِ «زمان» (آخرین ستون) کاملاً
          // کلیپ می‌شد و اصلاً دیده نمی‌شد. این wrapper اسکرولِ افقی می‌ده تا هیچ ستونی
          // گم نشه.
          <div style={{overflowX:'auto'}}>
          <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)',whiteSpace:'nowrap'}}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {filtered.map(log => {
                const al = ACTION_LABELS[log.action] || { label: log.action, icon: 'activity', color: '#94a3b8' };
                return (
                  <tr key={`${log.actor_type}_${log.id}`} style={{borderBottom:'1px solid rgba(255,255,255,0.04)'}}>
                    <td style={{padding:'10px 14px',fontSize:13,fontWeight:600,color:'var(--text-1)',cursor:'pointer',whiteSpace:'nowrap'}}
                      title="نمایشِ کاملِ فعالیتِ همین کاربر" onClick={()=>setActorFilter(log.actor)}>{log.actor}</td>
                    <td style={{padding:'10px 14px',whiteSpace:'nowrap'}}>
                      <span style={{fontSize:11,padding:'2px 8px',borderRadius:6,
                        background: log.actor_type==='seller' ? 'rgba(52,211,153,0.12)' : 'rgba(96,165,250,0.12)',
                        color: log.actor_type==='seller' ? '#34D399' : '#60A5FA'}}>
                        {log.actor_type==='seller' ? 'فروش‌یار' : 'ادمین'}
                      </span>
                    </td>
                    <td style={{padding:'10px 14px',whiteSpace:'nowrap'}}>
                      <div style={{display:'flex',alignItems:'center',gap:6}}>
                        <div style={{width:22,height:22,borderRadius:6,flexShrink:0,background:al.color+'18',color:al.color,display:'grid',placeItems:'center'}}>
                          <Icon name={al.icon} size={11}/>
                        </div>
                        <span style={{fontSize:12.5,color:'var(--text-2)'}}>{al.label}</span>
                      </div>
                    </td>
                    <td className="mono" style={{padding:'10px 14px',fontSize:11,color:'var(--text-3)',minWidth:220,whiteSpace:'normal'}}>{log.detail||'—'}</td>
                    <td style={{padding:'10px 14px',fontSize:11,color:'var(--text-3)',whiteSpace:'nowrap'}}>{formatDatetime(log.created_at)}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
          </div>
        )}
      </div>
    </div>
  );
};

window.Users = Users;