/**
 * Admin Home Dashboard - Fast daily overview
 * 3 flows: BRL→USD, USD→BRL, USD→USD (balance)
 */
const { buildHeader, buildFooter, buildHead, getChartJsScript } = require('./ui-template');

function buildAdminHomeHTML(stats, user) {
  const now = new Date().toLocaleString('pt-BR');
  const hoje = new Date().toLocaleDateString('pt-BR', { weekday: 'long', day: 'numeric', month: 'long' });
  // Support both admin and corporate roles
  const role = user.role || 'corporate';

  const formatBRL = (v) => v.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
  const formatUSD = (v) => v.toLocaleString('pt-BR', { style: 'currency', currency: 'USD' });

  // Calculate variations
  const calcVar = (hoje, ontem) => ontem > 0
    ? ((hoje - ontem) / ontem * 100).toFixed(1)
    : (hoje > 0 ? 100 : 0);

  const brlUsdVar = calcVar(stats.brlUsd.hoje.qtd, stats.brlUsd.ontem.qtd);
  const usdBrlVar = calcVar(stats.usdBrl.hoje.qtd, stats.usdBrl.ontem.qtd);
  const usdUsdVar = calcVar(stats.usdUsd.hoje.qtd, stats.usdUsd.ontem.qtd);

  const totalHoje = stats.brlUsd.hoje.qtd + stats.usdBrl.hoje.qtd + stats.usdUsd.hoje.qtd;
  const totalOntem = stats.brlUsd.ontem.qtd + stats.usdBrl.ontem.qtd + stats.usdUsd.ontem.qtd;
  const totalVar = calcVar(totalHoje, totalOntem);

  const pageScripts = getChartJsScript();

  const pageCSS = `
  /* Trading Terminal - Live Rates */
  .trading-terminal {
    background: linear-gradient(135deg, #0F1923 0%, #1A2332 50%, #0D1B2A 100%);
    border-top: 1px solid rgba(0,255,136,0.15);
    border-bottom: 1px solid rgba(0,255,136,0.15);
    padding: 16px 40px;
    position: relative;
    overflow: hidden;
  }
  .trading-terminal::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,255,136,0.3), transparent);
  }
  .trading-terminal::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,255,136,0.3), transparent);
  }
  .live-rate-bar {
    display: flex; align-items: center; justify-content: center; gap: 20px;
    max-width: 1600px; margin: 0 auto;
  }
  .terminal-title {
    font-size: 10px; font-weight: 700; color: rgba(0,255,136,0.6);
    text-transform: uppercase; letter-spacing: 2px; margin-right: 8px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  }
  .live-rate-dot {
    width: 7px; height: 7px; border-radius: 50%; background: #00FF88;
    display: inline-block; animation: blink 1.5s infinite;
    box-shadow: 0 0 6px rgba(0,255,136,0.6);
  }
  @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
  .rate-pair-group {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px; padding: 8px 14px;
  }
  .rate-pair-label {
    font-size: 11px; font-weight: 800; color: rgba(255,255,255,0.35);
    text-transform: uppercase; letter-spacing: 1px; writing-mode: vertical-rl;
    text-orientation: mixed; font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  }
  .live-rate-btn {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 8px 18px; border-radius: 6px; border: 1px solid transparent;
    font-family: inherit; font-size: 14px; font-weight: 700; cursor: default;
    transition: all 0.25s; min-width: 150px; justify-content: center;
    position: relative;
  }
  .rate-flags { font-size: 9px; opacity: 0.5; letter-spacing: 1px; line-height: 1; }
  .live-rate-btn.compra {
    background: rgba(0,255,136,0.08); color: #00FF88;
    border-color: rgba(0,255,136,0.2);
  }
  .live-rate-btn.compra:hover { background: rgba(0,255,136,0.14); }
  .live-rate-btn.venda {
    background: rgba(255,68,68,0.08); color: #FF4444;
    border-color: rgba(255,68,68,0.2);
  }
  .live-rate-btn.venda:hover { background: rgba(255,68,68,0.14); }
  .live-rate-btn .rate-value {
    font-size: 22px; font-weight: 800; letter-spacing: -0.5px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 12px currentColor;
  }
  .live-rate-btn .rate-type {
    font-size: 9px; text-transform: uppercase; letter-spacing: 1.5px;
    opacity: 0.5; font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  }
  .live-rate-btn.pulse .rate-value { animation: ratePulse 0.4s ease; }
  @keyframes ratePulse {
    0% { transform: scale(1); text-shadow: 0 0 12px currentColor; }
    50% { transform: scale(1.06); text-shadow: 0 0 24px currentColor, 0 0 48px currentColor; }
    100% { transform: scale(1); text-shadow: 0 0 12px currentColor; }
  }
  .live-rate-time {
    font-size: 10px; color: rgba(255,255,255,0.25);
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    letter-spacing: 0.5px;
  }

  .date-banner {
    background: var(--card); border-radius: 12px; padding: 16px 24px;
    margin-bottom: 24px; border: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
  }
  .date-banner h2 { font-size: 18px; font-weight: 700; text-transform: capitalize; }
  .date-banner .time { font-size: 13px; color: var(--text-secondary); }

  .kpi-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
    margin-bottom: 28px;
  }
  .kpi-card {
    background: var(--card); border-radius: 16px; padding: 24px;
    border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }
  .kpi-card.highlight { border-left: 4px solid var(--admin-accent); }
  .kpi-card.brl-usd { border-left: 4px solid var(--blue); }
  .kpi-card.usd-brl { border-left: 4px solid var(--green); }
  .kpi-card.usd-usd { border-left: 4px solid var(--purple); }
  .kpi-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
  .kpi-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.3px; }
  .kpi-badge {
    font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 12px;
  }
  .kpi-badge.up { background: var(--green-bg); color: var(--green); }
  .kpi-badge.down { background: var(--red-bg); color: var(--red); }
  .kpi-badge.neutral { background: var(--blue-bg); color: var(--blue); }
  .kpi-value { font-size: 36px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
  .kpi-sub { font-size: 13px; color: var(--text-muted); }

  .charts-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
    margin-bottom: 28px;
  }
  .chart-card {
    background: var(--card); border-radius: 16px; padding: 24px;
    border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }
  .chart-card h3 { font-size: 14px; font-weight: 700; margin-bottom: 20px; color: var(--text); }
  .chart-wrap { height: 280px; position: relative; }

  .detail-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  }
  .detail-card {
    background: var(--card); border-radius: 16px; padding: 24px;
    border: 1px solid var(--border);
  }
  .detail-card h3 {
    font-size: 14px; font-weight: 700; margin-bottom: 16px;
    display: flex; align-items: center; gap: 8px;
  }
  .detail-card h3 .icon {
    width: 28px; height: 28px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
  }
  .detail-card h3 .icon.out { background: var(--blue-bg); }
  .detail-card h3 .icon.in { background: var(--green-bg); }
  .detail-card h3 .icon.balance { background: var(--purple-bg); }
  .detail-row {
    display: flex; justify-content: space-between; padding: 10px 0;
    border-bottom: 1px solid #F3F4F6; font-size: 13px;
  }
  .detail-row:last-child { border-bottom: none; }
  .detail-label { color: var(--text-secondary); }
  .detail-value { font-weight: 600; color: var(--text); }
  .detail-value.green { color: var(--green); }
  .detail-value.red { color: var(--red); }

  @media (max-width: 1200px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .detail-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 768px) {
    .trading-terminal { padding: 12px 16px; }
    .live-rate-bar { flex-wrap: wrap; gap: 10px; justify-content: center; }
    .terminal-title { display: none; }
    .rate-pair-group { padding: 8px 12px; width: 100%; justify-content: center; }
    .live-rate-btn { min-width: 120px; padding: 8px 14px; flex: 1; }
    .live-rate-btn .rate-value { font-size: 18px; }
    .live-rate-time { width: 100%; text-align: center; }
    .kpi-grid, .charts-grid { grid-template-columns: 1fr; }
    .date-banner {
      flex-direction: column;
      gap: 8px;
      text-align: center;
      padding: 14px 16px;
    }
    .date-banner h2 { font-size: 16px; }
    .date-banner .time { font-size: 12px; }
    .kpi-card { padding: 16px; }
    .kpi-value { font-size: 28px; }
    .kpi-label { font-size: 11px; }
    .kpi-sub { font-size: 12px; }
    .kpi-badge { font-size: 10px; padding: 3px 8px; }
    .chart-card { padding: 16px; }
    .chart-card h3 { font-size: 13px; margin-bottom: 14px; }
    .chart-wrap { height: 220px; }
    .detail-card { padding: 16px; }
    .detail-card h3 { font-size: 13px; }
    .detail-row { font-size: 12px; padding: 8px 0; }
  }
  @media (max-width: 480px) {
    .trading-terminal { padding: 10px 12px; }
    .live-rate-bar { gap: 8px; flex-direction: column; align-items: center; }
    .rate-pair-group { padding: 10px; gap: 6px; }
    .rate-pair-label { writing-mode: horizontal-tb; font-size: 10px; }
    .live-rate-btn { min-width: 110px; padding: 8px 12px; }
    .live-rate-btn .rate-value { font-size: 16px; }
    .live-rate-btn .rate-type { font-size: 8px; }
    .rate-flags { font-size: 9px; }
    .live-rate-time { font-size: 9px; }
    .kpi-value { font-size: 24px; }
    .chart-wrap { height: 180px; }
    .detail-card h3 .icon { width: 24px; height: 24px; font-size: 12px; }
    .detail-row { font-size: 11px; }
  }
  `;

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

${buildHeader({ role: role, userName: user.nome, activePage: 'home' })}

<div class="trading-terminal">
  <div class="live-rate-bar">
    <span class="live-rate-dot"></span>
    <span class="terminal-title">Live Rates</span>

    <div class="rate-pair-group">
      <span class="rate-pair-label">USD</span>
      <button class="live-rate-btn compra">
        <span class="rate-flags">\uD83C\uDDFA\uD83C\uDDF8 \u2192 \uD83C\uDDE7\uD83C\uDDF7</span>
        <span class="rate-type">Compra</span>
        <span class="rate-value" id="rateUsdCompra">--</span>
      </button>
      <button class="live-rate-btn venda">
        <span class="rate-flags">\uD83C\uDDE7\uD83C\uDDF7 \u2192 \uD83C\uDDFA\uD83C\uDDF8</span>
        <span class="rate-type">Venda</span>
        <span class="rate-value" id="rateUsdVenda">--</span>
      </button>
    </div>

    <span class="live-rate-time" id="rateTime">--</span>
  </div>
</div>

<div class="app-container">
  <div class="date-banner">
    <h2>${hoje}</h2>
    <div class="time">Atualizado: ${now}</div>
  </div>

  <div class="kpi-grid">
    <div class="kpi-card highlight">
      <div class="kpi-header">
        <div class="kpi-label">Total de Ordens Hoje</div>
        <div class="kpi-badge ${Number(totalVar) >= 0 ? 'up' : 'down'}">${Number(totalVar) >= 0 ? '+' : ''}${totalVar}%</div>
      </div>
      <div class="kpi-value">${totalHoje}</div>
      <div class="kpi-sub">Ontem: ${totalOntem} ordens</div>
    </div>
    <div class="kpi-card brl-usd">
      <div class="kpi-header">
        <div class="kpi-label">BRL &rarr; USD</div>
        <div class="kpi-badge ${Number(brlUsdVar) >= 0 ? 'up' : 'down'}">${Number(brlUsdVar) >= 0 ? '+' : ''}${brlUsdVar}%</div>
      </div>
      <div class="kpi-value">${stats.brlUsd.hoje.qtd}</div>
      <div class="kpi-sub">Ontem: ${stats.brlUsd.ontem.qtd}</div>
    </div>
    <div class="kpi-card usd-brl">
      <div class="kpi-header">
        <div class="kpi-label">USD &rarr; BRL</div>
        <div class="kpi-badge ${Number(usdBrlVar) >= 0 ? 'up' : 'down'}">${Number(usdBrlVar) >= 0 ? '+' : ''}${usdBrlVar}%</div>
      </div>
      <div class="kpi-value">${stats.usdBrl.hoje.qtd}</div>
      <div class="kpi-sub">Ontem: ${stats.usdBrl.ontem.qtd}</div>
    </div>
    <div class="kpi-card usd-usd">
      <div class="kpi-header">
        <div class="kpi-label">USD &rarr; USD (Balance)</div>
        <div class="kpi-badge ${Number(usdUsdVar) >= 0 ? 'up' : 'down'}">${Number(usdUsdVar) >= 0 ? '+' : ''}${usdUsdVar}%</div>
      </div>
      <div class="kpi-value">${stats.usdUsd.hoje.qtd}</div>
      <div class="kpi-sub">Ontem: ${stats.usdUsd.ontem.qtd}</div>
    </div>
  </div>

  <div class="charts-grid">
    <div class="chart-card">
      <h3>Quantidade de Ordens por Fluxo</h3>
      <div class="chart-wrap"><canvas id="chartQtd"></canvas></div>
    </div>
    <div class="chart-card">
      <h3>Volume USD por Fluxo</h3>
      <div class="chart-wrap"><canvas id="chartVol"></canvas></div>
    </div>
  </div>

  <div class="detail-grid">
    <div class="detail-card">
      <h3><span class="icon out">&#8594;</span> BRL &rarr; USD (Remessas)</h3>
      <div class="detail-row">
        <span class="detail-label">Ordens Hoje</span>
        <span class="detail-value">${stats.brlUsd.hoje.qtd}</span>
      </div>
      <div class="detail-row">
        <span class="detail-label">Ordens Ontem</span>
        <span class="detail-value">${stats.brlUsd.ontem.qtd}</span>
      </div>
      <div class="detail-row">
        <span class="detail-label">Volume BRL Hoje</span>
        <span class="detail-value">${formatBRL(stats.brlUsd.hoje.total_brl)}</span>
      </div>
      <div class="detail-row">
        <span class="detail-label">Volume USD Hoje</span>
        <span class="detail-value">${formatUSD(stats.brlUsd.hoje.total_usd)}</span>
      </div>
      <div class="detail-row">
        <span class="detail-label">Variacao</span>
        <span class="detail-value ${Number(brlUsdVar) >= 0 ? 'green' : 'red'}">${Number(brlUsdVar) >= 0 ? '+' : ''}${brlUsdVar}%</span>
      </div>
    </div>
    <div class="detail-card">
      <h3><span class="icon in">&#8592;</span> USD &rarr; BRL (Recebimentos)</h3>
      <div class="detail-row">
        <span class="detail-label">Ordens Hoje</span>
        <span class="detail-value">${stats.usdBrl.hoje.qtd}</span>
      </div>
      <div class="detail-row">
        <span class="detail-label">Ordens Ontem</span>
        <span class="detail-value">${stats.usdBrl.ontem.qtd}</span>
      </div>
      <div class="detail-row">
        <span class="detail-label">Volume BRL Hoje</span>
        <span class="detail-value">${formatBRL(stats.usdBrl.hoje.total_brl)}</span>
      </div>
      <div class="detail-row">
        <span class="detail-label">Volume USD Hoje</span>
        <span class="detail-value">${formatUSD(stats.usdBrl.hoje.total_usd)}</span>
      </div>
      <div class="detail-row">
        <span class="detail-label">Variacao</span>
        <span class="detail-value ${Number(usdBrlVar) >= 0 ? 'green' : 'red'}">${Number(usdBrlVar) >= 0 ? '+' : ''}${usdBrlVar}%</span>
      </div>
    </div>
    <div class="detail-card">
      <h3><span class="icon balance">&#8596;</span> USD &rarr; USD (Balance)</h3>
      <div class="detail-row">
        <span class="detail-label">Ordens Hoje</span>
        <span class="detail-value">${stats.usdUsd.hoje.qtd}</span>
      </div>
      <div class="detail-row">
        <span class="detail-label">Ordens Ontem</span>
        <span class="detail-value">${stats.usdUsd.ontem.qtd}</span>
      </div>
      <div class="detail-row">
        <span class="detail-label">Volume USD Hoje</span>
        <span class="detail-value">${formatUSD(stats.usdUsd.hoje.total_usd)}</span>
      </div>
      <div class="detail-row">
        <span class="detail-label">Volume USD Ontem</span>
        <span class="detail-value">${formatUSD(stats.usdUsd.ontem.total_usd)}</span>
      </div>
      <div class="detail-row">
        <span class="detail-label">Variacao</span>
        <span class="detail-value ${Number(usdUsdVar) >= 0 ? 'green' : 'red'}">${Number(usdUsdVar) >= 0 ? '+' : ''}${usdUsdVar}%</span>
      </div>
    </div>
  </div>
</div>

${buildFooter()}

<script>
const stats = ${JSON.stringify(stats)};

// Chart: Quantidade
new Chart(document.getElementById('chartQtd'), {
  type: 'bar',
  data: {
    labels: ['BRL → USD', 'USD → BRL', 'USD → USD'],
    datasets: [
      {
        label: 'Hoje',
        data: [stats.brlUsd.hoje.qtd, stats.usdBrl.hoje.qtd, stats.usdUsd.hoje.qtd],
        backgroundColor: ['#1A73E8', '#2E7D32', '#7B1FA2'],
        borderRadius: 6,
        barPercentage: 0.7
      },
      {
        label: 'Ontem',
        data: [stats.brlUsd.ontem.qtd, stats.usdBrl.ontem.qtd, stats.usdUsd.ontem.qtd],
        backgroundColor: ['#90CAF9', '#A5D6A7', '#CE93D8'],
        borderRadius: 6,
        barPercentage: 0.7
      }
    ]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: { position: 'top', labels: { font: { size: 12, weight: 600 }, usePointStyle: true } }
    },
    scales: {
      y: { beginAtZero: true, grid: { color: '#F3F4F6' }, ticks: { font: { size: 11 } } },
      x: { grid: { display: false }, ticks: { font: { size: 11, weight: 600 } } }
    }
  }
});

