// ───────────────────────────────────────────────────────────
// Huio Control Panel — Dashboard View (cp-dashboard-view.jsx)
// ───────────────────────────────────────────────────────────

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

function renderDashboard({
  lang = 'vi',
  t: rawT,
  appStyles: rawAppStyles,
  users: rawUsers = [],
  groups: rawGroups = [],
  logs: rawLogs = [],
  dbStats = {},
  errorLogs: rawErrorLogs = [],
  isConnected = false,
}) {
  const appStyles = rawAppStyles || window.CP_STYLES || {};
  const t = typeof rawT === 'function' ? rawT : (k) => k;
  const users = Array.isArray(rawUsers) ? rawUsers : [];
  const groups = Array.isArray(rawGroups) ? rawGroups : [];
  const logs = Array.isArray(rawLogs) ? rawLogs : [];
  const errorLogs = Array.isArray(rawErrorLogs) ? rawErrorLogs : [];
  const vndShort = window.vndShort || ((amount) => {
    if (amount === undefined || amount === null) return "0 ₫";
    if (amount >= 1e9) return (amount / 1e9).toFixed(1) + "B ₫";
    if (amount >= 1e6) return (amount / 1e6).toFixed(1) + "M ₫";
    if (amount >= 1e3) return (amount / 1e3).toFixed(0) + "k ₫";
    return amount + " ₫";
  });

  const totalDbRows = Object.values(dbStats || {}).reduce((a, b) => Number(a || 0) + Number(b || 0), 0);
  const errors24h = errorLogs.filter(e => new Date(e.created_at || Date.now()) > new Date(Date.now() - 24 * 3600 * 1000)).length;

  return (
    <div style={appStyles.viewWrapper}>
      <div style={appStyles.welcomeBanner}>
        <h1 className="hu-h1 hu-display" style={{ margin: '0 0 6px 0' }}>{t('dashboard.welcome')}</h1>
        <p style={{ margin: 0, color: 'var(--hu-fg-2)' }}>{t('dashboard.sub')}</p>
      </div>
      
      {/* Telemetry Metrics Grid */}
      <div style={appStyles.metricsGrid}>
        <window.CpMetricCard 
          title={t('dashboard.stat.users')} 
          value={users.length} 
          iconKind="users"
        />
        <window.CpMetricCard 
          title={t('dashboard.stat.premium')} 
          value={users.filter(u => u.plan !== 'free').length} 
          iconKind="users"
        />
        <window.CpMetricCard 
          title={t('dashboard.stat.groups')} 
          value={groups.length} 
          iconKind="money"
        />
        <window.CpMetricCard 
          title={t('dashboard.stat.volume')} 
          value={vndShort(groups.reduce((acc, curr) => acc + curr.volume, 0))} 
          iconKind="money"
        />
      </div>

      {/* Interactive Cashflow Area/Line Chart */}
      <window.CpCharts.CashflowTimelineChart lang={lang} t={t} />
      
      {/* Split layout: System health & activity logging */}
      <div style={appStyles.splitLayout}>
        {/* Left Column: Recent Logs */}
        <div className="hu-card hu-card-3d-sm" style={appStyles.logsCard}>
          <h3 className="hu-h3" style={{ margin: '0 0 16px 0' }}>{t('dashboard.activity.title')}</h3>
          <div style={appStyles.logsList}>
            {logs.slice(0, 10).map(log => (
              <div key={log.id} style={appStyles.logRow}>
                <span style={appStyles.logTime}>{log.time}</span>
                <span style={typeof appStyles.logBadge === 'function' ? appStyles.logBadge(log.type) : {}}>
                  {log.type.toUpperCase()}
                </span>
                <span style={appStyles.logText}>{log.text}</span>
              </div>
            ))}
          </div>
        </div>
        
        {/* Right Column: Dynamic Health metrics */}
        <div className="hu-card hu-card-3d-sm" style={appStyles.healthCard}>
          <h3 className="hu-h3" style={{ margin: '0 0 16px 0' }}>{t('dashboard.syshealth')}</h3>
          <div style={appStyles.healthMetricsList}>
            <div style={appStyles.healthItem}>
              <div style={appStyles.healthLabel}>
                <span>{t('dashboard.syshealth.api')}</span>
                <span style={appStyles.healthValue}>{isConnected ? 'Live (OK)' : 'Demo'}</span>
              </div>
              <div className="hu-progress">
                <span style={{ width: isConnected ? '100%' : '50%', background: isConnected ? 'var(--hu-emerald)' : 'var(--hu-ochre)' }} />
              </div>
            </div>
            <div style={appStyles.healthItem}>
              <div style={appStyles.healthLabel}>
                <span>{t('dashboard.syshealth.db')}</span>
                <span style={appStyles.healthValue}>{totalDbRows > 0 ? `${totalDbRows.toLocaleString()} rows` : 'Active'}</span>
              </div>
              <div className="hu-progress">
                <span style={{ width: '100%', background: 'var(--hu-terra)' }} />
              </div>
            </div>
            <div style={appStyles.healthItem}>
              <div style={appStyles.healthLabel}>
                <span>{t('dashboard.syshealth.errors')}</span>
                <span style={appStyles.healthValue}>{errors24h} (24h)</span>
              </div>
              <div className="hu-progress">
                <span style={{ width: errors24h > 0 ? `${Math.min(100, errors24h * 10)}%` : '0%', background: 'var(--hu-rust)' }} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.CpDashboardView = {
  renderDashboard,
};