// ───────────────────────────────────────────────────────────
// Huio Control Panel — Live Support View (cp-support-view.jsx)
// ───────────────────────────────────────────────────────────

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

function renderSupport({
  lang,
  t,
  appStyles: rawAppStyles,
  supportQueue = [],
  supportLoading,
  supportFilter,
  setSupportFilter,
  supportSearchQuery,
  setSupportSearchQuery,
  selectedSupportConv,
  setSelectedSupportConv,
  fetchSupportQueue,
  supabaseClient,
}) {
  const appStyles = rawAppStyles || window.CP_STYLES || {};

  // Safe data array & pre-normalized filter criteria (O(1) loop invariant hoisting)
  const queueList = Array.isArray(supportQueue) ? supportQueue : [];
  const q = (typeof supportSearchQuery === 'string') ? supportSearchQuery.trim().toLowerCase() : '';
  const totalCount = queueList.length;

  // Single-pass computation of metrics (0 intermediate array allocations)
  let waitingCount = 0;
  for (let i = 0; i < totalCount; i++) {
    if (queueList[i]?.is_waiting_reply) waitingCount++;
  }

  // Filters with defensive null/type safety on string properties
  const filteredQueue = queueList.filter(conv => {
    if (!conv) return false;
    if (!q) return true;
    const name = (conv.user_name || '').toLowerCase();
    const phone = String(conv.user_phone || '');
    const msg = (conv.last_message_text || '').toLowerCase();
    return name.includes(q) || phone.includes(q) || msg.includes(q);
  });

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

      {/* Quick Metrics Bar */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: '16px', marginBottom: '20px' }}>
        <div className="hu-card hu-card-3d-sm" style={{ padding: '16px', display: 'flex', alignItems: 'center', gap: '14px' }}>
          <div style={{ fontSize: '28px', background: 'rgba(217, 83, 79, 0.12)', borderRadius: '12px', width: '48px', height: '48px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            ⏳
          </div>
          <div>
            <div style={{ fontSize: '11px', color: 'var(--hu-fg-3)', textTransform: 'uppercase', fontWeight: 'bold' }}>
              {t('support.stats.waiting') || 'Waiting for reply'}
            </div>
            <div style={{ fontSize: '24px', fontWeight: '800', color: waitingCount > 0 ? 'var(--hu-rust)' : 'var(--hu-fg)' }}>
              {waitingCount}
            </div>
          </div>
        </div>

        <div className="hu-card hu-card-3d-sm" style={{ padding: '16px', display: 'flex', alignItems: 'center', gap: '14px' }}>
          <div style={{ fontSize: '28px', background: 'rgba(74, 144, 226, 0.12)', borderRadius: '12px', width: '48px', height: '48px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            💬
          </div>
          <div>
            <div style={{ fontSize: '11px', color: 'var(--hu-fg-3)', textTransform: 'uppercase', fontWeight: 'bold' }}>
              {t('support.stats.total') || 'Total conversations'}
            </div>
            <div style={{ fontSize: '24px', fontWeight: '800', color: 'var(--hu-fg)' }}>
              {totalCount}
            </div>
          </div>
        </div>
      </div>

      {/* Controls Bar */}
      <div className="hu-card hu-card-3d-sm" style={{ padding: '16px', marginBottom: '20px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '12px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
            {/* Filter Buttons */}
            <div style={{ display: 'flex', background: 'var(--hu-bg-elev)', borderRadius: 'var(--hu-r-md)', padding: '3px', border: '1px solid var(--hu-border)' }}>
              <button
                type="button"
                className={`hu-btn ${supportFilter === 'all' ? 'hu-btn-primary' : 'hu-btn-ghost'}`}
                onClick={() => setSupportFilter('all')}
                style={{ minHeight: '32px', padding: '0 14px', fontSize: '12px' }}
              >
                {t('support.filter.all') || 'All'} ({totalCount})
              </button>
              <button
                type="button"
                className={`hu-btn ${supportFilter === 'waiting' ? 'hu-btn-primary' : 'hu-btn-ghost'}`}
                onClick={() => setSupportFilter('waiting')}
                style={{ minHeight: '32px', padding: '0 14px', fontSize: '12px', color: supportFilter === 'waiting' ? '#fff' : (waitingCount > 0 ? 'var(--hu-rust)' : 'inherit') }}
              >
                🔴 {t('support.filter.waiting') || 'Waiting'} ({waitingCount})
              </button>
            </div>

            <button
              type="button"
              className="hu-btn hu-btn-ghost"
              onClick={() => fetchSupportQueue(supportFilter)}
              disabled={supportLoading}
              style={{ minHeight: '34px', padding: '0 12px', fontSize: '12px' }}
            >
              {supportLoading ? '⏳ ...' : (lang === 'vi' ? '🔄 Làm mới' : '🔄 Refresh')}
            </button>
          </div>

          {/* Search query */}
          <div className="hu-input-wrapper" style={{ width: '280px', display: 'flex', alignItems: 'center', height: '36px' }}>
            <input
              type="text"
              value={supportSearchQuery}
              onChange={(e) => setSupportSearchQuery(e.target.value)}
              placeholder={t('common.search')}
              className="hu-input"
              style={{ height: '100%', fontSize: '13px' }}
            />
          </div>
        </div>
      </div>

      {/* Support Queue List Table */}
      <div className="hu-card hu-card-3d-sm" style={{ padding: '20px' }}>
        <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: '14px', width: '220px' }}>{t('support.col.user') || 'User'}</th>
                <th style={{ ...appStyles.tableTh, padding: '14px' }}>{t('support.col.last_message') || 'Last message'}</th>
                <th style={{ ...appStyles.tableTh, padding: '14px', width: '160px' }}>{t('support.col.time') || 'Time'}</th>
                <th style={{ ...appStyles.tableTh, padding: '14px', width: '150px', textAlign: 'center' }}>{t('support.col.status') || 'Status'}</th>
                <th style={{ ...appStyles.tableTh, padding: '14px', width: '130px', textAlign: 'center' }}>{lang === 'vi' ? 'Hành động' : 'Actions'}</th>
              </tr>
            </thead>
            <tbody>
              {supportLoading && queueList.length === 0 ? (
                <tr>
                  <td colSpan="5" style={{ padding: '48px 20px', textAlign: 'center', color: 'var(--hu-fg-3)' }}>
                    <div style={{ fontSize: '28px', marginBottom: '8px' }}>⏳</div>
                    <div style={{ fontWeight: '600', fontSize: '13.5px' }}>
                      {lang === 'vi' ? 'Đang tải hàng đợi hỗ trợ...' : 'Loading support queue...'}
                    </div>
                  </td>
                </tr>
              ) : filteredQueue.length === 0 ? (
                <tr>
                  <td colSpan="5" style={{ padding: '48px 20px', textAlign: 'center' }}>
                    <div style={{ fontSize: '32px', marginBottom: '8px' }}>🎉</div>
                    <div style={{ fontWeight: '700', fontSize: '15px', color: 'var(--hu-fg)', marginBottom: '4px' }}>
                      {supportFilter === 'waiting'
                        ? (lang === 'vi' ? 'Không có yêu cầu nào đang chờ phản hồi!' : 'All support requests have been answered!')
                        : (t('support.empty') || 'No support conversations found')}
                    </div>
                    <div style={{ fontSize: '12.5px', color: 'var(--hu-fg-3)' }}>
                      {lang === 'vi' ? 'Hệ thống hỗ trợ đang hoạt động bình thường.' : 'All incoming messages are handled.'}
                    </div>
                  </td>
                </tr>
              ) : (
                filteredQueue.map((conv, index) => {
                  const rawDate = conv.last_message_at || conv.created_at;
                  const dateObj = rawDate ? new Date(rawDate) : null;
                  const isInvalidDate = !dateObj || isNaN(dateObj.getTime());
                  const timeStr = isInvalidDate ? '—' : dateObj.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
                  const dateStr = isInvalidDate ? '—' : dateObj.toLocaleDateString(lang === 'vi' ? 'vi-VN' : 'en-US', { month: 'short', day: 'numeric' });
                  const unreadNum = Number(conv.unread_count || 0);
                  const rowKey = conv.conversation_id || `conv_${conv.user_id || index}_${index}`;
                  const displayName = conv.user_name || t('support.anonymous') || 'Anonymous';
                  const avatarInitial = String(displayName).charAt(0).toUpperCase() || 'U';

                  return (
                    <tr
                      key={rowKey}
                      style={{
                        ...appStyles.tableRowStyle,
                        background: conv.is_waiting_reply ? 'rgba(217, 83, 79, 0.03)' : 'inherit',
                        transition: 'background 0.15s ease',
                        cursor: 'pointer'
                      }}
                      onClick={() => setSelectedSupportConv(conv)}
                      onMouseEnter={(e) => {
                        e.currentTarget.style.background = conv.is_waiting_reply ? 'rgba(217, 83, 79, 0.08)' : 'var(--hu-bg-elev)';
                      }}
                      onMouseLeave={(e) => {
                        e.currentTarget.style.background = conv.is_waiting_reply ? 'rgba(217, 83, 79, 0.03)' : 'inherit';
                      }}
                    >
                      <td style={{ ...appStyles.tableTd, padding: '14px' }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                          <div style={{
                            width: '38px',
                            height: '38px',
                            borderRadius: '50%',
                            background: 'var(--hu-bg-card)',
                            border: '1.5px solid var(--hu-border)',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            overflow: 'hidden',
                            fontWeight: 'bold',
                            fontSize: '14px',
                            color: 'var(--hu-fg)',
                            flexShrink: 0
                          }}>
                            {conv.user_avatar ? (
                              <img src={conv.user_avatar} alt={displayName} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                            ) : (
                              avatarInitial
                            )}
                          </div>
                          <div>
                            <div style={{ fontWeight: '700', color: 'var(--hu-fg)', fontSize: '13.5px', display: 'flex', alignItems: 'center', gap: '6px' }}>
                              <span>{displayName}</span>
                              {unreadNum > 0 && (
                                <span style={{
                                  fontSize: '10.5px',
                                  padding: '1px 6px',
                                  borderRadius: '10px',
                                  background: 'var(--hu-rust)',
                                  color: '#FFFFFF',
                                  fontWeight: '700'
                                }}>
                                  {unreadNum}
                                </span>
                              )}
                            </div>
                            <div style={{ fontSize: '11.5px', color: 'var(--hu-fg-3)', marginTop: '2px' }}>
                              {conv.user_phone ? conv.user_phone : 'No phone'}
                            </div>
                          </div>
                        </div>
                      </td>

                      <td style={{ ...appStyles.tableTd, padding: '14px' }}>
                        <div style={{
                          fontSize: '13px',
                          color: conv.is_waiting_reply ? 'var(--hu-fg)' : 'var(--hu-fg-2)',
                          fontWeight: conv.is_waiting_reply ? '600' : 'normal',
                          whiteSpace: 'nowrap',
                          overflow: 'hidden',
                          textOverflow: 'ellipsis',
                          maxWidth: '420px'
                        }}>
                          {conv.last_message_text || (
                            <span style={{ color: 'var(--hu-fg-3)', fontStyle: 'italic' }}>
                              {lang === 'vi' ? 'Chưa có tin nhắn' : 'No messages'}
                            </span>
                          )}
                        </div>
                      </td>

                      <td style={{ ...appStyles.tableTd, padding: '14px' }}>
                        <div style={{ fontWeight: '600', fontSize: '13px', color: 'var(--hu-fg)' }}>{timeStr}</div>
                        <div style={{ fontSize: '11px', color: 'var(--hu-fg-3)', marginTop: '2px' }}>{dateStr}</div>
                      </td>

                      <td style={{ ...appStyles.tableTd, padding: '14px', textAlign: 'center' }}>
                        {conv.is_waiting_reply ? (
                          <span style={{
                            display: 'inline-flex',
                            alignItems: 'center',
                            gap: '4px',
                            padding: '4px 10px',
                            borderRadius: '12px',
                            fontSize: '11.5px',
                            fontWeight: '700',
                            background: 'rgba(217, 83, 79, 0.12)',
                            color: 'var(--hu-rust)'
                          }}>
                            🔴 {t('support.status.waiting') || 'Waiting'}
                          </span>
                        ) : (
                          <span style={{
                            display: 'inline-flex',
                            alignItems: 'center',
                            gap: '4px',
                            padding: '4px 10px',
                            borderRadius: '12px',
                            fontSize: '11.5px',
                            fontWeight: '600',
                            background: 'rgba(79, 107, 61, 0.12)',
                            color: 'var(--hu-forest)'
                          }}>
                            ✓ {t('support.status.replied') || 'Replied'}
                          </span>
                        )}
                      </td>

                      <td style={{ ...appStyles.tableTd, padding: '14px', textAlign: 'center' }}>
                        <button
                          type="button"
                          className="hu-btn hu-btn-primary"
                          onClick={(e) => {
                            e.stopPropagation();
                            setSelectedSupportConv(conv);
                          }}
                          style={{ minHeight: '32px', padding: '0 12px', fontSize: '12px' }}
                        >
                          {t('support.action.open_chat') || 'Open'}
                        </button>
                      </td>
                    </tr>
                  );
                })
              )}
            </tbody>
          </table>
        </div>
      </div>

      {/* Support Chat Modal */}
      <window.CpSupportChatModal
        isOpen={selectedSupportConv !== null}
        onClose={() => setSelectedSupportConv(null)}
        title={lang === 'vi' ? 'Hỗ trợ khách hàng' : 'Live Support'}
        userName={selectedSupportConv?.user_name}
        userPhone={selectedSupportConv?.user_phone}
        waitingBadge={selectedSupportConv?.is_waiting_reply}
      >
        {selectedSupportConv && (
          <window.CpSupportChatWidget
            conversationId={selectedSupportConv.conversation_id}
            userId={selectedSupportConv.user_id}
            supabaseClient={supabaseClient}
            onStatusUpdate={() => fetchSupportQueue(supportFilter)}
          />
        )}
      </window.CpSupportChatModal>
    </div>
  );
}

window.CpSupportView = {
  renderSupport,
};