// ───────────────────────────────────────────────────────────
// Huio Control Panel — Push Broadcast View (cp-broadcast-view.jsx)
// ───────────────────────────────────────────────────────────

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

function renderBroadcast({
  lang,
  t,
  appStyles: rawAppStyles,
  users = [],
  logs = [],
  broadcastTarget,
  setBroadcastTarget,
  broadcastUserId,
  setBroadcastUserId,
  broadcastTitle,
  setBroadcastTitle,
  broadcastBody,
  setBroadcastBody,
  isBroadcasting,
  handleSendBroadcast,
}) {
  const appStyles = rawAppStyles || window.CP_STYLES || {};
  const formatPhone = window.formatPhone || ((p) => p || '—');

  const userList = Array.isArray(users) ? users : [];
  const logList = Array.isArray(logs) ? logs : [];
  const totalUsersCount = userList.length;

  // Single-pass telemetry & cohort aggregation (Zero intermediate array allocations)
  let usersWithPushTokenCount = 0;
  let targetCohort = [];
  let targetCohortWithPush = 0;

  for (let i = 0; i < totalUsersCount; i++) {
    const u = userList[i];
    if (!u) continue;
    
    if (u.pushToken) {
      usersWithPushTokenCount++;
    }

    let isTarget = false;
    if (broadcastTarget === 'all') {
      isTarget = true;
    } else if (broadcastTarget === 'organizers') {
      isTarget = (u.role === 'organizer' || u.role === 'both');
    } else if (broadcastTarget === 'participants') {
      isTarget = (u.role === 'participant' || u.role === 'both');
    } else if (broadcastTarget === 'user') {
      isTarget = (u.id === broadcastUserId);
    }

    if (isTarget) {
      targetCohort.push(u);
      if (u.pushToken) {
        targetCohortWithPush++;
      }
    }
  }

  const pushReachPercentage = totalUsersCount > 0 
    ? Math.round((usersWithPushTokenCount / totalUsersCount) * 100) 
    : 0;
  
  // Bounded log scanning for recent broadcast activities (O(1) memory bound on React DOM)
  const broadcastLogs = [];
  for (let i = logList.length - 1; i >= 0 && broadcastLogs.length < 50; i--) {
    const l = logList[i];
    const txt = typeof l?.text === 'string' ? l.text : '';
    if (txt && (txt.includes('Broadcasted') || txt.includes('Đã phát') || txt.includes('[DEMO]'))) {
      broadcastLogs.push(l);
    }
  }

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

      <div style={appStyles.splitLayout}>
        <div className="hu-card hu-card-3d-sm" style={{ padding: '24px', display: 'flex', flexDirection: 'column', gap: '20px' }}>
          <form onSubmit={handleSendBroadcast} style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
            
            <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
              <label style={{ fontSize: '13px', fontWeight: '600', color: 'var(--hu-fg-2)' }}>
                {t('broadcast.form.target')}
              </label>
              <select
                value={broadcastTarget}
                onChange={(e) => {
                  setBroadcastTarget(e.target.value);
                  setBroadcastUserId('');
                }}
                className="hu-input"
                style={{ width: '100%', minHeight: '38px', fontSize: '13px' }}
              >
                <option value="all">{t('broadcast.target.all')}</option>
                <option value="organizers">{t('broadcast.target.organizers')}</option>
                <option value="participants">{t('broadcast.target.participants')}</option>
                <option value="user">{t('broadcast.target.user')}</option>
              </select>
            </div>

            {broadcastTarget === 'user' && (
              <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
                <label style={{ fontSize: '13px', fontWeight: '600', color: 'var(--hu-fg-2)' }}>
                  {t('broadcast.form.user_select')}
                </label>
                <select
                  value={broadcastUserId}
                  onChange={(e) => setBroadcastUserId(e.target.value)}
                  className="hu-input"
                  style={{ width: '100%', minHeight: '38px', fontSize: '13px' }}
                  required
                >
                  <option value="">{lang === 'vi' ? '-- Chọn người dùng --' : '-- Select user --'}</option>
                  {userList.map((u, index) => (
                    <option key={u.id || `user_${index}`} value={u.id}>
                      {u.name || 'Unknown'} ({formatPhone(u.phone)}) {u.pushToken ? '📱' : '❌'}
                    </option>
                  ))}
                </select>
              </div>
            )}

            <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
              <label style={{ fontSize: '13px', fontWeight: '600', color: 'var(--hu-fg-2)' }}>
                {t('broadcast.form.title')}
              </label>
              <input
                type="text"
                value={broadcastTitle}
                onChange={(e) => setBroadcastTitle(e.target.value)}
                placeholder={lang === 'vi' ? 'Tiêu đề thông báo' : 'Enter notification title'}
                className="hu-input"
                style={{ width: '100%', minHeight: '38px', fontSize: '13px' }}
                required
              />
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
              <label style={{ fontSize: '13px', fontWeight: '600', color: 'var(--hu-fg-2)' }}>
                {t('broadcast.form.body')}
              </label>
              <textarea
                value={broadcastBody}
                onChange={(e) => setBroadcastBody(e.target.value)}
                placeholder={lang === 'vi' ? 'Nội dung chi tiết thông báo...' : 'Enter notification body content...'}
                className="hu-input"
                style={{ width: '100%', minHeight: '90px', fontSize: '13px', padding: '10px 12px', resize: 'vertical' }}
                required
              />
            </div>

            <div style={{ background: 'var(--hu-bg-elev)', border: '1px solid var(--hu-border)', borderRadius: 'var(--hu-r-sm)', padding: '12px', fontSize: '12.5px', display: 'flex', flexDirection: 'column', gap: '4px' }}>
              <div>
                <span style={{ color: 'var(--hu-fg-2)' }}>{lang === 'vi' ? 'Mục tiêu gửi:' : 'Target Recipients:'} </span>
                <strong style={{ color: 'var(--hu-fg)' }}>{targetCohort.length} {lang === 'vi' ? 'người' : 'users'}</strong>
              </div>
              <div>
                <span style={{ color: 'var(--hu-fg-2)' }}>{lang === 'vi' ? 'Thiết bị nhận push:' : 'Push reachable devices:'} </span>
                <strong style={{ color: 'var(--hu-forest)' }}>{targetCohortWithPush} / {targetCohort.length}</strong>
              </div>
            </div>

            <button
              type="submit"
              className="hu-btn hu-btn-primary"
              style={{ width: '100%', minHeight: '42px', fontSize: '13.5px', marginTop: '8px' }}
              disabled={isBroadcasting}
            >
              {isBroadcasting ? t('broadcast.form.sending') : t('broadcast.form.submit')}
            </button>
          </form>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
          <div className="hu-card hu-card-3d-sm" style={{ padding: '20px' }}>
            <h4 className="hu-h4" style={{ margin: '0 0 14px 0', borderBottom: '1px solid var(--hu-border)', paddingBottom: '8px' }}>
              {t('broadcast.stats.title')}
            </h4>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', fontSize: '13px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <span style={{ color: 'var(--hu-fg-2)' }}>{t('broadcast.stats.total_users')}</span>
                <strong className="hu-mono">{totalUsersCount}</strong>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <span style={{ color: 'var(--hu-fg-2)' }}>{t('broadcast.stats.push_users')}</span>
                <strong className="hu-mono" style={{ color: 'var(--hu-forest)' }}>{usersWithPushTokenCount}</strong>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <span style={{ color: 'var(--hu-fg-2)' }}>{t('broadcast.stats.reach')}</span>
                <strong className="hu-mono">{pushReachPercentage}%</strong>
              </div>
            </div>
          </div>

          <div className="hu-card hu-card-3d-sm" style={{ padding: '20px' }}>
            <h4 className="hu-h4" style={{ margin: '0 0 14px 0', borderBottom: '1px solid var(--hu-border)', paddingBottom: '8px' }}>
              {t('broadcast.history.title')}
            </h4>
            {broadcastLogs.length === 0 ? (
              <p style={{ margin: 0, fontSize: '12.5px', color: 'var(--hu-fg-3)', textAlign: 'center', padding: '12px 0' }}>
                {lang === 'vi' ? 'Chưa có thông báo nào được gửi trong phiên này.' : 'No broadcasts recorded in this session.'}
              </p>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', maxHeight: '200px', overflowY: 'auto' }}>
                {broadcastLogs.map((l, index) => (
                  <div key={l.id || `bcast_${l.time || ''}_${index}`} style={{ borderBottom: '1px solid var(--hu-border)', paddingBottom: '8px', fontSize: '12px' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '4px' }}>
                      <span style={{ fontFamily: 'var(--hu-mono)', color: 'var(--hu-fg-3)' }}>{l.time}</span>
                      <span className="hu-chip hu-chip-teal" style={{ fontSize: '8.5px', padding: '0px 4px' }}>SUCCESS</span>
                    </div>
                    <p style={{ margin: 0, color: 'var(--hu-fg-2)', wordBreak: 'break-all' }}>{l.text}</p>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

window.CpBroadcastView = {
  renderBroadcast,
};