// ───────────────────────────────────────────────────────────
// Huio Control Panel — Waitlist Queue View (cp-waitlist-view.jsx)
// ───────────────────────────────────────────────────────────

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

// Senior High-Load Optimization: Static style hoisting to eliminate heap allocations during list rendering
const STATIC_WRAPPER_CARD_STYLE = { padding: 0, overflow: 'hidden' };
const STATIC_EMPTY_BOX_STYLE = { padding: '40px', textAlign: 'center', color: 'var(--hu-fg-3)' };
const STATIC_ROW_STYLE = { borderBottom: '1px solid var(--hu-border-light)' };
const STATIC_BADGE_BASE = {
  display: 'inline-block',
  padding: '2px 8px',
  borderRadius: '4px',
  fontSize: '11px',
  fontWeight: 'bold',
};

// O(1) status badge theme lookup
const BADGE_STATUS_THEMES = {
  invited: { backgroundColor: '#fff3f0', color: '#cc2200' },
  accepted: { backgroundColor: '#d4f0d4', color: '#1a6a1a' },
  default: { backgroundColor: '#e0e0e0', color: '#555555' },
};

// Safe date formatters preventing runtime crashes on invalid/missing ISO strings
function formatRequestedDate(val, locale) {
  if (!val) return '—';
  try {
    const d = new Date(val);
    return isNaN(d.getTime()) ? '—' : d.toLocaleDateString(locale);
  } catch {
    return '—';
  }
}

function formatExpiresDateTime(val, locale) {
  if (!val) return '—';
  try {
    const d = new Date(val);
    return isNaN(d.getTime()) ? '—' : d.toLocaleString(locale);
  } catch {
    return '—';
  }
}

function renderWaitlist({
  lang = 'vi',
  t: rawT,
  appStyles: rawAppStyles,
  waitlistEntries: rawWaitlistEntries = [],
}) {
  // Defensive fallbacks for shell utilities and data structures
  const appStyles = rawAppStyles || window.CP_STYLES || {};
  const t = typeof rawT === 'function' ? rawT : (k) => k;
  const waitlistEntries = Array.isArray(rawWaitlistEntries) ? rawWaitlistEntries : [];
  const isEn = lang === 'en';
  const locale = isEn ? 'en-GB' : 'vi-VN';

  return (
    <div style={appStyles.viewWrapper}>
      <div style={appStyles.welcomeBanner}>
        <h1 className="hu-h1 hu-display" style={{ margin: '0 0 6px 0' }}>{t('nav.waitlist')}</h1>
        <p style={{ margin: 0, color: 'var(--hu-fg-2)' }}>
          {isEn
            ? 'Manage waitlist registrations, active invitations, and queue order across all groups.'
            : 'Quản lý danh sách đăng ký chờ, lời mời đang hoạt động và thứ tự hàng đợi trên toàn bộ các nhóm.'}
        </p>
      </div>
      
      <div className="hu-card hu-card-3d-sm" style={STATIC_WRAPPER_CARD_STYLE}>
        {waitlistEntries.length === 0 ? (
          <div style={STATIC_EMPTY_BOX_STYLE}>
            {isEn ? 'No waitlist entries found.' : 'Không tìm thấy lượt đăng ký hàng chờ nào.'}
          </div>
        ) : (
          <table style={appStyles.tableStyle}>
            <thead>
              <tr style={appStyles.tableHeaderRow}>
                <th style={appStyles.tableTh}>{isEn ? 'Group' : 'Dây hụi'}</th>
                <th style={appStyles.tableTh}>{isEn ? 'Candidate' : 'Ứng viên'}</th>
                <th style={appStyles.tableTh}>{isEn ? 'Phone' : 'Số điện thoại'}</th>
                <th style={appStyles.tableTh}>{isEn ? 'Requested At' : 'Ngày đăng ký'}</th>
                <th style={appStyles.tableTh}>{isEn ? 'Status' : 'Trạng thái'}</th>
                <th style={appStyles.tableTh}>{isEn ? 'Expires At' : 'Hết hạn'}</th>
              </tr>
            </thead>
            <tbody>
              {waitlistEntries.map((entry, idx) => {
                if (!entry) return null;

                const entryIdStr = entry.id != null ? String(entry.id) : `waitlist_${idx}`;
                const rawStatus = typeof entry.status === 'string' ? entry.status : '';
                const normalizedStatus = rawStatus.toLowerCase();
                const theme = BADGE_STATUS_THEMES[normalizedStatus] || BADGE_STATUS_THEMES.default;
                const isInvited = normalizedStatus === 'invited';

                const badgeStyle = {
                  ...STATIC_BADGE_BASE,
                  backgroundColor: theme.backgroundColor,
                  color: theme.color,
                };

                return (
                  <tr key={entryIdStr} style={STATIC_ROW_STYLE}>
                    <td style={appStyles.tableTd}>
                      <strong>{entry.hui_groups?.name || (isEn ? 'Unknown Group' : 'Dây hụi không rõ')}</strong>
                    </td>
                    <td style={appStyles.tableTd}>
                      <strong>{entry.profiles?.name || (isEn ? 'Unknown' : 'Ẩn danh')}</strong>
                    </td>
                    <td style={appStyles.tableTd}>{entry.profiles?.phone || '—'}</td>
                    <td style={appStyles.tableTd}>{formatRequestedDate(entry.requested_at, locale)}</td>
                    <td style={appStyles.tableTd}>
                      <span className={`status-badge badge-${rawStatus}`} style={badgeStyle}>
                        {(rawStatus || 'UNKNOWN').toUpperCase()}
                      </span>
                    </td>
                    <td style={appStyles.tableTd}>
                      {isInvited && entry.expires_at ? formatExpiresDateTime(entry.expires_at, locale) : '—'}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
}

window.CpWaitlistView = {
  renderWaitlist,
};