// ───────────────────────────────────────────────────────────
// Huio Control Panel — System & DB View (cp-system-view.jsx)
// ───────────────────────────────────────────────────────────

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

function renderSystem({
  lang = 'vi',
  t: rawT,
  appStyles: rawAppStyles,
  dbStats = [],
  auctionStreakAlerts = [],
  bankIntegrations = [],
  setIsSyncDocModalOpen,
  handleBankPause,
  handleBankResume,
}) {
  const appStyles = rawAppStyles || window.CP_STYLES || {};
  const t = typeof rawT === 'function' ? rawT : (k) => k;

  const statsList = Array.isArray(dbStats) ? dbStats : [];
  const streakList = Array.isArray(auctionStreakAlerts) ? auctionStreakAlerts : [];
  const bankList = Array.isArray(bankIntegrations) ? bankIntegrations : [];

  // Safe clipboard helper with browser fallback
  const handleCopyWebhook = (url) => {
    if (!url) return;
    if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
      navigator.clipboard.writeText(url)
        .then(() => alert(lang === 'vi' ? 'Đã sao chép Webhook URL!' : lang === 'en' ? 'Webhook URL copied!' : 'Webhook URL скопирован!'))
        .catch(() => {
          prompt(lang === 'vi' ? 'Sao chép URL:' : lang === 'en' ? 'Copy URL:' : 'Скопируйте URL:', url);
        });
    } else {
      prompt(lang === 'vi' ? 'Sao chép URL:' : lang === 'en' ? 'Copy URL:' : 'Скопируйте URL:', url);
    }
  };

  return (
    <div style={appStyles.viewWrapper}>
      <div style={appStyles.welcomeBanner}>
        <h1 className="hu-h1 hu-display" style={{ margin: '0 0 6px 0' }}>{t('db.title')}</h1>
        <p style={{ margin: 0, color: 'var(--hu-fg-2)' }}>{t('db.sub')}</p>
      </div>
      
      {/* Database Tables statistics */}
      <div className="hu-card hu-card-3d-sm" style={{ padding: 0, overflow: 'hidden' }}>
        <table style={appStyles.tableStyle}>
          <thead>
            <tr style={appStyles.tableHeaderRow}>
              <th style={appStyles.tableTh}>{t('db.col.table')}</th>
              <th style={appStyles.tableTh}>{t('db.col.rows')}</th>
              <th style={appStyles.tableTh}>{t('db.col.rls')}</th>
            </tr>
          </thead>
          <tbody>
            {statsList.length === 0 ? (
              <tr>
                <td colSpan="3" style={{ ...appStyles.tableTd, textAlign: 'center', color: 'var(--hu-fg-3)', padding: '24px' }}>
                  {lang === 'vi' ? 'Chưa có thông tin bảng CSDL.' : lang === 'en' ? 'No database statistics available.' : 'Нет данных таблиц БД.'}
                </td>
              </tr>
            ) : (
              statsList.map((s, idx) => {
                if (!s) return null;
                const tableName = s.table || `table_${idx}`;
                const rowCount = typeof s.rows === 'number' ? s.rows.toLocaleString() : (s.rows ?? '—');
                const isRlsActive = s.rls === 'active';
                return (
                  <tr key={tableName} style={appStyles.tableRowStyle}>
                    <td style={{ ...appStyles.tableTd, fontWeight: '600', fontFamily: 'var(--hu-mono)' }}>{tableName}</td>
                    <td style={appStyles.tableTd} className="hu-mono">{rowCount}</td>
                    <td style={appStyles.tableTd}>
                      <span className={`hu-chip ${isRlsActive ? 'hu-chip-teal' : 'hu-chip-coral'}`} style={{ fontSize: '10px' }}>
                        {isRlsActive ? t('db.rls.active') : t('db.rls.inactive')}
                      </span>
                    </td>
                  </tr>
                );
              })
            )}
          </tbody>
        </table>
      </div>

      {/* Documentation & AI Assistant Section */}
      <div className="hu-card hu-card-3d-sm" style={{ marginTop: '24px', padding: '24px', display: 'flex', flexDirection: 'column', gap: '16px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '16px' }}>
          <div>
            <h2 className="hu-h2 hu-display" style={{ margin: '0 0 6px 0', fontSize: '18px' }}>
              {lang === 'vi' ? 'Tài liệu & Trợ lý AI' : lang === 'en' ? 'Documentation & AI Assistant' : 'Справочник и ИИ-ассистент'}
            </h2>
            <p style={{ margin: 0, color: 'var(--hu-fg-2)', fontSize: '13px' }}>
              {lang === 'vi' 
                ? 'Đồng bộ hóa cơ sở dữ liệu vector (embeddings) cho Chatbot hỗ trợ người dùng.'
                : lang === 'en'
                ? 'Synchronize vector database embeddings for the user-facing AI support chatbot.'
                : 'Синхронизация векторной базы знаний (эмбеддингов) для пользовательского ИИ-ассистента.'}
            </p>
          </div>
          <button 
            className="hu-btn hu-btn-forest"
            style={{ 
              minHeight: '40px', 
              padding: '0 24px', 
              fontSize: '13px', 
              fontWeight: '600',
              color: 'var(--hu-fg-inverse)',
              display: 'flex',
              alignItems: 'center',
              gap: '8px'
            }}
            onClick={() => typeof setIsSyncDocModalOpen === 'function' && setIsSyncDocModalOpen(true)}
            id="btn-sync-docs-modal"
          >
            <svg width="14" height="14" 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>
            {lang === 'vi' ? 'Đồng bộ tài liệu' : lang === 'en' ? 'Update Documentation' : 'Обновить документацию'}
          </button>
        </div>
      </div>

      {/* Auction streak antifraud (soft analytics) */}
      <div className="hu-card hu-card-3d-sm" style={{ marginTop: '24px', padding: '24px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
        <div>
          <h2 className="hu-h2 hu-display" style={{ margin: '0 0 6px 0', fontSize: '18px' }}>
            {lang === 'vi' ? 'Cảnh báo đấu thầu (hốt liên tiếp)' : lang === 'en' ? 'Auction streak alerts' : 'Предупреждения аукциона (серия побед)'}
          </h2>
          <p style={{ margin: 0, color: 'var(--hu-fg-2)', fontSize: '13px' }}>
            {lang === 'vi'
              ? 'Dây có cùng hội viên hốt ≥3 kỳ liên tiếp (chỉ cảnh báo, không chặn).'
              : lang === 'en'
              ? 'Groups where the same member won ≥3 consecutive periods (alert only, no block).'
              : 'Кассы, где один участник выиграл ≥3 периода подряд (только предупреждение).'}
          </p>
        </div>
        {streakList.length === 0 ? (
          <div style={{ color: 'var(--hu-fg-2)', fontSize: '13px', fontStyle: 'italic' }}>
            {lang === 'vi' ? 'Không có chuỗi bất thường.' : lang === 'en' ? 'No unusual streaks.' : 'Необычных серий нет.'}
          </div>
        ) : (
          <table style={appStyles.tableStyle}>
            <thead>
              <tr style={appStyles.tableHeaderRow}>
                <th style={appStyles.tableTh}>{lang === 'vi' ? 'Dây' : 'Group'}</th>
                <th style={appStyles.tableTh}>{lang === 'vi' ? 'Hội viên' : 'Member'}</th>
                <th style={appStyles.tableTh}>{lang === 'vi' ? 'Chuỗi' : 'Streak'}</th>
                <th style={appStyles.tableTh}>{lang === 'vi' ? 'Kỳ gần nhất' : 'Last period'}</th>
              </tr>
            </thead>
            <tbody>
              {streakList.map((a, idx) => {
                if (!a) return null;
                const rowKey = a.groupId && a.winnerMemberId ? `${a.groupId}:${a.winnerMemberId}` : `streak_${idx}`;
                return (
                  <tr key={rowKey} style={appStyles.tableRowStyle}>
                    <td style={{ ...appStyles.tableTd, fontWeight: 600 }}>{a.groupName || a.groupId || '—'}</td>
                    <td style={appStyles.tableTd}>{a.winnerName || a.winnerMemberId || '—'}</td>
                    <td style={appStyles.tableTd} className="hu-mono">{a.streak ?? 0}</td>
                    <td style={appStyles.tableTd} className="hu-mono">{a.lastPeriod ? `K${a.lastPeriod}` : '—'}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        )}
      </div>

      {/* Bank Integration Setup Section */}
      <div className="hu-card hu-card-3d-sm" style={{ marginTop: '24px', padding: '24px', display: 'flex', flexDirection: 'column', gap: '16px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '16px' }}>
          <div>
            <h2 className="hu-h2 hu-display" style={{ margin: '0 0 6px 0', fontSize: '18px' }}>
              {lang === 'vi' ? 'Tích hợp Ngân hàng (Casso/SePay)' : lang === 'en' ? 'Bank Integration (Casso/SePay)' : 'Интеграция с банком (Casso/SePay)'}
            </h2>
            <p style={{ margin: 0, color: 'var(--hu-fg-2)', fontSize: '13px' }}>
              {lang === 'vi' 
                ? 'Cấu hình Webhook, theo dõi trạng thái HMAC, tạm dừng hoặc khôi phục kết nối.'
                : lang === 'en'
                ? 'Configure Webhook URL, monitor HMAC status, pause/resume connections.'
                : 'Настройка Webhook, статус HMAC, пауза/возобновление интеграции.'}
            </p>
          </div>
        </div>
        {bankList.length === 0 ? (
          <div style={{ color: 'var(--hu-fg-2)', fontSize: '13px', fontStyle: 'italic', marginTop: '12px' }}>
            {lang === 'vi' ? 'Chưa có tích hợp nào.' : lang === 'en' ? 'No integrations found.' : 'Интеграции не найдены.'}
          </div>
        ) : (
          bankList.map((bi, idx) => {
            if (!bi) return null;
            const provider = bi.provider || 'casso';
            const baseWebhook = `https://qjuuaqdvhzzclsdwubll.supabase.co/functions/v1/bank-webhook?provider=${encodeURIComponent(provider)}`;
            const token = typeof bi.webhook_endpoint_token === 'string' ? bi.webhook_endpoint_token : '';
            const webhookUrl = provider === 'casso' && token
              ? `${baseWebhook}&token=${encodeURIComponent(token)}`
              : baseWebhook;
            
            // Masked URL display: token partially hidden (last 8 chars) to avoid leak in screenshots
            const maskedToken = token.length > 8 ? `...${token.slice(-8)}` : (token ? '...' : '');
            const webhookUrlDisplay = provider === 'casso' && token
              ? `${baseWebhook}&token=${maskedToken}`
              : baseWebhook;
            
            const hmacConfigured = !!bi.webhook_secret_id;
            const itemKey = bi.id || `bank_item_${idx}`;
            
            let pausedStatusText = `${bi.failed_webhook_count || 0} ${lang === 'vi' ? 'lỗi' : lang === 'en' ? 'errors' : 'ошибок'}`;
            if (bi.auto_confirm_paused_at) {
              try {
                const d = new Date(bi.auto_confirm_paused_at);
                const timeStr = isNaN(d.getTime()) ? String(bi.auto_confirm_paused_at) : d.toLocaleString();
                pausedStatusText = `${lang === 'vi' ? 'Tạm dừng lúc' : lang === 'en' ? 'Paused at' : 'Приостановлено'} ${timeStr}`;
              } catch (_) {
                pausedStatusText = `${lang === 'vi' ? 'Tạm dừng' : lang === 'en' ? 'Paused' : 'Приостановлено'} (${bi.auto_confirm_paused_at})`;
              }
            }

            return (
              <div key={itemKey} style={{ display: 'flex', flexDirection: 'column', gap: '12px', marginTop: '8px', borderTop: '1px solid var(--hu-border)', paddingTop: '16px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span style={{ fontWeight: '600', color: 'var(--hu-fg)', fontSize: '14px' }}>
                    {bi.profiles?.name || 'Unknown'} <span style={{ color: 'var(--hu-fg-2)', fontWeight: '400' }}>({bi.profiles?.phone || bi.organizer_id || '—'})</span>
                  </span>
                  <span className={`hu-chip ${bi.is_active ? 'hu-chip-teal' : 'hu-chip-coral'}`} style={{ fontSize: '11px', padding: '2px 8px' }}>
                    {bi.is_active ? 'Active' : 'Inactive'}
                  </span>
                </div>
                
                <div style={{ display: 'flex', justifyContent: 'space-between', borderBottom: '1px solid var(--hu-border)', paddingBottom: '12px' }}>
                  <span style={{ color: 'var(--hu-fg-2)', fontSize: '13px', fontWeight: '500' }}>Provider</span>
                  <span style={{ fontSize: '13px', color: 'var(--hu-fg)', textTransform: 'capitalize' }}>{provider}</span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', borderBottom: '1px solid var(--hu-border)', paddingBottom: '12px' }}>
                  <span style={{ color: 'var(--hu-fg-2)', fontSize: '13px', fontWeight: '500', flexShrink: 0 }}>Webhook URL</span>
                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px', maxWidth: '65%', justifyContent: 'flex-end' }}>
                    <span style={{ fontFamily: 'var(--hu-mono)', fontSize: '11px', color: 'var(--hu-fg)', textAlign: 'right', wordBreak: 'break-all' }}>
                      {webhookUrlDisplay}
                    </span>
                    <button
                      className="hu-btn hu-btn-ghost"
                      style={{ padding: '4px 8px', fontSize: '11px', flexShrink: 0, minHeight: 'auto' }}
                      onClick={() => handleCopyWebhook(webhookUrl)}
                      title={lang === 'vi' ? 'Sao chép toàn bộ Webhook URL' : lang === 'en' ? 'Copy full Webhook URL with token' : 'Копировать полный URL с токеном'}
                    >
                      📋
                    </button>
                  </div>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', borderBottom: '1px solid var(--hu-border)', paddingBottom: '12px' }}>
                  <span style={{ color: 'var(--hu-fg-2)', fontSize: '13px', fontWeight: '500' }}>HMAC Status</span>
                  {hmacConfigured ? (
                     <span className="hu-chip hu-chip-teal" style={{ fontSize: '11px', padding: '2px 8px' }}>Configured</span>
                  ) : (
                     <span className="hu-chip hu-chip-coral" style={{ fontSize: '11px', padding: '2px 8px' }}>Missing</span>
                  )}
                </div>
                {!hmacConfigured && (
                  <div style={{ background: 'rgba(168, 65, 42, 0.08)', color: 'var(--hu-coral, #A8412A)', padding: '12px', borderRadius: '8px', fontSize: '13px', border: '1px solid rgba(168, 65, 42, 0.22)' }}>
                    <strong>{lang === 'vi' ? 'Cảnh báo bảo mật:' : lang === 'en' ? 'Security Warning:' : 'Критическая уязвимость:'}</strong>{' '}
                    {lang === 'vi' 
                      ? 'Webhook HMAC Secret chưa được cấu hình! Tích hợp sẽ từ chối các webhook gửi đến trên production.'
                      : lang === 'en'
                      ? 'Webhook HMAC Secret is not configured! Integration will reject incoming webhooks in production.'
                      : 'Webhook HMAC Secret не настроен! Интеграция будет отклонять входящие вебхуки в production.'}
                  </div>
                )}
                <div style={{ display: 'flex', justifyContent: 'space-between', borderBottom: '1px solid var(--hu-border)', paddingBottom: '12px' }}>
                  <span style={{ color: 'var(--hu-fg-2)', fontSize: '13px', fontWeight: '500' }}>Status / Errors</span>
                  <span style={{ color: (bi.failed_webhook_count >= 3 || bi.auto_confirm_paused_at) ? 'var(--hu-coral, #A8412A)' : 'var(--hu-fg)', fontSize: '13px' }}>
                    {pausedStatusText}
                  </span>
                </div>
                <div style={{ display: 'flex', gap: '12px', marginTop: '12px' }}>
                  <button 
                    className="hu-btn hu-btn-ghost" 
                    style={{ flex: 1, minHeight: '40px' }} 
                    onClick={() => typeof handleBankPause === 'function' && bi.id && handleBankPause(bi.id)}
                  >
                    {lang === 'vi' ? 'Tạm dừng (Pause)' : lang === 'en' ? 'Pause Integration' : 'Приостановить'}
                  </button>
                  <button 
                    className="hu-btn hu-btn-primary" 
                    style={{ flex: 1, minHeight: '40px' }} 
                    onClick={() => typeof handleBankResume === 'function' && bi.id && handleBankResume(bi.id)}
                  >
                    {lang === 'vi' ? 'Khôi phục (Resume)' : lang === 'en' ? 'Resume Integration' : 'Возобновить'}
                  </button>
                </div>
              </div>
            );
          })
        )}
      </div>
    </div>
  );
}

window.CpSystemView = {
  renderSystem,
};