// Chart: Volume USD
new Chart(document.getElementById('chartVol'), {
  type: 'bar',
  data: {
    labels: ['BRL → USD', 'USD → BRL', 'USD → USD'],
    datasets: [
      {
        label: 'Hoje (USD)',
        data: [stats.brlUsd.hoje.total_usd, stats.usdBrl.hoje.total_usd, stats.usdUsd.hoje.total_usd],
        backgroundColor: ['#1A73E8', '#2E7D32', '#7B1FA2'],
        borderRadius: 6,
        barPercentage: 0.7
      },
      {
        label: 'Ontem (USD)',
        data: [stats.brlUsd.ontem.total_usd, stats.usdBrl.ontem.total_usd, stats.usdUsd.ontem.total_usd],
        backgroundColor: ['#90CAF9', '#A5D6A7', '#CE93D8'],
        borderRadius: 6,
        barPercentage: 0.7
      }
    ]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: { position: 'top', labels: { font: { size: 12, weight: 600 }, usePointStyle: true } },
      tooltip: {
        callbacks: {
          label: (ctx) => ctx.dataset.label + ': $' + ctx.raw.toLocaleString('en-US', { minimumFractionDigits: 2 })
        }
      }
    },
    scales: {
      y: {
        beginAtZero: true,
        grid: { color: '#F3F4F6' },
        ticks: {
          font: { size: 11 },
          callback: (v) => '$' + (v >= 1000 ? (v/1000).toFixed(0) + 'k' : v)
        }
      },
      x: { grid: { display: false }, ticks: { font: { size: 11, weight: 600 } } }
    }
  }
});

