// ───────────────────────────────────────────────────────────
// Huio Control Panel — Disputes & Reports View (cp-disputes-view.jsx)
// ───────────────────────────────────────────────────────────

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

const isPending = status => status === 'pending_review' || status === 'under_investigation' || status === 'pending';
const isResolved = status => status === 'resolved' || status === 'dismissed';

// Static O(1) dictionary for badge CSS classes
const STATUS_BADGES = {
  under_investigation: 'hu-chip hu-chip-teal hu-pulse',
  resolved: 'hu-chip hu-chip-coral',
  dismissed: 'hu-chip hu-chip-gray',
  pending_review: 'hu-chip hu-chip-ochre',
  pending: 'hu-chip hu-chip-ochre',
};

// Safe date formatter to prevent runtime exceptions on malformed ISO timestamps
const formatResolvedAt = (isoStr) => {
  if (!isoStr) return '';
  try {
    const dt = new Date(isoStr);
    return isNaN(dt.getTime()) ? String(isoStr) : dt.toLocaleString();
  } catch {
    return String(isoStr);
  }
};

function renderDisputes({
  lang,
  t: rawT,
  appStyles: rawAppStyles,
  disputes: rawDisputes = [],
  disputesFilter = 'pending',
  setDisputesFilter,
  resolvingReportId = null,
  handleResolve,
  setZoomImg,
}) {
  const appStyles = rawAppStyles || window.CP_STYLES || {};
  const t = typeof rawT === 'function' ? rawT : (k) => k;
  const disputes = Array.isArray(rawDisputes) ? rawDisputes : [];

  // Senior High-Load Optimization: Single-pass zero-allocation aggregation
  let pendingCount = 0;
  let resolvedCount = 0;
  const isPendingFilter = disputesFilter === 'pending';

  for (let i = 0; i < disputes.length; i++) {
    const d = disputes[i];
    if (!d) continue;
    if (isPending(d.status)) pendingCount++;
    else if (isResolved(d.status)) resolvedCount++;
  }

  // Single-pass defensive filter with hoisted loop invariant
  const filteredDisputes = disputes.filter(d => {
    if (!d) return false;
    return isPendingFilter ? isPending(d.status) : isResolved(d.status);
  });

  return (
    <div style={appStyles.viewWrapper}>
      <div style={appStyles.welcomeBanner}>
        <h1 className="hu-h1 hu-display" style={{ margin: '0 0 6px 0' }}>{t('disputes.title')}</h1>
        <p style={{ margin: 0, color: 'var(--hu-fg-2)' }}>{t('disputes.sub')}</p>
      </div>
      
      <div style={{ display: 'flex', gap: '8px', marginBottom: '16px' }}>
        <button 
          className={`hu-chip ${isPendingFilter ? 'hu-chip-primary' : 'hu-chip-gray'}`}
          style={{ cursor: 'pointer', border: 'none' }}
          onClick={() => typeof setDisputesFilter === 'function' && setDisputesFilter('pending')}
        >
          {t('disputes.tab.pending')} ({pendingCount})
        </button>
        <button 
          className={`hu-chip ${!isPendingFilter ? 'hu-chip-forest' : 'hu-chip-gray'}`}
          style={{ cursor: 'pointer', border: 'none' }}
          onClick={() => typeof setDisputesFilter === 'function' && setDisputesFilter('resolved')}
        >
          {t('disputes.tab.resolved')} ({resolvedCount})
        </button>
      </div>

      {filteredDisputes.length === 0 ? (
        <div className="hu-card" style={appStyles.emptyCard}>
          <Icons.Info />
          <p style={{ margin: '8px 0 0 0', fontWeight: '500', color: 'var(--hu-fg-2)' }}>{t('disputes.empty')}</p>
        </div>
      ) : (
        <div style={appStyles.cccdGrid}>
          {filteredDisputes.map((req, idx) => {
            if (!req) return null;
            const isProcessing = resolvingReportId === req.id;
            const rawGroupId = req.group_id;
            const groupIdStr = rawGroupId != null ? String(rawGroupId) : '';
            const groupName = req.hui_groups?.name || (groupIdStr ? `${groupIdStr.slice(0, 8)}...` : null);
            const statusBadgeClass = STATUS_BADGES[req.status] || 'hu-chip hu-chip-ochre';
            const reportTypeKey = req.report_type ? `disputes.type.${req.report_type}` : 'disputes.type.other';

            return (
              <div key={req.id || ('dispute_' + idx)} className="hu-card hu-card-hover" style={appStyles.cccdCard}>
                <div style={appStyles.cccdCardHeader}>
                  <h4 style={{ margin: 0, fontSize: '15.5px', fontWeight: '600', color: 'var(--hu-fg)' }}>
                    {t(reportTypeKey) || req.report_type || t('disputes.type.other')}
                  </h4>
                  <span className={statusBadgeClass}>
                    {t(`disputes.status.${req.status}`) || req.status || t('disputes.status.pending_review')}
                  </span>
                </div>
                
                <div style={appStyles.cccdCardBody}>
                  <div style={appStyles.cccdDetailItem}>
                    <span style={appStyles.cccdDetailLabel}>{t('disputes.reporter')}:</span>
                    <span style={appStyles.cccdDetailValue}>
                      {req.reporter?.name || t('common.unknown')} {req.reporter?.phone ? `(${req.reporter.phone})` : ''}
                    </span>
                  </div>
                  <div style={appStyles.cccdDetailItem}>
                    <span style={appStyles.cccdDetailLabel}>{t('disputes.reported')}:</span>
                    <span style={appStyles.cccdDetailValue}>
                      {req.reported?.name || t('common.unknown')} {req.reported?.phone ? `(${req.reported.phone})` : ''}
                    </span>
                  </div>
                  {groupName && (
                    <div style={appStyles.cccdDetailItem}>
                      <span style={appStyles.cccdDetailLabel}>{t('disputes.group')}:</span>
                      <span style={{ ...appStyles.cccdDetailValue, fontWeight: '600', color: 'var(--hu-terra)' }}>{groupName}</span>
                    </div>
                  )}
                  {req.description && (
                    <div style={appStyles.cccdDetailItem}>
                      <span style={appStyles.cccdDetailLabel}>{t('disputes.description')}:</span>
                      <span style={appStyles.cccdDetailValue}>{req.description}</span>
                    </div>
                  )}
                  
                  {/* Evidence Images */}
                  {Array.isArray(req.evidence_urls) && req.evidence_urls.length > 0 && (
                    <div style={{ marginTop: '12px' }}>
                      <span style={appStyles.cccdDetailLabel}>{t('disputes.evidence')}:</span>
                      <div style={{ display: 'flex', gap: '8px', marginTop: '8px', flexWrap: 'wrap' }}>
                        {req.evidence_urls.map((url, i) => (
                          <img 
                            key={url ? `${url}_${i}` : ('evidence_' + i)} 
                            src={url} 
                            alt="Evidence" 
                            style={{ 
                              width: '64px', 
                              height: '64px', 
                              objectFit: 'cover', 
                              borderRadius: 'var(--hu-r-md)', 
                              cursor: 'zoom-in', 
                              border: '1px solid var(--hu-border)',
                              transition: 'transform 180ms ease'
                            }} 
                            onClick={() => typeof setZoomImg === 'function' && setZoomImg(url)} 
                          />
                        ))}
                      </div>
                    </div>
                  )}

                  {/* Resolved Details Box */}
                  {isResolved(req.status) && (
                    <div style={{
                      marginTop: '14px',
                      padding: '10px 12px',
                      borderRadius: 'var(--hu-r-md)',
                      background: req.status === 'resolved' ? 'rgba(235, 87, 87, 0.08)' : 'rgba(132, 121, 176, 0.08)',
                      border: req.status === 'resolved' ? '1px solid rgba(235, 87, 87, 0.2)' : '1px solid var(--hu-border)',
                      fontSize: '12.5px'
                    }}>
                      <div style={{ fontWeight: '600', color: req.status === 'resolved' ? 'var(--hu-rust)' : 'var(--hu-fg-2)', marginBottom: '3px' }}>
                        {t('disputes.resolution_info')}: {req.resolution === 'in_favor_reporter' ? t('disputes.status.resolved') : (req.resolution === 'dismissed' ? t('disputes.status.dismissed') : (req.resolution || t('disputes.status.resolved')))}
                      </div>
                      {req.resolution_note && (
                        <div style={{ color: 'var(--hu-fg-2)', fontSize: '12px' }}>
                          <span style={{ fontWeight: '500' }}>{t('disputes.resolution_note')}:</span> {req.resolution_note}
                        </div>
                      )}
                      {req.resolved_at && (
                        <div style={{ color: 'var(--hu-fg-3)', fontSize: '11px', marginTop: '4px', fontFamily: 'var(--hu-mono)' }}>
                          {formatResolvedAt(req.resolved_at)}
                        </div>
                      )}
                    </div>
                  )}

                  {/* Resolution Actions */}
                  {isPending(req.status) && (
                    <div style={{ marginTop: '16px', display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
                      {req.status !== 'under_investigation' && (
                        <button 
                          className="hu-btn hu-btn-sm hu-btn-ghost" 
                          style={{ flex: 1, opacity: isProcessing ? 0.6 : 1 }}
                          disabled={resolvingReportId !== null}
                          aria-busy={isProcessing}
                          onClick={() => typeof handleResolve === 'function' && handleResolve(req.id, 'under_investigation', 'Đang điều tra bởi Admin', null)}
                        >
                          {isProcessing ? <Icons.Spinner size={13} /> : t('disputes.action.investigate')}
                        </button>
                      )}
                      <button 
                        className="hu-btn hu-btn-sm hu-btn-coral" 
                        style={{ flex: 1, opacity: isProcessing ? 0.6 : 1 }}
                        disabled={resolvingReportId !== null}
                        aria-busy={isProcessing}
                        onClick={() => typeof handleResolve === 'function' && handleResolve(req.id, 'in_favor_reporter', 'Giải quyết qua Control Panel', t('disputes.confirm_violation_prompt'))}
                      >
                        {isProcessing ? <Icons.Spinner size={13} /> : t('disputes.action.confirm_violation')}
                      </button>
                      <button 
                        className="hu-btn hu-btn-sm hu-btn-ghost" 
                        style={{ flex: 1, opacity: isProcessing ? 0.6 : 1 }}
                        disabled={resolvingReportId !== null}
                        aria-busy={isProcessing}
                        onClick={() => typeof handleResolve === 'function' && handleResolve(req.id, 'dismissed', 'Bác bỏ qua Control Panel', t('disputes.confirm_dismiss_prompt'))}
                      >
                        {isProcessing ? <Icons.Spinner size={13} /> : t('disputes.action.dismiss')}
                      </button>
                    </div>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

window.CpDisputesView = {
  renderDisputes,
};