/**
 * Admin Cliente Dashboard - Visao 360 Estrategica por Cliente
 * Health Score, Churn Risk, Revenue Intelligence, Netting, Behavioral Insights
 */
const { buildHeader, buildFooter, buildHead, getChartJsScript } = require('./ui-template');

function buildAdminClienteHTML(user) {
  const role = user.role || 'admin';
  const pageScripts = getChartJsScript();

  const now = new Date();
  const today = now.toISOString().slice(0, 10);
  const thirtyDaysAgo = new Date(now.getTime() - 30 * 86400000).toISOString().slice(0, 10);

  const pageCSS = `
  html { scroll-behavior: smooth; scroll-padding-top: 20px; }

  /* === TRADING CONSOLE === */
  body.trading-console {
    --tc-accent: #1E8E3E; --tc-accent-bg: rgba(30,142,62,0.08);
    --tc-accent-border: rgba(30,142,62,0.15); --tc-glass: rgba(255,255,255,0.85);
    --tc-grid: rgba(0,0,0,0.06); background: var(--bg); color: var(--text);
  }
  [data-theme="dark"] body.trading-console {
    --bg: #0D1117; --card: #131A24; --text: #E2E8F0;
    --text-secondary: #94A3B8; --text-muted: #64748B;
    --border: rgba(0,255,136,0.1);
    --green: #00FF88; --green-bg: rgba(0,255,136,0.08);
    --blue: #58A6FF; --blue-bg: rgba(88,166,255,0.08);
    --orange: #F0883E; --orange-bg: rgba(240,136,62,0.08);
    --red: #FF4444; --red-bg: rgba(255,68,68,0.08);
    --purple: #BC8CFF; --purple-bg: rgba(188,140,255,0.08);
    --admin-accent: #00FF88; --admin-bg: rgba(0,255,136,0.05);
    --tc-accent: #00FF88; --tc-accent-bg: rgba(0,255,136,0.08);
    --tc-accent-border: rgba(0,255,136,0.15);
    --tc-glass: rgba(15,25,35,0.92); --tc-grid: rgba(0,255,136,0.06);
    background: #0A0F18 !important; color: var(--text); color-scheme: dark;
  }

  /* Cards */
  body.trading-console .hero-card, body.trading-console .chart-card,
  body.trading-console .metric-card, body.trading-console .filter-bar,
  body.trading-console .profile-card, body.trading-console .intel-card {
    background: var(--card); border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }
  [data-theme="dark"] body.trading-console .hero-card, [data-theme="dark"] body.trading-console .chart-card,
  [data-theme="dark"] body.trading-console .metric-card, [data-theme="dark"] body.trading-console .filter-bar,
  [data-theme="dark"] body.trading-console .profile-card, [data-theme="dark"] body.trading-console .intel-card {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(0,255,136,0.1);
    box-shadow: 0 2px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,255,136,0.05);
  }
  body.trading-console .hero-value { font-variant-numeric: tabular-nums; }
  [data-theme="dark"] body.trading-console .hero-value {
    font-family: 'SF Mono','Fira Code','Consolas',monospace; text-shadow: 0 0 8px rgba(226,232,240,0.15);
  }
  body.trading-console .section-title { color: var(--text-secondary); letter-spacing: 1px; }
  body.trading-console .section-title .icon { background: var(--tc-accent-bg) !important; color: var(--tc-accent) !important; }
  [data-theme="dark"] body.trading-console .section-title { color: rgba(0,255,136,0.7); font-family: 'SF Mono','Fira Code','Consolas',monospace; letter-spacing: 2px; }
  [data-theme="dark"] body.trading-console .section-title .icon { background: rgba(0,255,136,0.08) !important; color: #00FF88 !important; }
  body.trading-console .data-table th { background: var(--bg); color: var(--text-muted); }
  [data-theme="dark"] body.trading-console .data-table th { background: rgba(0,255,136,0.03); color: rgba(0,255,136,0.6); font-family: 'SF Mono','Fira Code','Consolas',monospace; }
  [data-theme="dark"] body.trading-console .data-table td { font-family: 'SF Mono','Fira Code','Consolas',monospace; font-size: 12px; border-bottom-color: rgba(0,255,136,0.06); }
  [data-theme="dark"] body.trading-console .data-table tr:hover td { background: rgba(0,255,136,0.05); }
  [data-theme="dark"] body.trading-console .preset-btn { background: rgba(255,255,255,0.03); color: var(--text-secondary); border-color: rgba(0,255,136,0.1); }
  [data-theme="dark"] body.trading-console .preset-btn:hover { border-color: #00FF88; color: #00FF88; }
  [data-theme="dark"] body.trading-console .preset-btn.active { background: rgba(0,255,136,0.15); color: #00FF88; border-color: rgba(0,255,136,0.3); }
  [data-theme="dark"] body.trading-console .gran-btn { background: rgba(255,255,255,0.03); color: var(--text-secondary); border-color: rgba(0,255,136,0.1); }
  [data-theme="dark"] body.trading-console .gran-btn:hover { border-color: #F9A825; color: #F9A825; }
  [data-theme="dark"] body.trading-console .gran-btn.active { background: rgba(249,168,37,0.15); color: #F9A825; border-color: rgba(249,168,37,0.3); }
  [data-theme="dark"] body.trading-console .date-inputs input[type="date"] { background: rgba(255,255,255,0.03); color: var(--text); border-color: rgba(0,255,136,0.1); }
  [data-theme="dark"] body.trading-console .app-footer { background: #0A0F18; border-top-color: rgba(0,255,136,0.1); color: var(--text-muted); }
  [data-theme="dark"] body.trading-console ::-webkit-scrollbar { width: 6px; height: 6px; }
  [data-theme="dark"] body.trading-console ::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
  [data-theme="dark"] body.trading-console ::-webkit-scrollbar-thumb { background: rgba(0,255,136,0.2); border-radius: 3px; }

  /* === Console Nav === */
  .console-nav { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 1000; display: flex; flex-direction: column; }
  .console-nav-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    width: 38px; padding: 14px 0; background: var(--card); border: 1px solid var(--border);
    border-right: none; border-radius: 8px 0 0 8px; margin-bottom: -1px;
    color: var(--text-muted); font-size: 11px; font-weight: 600; cursor: pointer;
    transition: all 0.2s; text-decoration: none; box-shadow: -2px 0 6px rgba(0,0,0,0.04);
  }
  .console-nav-btn:hover { color: var(--text); background: var(--bg); width: 42px; }
  .console-nav-btn.active { color: var(--tc-accent); background: var(--bg); width: 44px; border-color: var(--tc-accent); border-right: 1px solid var(--bg); z-index: 2; }
  [data-theme="dark"] .console-nav-btn { background: #161B22; border-color: rgba(0,255,136,0.1); color: rgba(255,255,255,0.35); }
  [data-theme="dark"] .console-nav-btn:hover { background: #1A2332; color: rgba(255,255,255,0.7); }
  [data-theme="dark"] .console-nav-btn.active { background: #0D1117; color: #00FF88; border-color: rgba(0,255,136,0.3); border-right-color: #0D1117; text-shadow: 0 0 8px rgba(0,255,136,0.4); }
  .console-nav-btn .nav-icon { font-size: 15px; line-height: 1; }
  .console-nav-btn .nav-label { writing-mode: vertical-rl; text-orientation: mixed; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; white-space: nowrap; }
  [data-theme="dark"] .console-nav-btn .nav-label { font-family: 'SF Mono','Fira Code','Consolas',monospace; }
  @media (min-width: 769px) { body.trading-console .app-container { padding-right: 50px; } }
  @media (max-width: 768px) { .console-nav-btn .nav-label { display: none; } .console-nav-btn { width: 36px; padding: 12px 0; } }
  @media (max-width: 480px) { .console-nav-btn { width: 30px; padding: 10px 0; } .console-nav-btn .nav-icon { font-size: 13px; } }

  /* === Client Search === */
  .client-search-wrap { position: relative; max-width: 600px; margin: 0 auto 24px; }
  .client-search-input {
    width: 100%; padding: 14px 20px; border: 2px solid var(--border); border-radius: 12px;
    font-size: 15px; font-family: inherit; background: var(--card); color: var(--text); transition: border-color 0.2s; outline: none;
  }
  .client-search-input:focus { border-color: var(--tc-accent); }
  .client-search-input::placeholder { color: var(--text-muted); }
  [data-theme="dark"] .client-search-input { background: rgba(255,255,255,0.03); border-color: rgba(0,255,136,0.15); }
  [data-theme="dark"] .client-search-input:focus { border-color: #00FF88; }
  .client-dropdown {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 100;
    background: var(--card); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15); max-height: 360px; overflow-y: auto; display: none; margin-top: 4px;
  }
  .client-dropdown.open { display: block; }
  [data-theme="dark"] .client-dropdown { background: #161B22; border-color: rgba(0,255,136,0.15); }
  .client-dropdown-item { padding: 12px 20px; cursor: pointer; font-size: 14px; color: var(--text); border-bottom: 1px solid var(--border); transition: background 0.1s; }
  .client-dropdown-item:last-child { border-bottom: none; }
  .client-dropdown-item:hover { background: var(--bg); }
  [data-theme="dark"] .client-dropdown-item:hover { background: rgba(0,255,136,0.05); }
  .client-dropdown-item .item-id { font-size: 11px; color: var(--text-muted); margin-left: 8px; }
  .client-selected-badge {
    display: none; align-items: center; gap: 12px; padding: 12px 20px;
    background: var(--tc-accent-bg); border: 1px solid var(--tc-accent-border); border-radius: 12px;
    font-size: 15px; font-weight: 600; color: var(--text); max-width: 600px; margin: 0 auto 24px;
  }
  .client-selected-badge.visible { display: flex; }
  .client-selected-badge .badge-name { flex: 1; }
  .client-selected-badge .badge-clear {
    background: none; border: 1px solid var(--border); border-radius: 8px; padding: 6px 14px;
    font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text-secondary); font-family: inherit;
  }
  .client-selected-badge .badge-clear:hover { border-color: var(--red); color: var(--red); }

  /* Empty State */
  .empty-state { text-align: center; padding: 40px 20px 20px; color: var(--text-muted); }
  .empty-state .empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.3; }
  .empty-state h2 { font-size: 20px; font-weight: 700; margin-bottom: 6px; color: var(--text-secondary); }
  .empty-state p { font-size: 14px; margin-bottom: 0; }

  /* Top Clients Grid */
  .top-clients-section { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
  .top-clients-tier { margin-bottom: 20px; }
  .tier-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 0 4px; }
  .tier-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
  .tier-dot.tier-high { background: var(--green, #1E8E3E); }
  .tier-dot.tier-mid { background: var(--blue, #58A6FF); }
  .tier-dot.tier-low { background: var(--orange, #F0883E); }
  .tier-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); }
  .tier-count { font-size: 11px; color: var(--text-muted); margin-left: auto; }
  .top-clients-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
  .top-client-card {
    padding: 14px 16px; border-radius: 10px; cursor: pointer; transition: all 0.15s;
    background: var(--card); border: 1px solid var(--border); position: relative; overflow: hidden;
  }
  .top-client-card:hover { border-color: var(--tc-accent); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
  [data-theme="dark"] .top-client-card { background: rgba(255,255,255,0.02); }
  [data-theme="dark"] .top-client-card:hover { background: rgba(0,255,136,0.04); border-color: #00FF88; box-shadow: 0 4px 16px rgba(0,255,136,0.08); }
  .top-client-card .tc-rank { position: absolute; top: 8px; right: 10px; font-size: 10px; font-weight: 800; color: var(--text-muted); opacity: 0.5; }
  .top-client-card .tc-name { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 24px; }
  .top-client-card .tc-stats { display: flex; gap: 12px; font-size: 11px; color: var(--text-secondary); }
  .top-client-card .tc-stats span { display: flex; align-items: center; gap: 3px; }
  .top-client-card .tc-vol { font-weight: 700; color: var(--tc-accent); }
  [data-theme="dark"] .top-client-card .tc-name { font-family: 'SF Mono','Fira Code','Consolas',monospace; }
  @media (max-width: 480px) { .top-clients-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .top-client-card { padding: 10px 12px; } }

  /* === Profile Card === */
  .profile-card { border-radius: 16px; padding: 24px; margin-bottom: 24px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
  .profile-left { display: flex; align-items: center; gap: 16px; min-width: 200px; }
  .profile-avatar {
    width: 56px; height: 56px; border-radius: 50%; background: var(--tc-accent-bg); color: var(--tc-accent);
    display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; flex-shrink: 0;
  }
  .profile-name { font-size: 20px; font-weight: 800; color: var(--text); }
  .profile-id { font-size: 12px; color: var(--text-muted); }
  .profile-stats { display: flex; gap: 20px; flex-wrap: wrap; flex: 1; }
  .profile-stat { text-align: center; min-width: 70px; }
  .profile-stat-label { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
  .profile-stat-value { font-size: 15px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
  [data-theme="dark"] .profile-stat-value { font-family: 'SF Mono','Fira Code','Consolas',monospace; }

  /* Health Score in Profile */
  .health-score-box {
    display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 90px;
    padding: 12px 16px; border-radius: 12px; border: 2px solid var(--border);
  }
  .health-score-box.score-green { border-color: var(--green); background: var(--green-bg); }
  .health-score-box.score-blue { border-color: var(--blue); background: var(--blue-bg); }
  .health-score-box.score-orange { border-color: var(--orange); background: var(--orange-bg); }
  .health-score-box.score-red { border-color: var(--red); background: var(--red-bg); }
  .health-score-number { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
  .health-score-number.green { color: var(--green); }
  .health-score-number.blue { color: var(--blue); }
  .health-score-number.orange { color: var(--orange); }
  .health-score-number.red { color: var(--red); }
  .health-score-label { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); }
  [data-theme="dark"] .health-score-number { font-family: 'SF Mono','Fira Code','Consolas',monospace; text-shadow: 0 0 12px currentColor; }

  /* === Filter Bar === */
  .filter-bar { background: var(--card); border-radius: 16px; padding: 20px 24px; border: 1px solid var(--border); margin-bottom: 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .filter-bar-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
  .filter-presets { display: flex; gap: 8px; }
  .preset-btn { padding: 8px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text-secondary); transition: all 0.15s; font-family: inherit; }
  .preset-btn:hover { border-color: var(--admin-accent); color: var(--admin-accent); }
  .preset-btn.active { background: var(--admin-accent); color: white; border-color: var(--admin-accent); }
  .filter-divider { width: 1px; height: 32px; background: var(--border); }
  .date-inputs { display: flex; align-items: center; gap: 8px; }
  .date-inputs label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
  .date-inputs input[type="date"] { padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-family: inherit; background: var(--bg); color: var(--text); }
  .period-info { margin-left: auto; font-size: 12px; color: var(--text-muted); font-weight: 500; background: var(--bg); padding: 6px 12px; border-radius: 6px; }
  .export-btn { background: var(--green); color: white; border: none; padding: 8px 16px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.15s; }
  .export-btn:hover { opacity: 0.85; transform: translateY(-1px); }
  [data-theme="dark"] .export-btn { background: rgba(0,255,136,0.15); color: #00FF88; border: 1px solid rgba(0,255,136,0.3); }

  /* === Hero KPIs === */
  .hero-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 28px; }
  .hero-card { background: var(--card); border-radius: 16px; padding: 18px 16px; border: 1px solid var(--border); position: relative; overflow: hidden; min-width: 0; }
  .hero-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
  .hero-card.volume::before { background: linear-gradient(90deg, var(--blue), #42A5F5); }
  .hero-card.transactions::before { background: linear-gradient(90deg, var(--purple), #AB47BC); }
  .hero-card.spread::before { background: linear-gradient(90deg, var(--green), #4CAF50); }
  .hero-card.ticket::before { background: linear-gradient(90deg, #00897B, #26A69A); }
  .hero-card.arpa::before { background: linear-gradient(90deg, #F9A825, #FFD54F); }
  .hero-card.avgspread::before { background: linear-gradient(90deg, var(--orange), #FFA726); }
  .hero-label { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
  .hero-value { font-size: clamp(13px, 1.4vw, 24px); font-weight: 800; color: var(--text); margin-bottom: 4px; font-variant-numeric: tabular-nums; word-break: break-word; min-width: 0; line-height: 1.2; }
  .hero-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 12px; }
  .hero-badge.up { background: var(--green-bg); color: var(--green); }
  .hero-badge.down { background: var(--red-bg); color: var(--red); }
  .hero-badge.neutral { background: var(--blue-bg); color: var(--blue); }
  .hero-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

  /* === Sections === */
  .section-title { font-size: 14px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
  .section-title .icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; }

  /* Charts */
  .charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; }
  .charts-row.triple { grid-template-columns: 1fr 1fr 1fr; }
  .charts-row.wide-left { grid-template-columns: 2fr 1fr; }
  .chart-card { background: var(--card); border-radius: 16px; padding: 24px; border: 1px solid var(--border); }
  .chart-card h3 { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
  .chart-card h3 .badge { font-size: 10px; padding: 3px 8px; border-radius: 10px; font-weight: 700; background: var(--bg); color: var(--text-muted); }
  .chart-wrap { position: relative; height: 280px; }
  .chart-wrap.short { height: 220px; }
  .gran-selector { display: flex; align-items: center; gap: 6px; }
  .gran-btn { padding: 6px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text-secondary); transition: all 0.15s; font-family: inherit; }
  .gran-btn:hover { border-color: #F9A825; color: #F9A825; }
  .gran-btn.active { background: #F9A825; color: white; border-color: #F9A825; }

  /* === Intel Cards (Health/Risk/Netting) === */
  .intel-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 28px; }
  .intel-card { border-radius: 16px; padding: 24px; }
  .intel-card h3 { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }

  /* Health Breakdown */
  .health-gauge-wrap { display: flex; align-items: center; gap: 24px; }
  .health-gauge { position: relative; width: 140px; height: 140px; flex-shrink: 0; }
  .health-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
  .health-gauge-bg { fill: none; stroke: var(--border); stroke-width: 10; }
  .health-gauge-fill { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 0.8s ease; }
  .health-gauge-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .health-gauge-score { font-size: 36px; font-weight: 800; line-height: 1; }
  .health-gauge-label { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; }
  [data-theme="dark"] .health-gauge-score { font-family: 'SF Mono','Fira Code','Consolas',monospace; text-shadow: 0 0 16px currentColor; }
  .health-breakdown { flex: 1; display: flex; flex-direction: column; gap: 8px; }
  .health-row { display: flex; justify-content: space-between; align-items: center; }
  .health-row-label { font-size: 12px; color: var(--text-secondary); }
  .health-row-bar { width: 80px; height: 6px; border-radius: 3px; background: var(--bg); overflow: hidden; }
  .health-row-fill { height: 100%; border-radius: 3px; transition: width 0.6s; }
  .health-row-val { font-size: 12px; font-weight: 700; min-width: 30px; text-align: right; }

  /* Risk Indicators */
  .risk-level-badge { display: inline-block; padding: 4px 14px; border-radius: 8px; font-size: 12px; font-weight: 800; letter-spacing: 1px; }
  .risk-level-badge.baixo { background: var(--green-bg); color: var(--green); }
  .risk-level-badge.medio { background: var(--blue-bg); color: var(--blue); }
  .risk-level-badge.alto { background: var(--orange-bg); color: var(--orange); }
  .risk-level-badge.critico { background: var(--red-bg); color: var(--red); }
  .risk-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .risk-row:last-child { border-bottom: none; }
  .risk-row-label { font-size: 12px; color: var(--text-secondary); }
  .risk-row-value { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .risk-row-value.positive { color: var(--green); }
  .risk-row-value.negative { color: var(--red); }
  .risk-row-value.neutral { color: var(--text-muted); }

  /* Netting */
  .netting-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .netting-row:last-child { border-bottom: none; }
  .netting-label { font-size: 13px; color: var(--text-secondary); font-weight: 600; }
  .netting-value { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .netting-value.green { color: var(--green); }
  .netting-value.red { color: var(--red); }
  .netting-value.blue { color: var(--blue); }
  .gauge-bar { height: 8px; border-radius: 4px; background: var(--bg); overflow: hidden; margin: 8px 0; }
  .gauge-bar-fill { height: 100%; border-radius: 4px; transition: width 0.6s; }
  .gauge-bar-fill.green { background: linear-gradient(90deg, var(--green), #4CAF50); }
  .gauge-bar-fill.blue { background: linear-gradient(90deg, var(--blue), #42A5F5); }

  /* === Data Table === */
  .data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .data-table th { text-align: left; padding: 10px 12px; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); border-bottom: 2px solid var(--border); cursor: pointer; user-select: none; white-space: nowrap; }
  .data-table th:hover { color: var(--tc-accent); }
  .data-table th .sort-arrow { font-size: 10px; margin-left: 4px; opacity: 0.4; }
  .data-table th.sorted .sort-arrow { opacity: 1; color: var(--tc-accent); }
  .data-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text); font-variant-numeric: tabular-nums; }
  .data-table tr:last-child td { border-bottom: none; }
  .data-table tr:hover td { background: var(--bg); }
  .data-table tfoot td { font-weight: 700; border-top: 2px solid var(--border); background: var(--bg); }
  .flow-tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; }
  .flow-tag.brl-usd { background: var(--blue-bg); color: var(--blue); }
  .flow-tag.usd-brl { background: var(--green-bg); color: var(--green); }

  /* Pagination */
  .table-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; flex-wrap: wrap; }
  .table-controls select { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; font-family: inherit; background: var(--bg); color: var(--text); }
  .pagination { display: flex; align-items: center; gap: 4px; }
  .page-btn { padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text-secondary); font-family: inherit; }
  .page-btn:hover { border-color: var(--tc-accent); color: var(--tc-accent); }
  .page-btn.active { background: var(--tc-accent); color: white; border-color: var(--tc-accent); }
  .page-btn:disabled { opacity: 0.4; cursor: default; }
  .page-info { font-size: 12px; color: var(--text-muted); }
  .btn-export { padding: 8px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text-secondary); font-family: inherit; }
  .btn-export:hover { border-color: var(--tc-accent); color: var(--tc-accent); }

  /* Misc */
  .loading-overlay { position: absolute; inset: 0; background: rgba(255,255,255,0.8); display: flex; align-items: center; justify-content: center; border-radius: 16px; z-index: 10; font-size: 13px; color: var(--text-muted); }
  [data-theme="dark"] .loading-overlay { background: rgba(13,17,23,0.85); }
  .content-area { display: none; }
  .content-area.visible { display: block; }
  [data-theme="dark"] .preset-btn { background: var(--card); color: var(--text-secondary); border-color: var(--border); }
  [data-theme="dark"] .preset-btn:hover { border-color: var(--admin-accent); color: var(--green); }
  [data-theme="dark"] .date-inputs input[type="date"] { background: var(--card); color: var(--text); border-color: var(--border); }
  [data-theme="dark"] .data-table tr:hover td { background: rgba(255,255,255,0.03); }

  /* === Skeleton Loading Shimmer === */
  @keyframes shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
  }
  .skel {
    background: linear-gradient(90deg, var(--card-bg,var(--card)) 25%, var(--border) 50%, var(--card-bg,var(--card)) 75%);
    background-size: 800px 100%;
    animation: shimmer 1.5s infinite ease-in-out;
    border-radius: 6px;
    display: inline-block;
  }
  .skel-value { height: 32px; width: 55%; }
  .skel-badge { height: 18px; width: 70px; }
  .skel-text  { height: 14px; width: 80%; margin: 4px 0; }
  .skel-chart { height: 100%; width: 100%; min-height: 180px; border-radius: 12px; position: absolute; top: 0; left: 0; z-index: 2; }
  .skel-row   { height: 32px; margin: 6px 0; width: 100%; }
  .skel-gauge { height: 40px; width: 90px; }
  .skel-avatar { width: 56px; height: 56px; border-radius: 50%; }
  .skel-name  { height: 22px; width: 160px; }
  .skel-stat  { height: 18px; width: 70px; }

  /* === Merchant / Checkout === */
  .merchant-badge {
    display: none; padding: 4px 12px; border-radius: 8px; font-size: 11px; font-weight: 800;
    letter-spacing: 0.5px; background: var(--purple-bg); color: var(--purple, #7B1FA2);
    text-transform: uppercase; margin-top: 4px;
  }
  .merchant-badge.visible { display: inline-block; }
  .hero-card.checkout::before { background: linear-gradient(90deg, var(--purple, #7B1FA2), #AB47BC); }
  .checkout-section { display: none; }
  .checkout-section.visible { display: block; }
  .flow-tag.checkout { background: var(--purple-bg); color: var(--purple, #7B1FA2); }
  .top-payer-row { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.1s; }
  .top-payer-row:last-child { border-bottom: none; }
  .top-payer-row:hover { background: var(--bg); }
  [data-theme="dark"] .top-payer-row:hover { background: rgba(0,255,136,0.04); }
  .top-payer-rank { width: 28px; font-size: 11px; font-weight: 800; color: var(--text-muted); text-align: center; }
  .top-payer-info { flex: 1; min-width: 0; }
  .top-payer-name { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .top-payer-stats { font-size: 11px; color: var(--text-muted); }
  .top-payer-vol { font-size: 14px; font-weight: 700; color: var(--purple, #7B1FA2); font-variant-numeric: tabular-nums; }
  [data-theme="dark"] .top-payer-vol { color: #BC8CFF; }
  [data-theme="dark"] .top-payer-name { font-family: 'SF Mono','Fira Code','Consolas',monospace; }

  /* === Responsive === */
  @media (max-width: 1200px) { .hero-grid { grid-template-columns: repeat(3, 1fr); } .intel-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 900px) { .charts-row, .charts-row.wide-left { grid-template-columns: 1fr; } .charts-row.triple { grid-template-columns: 1fr 1fr; } .charts-row.triple > :last-child { grid-column: span 2; } .intel-grid { grid-template-columns: 1fr; } .filter-divider { display: none; } .profile-card { flex-direction: column; text-align: center; } .profile-left { flex-direction: column; } .profile-stats { justify-content: center; } .health-gauge-wrap { flex-direction: column; align-items: center; } }
  @media (max-width: 768px) { .filter-bar { padding: 14px 16px; gap: 10px; flex-direction: column; align-items: stretch; } .filter-bar-label { text-align: center; } .filter-presets { flex-wrap: wrap; justify-content: center; } .preset-btn { padding: 10px 14px; min-height: 44px; flex: 1; min-width: 55px; text-align: center; } .date-inputs { flex-wrap: wrap; justify-content: center; } .date-inputs input[type="date"] { flex: 1; min-width: 130px; min-height: 44px; } .period-info { margin-left: 0; width: 100%; text-align: center; } .hero-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .hero-card { padding: 14px; } .hero-value { font-size: 20px; } .charts-row, .charts-row.triple { grid-template-columns: 1fr; } .charts-row.triple > :last-child { grid-column: span 1; } .chart-card { padding: 18px; } .chart-wrap { height: 250px; } .section-title { font-size: 13px; } .table-controls { flex-direction: column; align-items: stretch; } .data-table { font-size: 12px; } .data-table th { padding: 10px 8px; font-size: 10px; } .data-table td { padding: 10px 8px; white-space: nowrap; } }
  @media (max-width: 480px) { .hero-grid { grid-template-columns: 1fr; } .chart-card { padding: 14px; } .chart-wrap { height: 200px; } .chart-wrap.short { height: 160px; } .data-table { font-size: 11px; } .data-table th { padding: 8px 6px; font-size: 9px; } .data-table td { padding: 8px 6px; } .intel-card { padding: 16px; } .health-gauge { width: 110px; height: 110px; } .health-gauge-score { font-size: 28px; } }
  `;

  return `<!DOCTYPE html>
<html lang="pt-BR">
<head>
${buildHead('Clientes 360', pageCSS, pageScripts)}
</head>
<body class="trading-console">

${buildHeader({ role: role, userName: user.nome, activePage: 'cliente', permissions: user.permissions || [] })}

<div class="app-container">

  <!-- Client Search -->
  <div class="client-search-wrap" id="searchWrap">
    <input type="text" class="client-search-input" id="searchInput" placeholder="Buscar cliente por nome..." autocomplete="off">
    <div class="client-dropdown" id="searchDropdown"></div>
  </div>
  <div class="client-selected-badge" id="selectedBadge">
    <span class="badge-name" id="badgeName"></span>
    <button class="badge-clear" onclick="clearClient()">Limpar</button>
  </div>

  <!-- Empty State + Top Clients -->
  <div id="emptyState">
    <div class="empty-state">
      <div class="empty-icon">&#x1F50D;</div>
      <h2>Selecione um cliente</h2>
      <p>Busque acima ou clique em um dos top clientes abaixo</p>
    </div>
    <div class="top-clients-section" id="topClientsSection"></div>
  </div>

  <!-- Content Area -->
  <div class="content-area" id="contentArea">

    <!-- Profile Card with Health Score -->
    <div class="profile-card" id="profileCard">
      <div class="profile-left">
        <div class="profile-avatar" id="profileAvatar"><div class="skel skel-avatar"></div></div>
        <div>
          <div class="profile-name" id="profileName"><div class="skel skel-name"></div></div>
          <div class="profile-id" id="profileId"><div class="skel skel-text"></div></div>
          <div class="merchant-badge" id="merchantBadge">MERCHANT</div>
        </div>
      </div>
      <div class="profile-stats">
        <div class="profile-stat"><div class="profile-stat-label">Primeira Op</div><div class="profile-stat-value" id="profileFirstOp"><div class="skel skel-stat"></div></div></div>
        <div class="profile-stat"><div class="profile-stat-label">Ultima Op</div><div class="profile-stat-value" id="profileLastOp"><div class="skel skel-stat"></div></div></div>
        <div class="profile-stat"><div class="profile-stat-label">Meses Ativo</div><div class="profile-stat-value" id="profileMonths"><div class="skel skel-stat"></div></div></div>
        <div class="profile-stat"><div class="profile-stat-label">LTV (Receita)</div><div class="profile-stat-value" id="profileLTV"><div class="skel skel-stat"></div></div></div>
        <div class="profile-stat"><div class="profile-stat-label">Vol. Lifetime</div><div class="profile-stat-value" id="profileVolume"><div class="skel skel-stat"></div></div></div>
        <div class="profile-stat"><div class="profile-stat-label">Ops Lifetime</div><div class="profile-stat-value" id="profileOps"><div class="skel skel-stat"></div></div></div>
      </div>
      <div class="health-score-box" id="healthScoreBox">
        <div class="health-score-number" id="healthScoreNum"><div class="skel skel-gauge"></div></div>
        <div class="health-score-label" id="healthScoreLabel">Health</div>
      </div>
      <div id="churnRisk" style="padding:0 16px 16px;"></div>
    </div>

    <!-- Date Filter -->
    <div class="filter-bar" id="filterBar">
      <span class="filter-bar-label">Periodo:</span>
      <div class="filter-presets">
        <button class="preset-btn" data-preset="7d">7d</button>
        <button class="preset-btn active" data-preset="30d">30d</button>
        <button class="preset-btn" data-preset="90d">90d</button>
        <button class="preset-btn" data-preset="ytd">YTD</button>
        <button class="preset-btn" data-preset="all">Tudo</button>
      </div>
      <div class="filter-divider"></div>
      <div class="date-inputs">
        <label>De:</label><input type="date" id="dateStart" value="${thirtyDaysAgo}">
        <label>Ate:</label><input type="date" id="dateEnd" value="${today}">
      </div>
      <span class="period-info" id="periodInfo">--</span>
      <button class="export-btn" onclick="window.location.href='/admin/api/export/clients-excel'" title="Export Top Clients to Excel">Export Excel</button>
    </div>

    <!-- CambioPay label (merchant only) -->
    <div class="checkout-section" id="cambioPayLabel">
      <div class="section-title">
        <span class="icon">&#x1F4B1;</span>
        CambioPay (Transfers)
      </div>
    </div>

    <!-- Hero KPIs (6) -->
    <div class="hero-grid" id="heroGrid">
      <div class="hero-card volume"><div class="hero-label">Volume USD</div><div class="hero-value" id="kpiVolume"><div class="skel skel-value"></div></div><span class="hero-badge neutral" id="kpiVolBadge"><div class="skel skel-badge"></div></span></div>
      <div class="hero-card transactions"><div class="hero-label">Transacoes</div><div class="hero-value" id="kpiTx"><div class="skel skel-value"></div></div><span class="hero-badge neutral" id="kpiTxBadge"><div class="skel skel-badge"></div></span></div>
      <div class="hero-card spread"><div class="hero-label">Receita USD</div><div class="hero-value" id="kpiSpread"><div class="skel skel-value"></div></div><span class="hero-badge neutral" id="kpiSpreadBadge"><div class="skel skel-badge"></div></span></div>
      <div class="hero-card ticket"><div class="hero-label">Ticket Medio</div><div class="hero-value" id="kpiTicket"><div class="skel skel-value"></div></div><div class="hero-sub">USD / operacao</div></div>
      <div class="hero-card arpa"><div class="hero-label">ARPA</div><div class="hero-value" id="kpiARPA"><div class="skel skel-value"></div></div><div class="hero-sub">receita / mes</div></div>
      <div class="hero-card avgspread"><div class="hero-label">Spread Medio</div><div class="hero-value" id="kpiAvgSpread"><div class="skel skel-value"></div></div><div class="hero-sub">% ponderado</div></div>
    </div>

    <!-- Checkout KPIs (merchant only) -->
    <div class="checkout-section" id="checkoutKpiSection">
      <div class="section-title" id="sectionCheckout">
        <span class="icon">&#x1F6D2;</span>
        CambioCheckout (Merchant)
      </div>
      <div class="hero-grid" id="checkoutHeroGrid">
        <div class="hero-card checkout"><div class="hero-label">Checkout Volume</div><div class="hero-value" id="ckVolume"><div class="skel skel-value"></div></div><span class="hero-badge neutral" id="ckVolBadge"><div class="skel skel-badge"></div></span></div>
        <div class="hero-card checkout"><div class="hero-label">Payers Unicos</div><div class="hero-value" id="ckPayers"><div class="skel skel-value"></div></div><div class="hero-sub">pagadores distintos</div></div>
        <div class="hero-card checkout"><div class="hero-label">Receita Checkout</div><div class="hero-value" id="ckRevenue"><div class="skel skel-value"></div></div><span class="hero-badge neutral" id="ckRevBadge"><div class="skel skel-badge"></div></span></div>
        <div class="hero-card checkout"><div class="hero-label">Checkout Ops</div><div class="hero-value" id="ckOps"><div class="skel skel-value"></div></div><span class="hero-badge neutral" id="ckOpsBadge"><div class="skel skel-badge"></div></span></div>
        <div class="hero-card checkout"><div class="hero-label">Ticket Checkout</div><div class="hero-value" id="ckTicket"><div class="skel skel-value"></div></div><div class="hero-sub">USD / operacao</div></div>
        <div class="hero-card checkout"><div class="hero-label">Spread Checkout</div><div class="hero-value" id="ckSpread"><div class="skel skel-value"></div></div><div class="hero-sub">% medio</div></div>
      </div>
    </div>

    <!-- Checkout Analytics (merchant only) -->
    <div class="checkout-section" id="checkoutAnalyticsSection">
      <div class="charts-row wide-left">
        <div class="chart-card">
          <h3>Checkout Mensal: Volume + Payers</h3>
          <div class="chart-wrap"><div class="skel skel-chart" id="skelCheckoutMonthly"></div><canvas id="chartCheckoutMonthly"></canvas></div>
        </div>
        <div class="chart-card">
          <h3>Top 10 Pagadores</h3>
          <div id="topPayersList" style="max-height:310px;overflow-y:auto;"></div>
        </div>
      </div>
    </div>

    <!-- Section: Saude & Risco -->
    <div class="section-title" id="sectionHealth">
      <span class="icon">&#x1F3AF;</span>
      Saude & Inteligencia de Risco
    </div>
    <div class="intel-grid">
      <div class="intel-card">
        <h3>Health Score</h3>
        <div class="health-gauge-wrap">
          <div class="health-gauge">
            <svg viewBox="0 0 140 140"><circle class="health-gauge-bg" cx="70" cy="70" r="60"/><circle class="health-gauge-fill" id="healthGaugeFill" cx="70" cy="70" r="60" stroke-dasharray="377" stroke-dashoffset="377"/></svg>
            <div class="health-gauge-center"><div class="health-gauge-score" id="healthGaugeScore"><div class="skel skel-gauge"></div></div><div class="health-gauge-label" id="healthGaugeLabel"><div class="skel skel-text"></div></div></div>
          </div>
          <div class="health-breakdown" id="healthBreakdown">
            <div class="health-row"><span class="health-row-label">Volume</span><div class="health-row-bar"><div class="health-row-fill" id="hbVol" style="width:0%;background:var(--blue);"></div></div><span class="health-row-val" id="hbVolVal">0</span></div>
            <div class="health-row"><span class="health-row-label">Frequencia</span><div class="health-row-bar"><div class="health-row-fill" id="hbFreq" style="width:0%;background:var(--green);"></div></div><span class="health-row-val" id="hbFreqVal">0</span></div>
            <div class="health-row"><span class="health-row-label">Recencia</span><div class="health-row-bar"><div class="health-row-fill" id="hbRec" style="width:0%;background:var(--orange);"></div></div><span class="health-row-val" id="hbRecVal">0</span></div>
            <div class="health-row"><span class="health-row-label">Crescimento</span><div class="health-row-bar"><div class="health-row-fill" id="hbGrow" style="width:0%;background:var(--purple);"></div></div><span class="health-row-val" id="hbGrowVal">0</span></div>
          </div>
        </div>
      </div>

      <div class="intel-card">
        <h3>Indicadores de Churn</h3>
        <div style="margin-bottom:12px;text-align:center;"><span class="risk-level-badge" id="riskBadge"><div class="skel skel-badge"></div></span></div>
        <div id="riskIndicators">
          <div class="risk-row"><span class="risk-row-label">Variacao Volume</span><span class="risk-row-value neutral" id="riskVol"><div class="skel skel-badge"></div></span></div>
          <div class="risk-row"><span class="risk-row-label">Variacao Transacoes</span><span class="risk-row-value neutral" id="riskTx"><div class="skel skel-badge"></div></span></div>
          <div class="risk-row"><span class="risk-row-label">Dias Inativo</span><span class="risk-row-value neutral" id="riskDays"><div class="skel skel-badge"></div></span></div>
          <div class="risk-row"><span class="risk-row-label">Intervalo Medio</span><span class="risk-row-value neutral" id="riskInterval"><div class="skel skel-badge"></div></span></div>
        </div>
      </div>

      <div class="intel-card">
        <h3>Netting & Posicao</h3>
        <div id="nettingContent">
          <div class="netting-row"><span class="netting-label">Saida (BRL&#x2192;USD)</span><span class="netting-value red" id="netOut"><div class="skel skel-badge"></div></span></div>
          <div class="netting-row"><span class="netting-label">Entrada (USD&#x2192;BRL)</span><span class="netting-value green" id="netIn"><div class="skel skel-badge"></div></span></div>
          <div class="netting-row" style="border-top:2px solid var(--border);padding-top:12px;"><span class="netting-label" style="font-weight:700;">Posicao Liquida</span><span class="netting-value" id="netPos"><div class="skel skel-badge"></div></span></div>
          <div style="margin-top:12px;"><div style="font-size:11px;color:var(--text-muted);margin-bottom:4px;">Eficiencia Netting</div><div class="netting-value blue" id="netEff" style="font-size:24px;"><div class="skel skel-gauge"></div></div><div class="gauge-bar"><div class="gauge-bar-fill blue" id="netEffBar" style="width:0%"></div></div></div>
        </div>
      </div>
    </div>

    <!-- Section: Revenue Intelligence -->
    <div class="section-title" id="sectionRevenue">
      <span class="icon">&#x1F4B0;</span>
      Revenue Intelligence
    </div>
    <div class="charts-row">
      <div class="chart-card">
        <h3>Receita USD Mensal + Volume</h3>
        <div class="chart-wrap"><div class="skel skel-chart" id="skelMonthlyRev"></div><canvas id="chartMonthlyRev"></canvas></div>
      </div>
      <div class="chart-card">
        <h3>Crescimento MoM %</h3>
        <div class="chart-wrap"><div class="skel skel-chart" id="skelMoM"></div><canvas id="chartMoM"></canvas></div>
      </div>
    </div>

    <!-- Section: Timeline -->
    <div class="section-title" id="sectionTimeline">
      <span class="icon">&#x1F4C8;</span>
      Linha do Tempo
    </div>
    <div class="chart-card" style="margin-bottom:28px;">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
        <h3 style="margin:0;">Volume + Quantidade Diaria</h3>
        <div class="gran-selector">
          <button class="gran-btn active" data-tl-gran="D">D</button>
          <button class="gran-btn" data-tl-gran="W">W</button>
          <button class="gran-btn" data-tl-gran="M">M</button>
        </div>
      </div>
      <div class="chart-wrap"><div class="skel skel-chart" id="skelTimeline"></div><canvas id="chartTimeline"></canvas></div>
    </div>

    <!-- Section: Flow Analysis -->
    <div class="section-title" id="sectionFlows">
      <span class="icon">&#x21C4;</span>
      Analise de Fluxo
    </div>
    <div class="charts-row">
      <div class="chart-card">
        <h3>BRL&#x2192;USD vs USD&#x2192;BRL</h3>
        <div class="chart-wrap short"><div class="skel skel-chart" id="skelFlowDonut"></div><canvas id="chartFlowDonut"></canvas></div>
      </div>
      <div class="chart-card">
        <h3>Tendencia Spread % por Fluxo</h3>
        <div class="chart-wrap"><div class="skel skel-chart" id="skelSpreadTrend"></div><canvas id="chartSpreadTrend"></canvas></div>
      </div>
    </div>

    <!-- Section: Transactions -->
    <div class="section-title" id="sectionTable">
      <span class="icon">&#x1F4CB;</span>
      Historico de Transacoes
    </div>
    <div class="chart-card" style="margin-bottom:28px;">
      <div class="table-controls">
        <div style="display:flex;align-items:center;gap:12px;">
          <span class="page-info" id="tableInfo">--</span>
          <select id="pageSizeSelect"><option value="25" selected>25</option><option value="50">50</option><option value="100">100</option></select>
        </div>
        <div style="display:flex;align-items:center;gap:8px;">
          <button class="btn-export" onclick="exportCSV()">CSV</button>
          <div class="pagination" id="pagination"></div>
        </div>
      </div>
      <div style="overflow-x:auto;-webkit-overflow-scrolling:touch;">
        <table class="data-table" id="txTable">
          <thead><tr>
            <th data-col="date">Data <span class="sort-arrow">&#x25B2;</span></th>
            <th data-col="flow">Fluxo <span class="sort-arrow">&#x25B2;</span></th>
            <th data-col="usd">USD <span class="sort-arrow">&#x25B2;</span></th>
            <th data-col="brl">BRL <span class="sort-arrow">&#x25B2;</span></th>
            <th data-col="rate">Taxa <span class="sort-arrow">&#x25B2;</span></th>
            <th data-col="ptax">PTAX <span class="sort-arrow">&#x25B2;</span></th>
            <th data-col="spread_pct">Spread% <span class="sort-arrow">&#x25B2;</span></th>
            <th data-col="iof">IOF <span class="sort-arrow">&#x25B2;</span></th>
            <th data-col="status">Status <span class="sort-arrow">&#x25B2;</span></th>
            <th data-col="provider">Provider <span class="sort-arrow">&#x25B2;</span></th>
          </tr></thead>
          <tbody id="txTableBody"><tr class="skel-tr"><td colspan="10"><div class="skel skel-row"></div></td></tr><tr class="skel-tr"><td colspan="10"><div class="skel skel-row"></div></td></tr><tr class="skel-tr"><td colspan="10"><div class="skel skel-row"></div></td></tr></tbody>
          <tfoot id="txTableFoot"></tfoot>
        </table>
      </div>
    </div>

    <!-- Section: Behavioral Insights -->
    <div class="section-title" id="sectionInsights">
      <span class="icon">&#x1F9E0;</span>
      Insights Comportamentais
    </div>
    <div class="charts-row triple">
      <div class="chart-card"><h3>Atividade por Dia da Semana</h3><div class="chart-wrap short"><div class="skel skel-chart" id="skelDow"></div><canvas id="chartDow"></canvas></div></div>
      <div class="chart-card"><h3>Ticket Medio Mensal</h3><div class="chart-wrap short"><div class="skel skel-chart" id="skelAvgSize"></div><canvas id="chartAvgSize"></canvas></div></div>
      <div class="chart-card"><h3>Providers / Metodos</h3><div class="chart-wrap short"><div class="skel skel-chart" id="skelProvider"></div><canvas id="chartProvider"></canvas></div></div>
    </div>

  </div>
</div>

<!-- Console Nav -->
<nav class="console-nav" id="consoleNav" style="display:none;">
  <a href="#searchWrap" class="console-nav-btn" data-section="searchWrap"><span class="nav-icon">&#x1F50D;</span><span class="nav-label">Busca</span></a>
  <a href="#heroGrid" class="console-nav-btn" data-section="heroGrid"><span class="nav-icon">&#x1F4CA;</span><span class="nav-label">KPIs</span></a>
  <a href="#sectionCheckout" class="console-nav-btn checkout-section" data-section="sectionCheckout"><span class="nav-icon">&#x1F6D2;</span><span class="nav-label">Checkout</span></a>
  <a href="#sectionHealth" class="console-nav-btn" data-section="sectionHealth"><span class="nav-icon">&#x1F3AF;</span><span class="nav-label">Saude</span></a>
  <a href="#sectionRevenue" class="console-nav-btn" data-section="sectionRevenue"><span class="nav-icon">&#x1F4B0;</span><span class="nav-label">Revenue</span></a>
  <a href="#sectionTimeline" class="console-nav-btn" data-section="sectionTimeline"><span class="nav-icon">&#x1F4C8;</span><span class="nav-label">Timeline</span></a>
  <a href="#sectionFlows" class="console-nav-btn" data-section="sectionFlows"><span class="nav-icon">&#x21C4;</span><span class="nav-label">Fluxos</span></a>
  <a href="#sectionTable" class="console-nav-btn" data-section="sectionTable"><span class="nav-icon">&#x1F4CB;</span><span class="nav-label">Tabela</span></a>
  <a href="#sectionInsights" class="console-nav-btn" data-section="sectionInsights"><span class="nav-icon">&#x1F9E0;</span><span class="nav-label">Insights</span></a>
</nav>

${buildFooter()}

<script>
// === State ===
var selectedClientId = null, profileData = null, clientData = null;
var currentStart = '${thirtyDaysAgo}', currentEnd = '${today}';
var currentPage = 1, pageSize = 25, sortCol = 'date', sortDir = -1, timelineGran = 'D';

// === Formatters ===
function fmtUSD(v) { return '$' + Number(v).toLocaleString('en-US', {minimumFractionDigits:0, maximumFractionDigits:0}); }
function fmtBRL(v) { return 'R$' + Number(v).toLocaleString('pt-BR', {minimumFractionDigits:2, maximumFractionDigits:2}); }
function fmtPct(v) { return Number(v).toFixed(2) + '%'; }
function fmtDate(d) { if (!d) return '--'; var p = d.slice(0,10).split('-'); return p[2]+'/'+p[1]+'/'+p[0]; }
function fmtDateShort(d) { var p = d.split('-'); return p[2]+'/'+p[1]; }
function badge(cur, prev) {
  if (!prev || prev === 0) return {cls:'neutral', text:'N/A'};
  var pct = ((cur - prev) / Math.abs(prev) * 100).toFixed(1);
  return pct > 0 ? {cls:'up', text:'+'+pct+'%'} : pct < 0 ? {cls:'down', text:pct+'%'} : {cls:'neutral', text:'0%'};
}

// === Theme ===
function getChartTheme() {
  var dk = document.documentElement.getAttribute('data-theme') === 'dark';
  return dk ? {
    text:'#94A3B8', grid:'rgba(0,255,136,0.06)', tooltipBg:'#1A2332', tooltipTitle:'#E2E8F0', tooltipBody:'#94A3B8', tooltipBorder:'rgba(0,255,136,0.15)',
    donutColors:['#58A6FF','#00FF88'], volumeBar:'rgba(88,166,255,0.15)', volumeBorder:'rgba(88,166,255,0.4)', lineQtd:'#F9A825',
    spreadBrl:'#58A6FF', spreadUsd:'#00FF88', revBar:'rgba(0,255,136,0.2)', revBorder:'rgba(0,255,136,0.5)', revLine:'#58A6FF',
    momUp:'rgba(0,255,136,0.4)', momDown:'rgba(255,68,68,0.4)', momBorderUp:'#00FF88', momBorderDown:'#FF4444',
    flowColors:['#58A6FF','#00FF88','#BC8CFF'], providerColors:['#58A6FF','#00FF88','#BC8CFF','#F9A825','#FF7043','#78909C','#FF6B9D','#7C8CFF'],
    dowBar:'rgba(0,255,136,0.25)', dowBorder:'rgba(0,255,136,0.6)', avgLine:'#F9A825',
    healthGreen:'#00FF88', healthBlue:'#58A6FF', healthOrange:'#F0883E', healthRed:'#FF4444'
  } : {
    text:'#5F6368', grid:'rgba(0,0,0,0.06)', tooltipBg:'#FFFFFF', tooltipTitle:'#1A1D23', tooltipBody:'#5F6368', tooltipBorder:'rgba(0,0,0,0.1)',
    donutColors:['#1A73E8','#1E8E3E'], volumeBar:'rgba(26,115,232,0.12)', volumeBorder:'rgba(26,115,232,0.4)', lineQtd:'#F57C00',
    spreadBrl:'#1A73E8', spreadUsd:'#1E8E3E', revBar:'rgba(30,142,62,0.15)', revBorder:'rgba(30,142,62,0.5)', revLine:'#1A73E8',
    momUp:'rgba(30,142,62,0.3)', momDown:'rgba(217,48,37,0.3)', momBorderUp:'#1E8E3E', momBorderDown:'#D93025',
    flowColors:['#1A73E8','#1E8E3E','#7B1FA2'], providerColors:['#1A73E8','#1E8E3E','#7B1FA2','#F57C00','#D84315','#546E7A','#D81B60','#3F51B5'],
    dowBar:'rgba(30,142,62,0.2)', dowBorder:'rgba(30,142,62,0.6)', avgLine:'#F57C00',
    healthGreen:'#1E8E3E', healthBlue:'#1A73E8', healthOrange:'#E8710A', healthRed:'#D93025'
  };
}
function applyChartDefaults(t) {
  if (typeof Chart === 'undefined') return;
  Chart.defaults.color = t.text; Chart.defaults.borderColor = t.grid;
  Chart.defaults.plugins.legend.labels.color = t.text;
  Chart.defaults.plugins.tooltip.backgroundColor = t.tooltipBg;
  Chart.defaults.plugins.tooltip.titleColor = t.tooltipTitle;
  Chart.defaults.plugins.tooltip.bodyColor = t.tooltipBody;
  Chart.defaults.plugins.tooltip.borderColor = t.tooltipBorder;
  Chart.defaults.plugins.tooltip.borderWidth = 1;
}

// === Skeleton helpers ===
function showChart(skelId) {
  var s = document.getElementById(skelId);
  if (s) s.remove();
}

// === Charts ===
var chartTimeline, chartFlowDonut, chartSpreadTrend, chartDow, chartAvgSize, chartProvider, chartMonthlyRev, chartMoM, chartCheckoutMonthly;
function destroyAllCharts() {
  [chartTimeline, chartFlowDonut, chartSpreadTrend, chartDow, chartAvgSize, chartProvider, chartMonthlyRev, chartMoM, chartCheckoutMonthly].forEach(function(c){if(c)c.destroy();});
  chartTimeline = chartFlowDonut = chartSpreadTrend = chartDow = chartAvgSize = chartProvider = chartMonthlyRev = chartMoM = chartCheckoutMonthly = null;
}

// === Health Score ===
function computeHealthScore(profile, data) {
  var monthsActive = profile.months_active || 1;
  var lifetimeMonthlyAvg = profile.total_vol_usd / monthsActive;
  var periodMonths = Math.max(1, (data.monthly || []).length);
  var periodMonthlyAvg = data.kpis.total.vol_usd / periodMonths;

  // Volume (0-25): current vs lifetime
  var volRatio = lifetimeMonthlyAvg > 0 ? Math.min(2, periodMonthlyAvg / lifetimeMonthlyAvg) : 0;
  var volScore = Math.min(25, Math.round(volRatio * 12.5));

  // Frequency (0-25): ops per month
  var freqPerMonth = data.kpis.total.qtd / periodMonths;
  var freqScore = Math.min(25, Math.round(Math.min(freqPerMonth / 4, 1) * 25));

  // Recency (0-25): days inactive
  var di = profile.days_inactive || 0;
  var recScore = di <= 7 ? 25 : di <= 14 ? 22 : di <= 30 ? 18 : di <= 60 ? 12 : di <= 90 ? 6 : 0;

  // Growth (0-25): MoM trend
  var growScore = 12;
  var monthly = data.monthly || [];
  if (monthly.length >= 2) {
    var recent = monthly[monthly.length - 1].vol_usd;
    var prev = monthly[monthly.length - 2].vol_usd;
    var g = prev > 0 ? (recent - prev) / prev : 0;
    growScore = g >= 0.2 ? 25 : g >= 0.05 ? 20 : g >= 0 ? 15 : g >= -0.1 ? 10 : g >= -0.3 ? 5 : 0;
  }

  var total = volScore + freqScore + recScore + growScore;
  var level, color;
  if (total >= 75) { level = 'Excelente'; color = 'green'; }
  else if (total >= 55) { level = 'Bom'; color = 'blue'; }
  else if (total >= 35) { level = 'Atencao'; color = 'orange'; }
  else { level = 'Em Risco'; color = 'red'; }

  return { total: total, level: level, color: color, volume: volScore, frequency: freqScore, recency: recScore, growth: growScore };
}

function renderHealthScore(hs, t) {
  // Profile badge
  var box = document.getElementById('healthScoreBox');
  box.className = 'health-score-box score-' + hs.color;
  document.getElementById('healthScoreNum').className = 'health-score-number ' + hs.color;
  document.getElementById('healthScoreNum').textContent = hs.total;
  document.getElementById('healthScoreLabel').textContent = hs.level;

  // Gauge
  var circumference = 2 * Math.PI * 60; // r=60
  var offset = circumference - (hs.total / 100) * circumference;
  var fill = document.getElementById('healthGaugeFill');
  fill.style.strokeDashoffset = offset;
  var colorMap = {green: t.healthGreen, blue: t.healthBlue, orange: t.healthOrange, red: t.healthRed};
  fill.style.stroke = colorMap[hs.color] || t.healthGreen;
  var gs = document.getElementById('healthGaugeScore');
  gs.textContent = hs.total;
  gs.style.color = colorMap[hs.color];
  document.getElementById('healthGaugeLabel').textContent = hs.level;

  // Breakdown bars
  var items = [{id:'Vol', val:hs.volume}, {id:'Freq', val:hs.frequency}, {id:'Rec', val:hs.recency}, {id:'Grow', val:hs.growth}];
  items.forEach(function(it) {
    document.getElementById('hb'+it.id).style.width = (it.val / 25 * 100) + '%';
    document.getElementById('hb'+it.id+'Val').textContent = it.val + '/25';
  });
}

// === Churn Risk ===
function computeAndRenderRisk(profile, data) {
  var c = data.comparison;
  var volChange = c.prev_vol_usd > 0 ? ((data.kpis.total.vol_usd - c.prev_vol_usd) / c.prev_vol_usd * 100) : null;
  var txChange = c.prev_qtd > 0 ? ((data.kpis.total.qtd - c.prev_qtd) / c.prev_qtd * 100) : null;
  var di = profile.days_inactive || 0;
  var avgInterval = profile.total_ops > 1 && profile.months_active > 0 ? Math.round(profile.months_active * 30.44 / profile.total_ops) : null;

  // Risk scoring
  var pts = 0;
  if (volChange !== null && volChange < -30) pts += 3; else if (volChange !== null && volChange < -10) pts += 1;
  if (txChange !== null && txChange < -30) pts += 3; else if (txChange !== null && txChange < -10) pts += 1;
  if (di > 90) pts += 3; else if (di > 30) pts += 2; else if (di > 14) pts += 1;

  var level, cls;
  if (pts >= 7) { level = 'CRITICO'; cls = 'critico'; }
  else if (pts >= 4) { level = 'ALTO'; cls = 'alto'; }
  else if (pts >= 2) { level = 'MEDIO'; cls = 'medio'; }
  else { level = 'BAIXO'; cls = 'baixo'; }

  document.getElementById('riskBadge').className = 'risk-level-badge ' + cls;
  document.getElementById('riskBadge').textContent = level;

  function fmtChange(v) {
    if (v === null) return {text: 'N/A', cls: 'neutral'};
    var txt = (v >= 0 ? '+' : '') + v.toFixed(1) + '%';
    return {text: txt, cls: v >= 0 ? 'positive' : 'negative'};
  }
  var vc = fmtChange(volChange); var tc = fmtChange(txChange);
  document.getElementById('riskVol').textContent = vc.text; document.getElementById('riskVol').className = 'risk-row-value ' + vc.cls;
  document.getElementById('riskTx').textContent = tc.text; document.getElementById('riskTx').className = 'risk-row-value ' + tc.cls;
  document.getElementById('riskDays').textContent = di + 'd';
  document.getElementById('riskDays').className = 'risk-row-value ' + (di > 30 ? 'negative' : di > 14 ? 'neutral' : 'positive');
  document.getElementById('riskInterval').textContent = avgInterval ? avgInterval + 'd' : 'N/A';
  document.getElementById('riskInterval').className = 'risk-row-value neutral';
}

// === Netting ===
function renderNetting(data) {
  var out = data.kpis.brlUsd.vol_usd;
  var inp = data.kpis.usdBrl.vol_usd;
  var net = inp - out;
  var eff = Math.max(out, inp) > 0 ? Math.round(Math.min(out, inp) / Math.max(out, inp) * 100) : 0;
  document.getElementById('netOut').textContent = fmtUSD(out);
  document.getElementById('netIn').textContent = fmtUSD(inp);
  var posEl = document.getElementById('netPos');
  posEl.textContent = (net >= 0 ? '+' : '') + fmtUSD(net);
  posEl.className = 'netting-value ' + (net >= 0 ? 'green' : 'red');
  document.getElementById('netEff').textContent = eff + '%';
  document.getElementById('netEffBar').style.width = eff + '%';
}

// === Client Search (server-side) ===
var _searchTimer = null;
function fmtVolShort(v) {
  if (v >= 1e6) return '$' + (v/1e6).toFixed(1) + 'M';
  if (v >= 1e3) return '$' + (v/1e3).toFixed(0) + 'K';
  return '$' + v;
}
function esc(s) { return s.replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;'); }
function loadClients() {
  fetch('/admin/api/clientes/top').then(function(r){return r.json();}).then(function(data) {
    renderTopClients(data);
    var params = new URLSearchParams(window.location.search);
    var deepId = params.get('id');
    if (deepId) {
      var m = data.find(function(c){return String(c.id)===String(deepId);});
      if (m) { selectClient(m.id, m.nome); }
      else { fetch('/admin/api/cliente/' + deepId + '/profile').then(function(r){return r.json();}).then(function(p){ if(p&&p.nome) selectClient(deepId, p.nome); }).catch(function(){}); }
    }
  }).catch(function(e){ console.error('loadClients:', e); });
}
function renderTopClients(top) {
  var el = document.getElementById('topClientsSection');
  if (!el || !top.length) return;
  var high = [], mid = [], low = [];
  top.forEach(function(c, i) { c._rank = i + 1; });
  var maxVol = top[0] ? top[0].vol : 1;
  top.forEach(function(c) {
    var ratio = c.vol / maxVol;
    if (ratio >= 0.3) high.push(c);
    else if (ratio >= 0.05) mid.push(c);
    else low.push(c);
  });
  function buildCards(list) {
    return '<div class="top-clients-grid">' + list.map(function(c) {
      var avgMonth = c.months > 0 ? c.vol / c.months : c.vol;
      return '<div class="top-client-card" data-id="'+c.id+'" data-nome="'+esc(c.nome)+'"><span class="tc-rank">#'+c._rank+'</span><div class="tc-name" title="'+esc(c.nome)+'">'+esc(c.nome)+'</div><div class="tc-stats"><span class="tc-vol">'+fmtVolShort(c.vol)+'</span><span>'+c.ops+' ops</span><span>~'+fmtVolShort(Math.round(avgMonth))+'/m</span></div></div>';
    }).join('') + '</div>';
  }
  var html = '';
  if (high.length) html += '<div class="top-clients-tier"><div class="tier-header"><span class="tier-dot tier-high"></span><span class="tier-label">Alto Volume</span><span class="tier-count">'+high.length+'</span></div>'+buildCards(high)+'</div>';
  if (mid.length) html += '<div class="top-clients-tier"><div class="tier-header"><span class="tier-dot tier-mid"></span><span class="tier-label">Medio Volume</span><span class="tier-count">'+mid.length+'</span></div>'+buildCards(mid)+'</div>';
  if (low.length) html += '<div class="top-clients-tier"><div class="tier-header"><span class="tier-dot tier-low"></span><span class="tier-label">Menor Volume</span><span class="tier-count">'+low.length+'</span></div>'+buildCards(low)+'</div>';
  el.innerHTML = html;
  el.addEventListener('click', function(e) {
    var card = e.target.closest('.top-client-card');
    if (card) selectClient(card.dataset.id, card.dataset.nome);
  });
}
// Server-side search
document.getElementById('searchInput').addEventListener('input', function(e) {
  clearTimeout(_searchTimer);
  var val = e.target.value.trim();
  _searchTimer = setTimeout(function() {
    var dd = document.getElementById('searchDropdown');
    if (val.length < 2) { dd.classList.remove('open'); return; }
    fetch('/admin/api/clientes/search?q=' + encodeURIComponent(val)).then(function(r){return r.json();}).then(function(matches) {
      if (!matches.length) { dd.innerHTML = '<div class="client-dropdown-item" style="color:var(--text-muted)">Nenhum resultado</div>'; dd.classList.add('open'); return; }
      dd.innerHTML = matches.map(function(c){return '<div class="client-dropdown-item" data-id="'+c.id+'" data-nome="'+esc(c.nome)+'">'+esc(c.nome)+'<span class="item-id">#'+c.id+'</span></div>';}).join('');
      dd.classList.add('open');
    }).catch(function(){ dd.classList.remove('open'); });
  }, 300);
});
document.getElementById('searchDropdown').addEventListener('click', function(e) {
  var item = e.target.closest('.client-dropdown-item'); if (!item || !item.dataset.id) return;
  selectClient(item.dataset.id, item.dataset.nome);
});
document.addEventListener('click', function(e) { if (!e.target.closest('.client-search-wrap')) document.getElementById('searchDropdown').classList.remove('open'); });

function selectClient(id, nome) {
  selectedClientId = id;
  document.getElementById('searchWrap').style.display = 'none';
  document.getElementById('selectedBadge').classList.add('visible');
  document.getElementById('badgeName').textContent = nome + ' (#' + id + ')';
  document.getElementById('emptyState').style.display = 'none';
  document.getElementById('contentArea').classList.add('visible');
  document.getElementById('consoleNav').style.display = '';
  var url = new URL(window.location); url.searchParams.set('id', id); history.replaceState(null, '', url);
  loadProfile(); loadData();
}
function clearClient() {
  selectedClientId = null; profileData = null; clientData = null;
  document.getElementById('searchWrap').style.display = '';
  document.getElementById('searchInput').value = '';
  document.getElementById('selectedBadge').classList.remove('visible');
  document.getElementById('emptyState').style.display = '';
  document.getElementById('contentArea').classList.remove('visible');
  document.getElementById('consoleNav').style.display = 'none';
  document.getElementById('merchantBadge').classList.remove('visible');
  document.querySelectorAll('.checkout-section').forEach(function(el){ el.classList.remove('visible'); });
  destroyAllCharts();
  var url = new URL(window.location); url.searchParams.delete('id'); history.replaceState(null, '', url);
}

// === Profile ===
function loadProfile() {
  fetch('/admin/api/cliente/' + selectedClientId + '/profile').then(function(r){return r.json();}).then(function(data) {
    profileData = data; renderProfile(data);
    // Load churn risk
    fetch('/admin/api/cliente/' + selectedClientId + '/churn').then(function(r){return r.json();}).then(function(churn) {
      renderChurnRisk(churn);
    }).catch(function(){});
  });
}
function renderProfile(p) {
  var ini = p.nome.split(' ').map(function(w){return w[0];}).slice(0,2).join('').toUpperCase();
  document.getElementById('profileAvatar').textContent = ini;
  document.getElementById('profileName').textContent = p.nome;
  document.getElementById('profileId').textContent = 'ID: ' + p.id;
  document.getElementById('profileFirstOp').textContent = p.first_op ? fmtDate(p.first_op) : '--';
  document.getElementById('profileLastOp').textContent = p.last_op ? fmtDate(p.last_op) : '--';
  document.getElementById('profileMonths').textContent = p.months_active || '--';
  document.getElementById('profileLTV').textContent = fmtUSD(p.ltv || p.total_spread_revenue);
  document.getElementById('profileVolume').textContent = fmtUSD(p.total_vol_usd);
  document.getElementById('profileOps').textContent = p.total_ops;
  // Merchant badge
  var isMerchant = !!(p.merchant && p.merchant.nome_empresa);
  var badge = document.getElementById('merchantBadge');
  if (isMerchant) {
    badge.textContent = 'MERCHANT: ' + p.merchant.nome_empresa;
    badge.classList.add('visible');
  } else {
    badge.classList.remove('visible');
  }
  // Show/hide checkout sections
  document.querySelectorAll('.checkout-section').forEach(function(el) {
    el.classList.toggle('visible', isMerchant);
  });
  // Relabel hero cards for merchants to clarify CambioPay-only
  var heroLabels = document.querySelectorAll('#heroGrid .hero-label');
  heroLabels.forEach(function(lbl) {
    if (isMerchant) {
      if (lbl.textContent === 'Volume USD') lbl.textContent = 'CambioPay Volume';
      else if (lbl.textContent === 'Transacoes') lbl.textContent = 'CambioPay Ops';
      else if (lbl.textContent === 'Receita USD') lbl.textContent = 'Receita CambioPay';
    } else {
      if (lbl.textContent === 'CambioPay Volume') lbl.textContent = 'Volume USD';
      else if (lbl.textContent === 'CambioPay Ops') lbl.textContent = 'Transacoes';
      else if (lbl.textContent === 'Receita CambioPay') lbl.textContent = 'Receita USD';
    }
  });
}

function renderChurnRisk(churn) {
  var el = document.getElementById('churnRisk');
  if (!el) return;
  var colors = { low: 'var(--green)', medium: 'var(--orange)', high: 'var(--red)', critical: 'var(--red)' };
  var labels = { low: 'Low Risk', medium: 'Medium Risk', high: 'High Risk', critical: 'Critical' };
  el.innerHTML = '<div style="display:flex;align-items:center;gap:8px;margin-top:8px;">' +
    '<div style="width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;' +
    'background:' + colors[churn.risk] + '20;color:' + colors[churn.risk] + ';font-weight:700;font-size:14px;">' + churn.score + '</div>' +
    '<div><div style="font-size:12px;font-weight:600;color:' + colors[churn.risk] + '">' + labels[churn.risk] + '</div>' +
    '<div style="font-size:10px;color:var(--text-muted)">Health: ' + churn.health_score + '/100</div></div></div>' +
    '<div style="margin-top:6px;font-size:10px;color:var(--text-muted)">' +
    (churn.factors || []).slice(0,3).map(function(f){
      var ic = f.status === 'good' ? '&#x2705;' : f.status === 'warning' ? '&#x26A0;' : '&#x274C;';
      return ic + ' ' + f.name + ': ' + f.score + '/100';
    }).join(' &nbsp; ') + '</div>';
}

// === Data Loading ===
function loadData() {
  if (!selectedClientId) return;
  document.getElementById('periodInfo').textContent = 'Carregando...';
  fetch('/admin/api/cliente/' + selectedClientId + '/data?start=' + currentStart + '&end=' + currentEnd)
    .then(function(r){return r.json();}).then(function(data) { clientData = data; renderAll(data); })
    .catch(function(e){ document.getElementById('periodInfo').textContent = 'Erro'; });
}
function renderAll(d) {
  var t = getChartTheme(); applyChartDefaults(t);
  renderKPIs(d); renderIntelligence(d, t); renderCharts(d, t); renderTable(d); updatePeriodInfo();
  if (profileData && profileData.merchant) {
    renderCheckoutKPIs(d, t);
    renderCheckoutMonthly(d, t);
    renderTopPayers(d);
  }
}
function updatePeriodInfo() {
  var s = new Date(currentStart), e = new Date(currentEnd);
  var days = Math.round((e - s) / 86400000) + 1;
  document.getElementById('periodInfo').textContent = fmtDate(currentStart) + ' - ' + fmtDate(currentEnd) + ' (' + days + 'd)';
}

// === KPIs ===
function renderKPIs(d) {
  var k = d.kpis.total, c = d.comparison;
  document.getElementById('kpiVolume').textContent = fmtUSD(k.vol_usd);
  document.getElementById('kpiTx').textContent = k.qtd;
  document.getElementById('kpiSpread').textContent = fmtUSD(k.spread_revenue);
  document.getElementById('kpiTicket').textContent = fmtUSD(k.ticket_medio);
  document.getElementById('kpiAvgSpread').textContent = fmtPct(k.avg_spread_pct);
  // ARPA: receita por mes no periodo
  var periodMonths = Math.max(1, (d.monthly || []).length);
  document.getElementById('kpiARPA').textContent = fmtUSD(k.spread_revenue / periodMonths);

  var bv = badge(k.vol_usd, c.prev_vol_usd);
  document.getElementById('kpiVolBadge').className = 'hero-badge ' + bv.cls; document.getElementById('kpiVolBadge').textContent = bv.text;
  var bt = badge(k.qtd, c.prev_qtd);
  document.getElementById('kpiTxBadge').className = 'hero-badge ' + bt.cls; document.getElementById('kpiTxBadge').textContent = bt.text;
  var bs = badge(k.spread_revenue, c.prev_spread);
  document.getElementById('kpiSpreadBadge').className = 'hero-badge ' + bs.cls; document.getElementById('kpiSpreadBadge').textContent = bs.text;
}

// === Intelligence (Health + Risk + Netting) ===
function renderIntelligence(d, t) {
  if (profileData) {
    var hs = computeHealthScore(profileData, d);
    renderHealthScore(hs, t);
    computeAndRenderRisk(profileData, d);
  }
  renderNetting(d);
}

// === Charts ===
function renderCharts(d, t) {
  if (typeof Chart === 'undefined') return;
  destroyAllCharts();
  showChart('skelMonthlyRev'); showChart('skelMoM');
  showChart('skelTimeline'); showChart('skelFlowDonut');
  showChart('skelSpreadTrend'); showChart('skelDow');
  showChart('skelAvgSize'); showChart('skelProvider');
  renderMonthlyRevenue(d, t);
  renderMoMChart(d, t);
  renderTimeline(d, t);
  renderFlowDonut(d, t);
  renderSpreadTrend(d, t);
  renderDow(d, t);
  renderAvgSize(d, t);
  renderProviderChart(d, t);
}

// Revenue Monthly
function renderMonthlyRevenue(d, t) {
  var m = d.monthly || []; if (!m.length) return;
  try {
  chartMonthlyRev = new Chart(document.getElementById('chartMonthlyRev'), {
    type: 'bar', data: {
      labels: m.map(function(x){return x.mes;}),
      datasets: [
        { label: 'Receita USD', data: m.map(function(x){return x.spread_revenue;}), backgroundColor: t.revBar, borderColor: t.revBorder, borderWidth: 1, borderRadius: 4, yAxisID: 'y', order: 2 },
        { label: 'Volume USD', data: m.map(function(x){return x.vol_usd;}), type: 'line', borderColor: t.revLine, backgroundColor: 'transparent', borderWidth: 2, pointRadius: 3, tension: 0.3, yAxisID: 'y1', order: 1 }
      ]
    }, options: {
      responsive: true, maintainAspectRatio: false, interaction: {mode:'index', intersect:false},
      plugins: { legend: {position:'top', labels:{font:{size:11,weight:600},padding:12}},
        tooltip: { callbacks: { label: function(ctx) { return ctx.dataset.label === 'Receita USD' ? 'Receita: ' + fmtUSD(ctx.raw) : 'Volume: ' + fmtUSD(ctx.raw); }}}},
      scales: {
        y: { position:'left', grid:{color:t.grid}, ticks:{callback:function(v){return fmtUSD(v);}, font:{size:10}} },
        y1: { position:'right', grid:{display:false}, ticks:{callback:function(v){return fmtUSD(v);}, font:{size:10}} },
        x: { grid:{display:false}, ticks:{font:{size:10}} }
      }
    }
  }); } catch(e) { console.warn('chartMonthlyRev:', e.message); }
}

// MoM Growth
function renderMoMChart(d, t) {
  var m = d.monthly || []; if (m.length < 2) return;
  var labels = [], values = [], colors = [], borders = [];
  for (var i = 1; i < m.length; i++) {
    var prev = m[i-1].vol_usd; var cur = m[i].vol_usd;
    var pct = prev > 0 ? ((cur - prev) / prev * 100) : 0;
    labels.push(m[i].mes);
    values.push(Math.round(pct * 10) / 10);
    colors.push(pct >= 0 ? t.momUp : t.momDown);
    borders.push(pct >= 0 ? t.momBorderUp : t.momBorderDown);
  }
  try {
  chartMoM = new Chart(document.getElementById('chartMoM'), {
    type: 'bar', data: {
      labels: labels, datasets: [{ label: 'MoM %', data: values, backgroundColor: colors, borderColor: borders, borderWidth: 1, borderRadius: 4 }]
    }, options: {
      responsive: true, maintainAspectRatio: false,
      plugins: { legend:{display:false}, tooltip:{callbacks:{label:function(ctx){return 'MoM: '+(ctx.raw>=0?'+':'')+ctx.raw+'%';}}} },
      scales: {
        y: { grid:{color:t.grid}, ticks:{callback:function(v){return v+'%';}, font:{size:10}} },
        x: { grid:{display:false}, ticks:{font:{size:10}} }
      }
    }
  }); } catch(e) { console.warn('chartMoM:', e.message); }
}

// Timeline
function renderTimeline(d, t) {
  var dayMap = {};
  d.trend.brlUsd.forEach(function(r){ if (!dayMap[r.dia]) dayMap[r.dia]={vol:0,qtd:0}; dayMap[r.dia].vol+=r.vol_usd; dayMap[r.dia].qtd+=r.qtd; });
  d.trend.usdBrl.forEach(function(r){ if (!dayMap[r.dia]) dayMap[r.dia]={vol:0,qtd:0}; dayMap[r.dia].vol+=r.vol_usd; dayMap[r.dia].qtd+=r.qtd; });
  var days = Object.keys(dayMap).sort(); if (!days.length) return;
  var buckets = aggregateBuckets(days, dayMap, timelineGran);
  try {
  chartTimeline = new Chart(document.getElementById('chartTimeline'), {
    type: 'bar', data: {
      labels: buckets.labels,
      datasets: [
        { label: 'Volume USD', data: buckets.vols, type: 'bar', backgroundColor: t.volumeBar, borderColor: t.volumeBorder, borderWidth: 1, borderRadius: 4, yAxisID: 'y', order: 2 },
        { label: 'Qtd Ops', data: buckets.qtds, type: 'line', borderColor: t.lineQtd, backgroundColor: 'transparent', borderWidth: 2, pointRadius: 3, tension: 0.3, yAxisID: 'y1', order: 1 }
      ]
    }, options: {
      responsive: true, maintainAspectRatio: false, interaction: {mode:'index', intersect:false},
      plugins: { legend:{position:'top', labels:{font:{size:11,weight:600},padding:12}}, tooltip:{callbacks:{label:function(ctx){return ctx.dataset.label==='Volume USD'?'Volume: '+fmtUSD(ctx.raw):'Qtd: '+ctx.raw;}}} },
      scales: {
        y: { position:'left', grid:{color:t.grid}, ticks:{callback:function(v){return fmtUSD(v);}, font:{size:10}} },
        y1: { position:'right', grid:{display:false}, ticks:{font:{size:10}, stepSize:1}, min:0 },
        x: { grid:{display:false}, ticks:{font:{size:10}, maxRotation:45} }
      }
    }
  }); } catch(e) { console.warn('chartTimeline:', e.message); }
}
function aggregateBuckets(days, dayMap, gran) {
  if (gran === 'D') return { labels: days.map(fmtDateShort), vols: days.map(function(d){return dayMap[d].vol;}), qtds: days.map(function(d){return dayMap[d].qtd;}) };
  var bm = {};
  days.forEach(function(day) {
    var key;
    if (gran === 'W') { var dt = new Date(day); var wd = dt.getDay(); var diff = dt.getDate() - wd + (wd === 0 ? -6 : 1); key = new Date(dt.setDate(diff)).toISOString().slice(0,10); }
    else { key = day.slice(0,7); }
    if (!bm[key]) bm[key] = {vol:0,qtd:0}; bm[key].vol += dayMap[day].vol; bm[key].qtd += dayMap[day].qtd;
  });
  var keys = Object.keys(bm).sort();
  return { labels: keys.map(function(k){return gran==='W'?'S/'+fmtDateShort(k):k;}), vols: keys.map(function(k){return bm[k].vol;}), qtds: keys.map(function(k){return bm[k].qtd;}) };
}

// Flow Donut
function renderFlowDonut(d, t) {
  var bv = d.kpis.brlUsd.vol_usd, uv = d.kpis.usdBrl.vol_usd; if (!bv && !uv) return;
  try {
  chartFlowDonut = new Chart(document.getElementById('chartFlowDonut'), {
    type: 'doughnut', data: { labels: ['BRL \\u2192 USD','USD \\u2192 BRL'], datasets: [{data:[bv,uv], backgroundColor:t.donutColors, borderWidth:0, hoverOffset:8}] },
    options: { responsive:true, maintainAspectRatio:false, cutout:'65%', plugins:{legend:{position:'bottom', labels:{padding:16, font:{size:12,weight:600}}}, tooltip:{callbacks:{label:function(ctx){return ctx.label+': '+fmtUSD(ctx.raw);}}}}}
  }); } catch(e) {}
}

// Spread Trend
function renderSpreadTrend(d, t) {
  var allDays = new Set();
  d.trend.brlUsd.forEach(function(r){allDays.add(r.dia);}); d.trend.usdBrl.forEach(function(r){allDays.add(r.dia);});
  var days = Array.from(allDays).sort(); if (!days.length) return;
  var bm = {}, um = {}; d.trend.brlUsd.forEach(function(r){bm[r.dia]=r.avg_spread;}); d.trend.usdBrl.forEach(function(r){um[r.dia]=r.avg_spread;});
  try {
  chartSpreadTrend = new Chart(document.getElementById('chartSpreadTrend'), {
    type: 'line', data: {
      labels: days.map(fmtDateShort),
      datasets: [
        { label: 'BRL\\u2192USD', data: days.map(function(d){return bm[d]!=null?bm[d]:null;}), borderColor: t.spreadBrl, backgroundColor:'transparent', borderWidth:2, pointRadius:2, tension:0.3, spanGaps:true },
        { label: 'USD\\u2192BRL', data: days.map(function(d){return um[d]!=null?um[d]:null;}), borderColor: t.spreadUsd, backgroundColor:'transparent', borderWidth:2, pointRadius:2, tension:0.3, spanGaps:true }
      ]
    }, options: {
      responsive:true, maintainAspectRatio:false, interaction:{mode:'index', intersect:false},
      plugins: { legend:{position:'top', labels:{font:{size:11,weight:600},padding:12}}, tooltip:{callbacks:{label:function(ctx){return ctx.dataset.label+': '+(ctx.raw!==null?ctx.raw.toFixed(2)+'%':'N/A');}}} },
      scales: { y:{grid:{color:t.grid}, ticks:{callback:function(v){return v.toFixed(1)+'%';}, font:{size:10}}, min:0}, x:{grid:{display:false}, ticks:{font:{size:10}, maxRotation:45}} }
    }
  }); } catch(e) {}
}

// Day of Week
function renderDow(d, t) {
  var names = ['Dom','Seg','Ter','Qua','Qui','Sex','Sab'];
  var qtds = []; for (var i=1;i<=7;i++) qtds.push(d.dayOfWeek[i]?d.dayOfWeek[i].qtd:0);
  try {
  chartDow = new Chart(document.getElementById('chartDow'), {
    type:'bar', data:{ labels:names, datasets:[{label:'Ops', data:qtds, backgroundColor:t.dowBar, borderColor:t.dowBorder, borderWidth:1, borderRadius:4}] },
    options:{ responsive:true, maintainAspectRatio:false, indexAxis:'y', plugins:{legend:{display:false}}, scales:{x:{grid:{color:t.grid}, ticks:{font:{size:10}, stepSize:1}}, y:{grid:{display:false}, ticks:{font:{size:11,weight:600}}}} }
  }); } catch(e) {}
}

// Monthly Avg Ticket
function renderAvgSize(d, t) {
  var m = d.monthly || []; if (!m.length) return;
  try {
  chartAvgSize = new Chart(document.getElementById('chartAvgSize'), {
    type:'line', data:{ labels:m.map(function(x){return x.mes;}), datasets:[{label:'Ticket USD', data:m.map(function(x){return x.avg_usd;}), borderColor:t.avgLine, backgroundColor:'transparent', borderWidth:2, pointRadius:4, tension:0.3}] },
    options:{ responsive:true, maintainAspectRatio:false, plugins:{legend:{display:false}, tooltip:{callbacks:{label:function(ctx){return 'Ticket: '+fmtUSD(ctx.raw);}}}}, scales:{y:{grid:{color:t.grid}, ticks:{callback:function(v){return fmtUSD(v);}, font:{size:10}}}, x:{grid:{display:false}, ticks:{font:{size:10}}}} }
  }); } catch(e) {}
}

// Provider Donut
function renderProviderChart(d, t) {
  if (!d.providers || !d.providers.length) return;
  try {
  chartProvider = new Chart(document.getElementById('chartProvider'), {
    type:'doughnut', data:{ labels:d.providers.map(function(p){return p.name;}), datasets:[{data:d.providers.map(function(p){return p.vol_usd;}), backgroundColor:t.providerColors.slice(0,d.providers.length), borderWidth:0, hoverOffset:8}] },
    options:{ responsive:true, maintainAspectRatio:false, cutout:'55%', plugins:{legend:{position:'bottom', labels:{padding:12, font:{size:11,weight:600}}}, tooltip:{callbacks:{label:function(ctx){var total=ctx.dataset.data.reduce(function(a,b){return a+b;},0); return ctx.label+': '+fmtUSD(ctx.raw)+' ('+(total>0?(ctx.raw/total*100).toFixed(1)+'%':'0%')+')';}}}}}
  }); } catch(e) {}
}

// === Checkout Renders (Merchant) ===
function renderCheckoutKPIs(d) {
  var ck = d.kpis.checkout; if (!ck) return;
  var cmp = (d.merchant && d.merchant.comparison) || {};
  document.getElementById('ckVolume').textContent = fmtUSD(ck.vol_usd);
  document.getElementById('ckPayers').textContent = ck.unique_payers;
  document.getElementById('ckRevenue').textContent = fmtUSD(ck.revenue);
  document.getElementById('ckOps').textContent = ck.qtd;
  document.getElementById('ckTicket').textContent = fmtUSD(ck.ticket_medio);
  document.getElementById('ckSpread').textContent = fmtPct(ck.avg_spread_pct);
  var bv = badge(ck.vol_usd, cmp.prev_vol_usd);
  document.getElementById('ckVolBadge').className = 'hero-badge ' + bv.cls; document.getElementById('ckVolBadge').textContent = bv.text;
  var br = badge(ck.revenue, cmp.prev_revenue);
  document.getElementById('ckRevBadge').className = 'hero-badge ' + br.cls; document.getElementById('ckRevBadge').textContent = br.text;
  var bo = badge(ck.qtd, cmp.prev_qtd);
  document.getElementById('ckOpsBadge').className = 'hero-badge ' + bo.cls; document.getElementById('ckOpsBadge').textContent = bo.text;
}
function renderCheckoutMonthly(d, t) {
  showChart('skelCheckoutMonthly');
  if (!d.merchant || !d.merchant.monthly || !d.merchant.monthly.length) return;
  var m = d.merchant.monthly;
  if (chartCheckoutMonthly) chartCheckoutMonthly.destroy();
  try {
  chartCheckoutMonthly = new Chart(document.getElementById('chartCheckoutMonthly'), {
    type: 'bar', data: {
      labels: m.map(function(x){return x.mes;}),
      datasets: [
        { label: 'Volume USD', data: m.map(function(x){return x.vol_usd;}), backgroundColor: 'rgba(188,140,255,0.2)', borderColor: 'rgba(188,140,255,0.6)', borderWidth: 1, borderRadius: 4, yAxisID: 'y', order: 2 },
        { label: 'Payers', data: m.map(function(x){return x.unique_payers;}), type: 'line', borderColor: t.lineQtd, backgroundColor: 'transparent', borderWidth: 2, pointRadius: 3, tension: 0.3, yAxisID: 'y1', order: 1 }
      ]
    }, options: {
      responsive: true, maintainAspectRatio: false, interaction: {mode:'index', intersect:false},
      plugins: { legend: {position:'top', labels:{font:{size:11,weight:600},padding:12}},
        tooltip: { callbacks: { label: function(ctx) { return ctx.dataset.label === 'Volume USD' ? 'Volume: ' + fmtUSD(ctx.raw) : 'Payers: ' + ctx.raw; }}}},
      scales: {
        y: { position:'left', grid:{color:t.grid}, ticks:{callback:function(v){return fmtUSD(v);}, font:{size:10}} },
        y1: { position:'right', grid:{display:false}, ticks:{font:{size:10}, stepSize:1}, min:0 },
        x: { grid:{display:false}, ticks:{font:{size:10}} }
      }
    }
  }); } catch(e) { console.warn('chartCheckoutMonthly:', e.message); }
}
function renderTopPayers(d) {
  var el = document.getElementById('topPayersList');
  if (!d.merchant || !d.merchant.topPayers || !d.merchant.topPayers.length) { el.innerHTML = '<div style="text-align:center;color:var(--text-muted);padding:20px;">Sem dados</div>'; return; }
  el.innerHTML = d.merchant.topPayers.map(function(p, i) {
    return '<div class="top-payer-row" onclick="selectClient('+p.id_conta+',\\''+esc(p.nome).replace(/'/g,"\\\\'")+'\\')"><span class="top-payer-rank">#'+(i+1)+'</span><div class="top-payer-info"><div class="top-payer-name" title="'+esc(p.nome)+'">'+esc(p.nome)+'</div><div class="top-payer-stats">'+p.tx_count+' ops</div></div><span class="top-payer-vol">'+fmtUSD(p.vol_usd)+'</span></div>';
  }).join('');
}

// === Transaction Table ===
function renderTable(d) { if (!d.transactions) return; currentPage = 1; _renderTablePage(); }
function _getSortedTx() {
  if (!clientData || !clientData.transactions) return [];
  var tx = clientData.transactions.slice();
  tx.sort(function(a, b) { var va=a[sortCol], vb=b[sortCol]; if(typeof va==='string') return va.localeCompare(vb)*sortDir; return ((va||0)-(vb||0))*sortDir; });
  return tx;
}
function _renderTablePage() {
  var tx = _getSortedTx();
  var totalPages = Math.max(1, Math.ceil(tx.length / pageSize));
  if (currentPage > totalPages) currentPage = totalPages;
  var start = (currentPage - 1) * pageSize;
  var page = tx.slice(start, start + pageSize);
  var tbody = document.getElementById('txTableBody');
  if (!page.length) { tbody.innerHTML = '<tr><td colspan="10" style="text-align:center;color:var(--text-muted)">Nenhuma transacao</td></tr>'; }
  else {
    tbody.innerHTML = page.map(function(r) {
      var fc = r.flow === 'Checkout' ? 'checkout' : (r.flow === 'BRL\\u2192USD' ? 'brl-usd' : 'usd-brl');
      var provCol = r.flow === 'Checkout' && r.payer_name ? esc(r.payer_name) : (r.provider||'--');
      return '<tr><td>'+r.date.slice(0,16)+'</td><td><span class="flow-tag '+fc+'">'+r.flow+'</span></td><td>'+fmtUSD(r.usd)+'</td><td>'+fmtBRL(r.brl)+'</td><td>'+Number(r.rate).toFixed(4)+'</td><td>'+Number(r.ptax).toFixed(4)+'</td><td>'+fmtPct(r.spread_pct)+'</td><td>'+(r.iof?fmtPct(r.iof):'--')+'</td><td>'+(r.status||'--')+'</td><td>'+provCol+'</td></tr>';
    }).join('');
  }
  var foot = document.getElementById('txTableFoot');
  if (tx.length > 0) {
    var su=tx.reduce(function(s,r){return s+r.usd;},0), sb=tx.reduce(function(s,r){return s+r.brl;},0), as=tx.reduce(function(s,r){return s+r.spread_pct;},0)/tx.length;
    foot.innerHTML = '<tr><td colspan="2" style="font-weight:700">TOTAL ('+tx.length+')</td><td>'+fmtUSD(su)+'</td><td>'+fmtBRL(sb)+'</td><td colspan="2"></td><td>'+fmtPct(as)+'</td><td colspan="3"></td></tr>';
  } else foot.innerHTML = '';
  document.getElementById('tableInfo').textContent = tx.length + ' tx | Pag ' + currentPage + '/' + totalPages;
  var pagDiv = document.getElementById('pagination');
  var h = '<button class="page-btn" onclick="goPage(1)" '+(currentPage===1?'disabled':'')+'>&laquo;</button>';
  h += '<button class="page-btn" onclick="goPage('+(currentPage-1)+')" '+(currentPage===1?'disabled':'')+'>&lsaquo;</button>';
  var sp = Math.max(1, currentPage-2), ep = Math.min(totalPages, sp+4);
  for (var i=sp;i<=ep;i++) h += '<button class="page-btn'+(i===currentPage?' active':'')+'" onclick="goPage('+i+')">'+i+'</button>';
  h += '<button class="page-btn" onclick="goPage('+(currentPage+1)+')" '+(currentPage===totalPages?'disabled':'')+'>&rsaquo;</button>';
  h += '<button class="page-btn" onclick="goPage('+totalPages+')" '+(currentPage===totalPages?'disabled':'')+'>&raquo;</button>';
  pagDiv.innerHTML = h;
  document.querySelectorAll('#txTable thead th').forEach(function(th) {
    th.classList.toggle('sorted', th.dataset.col === sortCol);
    var a = th.querySelector('.sort-arrow'); if (a) a.innerHTML = th.dataset.col===sortCol?(sortDir===1?'&#x25B2;':'&#x25BC;'):'&#x25B2;';
  });
}
function goPage(p) { currentPage = p; _renderTablePage(); }
document.querySelectorAll('#txTable thead th').forEach(function(th) {
  th.addEventListener('click', function() { var col=this.dataset.col; if(!col)return; if(sortCol===col){sortDir*=-1;}else{sortCol=col;sortDir=-1;} currentPage=1; _renderTablePage(); });
});
document.getElementById('pageSizeSelect').addEventListener('change', function() { pageSize=parseInt(this.value); currentPage=1; _renderTablePage(); });

// CSV Export
function exportCSV() {
  if (!clientData || !clientData.transactions || !clientData.transactions.length) return;
  var hdr = ['Data','Fluxo','USD','BRL','Taxa','PTAX','Spread%','IOF','Status','Provider'];
  var rows = clientData.transactions.map(function(r){return [r.date,r.flow,r.usd,r.brl,r.rate,r.ptax,r.spread_pct,r.iof,r.status,r.provider].join(',');});
  var csv = hdr.join(',')+'\\n'+rows.join('\\n');
  var a = document.createElement('a'); a.href = URL.createObjectURL(new Blob([csv],{type:'text/csv'}));
  a.download = 'cliente_'+selectedClientId+'_'+currentStart+'_'+currentEnd+'.csv'; a.click();
}

// === Filters ===
document.querySelectorAll('.preset-btn').forEach(function(btn) {
  btn.addEventListener('click', function() {
    document.querySelectorAll('.preset-btn').forEach(function(b){b.classList.remove('active');}); this.classList.add('active');
    var now = new Date(), td = now.toISOString().slice(0,10), p = this.dataset.preset;
    if (p==='7d') currentStart = new Date(now.getTime()-7*86400000).toISOString().slice(0,10);
    else if (p==='30d') currentStart = new Date(now.getTime()-30*86400000).toISOString().slice(0,10);
    else if (p==='90d') currentStart = new Date(now.getTime()-90*86400000).toISOString().slice(0,10);
    else if (p==='ytd') currentStart = now.getFullYear()+'-01-01';
    else if (p==='all' && profileData && profileData.first_op) currentStart = profileData.first_op;
    else if (p==='all') currentStart = '2020-01-01';
    currentEnd = td;
    document.getElementById('dateStart').value = currentStart; document.getElementById('dateEnd').value = currentEnd;
    loadData();
  });
});
document.getElementById('dateStart').addEventListener('change', function(){currentStart=this.value; document.querySelectorAll('.preset-btn').forEach(function(b){b.classList.remove('active');}); loadData();});
document.getElementById('dateEnd').addEventListener('change', function(){currentEnd=this.value; document.querySelectorAll('.preset-btn').forEach(function(b){b.classList.remove('active');}); loadData();});

// Timeline granularity
document.querySelectorAll('[data-tl-gran]').forEach(function(btn) {
  btn.addEventListener('click', function() {
    document.querySelectorAll('[data-tl-gran]').forEach(function(b){b.classList.remove('active');}); this.classList.add('active');
    timelineGran = this.dataset.tlGran;
    if (clientData) { if (chartTimeline) chartTimeline.destroy(); renderTimeline(clientData, getChartTheme()); }
  });
});

// Console Nav
var _navSections = ['searchWrap','heroGrid','sectionCheckout','sectionHealth','sectionRevenue','sectionTimeline','sectionFlows','sectionTable','sectionInsights'];
function updateConsoleNav() {
  var sy = window.scrollY + 120, active = _navSections[0];
  _navSections.forEach(function(id){var el=document.getElementById(id); if(el&&el.offsetTop<=sy) active=id;});
  document.querySelectorAll('.console-nav-btn').forEach(function(btn){btn.classList.toggle('active', btn.dataset.section===active);});
}
window.addEventListener('scroll', updateConsoleNav);

// Theme change
window.addEventListener('themechange', function() { if (clientData) renderAll(clientData); });

// Init
document.addEventListener('DOMContentLoaded', function() { applyChartDefaults(getChartTheme()); loadClients(); });
<\/script>
</body>
</html>`;
}

module.exports = { buildAdminClienteHTML };