// Live Rates
let _lastUsdBid = null, _lastUsdAsk = null;
function pulseEl(el) { el.closest('.live-rate-btn').classList.add('pulse'); setTimeout(() => el.closest('.live-rate-btn').classList.remove('pulse'), 500); }
async function fetchLiveRate() {
  try {
    const resp = await fetch('/api/cotacao');
    const json = await resp.json();
    const usd = json.USDBRL;
    if (usd) {
      const bidRaw = parseFloat(usd.bid), askRaw = parseFloat(usd.ask);
      const bid = bidRaw * (1 - 0.0043);
      const ask = askRaw * (1 + 0.0005);
      const elC = document.getElementById('rateUsdCompra'), elV = document.getElementById('rateUsdVenda');
      elC.textContent = bid.toFixed(4); elV.textContent = ask.toFixed(4);
      if (_lastUsdBid !== null && bidRaw !== _lastUsdBid) pulseEl(elC);
      if (_lastUsdAsk !== null && askRaw !== _lastUsdAsk) pulseEl(elV);
      _lastUsdBid = bidRaw; _lastUsdAsk = askRaw;
    }
    document.getElementById('rateTime').textContent = new Date().toLocaleTimeString('pt-BR');
  } catch (e) { /* retry next cycle */ }
}
fetchLiveRate();
setInterval(fetchLiveRate, 3000);
</script>
</body>
</html>`;
}

module.exports = { buildAdminHomeHTML };