// ───────────────────────────────────────────────────────────
// Huio Control Panel — Activity Logs View (cp-activity-logs-view.jsx)
// ───────────────────────────────────────────────────────────

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

// Static badge dictionary for O(1) lookup without branching overhead
const LEVEL_BADGES = {
  success: 'hu-chip hu-chip-teal',
  warning: 'hu-chip hu-chip-ochre',
  system: 'hu-chip hu-chip-coral',
};

const CAT_BADGES = {
  user: 'hu-chip hu-chip-sky',
  group: 'hu-chip hu-chip-green',
  financial: 'hu-chip hu-chip-terra',
  error: 'hu-chip hu-chip-coral',
};

const CATEGORIES = ['all', 'user', 'group', 'member', 'financial', 'analytics', 'error'];

function renderActivityLogs({
  lang = 'vi',
  t: rawT,
  appStyles: rawAppStyles,
  logs: rawLogs = [],
  users: rawUsers = [],
  logsCategoryFilter = 'all',
  setLogsCategoryFilter,
  logsTypeFilter = 'all',
  logsSearchQuery = '',
  setLogsSearchQuery,
  logsCurrentPage = 1,
  setLogsCurrentPage,
  logsPerPage = 10,
  logsDateFilter = '',
  setLogsDateFilter,
  logsUserFilter = 'all',
  setLogsUserFilter,
  supabaseClient,
  loadRealtimeData,
}) {
  const appStyles = rawAppStyles || window.CP_STYLES || {};
  const t = typeof rawT === 'function' ? rawT : (k) => k;
  const logs = Array.isArray(rawLogs) ? rawLogs : [];
  const users = Array.isArray(rawUsers) ? rawUsers : [];

  // High-Load Performance: Pre-normalize filters outside iteration to eliminate repeated allocations
  const normalizedSearch = typeof logsSearchQuery === 'string' ? logsSearchQuery.trim().toLowerCase() : '';
  const hasSearch = normalizedSearch.length > 0;
  const normalizedUserFilter = typeof logsUserFilter === 'string' ? logsUserFilter.trim().toLowerCase() : 'all';
  const hasUserFilter = normalizedUserFilter !== 'all' && normalizedUserFilter.length > 0;

  // Zero-allocation pre-calculation of errors & warnings
  let errorLogsCount = 0;
  for (let i = 0; i < logs.length; i++) {
    const l = logs[i];
    if (l && (l.type === 'system' || l.type === 'warning')) {
      errorLogsCount++;
    }
  }

  // Single-pass defensive filter
  const filteredLogs = logs.filter(log => {
    if (!log) return false;
    // Category filter
    if (logsCategoryFilter !== 'all' && log.category !== logsCategoryFilter) return false;
    // Log Type/Severity filter
    if (logsTypeFilter !== 'all' && log.type !== logsTypeFilter) return false;
    // Date filter
    if (logsDateFilter && log.date !== logsDateFilter) return false;
    // User filter
    if (hasUserFilter) {
      const userId = log.userId ? String(log.userId) : '';
      const userName = typeof log.userName === 'string' ? log.userName.toLowerCase() : '';
      const logText = typeof log.text === 'string' ? log.text.toLowerCase() : '';
      const matchUser = (userId === logsUserFilter) || 
                        (userName && userName === normalizedUserFilter) ||
                        (logText && logText.includes(normalizedUserFilter));
      if (!matchUser) return false;
    }
    // Search query
    if (hasSearch) {
      const text = typeof log.text === 'string' ? log.text.toLowerCase() : (log.text != null ? String(log.text).toLowerCase() : '');
      if (!text.includes(normalizedSearch)) return false;
    }
    return true;
  });

  // Safe pagination math with upper and lower boundary protection
  const totalItems = filteredLogs.length;
  const totalPages = Math.max(1, Math.ceil(totalItems / logsPerPage) || 1);
  const safeCurrentPage = Math.min(Math.max(1, logsCurrentPage), totalPages);
  const startIndex = (safeCurrentPage - 1) * logsPerPage;
  const endIndex = startIndex + logsPerPage;
  const paginatedLogs = filteredLogs.slice(startIndex, endIndex);

  return (
    <div style={appStyles.viewWrapper}>
      <div style={{ ...appStyles.welcomeBanner, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <h1 className="hu-h1 hu-display" style={{ margin: '0 0 6px 0' }}>
            {lang === 'vi' ? 'Nhật ký hoạt động hệ thống' : 'System Activity Logs'}
          </h1>
          <p style={{ margin: 0, color: 'var(--hu-fg-2)' }}>
            {lang === 'vi' 
              ? 'Giám sát thời gian thực toàn bộ hoạt động của người dùng, tài chính và hệ thống.' 
              : 'Real-time telemetry of user actions, transactions, and system diagnostics.'}
          </p>
        </div>
        <button
          onClick={() => {
            if (supabaseClient && typeof loadRealtimeData === 'function') {
              loadRealtimeData(supabaseClient);
            }
          }}
          className="hu-btn hu-btn-primary"
          style={{ display: 'flex', alignItems: 'center', gap: '8px', minHeight: '40px' }}
        >
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38l5.67-5.67"/>
          </svg>
          <span>{lang === 'vi' ? 'Làm mới' : 'Refresh'}</span>
        </button>
      </div>

      {/* Quick Metrics */}
      <div style={appStyles.metricsGrid}>
        <window.CpMetricCard 
          title={lang === 'vi' ? 'Tổng số nhật ký' : 'Total Logs'} 
          value={totalItems} 
          iconKind="db"
        />
        <window.CpMetricCard 
          title={lang === 'vi' ? 'Lỗi & Cảnh báo' : 'Errors & Warnings'} 
          value={errorLogsCount} 
          iconKind="cccd"
          isPositive={false}
        />
      </div>

      {/* Logs Table Card */}
      <div className="hu-card hu-card-3d-sm" style={{ padding: '24px', display: 'flex', flexDirection: 'column', gap: '20px' }}>
        
        {/* Filters Row */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px', justifyContent: 'space-between', alignItems: 'center' }}>
            <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap', alignItems: 'center' }}>
              
              {/* Category Filter Pills */}
              <span style={{ fontSize: '11px', fontWeight: '700', color: 'var(--hu-fg-3)', textTransform: 'uppercase' }}>
                {lang === 'vi' ? 'Phân loại:' : 'Category:'}
              </span>
              {CATEGORIES.map(cat => (
                <button
                  key={cat}
                  onClick={() => { 
                    if (typeof setLogsCategoryFilter === 'function') setLogsCategoryFilter(cat); 
                    if (typeof setLogsCurrentPage === 'function') setLogsCurrentPage(1); 
                  }}
                  className={`hu-btn hu-btn-sm ${logsCategoryFilter === cat ? 'hu-btn-primary' : 'hu-btn-ghost'}`}
                  style={{ fontSize: '11px', padding: '4px 10px', minHeight: '28px' }}
                >
                  {cat.toUpperCase()}
                </button>
              ))}

            </div>

            {/* Search Bar */}
            <div className="hu-input-wrapper" style={{ width: '280px', display: 'flex', alignItems: 'center', height: '36px' }}>
              <input
                type="text"
                value={logsSearchQuery}
                onChange={(e) => { 
                  if (typeof setLogsSearchQuery === 'function') setLogsSearchQuery(e.target.value); 
                  if (typeof setLogsCurrentPage === 'function') setLogsCurrentPage(1); 
                }}
                placeholder={t('common.search')}
                className="hu-input"
                style={{ height: '100%', fontSize: '13px' }}
              />
            </div>
          </div>

          {/* Additional Filters Row (Date and User) */}
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px', alignItems: 'center', borderTop: '1px solid var(--hu-border)', paddingTop: '16px' }}>
            {/* Date Filter */}
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
              <span style={{ fontSize: '11.5px', fontWeight: '700', color: 'var(--hu-fg-3)', textTransform: 'uppercase' }}>
                {lang === 'vi' ? 'Ngày:' : 'Date:'}
              </span>
              <input
                type="date"
                value={logsDateFilter}
                onChange={(e) => { 
                  if (typeof setLogsDateFilter === 'function') setLogsDateFilter(e.target.value); 
                  if (typeof setLogsCurrentPage === 'function') setLogsCurrentPage(1); 
                }}
                className="hu-input"
                style={{ height: '32px', fontSize: '12px', padding: '0 8px', borderRadius: 'var(--hu-r-md)', border: '1px solid var(--hu-border)', background: 'var(--hu-bg-elev)', color: 'var(--hu-fg)', width: '135px' }}
              />
              {logsDateFilter && (
                <button
                  onClick={() => { 
                    if (typeof setLogsDateFilter === 'function') setLogsDateFilter(''); 
                    if (typeof setLogsCurrentPage === 'function') setLogsCurrentPage(1); 
                  }}
                  className="hu-btn hu-btn-ghost hu-btn-sm"
                  style={{ minHeight: '32px', padding: '0 8px', fontSize: '11px' }}
                >
                  {lang === 'vi' ? 'Xóa' : 'Clear'}
                </button>
              )}
            </div>

            {/* User Filter */}
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
              <span style={{ fontSize: '11.5px', fontWeight: '700', color: 'var(--hu-fg-3)', textTransform: 'uppercase' }}>
                {lang === 'vi' ? 'Thành viên:' : 'User:'}
              </span>
              <select
                value={logsUserFilter}
                onChange={(e) => { 
                  if (typeof setLogsUserFilter === 'function') setLogsUserFilter(e.target.value); 
                  if (typeof setLogsCurrentPage === 'function') setLogsCurrentPage(1); 
                }}
                className="hu-input"
                style={{ height: '32px', fontSize: '12px', padding: '0 8px', borderRadius: 'var(--hu-r-md)', border: '1px solid var(--hu-border)', background: 'var(--hu-bg-elev)', color: 'var(--hu-fg)', minWidth: '180px', maxWidth: '280px' }}
              >
                <option value="all">{lang === 'vi' ? 'Tất cả thành viên' : 'All Users'}</option>
                {users.map((u, idx) => (
                  <option key={u.id || ('user_' + idx)} value={u.id || ''}>
                    {u.name || 'Anonymous'} ({u.phone || 'N/A'})
                  </option>
                ))}
              </select>
            </div>
          </div>
        </div>

        {/* Logs List Table */}
        <div style={{ overflowX: 'auto', border: '1px solid var(--hu-border)', borderRadius: 'var(--hu-r-md)', background: 'var(--hu-bg-elev)' }}>
          <table style={{ width: '100%', borderCollapse: 'collapse', textAlign: 'left' }}>
            <thead>
              <tr style={{ borderBottom: '1.5px solid var(--hu-border-strong)', background: 'rgba(28,26,21,0.02)' }}>
                <th style={{ ...appStyles.tableTh, padding: '12px' }}>{lang === 'vi' ? 'Thời gian' : 'Time'}</th>
                <th style={{ ...appStyles.tableTh, padding: '12px' }}>{lang === 'vi' ? 'Mức độ' : 'Level'}</th>
                <th style={{ ...appStyles.tableTh, padding: '12px' }}>{lang === 'vi' ? 'Phân loại' : 'Category'}</th>
                <th style={{ ...appStyles.tableTh, padding: '12px' }}>{lang === 'vi' ? 'Chi tiết hoạt động' : 'Operation Details'}</th>
              </tr>
            </thead>
            <tbody>
              {paginatedLogs.length === 0 ? (
                <tr>
                  <td colSpan="4" style={{ padding: '24px', textAlign: 'center', color: 'var(--hu-fg-3)', fontSize: '13.5px' }}>
                    {lang === 'vi' ? 'Không tìm thấy nhật ký hoạt động nào.' : 'No activity logs found.'}
                  </td>
                </tr>
              ) : (
                paginatedLogs.map((log, idx) => {
                  const levelBadge = LEVEL_BADGES[log.type] || 'hu-chip hu-chip-gray';
                  const catBadge = CAT_BADGES[log.category] || 'hu-chip hu-chip-gray';

                  return (
                    <tr key={log.id || ('log_' + idx)} style={appStyles.tableRowStyle}>
                      <td style={{ ...appStyles.tableTd, padding: '10px 12px', width: '110px', verticalAlign: 'middle' }} className="hu-mono">
                        <div style={{ fontSize: '13.5px', fontWeight: '600', color: 'var(--hu-fg)' }}>{log.time || '--:--:--'}</div>
                        <div style={{ fontSize: '10px', color: 'var(--hu-fg-3)', marginTop: '2.5px', fontWeight: '500' }}>{log.date || '----/--/--'}</div>
                      </td>
                      <td style={{ ...appStyles.tableTd, padding: '10px 12px', width: '80px' }}>
                        <span className={levelBadge} style={{ fontSize: '9px', display: 'block', textTransform: 'uppercase', textAlign: 'center' }}>
                          {log.type === 'system' ? 'CRITICAL' : (log.type ? log.type.toUpperCase() : 'INFO')}
                        </span>
                      </td>
                      <td style={{ ...appStyles.tableTd, padding: '10px 12px', width: '90px' }}>
                        <span className={catBadge} style={{ fontSize: '9px', display: 'block', textTransform: 'uppercase', textAlign: 'center' }}>
                          {log.category || 'system'}
                        </span>
                      </td>
                      <td style={{ ...appStyles.tableTd, padding: '10px 12px', fontSize: '12.5px', fontWeight: '500' }}>
                        {log.text || ''}
                      </td>
                    </tr>
                  );
                })
              )}
            </tbody>
          </table>
        </div>

        {/* Pagination Controls */}
        {totalPages > 1 && (
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '12px' }}>
            <span style={{ fontSize: '12.5px', color: 'var(--hu-fg-3)' }}>
              {lang === 'vi' 
                ? `Hiển thị ${startIndex + 1} - ${Math.min(endIndex, totalItems)} trong tổng số ${totalItems} nhật ký`
                : `Showing ${startIndex + 1} - ${Math.min(endIndex, totalItems)} of ${totalItems} logs`}
            </span>
            <div style={{ display: 'flex', gap: '8px' }}>
              <button
                onClick={() => {
                  if (typeof setLogsCurrentPage === 'function') {
                    setLogsCurrentPage(prev => Math.max(prev - 1, 1));
                  }
                }}
                disabled={safeCurrentPage === 1}
                className="hu-btn hu-btn-ghost hu-btn-sm"
                style={{ minHeight: '32px' }}
              >
                {lang === 'vi' ? 'Trước' : 'Previous'}
              </button>
              <span style={{ display: 'flex', alignItems: 'center', fontSize: '12.5px', fontWeight: '600', padding: '0 8px' }}>
                {safeCurrentPage} / {totalPages}
              </span>
              <button
                onClick={() => {
                  if (typeof setLogsCurrentPage === 'function') {
                    setLogsCurrentPage(prev => Math.min(prev + 1, totalPages));
                  }
                }}
                disabled={safeCurrentPage === totalPages}
                className="hu-btn hu-btn-ghost hu-btn-sm"
                style={{ minHeight: '32px' }}
              >
                {lang === 'vi' ? 'Tiếp' : 'Next'}
              </button>
            </div>
          </div>
        )}

      </div>
    </div>
  );
}

window.CpActivityLogsView = {
  renderActivityLogs,
};