// ───────────────────────────────────────────────────────────
// Huio Control Panel — CCCD Approval View (cp-cccd-view.jsx)
// ───────────────────────────────────────────────────────────

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

// Static style hoisting to eliminate heap allocations and GC pressure in list rendering
const STATIC_INSPECT_BTN_STYLE = { flex: 1, minHeight: '36px', fontSize: '13px' };
const STATIC_APPROVE_BTN_BASE = {
  flex: 1,
  minHeight: '36px',
  fontSize: '13px',
  color: 'var(--hu-fg-inverse)',
  display: 'inline-flex',
  alignItems: 'center',
  justifyContent: 'center',
  gap: '6px',
};

function renderCccd({
  lang = 'vi',
  t: rawT,
  appStyles: rawAppStyles,
  users: rawUsers = [],
  cccdRequests: rawCccdRequests = [],
  processingCccdId = null,
  setSelectedRequest,
  setRejectReason,
  setRejectError,
  handleCccdDecision,
}) {
  // Defensive fallbacks for shell utilities and data structures
  const appStyles = rawAppStyles || window.CP_STYLES || {};
  const t = typeof rawT === 'function' ? rawT : (k) => k;
  const users = Array.isArray(rawUsers) ? rawUsers : [];
  const cccdRequests = Array.isArray(rawCccdRequests) ? rawCccdRequests : [];
  const Icons = window.Icons || (typeof Icons !== 'undefined' ? Icons : {});

  const isAnyProcessing = processingCccdId !== null;

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

      {/* Interactive CCCD Status Donut Chart with defensive component resolution */}
      {window.CpCharts?.CccdVerificationDonutChart ? (
        <window.CpCharts.CccdVerificationDonutChart users={users} lang={lang} t={t} />
      ) : null}
      
      {cccdRequests.length === 0 ? (
        <div className="hu-card" style={appStyles.emptyCard}>
          {Icons.Info ? <Icons.Info /> : null}
          <p style={{ margin: '8px 0 0 0', fontWeight: '500', color: 'var(--hu-fg-2)' }}>{t('cccd.empty')}</p>
        </div>
      ) : (
        <div style={appStyles.cccdGrid}>
          {cccdRequests.map((req, idx) => {
            if (!req) return null;

            const isProcessing = processingCccdId === req.id;
            const reqIdStr = req.id != null ? String(req.id) : `cccd_${idx}`;
            const ekycProvider = req.ekycProvider ? String(req.ekycProvider) : '';
            const showEkyc = ekycProvider && ekycProvider.toLowerCase() !== 'manual';

            const approveBtnStyle = {
              ...STATIC_APPROVE_BTN_BASE,
              opacity: isProcessing ? 0.8 : (isAnyProcessing ? 0.5 : 1),
            };

            return (
              <div key={reqIdStr} className="hu-card hu-card-hover" style={appStyles.cccdCard}>
                <div style={appStyles.cccdCardHeader}>
                  <h4 style={{ margin: 0, fontSize: '16px', fontWeight: '600' }}>{req.name || '—'}</h4>
                  <span className="hu-chip hu-chip-ochre">{t('status.pending').toUpperCase()}</span>
                </div>
                
                <div style={appStyles.cccdCardBody}>
                  <div style={appStyles.cccdDetailItem}>
                    <span style={appStyles.cccdDetailLabel}>{t('cccd.card.num')}:</span>
                    <span style={appStyles.cccdDetailValue} className="hu-mono">{req.cccdNum || '—'}</span>
                  </div>
                  <div style={appStyles.cccdDetailItem}>
                    <span style={appStyles.cccdDetailLabel}>{t('cccd.card.dob')}:</span>
                    <span style={appStyles.cccdDetailValue} className="hu-mono">{req.dob || '—'}</span>
                  </div>
                  {showEkyc ? (
                    <div style={appStyles.cccdDetailItem}>
                      <span style={appStyles.cccdDetailLabel}>{t('cccd.ekyc.provider')}:</span>
                      <span style={appStyles.cccdDetailValue} className="hu-mono">{ekycProvider.toUpperCase()}</span>
                    </div>
                  ) : null}
                </div>
                
                <div style={appStyles.cccdCardActions}>
                  <button 
                    className="hu-btn hu-btn-ghost" 
                    style={STATIC_INSPECT_BTN_STYLE}
                    onClick={() => {
                      if (typeof setSelectedRequest === 'function') setSelectedRequest(req);
                      if (typeof setRejectReason === 'function') setRejectReason('');
                      if (typeof setRejectError === 'function') setRejectError(false);
                    }}
                    disabled={isAnyProcessing}
                    id={`btn-inspect-cccd-${reqIdStr}`}
                  >
                    {t('cccd.action.inspect')}
                  </button>
                  <button 
                    className="hu-btn hu-btn-forest" 
                    style={approveBtnStyle}
                    onClick={() => {
                      if (typeof handleCccdDecision === 'function') {
                        handleCccdDecision(req.id, 'approve');
                      }
                    }}
                    disabled={isAnyProcessing}
                    aria-busy={isProcessing}
                    id={`btn-approve-cccd-${reqIdStr}`}
                  >
                    {isProcessing ? (
                      <>
                        {Icons.Spinner ? <Icons.Spinner size={14} /> : null}
                        <span>{t('cccd.action.approving')}</span>
                      </>
                    ) : (
                      t('cccd.action.approve')
                    )}
                  </button>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

window.CpCccdView = {
  renderCccd,
};