// ───────────────────────────────────────────────────────────
// Huio Control Panel — User Feedback View (cp-feedback-view.jsx)
// ───────────────────────────────────────────────────────────

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

function renderFeedback({
  lang,
  t,
  appStyles: rawAppStyles,
  feedbacks = [],
  feedbackSearchQuery,
  setFeedbackSearchQuery,
  feedbackCategoryFilter,
  setFeedbackCategoryFilter,
  feedbackRatingFilter,
  setFeedbackRatingFilter,
  feedbackStatusFilter,
  setFeedbackStatusFilter,
  feedbackCurrentPage,
  setFeedbackCurrentPage,
  feedbacksPerPage,
  setSelectedFeedback,
}) {
  const appStyles = rawAppStyles || window.CP_STYLES || {};

  // Safe data array & pre-normalized filter criteria (O(1) loop invariant hoisting)
  const rawList = Array.isArray(feedbacks) ? feedbacks : [];
  const query = (typeof feedbackSearchQuery === 'string') ? feedbackSearchQuery.trim().toLowerCase() : '';
  const catFilter = feedbackCategoryFilter || 'all';
  const ratingFilter = feedbackRatingFilter || 'all';
  const statusFilter = feedbackStatusFilter || 'all';
  const perPage = Number(feedbacksPerPage) > 0 ? Number(feedbacksPerPage) : 20;

  // Single-pass computation of quick metrics (O(N) with 0 intermediate array allocations)
  let ratingsCount = 0;
  let ratingsSum = 0;
  let bugsCount = 0;
  let featuresCount = 0;
  let billingCount = 0;
  let pendingCount = 0;

  for (let i = 0; i < rawList.length; i++) {
    const fb = rawList[i];
    if (!fb) continue;
    if (typeof fb.rating === 'number' && !isNaN(fb.rating)) {
      ratingsCount++;
      ratingsSum += fb.rating;
    }
    if (fb.category === 'bug') bugsCount++;
    else if (fb.category === 'feature') featuresCount++;
    else if (fb.category === 'billing') billingCount++;

    if (fb.status === 'new') pendingCount++;
  }

  const avgRating = ratingsCount > 0 ? (ratingsSum / ratingsCount).toFixed(1) : 'N/A';

  // Filters with defensive null-safety on string properties
  const filteredFeedbacks = rawList.filter(fb => {
    if (!fb) return false;

    if (query) {
      const msg = (fb.message || '').toLowerCase();
      const name = (fb.user_name || '').toLowerCase();
      const phone = String(fb.user_phone || '');
      if (!msg.includes(query) && !name.includes(query) && !phone.includes(query)) {
        return false;
      }
    }

    if (catFilter !== 'all' && fb.category !== catFilter) return false;
    if (ratingFilter !== 'all' && fb.rating !== Number(ratingFilter)) return false;
    if (statusFilter !== 'all' && fb.status !== statusFilter) return false;

    return true;
  });

  // Pagination with boundary clamping
  const totalItems = filteredFeedbacks.length;
  const totalPages = Math.ceil(totalItems / perPage) || 1;
  const safeCurrentPage = Math.max(1, Math.min(Number(feedbackCurrentPage) || 1, totalPages));
  const startIndex = (safeCurrentPage - 1) * perPage;
  const endIndex = startIndex + perPage;
  const paginatedFeedbacks = filteredFeedbacks.slice(startIndex, endIndex);

  // Categories translation helper
  const getCategoryLabel = (cat) => {
    switch (cat) {
      case 'bug': return t('feedback.category.bug') || 'Bug Report 🐛';
      case 'feature': return t('feedback.category.feature') || 'Feature Request 💡';
      case 'billing': return t('feedback.category.billing') || 'Billing 💳';
      default: return t('feedback.category.general') || 'General Review 💬';
    }
  };

  const getStatusLabel = (st) => {
    switch (st) {
      case 'read': return t('feedback.status.read') || 'Read';
      case 'in_progress': return t('feedback.status.in_progress') || 'In Progress';
      case 'resolved': return t('feedback.status.resolved') || 'Resolved';
      default: return t('feedback.status.new') || 'New';
    }
  };

  const getStatusBadgeStyle = (st) => {
    switch (st) {
      case 'read': return { background: 'rgba(74, 144, 226, 0.12)', color: '#4a90e2' };
      case 'in_progress': return { background: 'rgba(245, 166, 35, 0.12)', color: '#f5a623' };
      case 'resolved': return { background: 'rgba(79, 107, 61, 0.12)', color: 'var(--hu-forest)' };
      default: return { background: 'rgba(217, 83, 79, 0.12)', color: 'var(--hu-rust)' };
    }
  };

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

      {/* Metrics cards */}
      <div style={appStyles.metricsGrid}>
        <window.CpMetricCard 
          title={t('feedback.stats.avg_rating') || 'Average Rating'} 
          value={avgRating} 
          trend={ratingsCount > 0 ? `Based on ${ratingsCount} ratings` : 'No ratings yet'} 
          isPositive={Number(avgRating) >= 4.0}
          iconKind="star"
        />
        <window.CpMetricCard 
          title={t('feedback.stats.total') || 'Total Feedbacks'} 
          value={rawList.length} 
          trend={`Bugs: ${bugsCount} | Features: ${featuresCount}`} 
          isPositive={true}
          iconKind="users"
        />
        <window.CpMetricCard 
          title={lang === 'vi' ? 'Chưa xử lý' : 'Pending Action'} 
          value={pendingCount} 
          trend="Feedbacks with 'new' status" 
          isPositive={false}
          iconKind="users"
        />
      </div>

      {/* Filter controls */}
      <div className="hu-card hu-card-3d-sm" style={{ padding: '16px', display: 'flex', flexDirection: 'column', gap: '16px', marginBottom: '20px' }}>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center' }}>
            {/* Category Filter */}
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
              <span style={{ fontSize: '11.5px', fontWeight: '700', color: 'var(--hu-fg-3)', textTransform: 'uppercase' }}>
                {t('feedback.col.category')}:
              </span>
              <select
                value={feedbackCategoryFilter}
                onChange={(e) => { setFeedbackCategoryFilter(e.target.value); setFeedbackCurrentPage(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)' }}
              >
                <option value="all">{lang === 'vi' ? 'Tất cả phân loại' : 'All Categories'}</option>
                <option value="general">{lang === 'vi' ? 'Ý kiến chung' : 'General'}</option>
                <option value="bug">{lang === 'vi' ? 'Báo lỗi' : 'Bugs'}</option>
                <option value="feature">{lang === 'vi' ? 'Tính năng' : 'Features'}</option>
                <option value="billing">{lang === 'vi' ? 'Thanh toán' : 'Billing'}</option>
              </select>
            </div>

            {/* Rating Filter */}
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
              <span style={{ fontSize: '11.5px', fontWeight: '700', color: 'var(--hu-fg-3)', textTransform: 'uppercase' }}>
                {t('feedback.col.rating')}:
              </span>
              <select
                value={feedbackRatingFilter}
                onChange={(e) => { setFeedbackRatingFilter(e.target.value); setFeedbackCurrentPage(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)' }}
              >
                <option value="all">{lang === 'vi' ? 'Tất cả đánh giá' : 'All Ratings'}</option>
                <option value="5">⭐⭐⭐⭐⭐ (5)</option>
                <option value="4">⭐⭐⭐⭐ (4)</option>
                <option value="3">⭐⭐⭐ (3)</option>
                <option value="2">⭐⭐ (2)</option>
                <option value="1">⭐ (1)</option>
              </select>
            </div>

            {/* Status Filter */}
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
              <span style={{ fontSize: '11.5px', fontWeight: '700', color: 'var(--hu-fg-3)', textTransform: 'uppercase' }}>
                {t('feedback.col.status')}:
              </span>
              <select
                value={feedbackStatusFilter}
                onChange={(e) => { setFeedbackStatusFilter(e.target.value); setFeedbackCurrentPage(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)' }}
              >
                <option value="all">{lang === 'vi' ? 'Tất cả trạng thái' : 'All Statuses'}</option>
                <option value="new">{lang === 'vi' ? 'Mới' : 'New'}</option>
                <option value="read">{lang === 'vi' ? 'Đã xem' : 'Read'}</option>
                <option value="in_progress">{lang === 'vi' ? 'Đang xử lý' : 'In Progress'}</option>
                <option value="resolved">{lang === 'vi' ? 'Đã giải quyết' : 'Resolved'}</option>
              </select>
            </div>
          </div>

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

      {/* Feedbacks List */}
      <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: '180px' }}>{t('feedback.col.date')}</th>
                <th style={{ ...appStyles.tableTh, padding: '14px', width: '180px' }}>{t('feedback.col.user')}</th>
                <th style={{ ...appStyles.tableTh, padding: '14px', width: '140px' }}>{t('feedback.col.category')}</th>
                <th style={{ ...appStyles.tableTh, padding: '14px', width: '120px', textAlign: 'center' }}>{t('feedback.col.rating')}</th>
                <th style={{ ...appStyles.tableTh, padding: '14px' }}>{t('feedback.col.message')}</th>
                <th style={{ ...appStyles.tableTh, padding: '14px', width: '120px', textAlign: 'center' }}>{t('feedback.col.status')}</th>
                <th style={{ ...appStyles.tableTh, padding: '14px', width: '110px', textAlign: 'center' }}>{lang === 'vi' ? 'Hành động' : 'Actions'}</th>
              </tr>
            </thead>
            <tbody>
              {paginatedFeedbacks.length === 0 ? (
                <tr>
                  <td colSpan="7" style={{ padding: '40px', textAlign: 'center', color: 'var(--hu-fg-3)', fontStyle: 'italic' }}>
                    {lang === 'vi' ? 'Không tìm thấy góp ý nào' : 'No feedbacks found'}
                  </td>
                </tr>
              ) : (
                paginatedFeedbacks.map((fb, index) => {
                  const dateObj = new Date(fb.created_at);
                  const isInvalidDate = isNaN(dateObj.getTime());
                  const formattedTime = isInvalidDate ? '—' : dateObj.toTimeString().split(' ')[0];
                  const formattedDate = isInvalidDate ? '—' : dateObj.toLocaleDateString(lang === 'vi' ? 'vi-VN' : 'en-US', { month: 'short', day: 'numeric', year: 'numeric' });
                  const safeRating = Math.max(0, Math.min(5, Math.floor(Number(fb.rating) || 0)));
                  const rowKey = fb.id || `fb_${fb.created_at || index}_${fb.user_id || index}_${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)' }}>{fb.user_name || 'Anonymous'}</div>
                        <div style={{ fontSize: '12px', color: 'var(--hu-fg-2)', marginTop: '2px' }}>{fb.user_phone ? fb.user_phone : 'N/A'}</div>
                        {fb.user_id && (
                          <div style={{ fontSize: '10px', color: 'var(--hu-fg-3)', fontFamily: 'var(--hu-mono)', marginTop: '2px' }}>ID: {String(fb.user_id).substring(0, 8)}...</div>
                        )}
                      </td>
                      <td style={{ ...appStyles.tableTd, padding: '14px' }}>
                        <span style={{ fontSize: '13px', fontWeight: '500' }}>
                          {getCategoryLabel(fb.category)}
                        </span>
                      </td>
                      <td style={{ ...appStyles.tableTd, padding: '14px', textAlign: 'center' }}>
                        <span style={{ fontWeight: '700', fontSize: '15px', color: 'var(--hu-ochre)' }}>
                          {'★'.repeat(safeRating)}
                          <span style={{ color: 'var(--hu-border-strong)' }}>{'★'.repeat(5 - safeRating)}</span>
                        </span>
                      </td>
                      <td style={{ ...appStyles.tableTd, padding: '14px', fontSize: '13.5px', maxWidth: '300px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                        <span title={fb.message || ''}>{fb.message || '—'}</span>
                      </td>
                      <td style={{ ...appStyles.tableTd, padding: '14px', textAlign: 'center' }}>
                        <span style={{
                          padding: '3px 8px',
                          borderRadius: '12px',
                          fontSize: '10.5px',
                          fontWeight: '700',
                          textTransform: 'uppercase',
                          ...getStatusBadgeStyle(fb.status)
                        }}>
                          {getStatusLabel(fb.status)}
                        </span>
                      </td>
                      <td style={{ ...appStyles.tableTd, padding: '14px', textAlign: 'center' }}>
                        <button
                          className="hu-btn hu-btn-ghost hu-btn-sm"
                          onClick={() => setSelectedFeedback(fb)}
                          style={{ minHeight: '28px', padding: '0 10px', fontSize: '12px' }}
                        >
                          {lang === 'vi' ? 'Chi tiết' : 'Details'}
                        </button>
                      </td>
                    </tr>
                  );
                })
              )}
            </tbody>
          </table>
        </div>

        {/* Pagination Controls with sliding window protection */}
        {totalPages > 1 && (
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '15px' }}>
            <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' }}>
              <button
                className="hu-btn hu-btn-ghost"
                onClick={() => setFeedbackCurrentPage(p => Math.max(p - 1, 1))}
                disabled={safeCurrentPage === 1}
                style={{ padding: '0 12px', minHeight: '32px', fontSize: '12px' }}
              >
                {lang === 'vi' ? 'Trước' : 'Prev'}
              </button>
              
              {totalPages <= 7 ? (
                Array.from({ length: totalPages }, (_, i) => i + 1).map(p => (
                  <button
                    key={p}
                    className={`hu-btn ${safeCurrentPage === p ? 'hu-btn-primary' : 'hu-btn-ghost'}`}
                    onClick={() => setFeedbackCurrentPage(p)}
                    style={{ padding: '0 10px', minHeight: '32px', minWidth: '32px', fontSize: '12px' }}
                  >
                    {p}
                  </button>
                ))
              ) : (
                <>
                  <button
                    key={1}
                    className={`hu-btn ${safeCurrentPage === 1 ? 'hu-btn-primary' : 'hu-btn-ghost'}`}
                    onClick={() => setFeedbackCurrentPage(1)}
                    style={{ padding: '0 10px', minHeight: '32px', minWidth: '32px', fontSize: '12px' }}
                  >
                    1
                  </button>
                  {safeCurrentPage > 3 && <span style={{ padding: '0 4px', color: 'var(--hu-fg-3)', alignSelf: 'center' }}>…</span>}
                  {Array.from({ length: totalPages }, (_, i) => i + 1)
                    .filter(p => p !== 1 && p !== totalPages && Math.abs(p - safeCurrentPage) <= 1)
                    .map(p => (
                      <button
                        key={p}
                        className={`hu-btn ${safeCurrentPage === p ? 'hu-btn-primary' : 'hu-btn-ghost'}`}
                        onClick={() => setFeedbackCurrentPage(p)}
                        style={{ padding: '0 10px', minHeight: '32px', minWidth: '32px', fontSize: '12px' }}
                      >
                        {p}
                      </button>
                    ))}
                  {safeCurrentPage < totalPages - 2 && <span style={{ padding: '0 4px', color: 'var(--hu-fg-3)', alignSelf: 'center' }}>…</span>}
                  <button
                    key={totalPages}
                    className={`hu-btn ${safeCurrentPage === totalPages ? 'hu-btn-primary' : 'hu-btn-ghost'}`}
                    onClick={() => setFeedbackCurrentPage(totalPages)}
                    style={{ padding: '0 10px', minHeight: '32px', minWidth: '32px', fontSize: '12px' }}
                  >
                    {totalPages}
                  </button>
                </>
              )}

              <button
                className="hu-btn hu-btn-ghost"
                onClick={() => setFeedbackCurrentPage(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.CpFeedbackView = {
  renderFeedback,
};