// ───────────────────────────────────────────────────────────
// Huio Control Panel — Bot Chat Logs View (cp-bot-logs-view.jsx)
// ───────────────────────────────────────────────────────────

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

function renderBotLogs({
  lang,
  t,
  appStyles: rawAppStyles,
  botLogs = [],
  botLogsSearch = '',
  setBotLogsSearch,
  botLogsDateFilter = '',
  setBotLogsDateFilter,
  botLogsUserFilter = 'all',
  setBotLogsUserFilter,
  botLogsCurrentPage = 1,
  setBotLogsCurrentPage,
  botLogsPerPage = 15,
  hasMoreBotLogs,
  isLoadingMoreBotLogs,
  loadMoreBotLogs,
  setSelectedBotChat,
  onRefresh,
}) {
  const appStyles = rawAppStyles || window.CP_STYLES || {};
  const tr = typeof t === 'function' ? t : ((k) => k);
  const logs = Array.isArray(botLogs) ? botLogs : [];

  // High-Load Pre-normalization (hoist invariants outside loop for O(N) efficiency)
  const query = (botLogsSearch && typeof botLogsSearch === 'string') ? botLogsSearch.trim().toLowerCase() : '';
  const targetDate = (botLogsDateFilter && typeof botLogsDateFilter === 'string') ? botLogsDateFilter.trim() : '';
  const targetUser = (botLogsUserFilter != null) ? String(botLogsUserFilter) : 'all';

  // Filter bot logs
  const filteredBotLogs = logs.filter(log => {
    if (!log) return false;

    // Date filter with zero-allocation ISO substring optimization & NaN protection
    if (targetDate) {
      let logDateStr = '';
      if (typeof log.created_at === 'string' && log.created_at.length >= 10) {
        logDateStr = log.created_at.substring(0, 10);
      } else if (log.created_at) {
        const d = new Date(log.created_at);
        if (!isNaN(d.getTime())) {
          logDateStr = d.toISOString().substring(0, 10);
        }
      }
      if (logDateStr !== targetDate) return false;
    }

    // User filter
    if (targetUser !== 'all') {
      const tgIdStr = log.telegram_id != null ? String(log.telegram_id) : '';
      if (tgIdStr !== targetUser) return false;
    }

    // Search query
    if (query) {
      const userMsg = (log.message_text || '').toLowerCase();
      const botResp = (log.response_text || '').toLowerCase();
      const tester = (log.tester_name || '').toLowerCase();
      const tgId = log.telegram_id != null ? String(log.telegram_id) : '';
      if (!userMsg.includes(query) && !botResp.includes(query) && !tester.includes(query) && !tgId.includes(query)) {
        return false;
      }
    }
    return true;
  });

  // Unique testers list for filter dropdown (Single-pass Map aggregation with name retention)
  const uniqueTestersMap = new Map();
  for (let i = 0; i < logs.length; i++) {
    const log = logs[i];
    if (log && log.telegram_id != null) {
      const tgIdStr = String(log.telegram_id);
      const existingName = uniqueTestersMap.get(tgIdStr);
      const name = log.tester_name || existingName || `ID: ${tgIdStr}`;
      uniqueTestersMap.set(tgIdStr, name);
    }
  }
  const uniqueTesters = Array.from(uniqueTestersMap.entries()).map(([id, name]) => ({ id, name }));

  // Pagination with boundary protection
  const perPage = Math.max(1, Number(botLogsPerPage) || 15);
  const totalItems = filteredBotLogs.length;
  const totalPages = Math.max(1, Math.ceil(totalItems / perPage));
  const safeCurrentPage = Math.min(Math.max(1, Number(botLogsCurrentPage) || 1), totalPages);
  const startIndex = (safeCurrentPage - 1) * perPage;
  const endIndex = startIndex + perPage;
  const paginatedBotLogs = filteredBotLogs.slice(startIndex, endIndex);

  // Pagination Windowing helper (avoids DOM blowup if totalPages is large)
  const getPaginationPages = () => {
    if (totalPages <= 7) {
      return Array.from({ length: totalPages }, (_, i) => i + 1);
    }
    const pages = [1];
    let start = Math.max(2, safeCurrentPage - 1);
    let end = Math.min(totalPages - 1, safeCurrentPage + 1);
    if (safeCurrentPage <= 3) {
      end = 4;
    } else if (safeCurrentPage >= totalPages - 2) {
      start = totalPages - 3;
    }
    if (start > 2) pages.push('...');
    for (let p = start; p <= end; p++) pages.push(p);
    if (end < totalPages - 1) pages.push('...');
    pages.push(totalPages);
    return pages;
  };

  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ý Chat Bot Telegram' : 'Telegram QA Bot Chat Logs'}
          </h1>
          <p style={{ margin: 0, color: 'var(--hu-fg-2)' }}>
            {lang === 'vi' 
              ? 'Giám sát lịch sử trò chuyện thời gian thực giữa các kiểm thử viên và Trợ lý ảo QA.' 
              : 'Monitor real-time communication histories between app testers and the QA virtual assistant.'}
          </p>
        </div>
        <button
          onClick={() => {
            if (typeof onRefresh === 'function') {
              onRefresh();
            }
          }}
          className="hu-btn hu-btn-primary"
          style={{ display: 'flex', alignItems: 'center', gap: '8px', minHeight: '40px' }}
          id="btn-refresh-bot-logs"
        >
          <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>

      {/* Metrics Dashboard */}
      <div style={appStyles.metricsGrid}>
        <window.CpMetricCard 
          title={lang === 'vi' ? 'Tổng số tin nhắn' : 'Total Messages'} 
          value={totalItems} 
          iconKind="db"
        />
        <window.CpMetricCard 
          title={lang === 'vi' ? 'Số kiểm thử viên hoạt động' : 'Active Testers'} 
          value={uniqueTesters.length} 
          iconKind="users"
        />
      </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', flexWrap: 'wrap', gap: '20px', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px', alignItems: 'center' }}>
            {/* 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={botLogsDateFilter}
                onChange={(e) => { 
                  if (typeof setBotLogsDateFilter === 'function') setBotLogsDateFilter(e.target.value); 
                  if (typeof setBotLogsCurrentPage === 'function') setBotLogsCurrentPage(1); 
                }}
                className="hu-input"
                style={{ height: '34px', fontSize: '12.5px', padding: '0 8px', borderRadius: 'var(--hu-r-md)', border: '1px solid var(--hu-border)', background: 'var(--hu-bg-elev)', color: 'var(--hu-fg)', width: '145px' }}
              />
              {botLogsDateFilter && (
                <button
                  onClick={() => { 
                    if (typeof setBotLogsDateFilter === 'function') setBotLogsDateFilter(''); 
                    if (typeof setBotLogsCurrentPage === 'function') setBotLogsCurrentPage(1); 
                  }}
                  className="hu-btn hu-btn-ghost hu-btn-sm"
                  style={{ minHeight: '34px', padding: '0 8px', fontSize: '11px' }}
                >
                  {lang === 'vi' ? 'Xóa' : 'Clear'}
                </button>
              )}
            </div>

            {/* User/Tester 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' ? 'Kiểm thử viên:' : 'Tester:'}
              </span>
              <select
                value={botLogsUserFilter}
                onChange={(e) => { 
                  if (typeof setBotLogsUserFilter === 'function') setBotLogsUserFilter(e.target.value); 
                  if (typeof setBotLogsCurrentPage === 'function') setBotLogsCurrentPage(1); 
                }}
                className="hu-input"
                style={{ height: '34px', fontSize: '12.5px', 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ả kiểm thử viên' : 'All Testers'}</option>
                {uniqueTesters.map(t => (
                  <option key={t.id} value={t.id}>{t.name} (TG: {t.id})</option>
                ))}
              </select>
            </div>
          </div>

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

        {/* Logs 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: '14px', width: '180px' }}>{lang === 'vi' ? 'Thời gian' : 'Time'}</th>
                <th style={{ ...appStyles.tableTh, padding: '14px', width: '200px' }}>{lang === 'vi' ? 'Kiểm thử viên' : 'Tester'}</th>
                <th style={{ ...appStyles.tableTh, padding: '14px' }}>{lang === 'vi' ? 'Tin nhắn' : 'Message'}</th>
                <th style={{ ...appStyles.tableTh, padding: '14px' }}>{lang === 'vi' ? 'Trả lời của bot' : 'Bot Response'}</th>
                <th style={{ ...appStyles.tableTh, padding: '14px', width: '130px', textAlign: 'center' }}>{lang === 'vi' ? 'Thao tác' : 'Action'}</th>
              </tr>
            </thead>
            <tbody>
              {paginatedBotLogs.length === 0 ? (
                <tr>
                  <td colSpan="5" style={{ padding: '40px', textAlign: 'center', color: 'var(--hu-fg-3)', fontStyle: 'italic' }}>
                    {lang === 'vi' ? 'Không tìm thấy nhật ký chat nào' : 'No bot chat logs found'}
                  </td>
                </tr>
              ) : (
                paginatedBotLogs.map((log, index) => {
                  const dateObj = log.created_at ? new Date(log.created_at) : null;
                  const isValidDate = dateObj && !isNaN(dateObj.getTime());
                  const formattedTime = isValidDate ? dateObj.toTimeString().split(' ')[0] : '—';
                  const formattedDate = isValidDate 
                    ? dateObj.toLocaleDateString(lang === 'vi' ? 'vi-VN' : 'en-US', { month: 'short', day: 'numeric', year: 'numeric' })
                    : '—';
                  
                  const rowKey = log.id || `${log.telegram_id || 'tg'}_${log.created_at || index}`;

                  return (
                    <tr key={rowKey} style={appStyles.tableRowStyle}>
                      <td style={{ ...appStyles.tableTd, padding: '14px' }}>
                        <div style={{ fontWeight: '600', fontSize: '13.5px', color: 'var(--hu-fg)' }}>{formattedTime}</div>
                        <div style={{ fontSize: '11px', color: 'var(--hu-fg-3)', marginTop: '2px' }}>{formattedDate}</div>
                      </td>
                      <td style={{ ...appStyles.tableTd, padding: '14px' }}>
                        <div style={{ fontWeight: '600', color: 'var(--hu-fg)' }}>{log.tester_name || 'Tester'}</div>
                        <div style={{ fontSize: '11px', color: 'var(--hu-fg-3)', fontFamily: 'var(--hu-mono)', marginTop: '2px' }}>TG ID: {log.telegram_id || 'N/A'}</div>
                      </td>
                      <td style={{ ...appStyles.tableTd, padding: '14px', maxWidth: '300px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                        <span style={{ fontSize: '13px' }}>{log.message_text}</span>
                      </td>
                      <td style={{ ...appStyles.tableTd, padding: '14px', maxWidth: '300px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                        <span style={{ fontSize: '13px', color: 'var(--hu-fg-2)' }}>{log.response_text}</span>
                      </td>
                      <td style={{ ...appStyles.tableTd, padding: '14px', textAlign: 'center' }}>
                        <button
                          className="hu-btn hu-btn-ghost hu-btn-sm"
                          onClick={() => setSelectedBotChat && setSelectedBotChat(log)}
                          style={{
                            fontSize: '12px',
                            padding: '4px 12px',
                            minHeight: '28px',
                            borderRadius: 'var(--hu-r-md)',
                            border: '1.5px solid var(--hu-border-strong)',
                            color: 'var(--hu-terra)'
                          }}
                        >
                          {lang === 'vi' ? 'Xem chat' : 'View Chat'}
                        </button>
                      </td>
                    </tr>
                  );
                })
              )}
            </tbody>
          </table>
        </div>

        {/* Load More from Server (Lazy Loading) */}
        {hasMoreBotLogs && (
          <div style={{ display: 'flex', justifyContent: 'center', marginTop: '4px' }}>
            <button
              className="hu-btn hu-btn-ghost hu-card-hover"
              onClick={loadMoreBotLogs}
              disabled={isLoadingMoreBotLogs}
              style={{
                display: 'flex',
                alignItems: 'center',
                gap: '8px',
                padding: '8px 20px',
                borderRadius: 'var(--hu-r-pill)',
                border: '1.5px solid var(--hu-border-strong)',
                background: 'var(--hu-bg-elev)',
                color: 'var(--hu-fg)',
                fontWeight: '600',
                fontSize: '12.5px',
                cursor: isLoadingMoreBotLogs ? 'not-allowed' : 'pointer'
              }}
              id="btn-load-more-bot-logs"
            >
              {isLoadingMoreBotLogs && (
                <span style={{ 
                  width: '14px', 
                  height: '14px', 
                  border: '2px solid currentColor', 
                  borderRightColor: 'transparent', 
                  borderRadius: '50%', 
                  display: 'inline-block', 
                  animation: 'hu-spin 0.7s linear infinite' 
                }} />
              )}
              <span>{isLoadingMoreBotLogs ? (lang === 'vi' ? 'Đang tải...' : 'Loading...') : (lang === 'vi' ? 'Tải thêm từ máy chủ (+30)' : 'Load more from server (+30)')}</span>
            </button>
          </div>
        )}

        {/* Pagination Controls */}
        {totalPages > 1 && (
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '10px' }}>
            <div style={{ fontSize: '13px', color: 'var(--hu-fg-3)' }}>
              {lang === 'vi' 
                ? `Hiển thị ${startIndex + 1}-${Math.min(endIndex, totalItems)} trong tổng số ${totalItems} kết quả`
                : `Showing ${startIndex + 1}-${Math.min(endIndex, totalItems)} of ${totalItems} results`}
            </div>
            <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
              <button
                className="hu-btn hu-btn-ghost"
                onClick={() => setBotLogsCurrentPage && setBotLogsCurrentPage(p => Math.max(p - 1, 1))}
                disabled={safeCurrentPage === 1}
                style={{ padding: '0 12px', minHeight: '32px', fontSize: '12px' }}
              >
                {lang === 'vi' ? 'Trước' : 'Prev'}
              </button>
              {getPaginationPages().map((p, idx) => {
                if (p === '...') {
                  return (
                    <span key={`dots-${idx}`} style={{ padding: '0 4px', color: 'var(--hu-fg-3)', fontSize: '12px' }}>
                      …
                    </span>
                  );
                }
                return (
                  <button
                    key={p}
                    className={`hu-btn ${safeCurrentPage === p ? 'hu-btn-primary' : 'hu-btn-ghost'}`}
                    onClick={() => setBotLogsCurrentPage && setBotLogsCurrentPage(p)}
                    style={{ padding: '0 10px', minHeight: '32px', minWidth: '32px', fontSize: '12px' }}
                  >
                    {p}
                  </button>
                );
              })}
              <button
                className="hu-btn hu-btn-ghost"
                onClick={() => setBotLogsCurrentPage && setBotLogsCurrentPage(p => Math.min(p + 1, totalPages))}
                disabled={safeCurrentPage === totalPages}
                style={{ padding: '0 12px', minHeight: '32px', fontSize: '12px' }}
              >
                {lang === 'vi' ? 'Sau' : 'Next'}
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

window.CpBotLogsView = {
  renderBotLogs,
};