// ───────────────────────────────────────────────────────────
// Huio Control Panel — Users / Members View (cp-users-view.jsx)
// ───────────────────────────────────────────────────────────

if (!window.CP_STYLES) throw new Error('[cp-users-view] window.CP_STYLES not loaded');

function renderUsers({
  lang = 'vi',
  t: rawT,
  appStyles: rawAppStyles,
  users: rawUsers = [],
  userSearchQuery = '',
  setUserSearchQuery = () => {},
  userRoleFilter = 'all',
  setUserRoleFilter = () => {},
  userPlanFilter = 'all',
  setUserPlanFilter = () => {},
  userStatusFilter = 'all',
  setUserStatusFilter = () => {},
  userSortBy = 'last_active_desc',
  setUserSortBy = () => {},
  userPage = 1,
  setUserPage = () => {},
  userPerPage = 10,
  setUserPerPage = () => {},
  handlePlanChange = () => {},
  handleRoleChange = () => {},
  handleToggleSuspend = () => {},
  handleToggleFeature = () => {},
  openSupportChatForMember = () => {},
  registrySupportOpening = false,
}) {
  const appStyles = rawAppStyles || window.CP_STYLES || {};
  const t = typeof rawT === 'function' ? rawT : (k) => k;
  const users = Array.isArray(rawUsers) ? rawUsers : [];
  const formatPhone = window.formatPhone || ((p) => p || '—');
  const formatDateTime = window.formatDateTime || ((d) => d || '—');
  const formatRelativeTime = window.formatRelativeTime || ((d, l) => d || '—');
  const getInitials = window.getInitials || ((n) => (n ? n.slice(0, 2).toUpperCase() : '??'));
  const getAvatarColor = window.getAvatarColor || (() => '#4A7A96');

  // Calculate filtered users
  const filteredUsers = users.filter(u => {
    if (userSearchQuery.trim()) {
      const q = userSearchQuery.toLowerCase().trim();
      const matchName = u.name && u.name.toLowerCase().includes(q);
      const matchPhone = u.phone && u.phone.toLowerCase().includes(q);
      const matchDisplayId = u.displayId && u.displayId.toLowerCase().includes(q);
      const matchId = u.id && u.id.toLowerCase().includes(q);
      if (!matchName && !matchPhone && !matchDisplayId && !matchId) return false;
    }
    if (userRoleFilter !== 'all' && u.role !== userRoleFilter) return false;
    if (userPlanFilter !== 'all' && u.plan !== userPlanFilter) return false;
    if (userStatusFilter !== 'all' && u.status !== userStatusFilter) return false;
    return true;
  });

  // Calculate sorted users
  const sortedUsers = [...filteredUsers].sort((a, b) => {
    if (userSortBy === 'last_active_desc') {
      return new Date(b.lastActiveAt) - new Date(a.lastActiveAt);
    }
    if (userSortBy === 'last_active_asc') {
      return new Date(a.lastActiveAt) - new Date(b.lastActiveAt);
    }
    if (userSortBy === 'name_asc') {
      return (a.name || '').localeCompare(b.name || '');
    }
    if (userSortBy === 'name_desc') {
      return (b.name || '').localeCompare(a.name || '');
    }
    if (userSortBy === 'join_desc') {
      return new Date(b.createdIso || b.date) - new Date(a.createdIso || a.date);
    }
    if (userSortBy === 'join_asc') {
      return new Date(a.createdIso || a.date) - new Date(b.createdIso || b.date);
    }
    if (userSortBy === 'plan_desc') {
      const planRank = {
        organizer_business: 4,
        organizer_pro: 3,
        premium_auto: 3,
        basic_assistant: 2,
        free_trial: 1,
        free: 0,
      };
      return (planRank[b.plan] || 0) - (planRank[a.plan] || 0);
    }
    return 0;
  });

  // Calculate pagination
  const userTotalPages = Math.max(1, Math.ceil(sortedUsers.length / userPerPage));
  const safeUserPage = Math.min(userPage, userTotalPages);
  const paginatedUsers = sortedUsers.slice((safeUserPage - 1) * userPerPage, safeUserPage * userPerPage);

  const active30dCount = users.filter(u => {
    const diffMs = Date.now() - new Date(u.lastActiveAt).getTime();
    return diffMs < 30 * 86400 * 1000;
  }).length;

  const verifiedCount = users.filter(u => u.status === 'verified').length;
  const suspendedCount = users.filter(u => u.suspendedAt).length;

  const handleHeaderSort = (colKey) => {
    if (colKey === 'name') {
      setUserSortBy(prev => prev === 'name_asc' ? 'name_desc' : 'name_asc');
    } else if (colKey === 'plan') {
      setUserSortBy(prev => prev === 'plan_desc' ? 'name_asc' : 'plan_desc');
    } else if (colKey === 'last_active') {
      setUserSortBy(prev => prev === 'last_active_desc' ? 'last_active_asc' : 'last_active_desc');
    } else if (colKey === 'join') {
      setUserSortBy(prev => prev === 'join_desc' ? 'join_asc' : 'join_desc');
    }
    setUserPage(1);
  };

  const renderSortArrow = (colKey) => {
    let isActive = false;
    let isAsc = false;
    
    if (colKey === 'name' && (userSortBy === 'name_asc' || userSortBy === 'name_desc')) {
      isActive = true;
      isAsc = userSortBy === 'name_asc';
    }
    if (colKey === 'plan' && userSortBy === 'plan_desc') {
      isActive = true;
      isAsc = false; // we only have plan_desc
    }
    if (colKey === 'last_active' && (userSortBy === 'last_active_desc' || userSortBy === 'last_active_asc')) {
      isActive = true;
      isAsc = userSortBy === 'last_active_asc';
    }
    if (colKey === 'join' && (userSortBy === 'join_desc' || userSortBy === 'join_asc')) {
      isActive = true;
      isAsc = userSortBy === 'join_asc';
    }

    if (!isActive) return null;

    return (
      <span style={{ 
        display: 'inline-flex', 
        marginLeft: '4px',
        transition: 'transform 0.2s ease',
        transform: isAsc ? 'rotate(180deg)' : 'rotate(0deg)'
      }}>
        <window.Icons.ChevronDown size={14} />
      </span>
    );
  };

  const handleResetFilters = () => {
    setUserSearchQuery('');
    setUserRoleFilter('all');
    setUserPlanFilter('all');
    setUserStatusFilter('all');
    setUserSortBy('last_active_desc');
    setUserPage(1);
  };

  const handleExportCSV = () => {
    const headers = ['ID', 'Name', 'Phone', 'Display ID', 'Role', 'Plan', 'Verification Status', 'Last Activity', 'Join Date'];
    const rows = sortedUsers.map(u => [
      u.id,
      `"${(u.name || '').replace(/"/g, '""')}"`,
      `"${u.phone}"`,
      u.displayId || '',
      u.role,
      u.plan,
      u.status,
      `"${formatDateTime(u.lastActiveAt)}"`,
      u.date
    ]);
    const csvContent = 'data:text/csv;charset=utf-8,' + [headers.join(','), ...rows.map(r => r.join(','))].join('\n');
    const encodedUri = encodeURI(csvContent);
    const link = document.createElement('a');
    link.setAttribute('href', encodedUri);
    link.setAttribute('download', `huio_members_${new Date().toISOString().slice(0, 10)}.csv`);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  return (
    <div style={appStyles.viewWrapper}>
      <div style={appStyles.welcomeBanner}>
        <h1 className="hu-h1 hu-display" style={{ margin: '0 0 6px 0' }}>{t('users.title')}</h1>
        <p style={{ margin: 0, color: 'var(--hu-fg-2)' }}>{t('users.sub')}</p>
      </div>

      {/* Metrics Overview */}
      <div style={appStyles.metricsGrid}>
        <window.CpMetricCard 
          title={lang === 'vi' ? 'Tổng thành viên' : lang === 'ru' ? 'Всего участников' : 'Total Members'}
          value={users.length} 
          iconKind="users"
        />
        <window.CpMetricCard 
          title={lang === 'vi' ? 'Hoạt động (30 ngày)' : lang === 'ru' ? 'Активные (30 дней)' : 'Active (30 Days)'}
          value={active30dCount} 
          iconKind="users"
        />
        <window.CpMetricCard 
          title={lang === 'vi' ? 'Đã xác thực' : lang === 'ru' ? 'Верифицированы' : 'Verified Users'}
          value={verifiedCount} 
          iconKind="cccd"
        />
        <window.CpMetricCard 
          title={lang === 'vi' ? 'Bị tạm khóa' : lang === 'ru' ? 'Заблокированы' : 'Suspended Users'}
          value={suspendedCount} 
          iconKind="db"
        />
      </div>

      {/* Controls Bar: Search, Filters, Sorting, Export */}
      <div className="hu-card hu-card-3d-sm" style={{ padding: '16px', marginBottom: '20px' }}>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center', justifyContent: 'space-between' }}>
          
          {/* Search Bar */}
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', flex: '1 1 280px', minWidth: '240px' }}>
            <div style={{ position: 'relative', width: '100%' }}>
              <input 
                type="text" 
                placeholder={lang === 'vi' ? 'Tìm theo tên, SĐT, Email, Display ID...' : lang === 'ru' ? 'Поиск по имени, телефону, email, Display ID...' : 'Search by Name, Phone, Email, Display ID...'}
                value={userSearchQuery}
                onChange={(e) => {
                  setUserSearchQuery(e.target.value);
                  setUserPage(1);
                }}
                className="hu-input"
                style={{ width: '100%', paddingLeft: '32px', fontSize: '13px', height: '36px' }}
              />
              <span style={{ position: 'absolute', left: '10px', top: '50%', transform: 'translateY(-50%)', color: 'var(--hu-fg-3)', pointerEvents: 'none', fontSize: '14px' }}>
                🔍
              </span>
              {userSearchQuery && (
                <button 
                  onClick={() => { setUserSearchQuery(''); setUserPage(1); }}
                  style={{ position: 'absolute', right: '10px', top: '50%', transform: 'translateY(-50%)', background: 'none', border: 'none', color: 'var(--hu-fg-2)', cursor: 'pointer', fontSize: '12px' }}
                >
                  ✕
                </button>
              )}
            </div>
          </div>

          {/* Filters & Sorting Controls */}
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px', alignItems: 'center' }}>
            {/* Role filter */}
            <select 
              value={userRoleFilter}
              onChange={(e) => { setUserRoleFilter(e.target.value); setUserPage(1); }}
              style={{ fontSize: '12px', padding: '6px 10px', borderRadius: 'var(--hu-r-sm)', border: '1.5px solid var(--hu-border)', background: 'var(--hu-bg-elev)', color: 'var(--hu-fg)', outline: 'none' }}
            >
              <option value="all">{lang === 'vi' ? 'Tất cả vai trò' : lang === 'ru' ? 'Все роли' : 'All Roles'}</option>
              <option value="organizer">{lang === 'vi' ? 'Ban tổ chức' : lang === 'ru' ? 'Организатор' : 'Organizer'}</option>
              <option value="participant">{lang === 'vi' ? 'Thành viên' : lang === 'ru' ? 'Участник' : 'Participant'}</option>
              <option value="both">{lang === 'vi' ? 'Cả hai vai trò' : lang === 'ru' ? 'Обе роли' : 'Both Roles'}</option>
            </select>

            {/* Plan filter */}
            <select 
              value={userPlanFilter}
              onChange={(e) => { setUserPlanFilter(e.target.value); setUserPage(1); }}
              className="hu-input"
              style={{ fontSize: '12px', padding: '6px 28px 6px 12px', height: '36px', borderRadius: 'var(--hu-r-sm)', border: '1.5px solid var(--hu-border)', background: 'var(--hu-bg-elev)', color: 'var(--hu-fg)', outline: 'none', cursor: 'pointer', transition: 'all 0.2s ease', appearance: 'none', backgroundImage: `url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")`, backgroundRepeat: 'no-repeat', backgroundPosition: 'right 8px center', backgroundSize: '14px' }}
            >
              <option value="all">{lang === 'vi' ? 'Tất cả gói' : lang === 'ru' ? 'Все тарифы' : 'All Tiers'}</option>
              <option value="free">Free</option>
              <option value="organizer_pro">Organizer Pro</option>
              <option value="organizer_business">Organizer Business</option>
            </select>

            {/* Verification filter */}
            <select 
              value={userStatusFilter}
              onChange={(e) => { setUserStatusFilter(e.target.value); setUserPage(1); }}
              className="hu-input"
              style={{ fontSize: '12px', padding: '6px 28px 6px 12px', height: '36px', borderRadius: 'var(--hu-r-sm)', border: '1.5px solid var(--hu-border)', background: 'var(--hu-bg-elev)', color: 'var(--hu-fg)', outline: 'none', cursor: 'pointer', transition: 'all 0.2s ease', appearance: 'none', backgroundImage: `url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")`, backgroundRepeat: 'no-repeat', backgroundPosition: 'right 8px center', backgroundSize: '14px' }}
            >
              <option value="all">{lang === 'vi' ? 'Tất cả trạng thái' : lang === 'ru' ? 'Все статусы' : 'All Statuses'}</option>
              <option value="unsigned">Unsigned</option>
              <option value="pending">Pending</option>
              <option value="verified">Verified</option>
            </select>

            {/* Sorting dropdown */}
            <select 
              value={userSortBy}
              onChange={(e) => { setUserSortBy(e.target.value); setUserPage(1); }}
              className="hu-input"
              style={{ fontSize: '12px', padding: '6px 28px 6px 12px', height: '36px', borderRadius: 'var(--hu-r-sm)', border: '1.5px solid var(--hu-border)', background: 'var(--hu-bg-elev)', color: 'var(--hu-fg)', fontWeight: '600', outline: 'none', cursor: 'pointer', transition: 'all 0.2s ease', appearance: 'none', backgroundImage: `url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")`, backgroundRepeat: 'no-repeat', backgroundPosition: 'right 8px center', backgroundSize: '14px' }}
            >
              <option value="last_active_desc">{lang === 'vi' ? 'Hoạt động: Mới nhất' : lang === 'ru' ? 'Активность: Сначала новые' : 'Last Active: Newest'}</option>
              <option value="last_active_asc">{lang === 'vi' ? 'Hoạt động: Cũ nhất' : lang === 'ru' ? 'Активность: Сначала старые' : 'Last Active: Oldest'}</option>
              <option value="name_asc">{lang === 'vi' ? 'Tên: A đến Z' : lang === 'ru' ? 'Имя: А-Я' : 'Name: A to Z'}</option>
              <option value="name_desc">{lang === 'vi' ? 'Tên: Z đến A' : lang === 'ru' ? 'Имя: Я-А' : 'Name: Z to A'}</option>
              <option value="join_desc">{lang === 'vi' ? 'Ngày tham gia: Mới nhất' : lang === 'ru' ? 'Дата регистрации: Сначала новые' : 'Join Date: Newest'}</option>
              <option value="join_asc">{lang === 'vi' ? 'Ngày tham gia: Cũ nhất' : lang === 'ru' ? 'Дата регистрации: Сначала старые' : 'Join Date: Oldest'}</option>
              <option value="plan_desc">{lang === 'vi' ? 'Gói: Cao nhất trước' : lang === 'ru' ? 'Тариф: Высший сначала' : 'Tier: Highest First'}</option>
            </select>

            {/* Items per page */}
            <select 
              value={userPerPage}
              onChange={(e) => { setUserPerPage(Number(e.target.value)); setUserPage(1); }}
              className="hu-input"
              style={{ fontSize: '12px', padding: '6px 28px 6px 12px', height: '36px', borderRadius: 'var(--hu-r-sm)', border: '1.5px solid var(--hu-border)', background: 'var(--hu-bg-elev)', color: 'var(--hu-fg)', outline: 'none', cursor: 'pointer', transition: 'all 0.2s ease', appearance: 'none', backgroundImage: `url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")`, backgroundRepeat: 'no-repeat', backgroundPosition: 'right 8px center', backgroundSize: '14px' }}
            >
              <option value={10}>10 / {lang === 'vi' ? 'trang' : lang === 'ru' ? 'стр.' : 'page'}</option>
              <option value={25}>25 / {lang === 'vi' ? 'trang' : lang === 'ru' ? 'стр.' : 'page'}</option>
              <option value={50}>50 / {lang === 'vi' ? 'trang' : lang === 'ru' ? 'стр.' : 'page'}</option>
              <option value={100}>100 / {lang === 'vi' ? 'trang' : lang === 'ru' ? 'стр.' : 'page'}</option>
            </select>

            {/* Export CSV Button */}
            <button 
              onClick={handleExportCSV}
              className="hu-btn hu-btn-ghost hu-btn-sm"
              style={{ fontSize: '12px', height: '36px', padding: '0 16px', gap: '6px', fontWeight: '600', borderRadius: 'var(--hu-r-sm)' }}
              title="Export filtered user list to CSV"
            >
              <window.Icons.Roadmap /> {lang === 'vi' ? 'Xuất CSV' : lang === 'ru' ? 'Экспорт CSV' : 'Export CSV'}
            </button>
          </div>

        </div>
      </div>
      
      {/* Users Registry Table */}
      <style>
        {`
          .hu-tr-hover { transition: background-color 0.15s ease; }
          .hu-tr-hover:hover { background-color: var(--hu-bg-elev); }
        `}
      </style>
      <div className="hu-card hu-card-3d-sm" style={{ padding: 0, overflow: 'hidden' }}>
        <table style={appStyles.tableStyle}>
          <thead>
            <tr style={appStyles.tableHeaderRow}>
              <th 
                onClick={() => handleHeaderSort('name')} 
                style={{ ...appStyles.tableTh, cursor: 'pointer', userSelect: 'none' }}
                title="Click to sort by Name"
              >
                {t('users.col.name')}{renderSortArrow('name')}
              </th>
              <th style={appStyles.tableTh}>{t('users.col.phone')}</th>
              <th style={appStyles.tableTh}>{t('users.col.role')}</th>
              <th 
                onClick={() => handleHeaderSort('plan')} 
                style={{ ...appStyles.tableTh, cursor: 'pointer', userSelect: 'none' }}
                title="Click to sort by Plan Tier"
              >
                {t('users.col.plan')}{renderSortArrow('plan')}
              </th>

              <th style={appStyles.tableTh}>{t('users.col.status')}</th>
              <th 
                onClick={() => handleHeaderSort('last_active')} 
                style={{ ...appStyles.tableTh, cursor: 'pointer', userSelect: 'none' }}
                title="Click to sort by Last Activity"
              >
                {lang === 'vi' ? 'Hoạt động gần nhất' : lang === 'ru' ? 'Последняя активность' : 'Last Activity'}{renderSortArrow('last_active')}
              </th>
              <th 
                onClick={() => handleHeaderSort('join')} 
                style={{ ...appStyles.tableTh, cursor: 'pointer', userSelect: 'none' }}
                title="Click to sort by Join Date"
              >
                {t('users.col.date')}{renderSortArrow('join')}
              </th>
              <th style={appStyles.tableTh}>{t('users.col.actions')}</th>
            </tr>
          </thead>
          <tbody>
            {paginatedUsers.length === 0 ? (
              <tr>
                <td colSpan={8} style={{ padding: '48px 24px', textAlign: 'center' }}>
                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '12px', maxWidth: '360px', margin: '0 auto' }}>
                    <div style={{ width: '48px', height: '48px', borderRadius: '50%', background: 'var(--hu-bg-elev)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--hu-fg-3)' }}>
                      <window.Icons.Search size={24} />
                    </div>
                    <div style={{ fontSize: '15px', fontWeight: '600', color: 'var(--hu-fg)' }}>
                      {lang === 'vi' ? 'Không tìm thấy thành viên nào' : lang === 'ru' ? 'Участники не найдены' : 'No matching members found'}
                    </div>
                    <div style={{ fontSize: '12px', color: 'var(--hu-fg-2)', lineHeight: '1.4' }}>
                      {lang === 'vi' 
                        ? 'Thử thay đổi từ khóa tìm kiếm hoặc điều chỉnh bộ lọc để xem kết quả.'
                        : lang === 'ru'
                        ? 'Попробуйте изменить поисковый запрос или сбросить активные фильтры.'
                        : 'Try changing your search terms or clearing active filters.'}
                    </div>
                    <button 
                      onClick={handleResetFilters}
                      className="hu-btn hu-btn-ghost hu-btn-sm"
                      style={{ marginTop: '6px', fontSize: '12px', gap: '6px' }}
                    >
                      🔄 {lang === 'vi' ? 'Xóa bộ lọc' : lang === 'ru' ? 'Сбросить фильтры' : 'Reset filters'}
                    </button>
                  </div>
                </td>
              </tr>
            ) : (
              paginatedUsers.map(u => {
                const diffMs = Date.now() - new Date(u.lastActiveAt).getTime();
                const isRecent24h = diffMs < 24 * 3600 * 1000;
                const isRecent7d = diffMs < 7 * 86400 * 1000;

                return (
                  <tr key={u.id} style={appStyles.tableRowStyle} className="hu-tr-hover">
                    {/* Full Name & Avatar & ID */}
                    <td style={{ ...appStyles.tableTd, fontWeight: '600' }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                        {u.avatarUrl && u.avatarUrl.startsWith('http') ? (
                          <img 
                            src={u.avatarUrl} 
                            alt={u.name}
                            style={{
                              width: '32px', 
                              height: '32px', 
                              borderRadius: '50%', 
                              objectFit: 'cover',
                              flexShrink: 0,
                              boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
                            }}
                          />
                        ) : (
                          <div 
                            style={{ 
                              width: '32px', 
                              height: '32px', 
                              borderRadius: '50%', 
                              background: getAvatarColor(u.name), 
                              color: '#FFF', 
                              display: 'flex', 
                              alignItems: 'center', 
                              justifyContent: 'center', 
                              fontSize: '11px', 
                              fontWeight: 'bold', 
                              flexShrink: 0,
                              boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
                            }}
                          >
                            {getInitials(u.name)}
                          </div>
                        )}
                        <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
                          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                            <span style={{ color: 'var(--hu-fg)' }}>{u.name}</span>
                            {u.suspendedAt && (
                              <span className="hu-chip hu-chip-coral" style={{ height: '16px', padding: '0 4px', fontSize: '9px', fontWeight: 'bold' }}>
                                SUSPENDED
                              </span>
                            )}
                            {u.status === 'verified' && !u.suspendedAt && (
                              <span className="hu-chip hu-chip-green" style={{ height: '16px', padding: '0 4px', fontSize: '9px' }} title="Verified User">
                                ✓
                              </span>
                            )}
                          </div>
                          {u.displayId && (
                            <span className="hu-mono" style={{ fontSize: '10px', color: 'var(--hu-fg-3)' }}>
                              {u.displayId}
                            </span>
                          )}
                        </div>
                      </div>
                    </td>

                    {/* Phone Number */}
                    <td style={appStyles.tableTd} className="hu-mono">
                      {formatPhone(u.phone)}
                    </td>

                    {/* Role Select */}
                    <td style={appStyles.tableTd}>
                      <select 
                        value={u.role}
                        onChange={(e) => handleRoleChange(u.id, e.target.value)}
                        style={{ 
                          fontSize: '11px', 
                          padding: '4px 20px 4px 8px', 
                          borderRadius: 'var(--hu-r-sm)', 
                          border: '1.5px solid var(--hu-border)',
                          background: 'var(--hu-bg-elev)',
                          color: 'var(--hu-fg)',
                          cursor: 'pointer',
                          outline: 'none',
                          fontFamily: 'inherit',
                          transition: 'all 0.2s ease',
                          appearance: 'none',
                          backgroundImage: `url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")`,
                          backgroundRepeat: 'no-repeat',
                          backgroundPosition: 'right 4px center',
                          backgroundSize: '12px'
                        }}
                      >
                        <option value="participant">Participant</option>
                        <option value="organizer">Organizer</option>
                        <option value="both">Both</option>
                      </select>
                    </td>

                    {/* Plan Select */}
                    <td style={appStyles.tableTd}>
                      <select 
                        value={u.plan}
                        onChange={(e) => handlePlanChange(u.id, e.target.value)}
                        style={{ 
                          fontSize: '11.5px', 
                          padding: '4px 20px 4px 8px', 
                          borderRadius: 'var(--hu-r-sm)', 
                          border: '1.5px solid var(--hu-border)',
                          background: 'var(--hu-bg-elev)',
                          color: appStyles.planLabel(u.plan).color,
                          fontWeight: '600',
                          cursor: 'pointer',
                          outline: 'none',
                          fontFamily: 'inherit',
                          transition: 'all 0.2s ease',
                          appearance: 'none',
                          backgroundImage: `url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23A09B8C' stroke='%23A09B8C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")`,
                          backgroundRepeat: 'no-repeat',
                          backgroundPosition: 'right 4px center',
                          backgroundSize: '12px'
                        }}
                      >
                        <option value="free" style={{ color: 'var(--hu-fg-2)' }}>{lang === 'vi' ? 'Miễn phí' : 'Free'}</option>
                        <option value="organizer_pro" style={{ color: 'var(--hu-terra)' }}>{lang === 'vi' ? 'Chủ hụi Pro' : 'Organizer Pro'}</option>
                        <option value="organizer_business" style={{ color: 'var(--hu-ochre)' }}>{lang === 'vi' ? 'Chủ hụi Business' : 'Organizer Business'}</option>
                        <option value="trial_pro_30d" style={{ color: 'var(--hu-forest)' }}>{lang === 'vi' ? 'Trial Pro 30 ngày' : 'Trial Pro 30d'}</option>
                      </select>
                    </td>

                    {/* Status Badge */}
                    <td style={appStyles.tableTd}>
                      <span style={appStyles.verificationBadge(u.status)}>
                        {t(`status.${u.status}`).toUpperCase()}
                      </span>
                    </td>

                    {/* Last Activity Column (Relative Time + Date/Time Tooltip + Status Dot) */}
                    <td style={appStyles.tableTd} className="hu-mono">
                      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }} title={formatDateTime(u.lastActiveAt)}>
                        <span 
                          style={{ 
                            width: '8px', 
                            height: '8px', 
                            borderRadius: '50%', 
                            background: isRecent24h ? 'var(--hu-forest)' : isRecent7d ? 'var(--hu-sky)' : 'var(--hu-fg-3)',
                            flexShrink: 0 
                          }} 
                          title={isRecent24h ? 'Active < 24h' : isRecent7d ? 'Active < 7d' : 'Inactive'}
                        />
                        <div style={{ display: 'flex', flexDirection: 'column', gap: '1px' }}>
                          <span style={{ fontSize: '12px', fontWeight: '600', color: 'var(--hu-fg)' }}>
                            {formatRelativeTime(u.lastActiveAt, lang)}
                          </span>
                          <span style={{ fontSize: '10px', color: 'var(--hu-fg-3)' }}>
                            {formatDateTime(u.lastActiveAt)}
                          </span>
                        </div>
                      </div>
                    </td>

                    {/* Join Date */}
                    <td style={appStyles.tableTd} className="hu-mono">{u.date}</td>

                    {/* Actions */}
                    <td style={appStyles.tableTd}>
                      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px', alignItems: 'center' }}>
                        <button
                          type="button"
                          className="hu-btn hu-btn-primary"
                          style={{
                            minHeight: '28px',
                            padding: '4px 10px',
                            fontSize: '11px',
                            fontWeight: '600',
                          }}
                          disabled={registrySupportOpening}
                          title={t('users.action.message') || 'Message'}
                          onClick={() => openSupportChatForMember(u)}
                        >
                          {t('users.action.message') || 'Message'}
                        </button>
                        <button 
                          className={`hu-btn ${u.suspendedAt ? 'hu-btn-forest' : 'hu-btn-coral'}`} 
                          style={{ 
                            minHeight: '28px', 
                            padding: '4px 12px', 
                            fontSize: '11px', 
                            fontWeight: '600',
                            color: u.suspendedAt ? 'var(--hu-fg-inverse)' : '#FFF'
                          }}
                          onClick={() => handleToggleSuspend(u.id, u.suspendedAt)}
                        >
                          {u.suspendedAt ? 'Unsuspend' : 'Suspend'}
                        </button>
                        <button
                          type="button"
                          className={`hu-btn ${u.features?.organizer_enabled ? 'hu-btn-forest' : 'hu-btn-ghost'}`}
                          style={{
                            minHeight: '28px',
                            padding: '4px 10px',
                            fontSize: '11px',
                            fontWeight: '600',
                          }}
                          title={t('users.feature.organizer_enabled') || 'Organizer Grant'}
                          onClick={() => handleToggleFeature(u.id, 'organizer_enabled', !!u.features?.organizer_enabled)}
                        >
                          {u.features?.organizer_enabled
                            ? (lang === 'vi' ? 'Grant ON' : 'Grant ON')
                            : (lang === 'vi' ? 'Grant OFF' : 'Grant OFF')}
                        </button>
                      </div>
                    </td>
                  </tr>
                );
              })
            )}
          </tbody>
        </table>

        {/* Pagination Controls */}
        {userTotalPages > 1 && (
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 16px', borderTop: '1px solid var(--hu-border)', background: 'var(--hu-bg-elev)' }}>
            <div style={{ fontSize: '12px', color: 'var(--hu-fg-2)' }}>
              {lang === 'vi' 
                ? `Hiển thị ${(safeUserPage - 1) * userPerPage + 1} đến ${Math.min(safeUserPage * userPerPage, sortedUsers.length)} trong số ${sortedUsers.length} thành viên`
                : lang === 'ru'
                ? `Показаны с ${(safeUserPage - 1) * userPerPage + 1} по ${Math.min(safeUserPage * userPerPage, sortedUsers.length)} из ${sortedUsers.length} участников`
                : `Showing ${(safeUserPage - 1) * userPerPage + 1} to ${Math.min(safeUserPage * userPerPage, sortedUsers.length)} of ${sortedUsers.length} members`
              }
            </div>

            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
              <button 
                onClick={() => setUserPage(prev => Math.max(prev - 1, 1))}
                disabled={safeUserPage === 1}
                className="hu-btn hu-btn-ghost hu-btn-sm"
                style={{ minHeight: '32px', fontSize: '12px' }}
              >
                {lang === 'vi' ? 'Trước' : lang === 'ru' ? 'Назад' : 'Previous'}
              </button>
              
              <span style={{ fontSize: '12px', fontWeight: '600', color: 'var(--hu-fg)', padding: '0 8px' }}>
                {safeUserPage} / {userTotalPages}
              </span>

              <button 
                onClick={() => setUserPage(prev => Math.min(prev + 1, userTotalPages))}
                disabled={safeUserPage === userTotalPages}
                className="hu-btn hu-btn-ghost hu-btn-sm"
                style={{ minHeight: '32px', fontSize: '12px' }}
              >
                {lang === 'vi' ? 'Tiếp' : lang === 'ru' ? 'Вперёд' : 'Next'}
              </button>
            </div>
          </div>
        )}

      </div>
    </div>
  );
}

window.CpUsersView = {
  renderUsers,
};