@extends('backend.layout.exposcale')

@section('page_title', 'Dashboard')

@section('content')
<div class="page-body" style="display:flex;flex-direction:column;gap:12px;height:calc(100vh - 49px);overflow-y:auto;">

  <!-- ROW 1: KPIs -->
  <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;flex-shrink:0;">
    <!-- LEFT: Spend | Affiliate | Net Profit -->
    <div class="kpi" style="border-color:rgba(232,50,26,0.2);display:flex;gap:0;padding:0;overflow:hidden;">
      <div style="flex:1;padding:12px 14px;border-right:1px solid var(--border);">
        <div class="kpi-l">Combined Spend</div>
        <div class="kpi-v" id="kpi-spend">$1,810</div>
        <div id="kpi-spend-delta" style="font-size:10px;margin-top:3px;color:var(--red);">▼ 4.2% vs prev. period</div>
      </div>
      <div style="flex:1;padding:12px 14px;border-right:1px solid var(--border);">
        <div class="kpi-l">Affiliate Costs</div>
        <div class="kpi-v" style="color:var(--amber);" id="kpi-affiliate">€ 170</div>
        <div id="kpi-affiliate-delta" style="font-size:10px;margin-top:3px;color:var(--muted);">▲ 0.0% vs prev. period</div>
      </div>
      <div style="flex:1;padding:12px 14px;">
        <div class="kpi-l">Net Profit</div>
        <div class="kpi-v" style="color:var(--green);" id="kpi-profit">€ 2,311</div>
        <div id="kpi-profit-delta" style="font-size:10px;margin-top:3px;color:var(--green);">▲ 8.1% vs prev. period</div>
      </div>
    </div>
    <!-- RIGHT: MRR card -->
    <div class="kpi" style="border-color:rgba(16,185,129,0.25);display:flex;gap:0;padding:0;overflow:hidden;">
      <div style="flex:1;padding:12px 14px;border-right:1px solid var(--border);">
        <div class="kpi-l">MRR</div>
        <div class="kpi-v" style="color:var(--green);">€ 1,782</div>
        <div id="mrr-delta-main" style="font-size:10px;color:var(--muted);margin-top:3px;">— vs prev. period</div>
      </div>
      <div style="flex:1;padding:10px 12px;border-right:1px solid var(--border);display:flex;flex-direction:column;justify-content:center;gap:5px;">
        <div style="background:var(--gbg);border:1px solid rgba(16,185,129,0.3);border-radius:7px;padding:5px 9px;display:flex;align-items:center;justify-content:space-between;">
          <span style="font-size:9px;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:.05em;">Growth</span>
          <span style="font-size:14px;font-weight:700;color:var(--text);line-height:1;">4</span>
        </div>
        <div style="background:var(--pbg);border:1px solid rgba(124,58,237,0.3);border-radius:7px;padding:5px 9px;display:flex;align-items:center;justify-content:space-between;">
          <span style="font-size:9px;font-weight:700;color:var(--pl);text-transform:uppercase;letter-spacing:.05em;">Enterprise</span>
          <span style="font-size:14px;font-weight:700;color:var(--text);line-height:1;">2</span>
        </div>
      </div>
      <div style="flex:1;padding:12px 14px;border-right:1px solid var(--border);display:flex;flex-direction:column;justify-content:center;gap:5px;">
        <div class="kpi-l">Ad Accounts</div>
        <div class="kpi-v" style="color:var(--green);">€ 250</div>
        <div style="font-size:10px;color:var(--muted);margin-top:3px;">— vs prev. period</div>
      </div>
      <div style="flex:1;padding:12px 14px;display:flex;flex-direction:column;justify-content:center;gap:5px;">
        <div class="kpi-l">Starter Set-up</div>
        <div class="kpi-v" style="color:var(--green);">€ 891</div>
        <div style="font-size:10px;color:var(--muted);margin-top:3px;">— vs prev. period</div>
      </div>
    </div>
  </div>

  <!-- ROW 2: Platform boxes -->
  <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;flex-shrink:0;">
    <!-- GRADYN -->
    <div style="background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;">
      <div style="display:flex;align-items:center;gap:9px;padding:10px 14px;border-bottom:1px solid var(--border);">
        <div style="width:24px;height:24px;border-radius:6px;background:var(--gbr);border:1px solid var(--gradyn);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:var(--gradyn);">G</div>
        <span style="font-size:13px;font-weight:700;color:var(--gradyn);">Gradyn</span>
        <button onclick="openFundsModal('gradyn')" style="margin-left:auto;background:var(--gbr);border:1px solid rgba(232,50,26,.3);color:var(--gradyn);padding:4px 10px;border-radius:6px;font-size:10px;font-weight:700;cursor:pointer;">+ Add Funds</button>
      </div>
      <div style="padding:10px 14px;border-bottom:1px solid var(--border);">
        <div style="font-size:9px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;">Account Status</div>
        <div style="display:flex;gap:0;">
          <a href="{{ route('exposcale.ad-accounts') }}?status=active&plat=gradyn" style="flex:1;text-align:center;padding:8px 4px;text-decoration:none;border-radius:7px;transition:background .12s;cursor:pointer;" onmouseover="this.style.background='var(--card2)'" onmouseout="this.style.background=''">
            <div style="font-size:20px;font-weight:700;color:var(--green);">{{ $gradynCounts['active'] ?? 0 }}</div>
            <div style="font-size:9px;color:var(--muted);margin-top:2px;">Active</div>
          </a>
          <a href="{{ route('exposcale.ad-accounts') }}?status=processing&plat=gradyn" style="flex:1;text-align:center;padding:8px 4px;text-decoration:none;border-radius:7px;transition:background .12s;cursor:pointer;" onmouseover="this.style.background='var(--card2)'" onmouseout="this.style.background=''">
            <div style="font-size:20px;font-weight:700;color:var(--amber);">{{ $gradynCounts['processing'] ?? 0 }}</div>
            <div style="font-size:9px;color:var(--muted);margin-top:2px;">Processing</div>
          </a>
          <a href="{{ route('exposcale.ad-accounts') }}?status=disabled&plat=gradyn" style="flex:1;text-align:center;padding:8px 4px;text-decoration:none;border-radius:7px;transition:background .12s;cursor:pointer;" onmouseover="this.style.background='var(--card2)'" onmouseout="this.style.background=''">
            <div style="font-size:20px;font-weight:700;color:var(--red);">{{ $gradynCounts['disabled'] ?? 0 }}</div>
            <div style="font-size:9px;color:var(--muted);margin-top:2px;">Disabled</div>
          </a>
          <div style="flex:0;display:flex;align-items:center;padding:0 4px;">
            <button onclick="openReqAcctModal('gradyn')" style="width:28px;height:28px;border-radius:50%;background:var(--pbg);border:1px solid var(--purple);color:var(--pl);font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;" title="Request new ad account">+</button>
          </div>
        </div>
      </div>
      <div style="padding:10px 14px;">
        <div style="font-size:9px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;">Spend, Profit & Balance</div>
        <div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:6px;">
          <div><div style="font-size:9px;color:var(--muted);margin-bottom:3px;">Total Spend</div><div style="font-size:14px;font-weight:700;" id="gradyn-spend">$1,094</div><div style="font-size:9px;color:var(--red);" id="gradyn-spend-ch">▼ 2.1%</div></div>
          <div><div style="font-size:9px;color:var(--muted);margin-bottom:3px;">Top-up Profit</div><div style="font-size:14px;font-weight:700;color:var(--green);" id="gradyn-profit">€ 136</div><div style="font-size:9px;color:var(--green);" id="gradyn-profit-ch">▲ 8.4%</div></div>
          <div><div style="font-size:9px;color:var(--muted);margin-bottom:3px;">USD Balance</div><div style="font-size:14px;font-weight:700;color:var(--gradyn);">${{ number_format($gradynBalance['usd_balance'], 2) }}</div><div style="font-size:9px;color:var(--amber);">≥ ${{ number_format($gradynBalance['available_usd'], 2) }} rec.</div></div>
          <div><div style="font-size:9px;color:var(--muted);margin-bottom:3px;">EUR Balance</div><div style="font-size:14px;font-weight:700;color:var(--gradyn);">€{{ number_format($gradynBalance['eur_balance'], 2) }}</div><div style="font-size:9px;color:var(--amber);">≥ €{{ number_format($gradynBalance['available_eur'], 2) }} rec.</div></div>
        </div>
      </div>
    </div>
    <!-- ROCKADS -->
    <div style="background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;">
      <div style="display:flex;align-items:center;gap:9px;padding:10px 14px;border-bottom:1px solid var(--border);">
        <div style="width:24px;height:24px;border-radius:6px;background:var(--rbr);border:1px solid var(--rockads);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:var(--rockads);">R</div>
        <span style="font-size:13px;font-weight:700;color:var(--rockads);">Rockads</span>
        <button onclick="openFundsModal('rockads')" style="margin-left:auto;background:var(--rbr);border:1px solid rgba(59,130,246,.3);color:var(--rockads);padding:4px 10px;border-radius:6px;font-size:10px;font-weight:700;cursor:pointer;">+ Add Funds</button>
      </div>
      <div style="padding:10px 14px;border-bottom:1px solid var(--border);">
        <div style="font-size:9px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;">Account Status</div>
        <div style="display:flex;gap:0;">
          <a href="{{ route('exposcale.ad-accounts') }}?status=active&plat=rockads" style="flex:1;text-align:center;padding:8px 4px;text-decoration:none;border-radius:7px;transition:background .12s;cursor:pointer;" onmouseover="this.style.background='var(--card2)'" onmouseout="this.style.background=''">
            <div style="font-size:20px;font-weight:700;color:var(--green);">{{ $rockadsCounts['active'] ?? 0 }}</div>
            <div style="font-size:9px;color:var(--muted);margin-top:2px;">Active</div>
          </a>
          <a href="{{ route('exposcale.ad-accounts') }}?status=processing&plat=rockads" style="flex:1;text-align:center;padding:8px 4px;text-decoration:none;border-radius:7px;transition:background .12s;cursor:pointer;" onmouseover="this.style.background='var(--card2)'" onmouseout="this.style.background=''">
            <div style="font-size:20px;font-weight:700;color:var(--amber);">{{ $rockadsCounts['processing'] ?? 0 }}</div>
            <div style="font-size:9px;color:var(--muted);margin-top:2px;">Processing</div>
          </a>
          <a href="{{ route('exposcale.ad-accounts') }}?status=disabled&plat=rockads" style="flex:1;text-align:center;padding:8px 4px;text-decoration:none;border-radius:7px;transition:background .12s;cursor:pointer;" onmouseover="this.style.background='var(--card2)'" onmouseout="this.style.background=''">
            <div style="font-size:20px;font-weight:700;color:var(--red);">{{ $rockadsCounts['disabled'] ?? 0 }}</div>
            <div style="font-size:9px;color:var(--muted);margin-top:2px;">Disabled</div>
          </a>
          <div style="flex:0;display:flex;align-items:center;padding:0 4px;">
            <button onclick="openReqAcctModal('rockads')" style="width:28px;height:28px;border-radius:50%;background:var(--pbg);border:1px solid var(--purple);color:var(--pl);font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;" title="Request new ad account">+</button>
          </div>
        </div>
      </div>
      <div style="padding:10px 14px;">
        <div style="font-size:9px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;">Spend, Profit & Balance</div>
        <div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:6px;">
          <div><div style="font-size:9px;color:var(--muted);margin-bottom:3px;">Total Spend</div><div style="font-size:14px;font-weight:700;" id="rockads-spend">$716</div><div style="font-size:9px;color:var(--red);" id="rockads-spend-ch">▼ 0.9%</div></div>
          <div><div style="font-size:9px;color:var(--muted);margin-bottom:3px;">Top-up Profit</div><div style="font-size:14px;font-weight:700;color:var(--green);" id="rockads-profit">€ 96</div><div style="font-size:9px;color:var(--green);" id="rockads-profit-ch">▲ 5.2%</div></div>
          <div><div style="font-size:9px;color:var(--muted);margin-bottom:3px;">USD Balance</div><div style="font-size:14px;font-weight:700;color:var(--rockads);">$3,362</div><div style="font-size:9px;color:var(--amber);">≥ $4,876 rec.</div></div>
          <div><div style="font-size:9px;color:var(--muted);margin-bottom:3px;">EUR Balance</div><div style="font-size:14px;font-weight:700;color:var(--rockads);">€1,519</div><div style="font-size:9px;color:var(--amber);">≥ €3,255 rec.</div></div>
        </div>
      </div>
    </div>
  </div>

  <!-- ROW 3: Chart + Notifications -->
  <div style="display:grid;grid-template-columns:1fr 320px;gap:12px;flex:1;min-height:0;">
    <!-- Chart -->
    <div style="background:var(--card);border:1px solid var(--border);border-radius:10px;display:flex;flex-direction:column;overflow:hidden;position:relative;">
      <div style="display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border);flex-shrink:0;">
        <div style="flex:1;">
          <div style="font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:2px;">Total Spend — All Accounts Combined</div>
          <div style="font-size:10px;color:var(--pl);margin-top:3px;">↓ Click a data point for top spenders</div>
        </div>
        <div style="display:flex;align-items:center;gap:8px;flex-shrink:0;">
          <div style="display:flex;border:1px solid var(--border);border-radius:7px;overflow:hidden;">
            <button class="ct active" onclick="switchChart(this,'combined')" style="padding:5px 10px;background:var(--pbg);border:none;color:var(--pl);font-size:10px;font-weight:700;cursor:pointer;">Combined</button>
            <button class="ct" onclick="switchChart(this,'split')" style="padding:5px 10px;background:transparent;border:none;color:var(--muted);font-size:10px;font-weight:600;cursor:pointer;">Split</button>
          </div>
          <div style="position:relative;">
            <div onclick="toggleDatePicker(event)" style="display:flex;align-items:center;gap:5px;padding:5px 10px;background:var(--card2);border:1px solid var(--border);border-radius:7px;font-size:11px;color:var(--muted2);cursor:pointer;">
              <svg width="11" height="11" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="12" rx="2" stroke="#9ca3af" stroke-width="1.3"/><path d="M5 1v4M11 1v4M1 7h14" stroke="#9ca3af" stroke-width="1.3" stroke-linecap="round"/></svg>
              <span id="date-display">25 Apr 2026</span>
              <svg width="10" height="10" viewBox="0 0 16 16" fill="none"><path d="M4 6l4 4 4-4" stroke="#6b7280" stroke-width="1.5" stroke-linecap="round"/></svg>
            </div>
            <div id="date-dropdown" style="display:none;position:absolute;top:calc(100% + 6px);right:0;background:#1a1a24;border:1px solid var(--border);border-radius:10px;padding:14px;min-width:260px;z-index:100;box-shadow:0 8px 28px rgba(0,0,0,.6);" onclick="event.stopPropagation()">
              <div style="font-size:10px;font-weight:700;color:var(--muted2);margin-bottom:10px;">Presets</div>
              <div style="display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px;">
                <div onclick="applyPreset('today')" style="padding:4px 9px;background:var(--pbg);border:1px solid var(--purple);border-radius:5px;font-size:10px;color:var(--pl);cursor:pointer;">Today</div>
                <div onclick="applyPreset('yesterday')" style="padding:4px 9px;background:var(--card2);border:1px solid var(--border);border-radius:5px;font-size:10px;color:var(--muted2);cursor:pointer;">Yesterday</div>
                <div onclick="applyPreset('7d')" style="padding:4px 9px;background:var(--card2);border:1px solid var(--border);border-radius:5px;font-size:10px;color:var(--muted2);cursor:pointer;">Last 7d</div>
                <div onclick="applyPreset('14d')" style="padding:4px 9px;background:var(--card2);border:1px solid var(--border);border-radius:5px;font-size:10px;color:var(--muted2);cursor:pointer;">Last 14d</div>
                <div onclick="applyPreset('30d')" style="padding:4px 9px;background:var(--card2);border:1px solid var(--border);border-radius:5px;font-size:10px;color:var(--muted2);cursor:pointer;">Last 30d</div>
                <div onclick="applyPreset('month')" style="padding:4px 9px;background:var(--card2);border:1px solid var(--border);border-radius:5px;font-size:10px;color:var(--muted2);cursor:pointer;">This month</div>
              </div>
              <div style="font-size:10px;font-weight:700;color:var(--muted2);margin-bottom:8px;">Custom range</div>
              <div style="display:flex;gap:8px;margin-bottom:10px;">
                <div style="flex:1;"><label style="font-size:9px;color:var(--muted);display:block;margin-bottom:3px;">From</label><input type="date" id="date-from" value="2026-04-25" style="width:100%;background:var(--card2);border:1px solid var(--border);border-radius:6px;padding:5px 7px;font-size:11px;color:var(--text);outline:none;"/></div>
                <div style="flex:1;"><label style="font-size:9px;color:var(--muted);display:block;margin-bottom:3px;">To</label><input type="date" id="date-to" value="2026-04-25" style="width:100%;background:var(--card2);border:1px solid var(--border);border-radius:6px;padding:5px 7px;font-size:11px;color:var(--text);outline:none;"/></div>
              </div>
              <button onclick="applyDates()" style="width:100%;background:var(--purple);color:#fff;border:none;border-radius:6px;padding:8px;font-size:11px;font-weight:700;cursor:pointer;">Apply</button>
            </div>
          </div>
        </div>
      </div>
      <div id="chart-legend" style="display:flex;align-items:center;gap:14px;padding:6px 14px 0;flex-shrink:0;">
        <span style="font-size:10px;color:var(--muted2);display:flex;align-items:center;"><span style="width:8px;height:8px;border-radius:50%;background:var(--purple);display:inline-block;margin-right:4px;"></span>Combined</span>
      </div>
      <div style="flex:1;min-height:0;padding:10px 14px;position:relative;">
        <canvas id="spendChart" style="display:block;width:100%;height:100%;"></canvas>
        <!-- Top spenders drill-down -->
        <div id="top-spenders-panel" style="display:none;position:absolute;bottom:0;left:0;right:0;background:var(--card);border-top:1px solid var(--border);max-height:140px;overflow-y:auto;z-index:10;border-radius:0 0 10px 10px;">
          <div style="display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:var(--card2);position:sticky;top:0;">
            <div style="font-size:11px;font-weight:600;">Top Spenders — <span id="ts-date-label">—</span></div>
            <button onclick="closeDrill()" style="background:var(--card);border:1px solid var(--border);border-radius:5px;padding:3px 8px;font-size:10px;color:var(--muted2);cursor:pointer;">✕</button>
          </div>
          <div id="ts-body" style="padding:4px 14px 6px;"></div>
        </div>
      </div>
    </div>

    <!-- Latest Notifications -->
    <div style="background:var(--card);border:1px solid var(--border);border-radius:10px;display:flex;flex-direction:column;overflow:hidden;">
      <div style="display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--border);flex-shrink:0;">
        <span style="font-size:12px;font-weight:700;">Latest Notifications</span>
        <span style="font-size:10px;color:var(--pl);cursor:pointer;font-weight:400;" onclick="toggleNotif()">View all →</span>
      </div>
      <div id="dash-notif-list" style="flex:1;overflow-y:auto;padding:0;">
        @forelse($latestNotifications as $n)
          @php
            $typeMap = [
              'success'        => ['cls' => 'np-green',  'icon' => '✓', 'label' => 'Approved'],
              'error'          => ['cls' => 'np-red',    'icon' => '✕', 'label' => 'Rejected'],
              'withdraw error' => ['cls' => 'np-red',    'icon' => '✕', 'label' => 'Rejected'],
              'warning'        => ['cls' => 'np-amber',  'icon' => '!', 'label' => 'Warning'],
              'info'           => ['cls' => 'np-violet', 'icon' => 'i', 'label' => 'Info'],
            ];
            $cfg   = $typeMap[$n['type']] ?? ['cls' => 'np-violet', 'icon' => '●', 'label' => $n['type']];
            $title = $n['title'];
            if ($n['user_name']) $title .= ' — ' . $n['user_name'];
            $isUnread = is_null($n['read_at']);
          @endphp
          <div class="np-item {{ $isUnread ? 'unread' : '' }}" style="padding:10px 14px;">
            <div class="np-icon {{ $cfg['cls'] }}">{{ $cfg['icon'] }}</div>
            <div class="np-content">
              <div class="np-item-title">{{ $title }}</div>
              <div class="np-item-desc">{{ $n['message'] }}</div>
              <div class="np-item-meta">
                <span class="np-time">{{ $n['time'] }}</span>
                <span class="type-pill {{ $cfg['cls'] }}">{{ $cfg['label'] }}</span>
                @if($n['amount'])
                  <span class="np-amount">{{ $n['amount'] }}</span>
                @endif
              </div>
            </div>
          </div>
          @if(!$loop->last)
            <div class="np-divider"></div>
          @endif
        @empty
          <div style="padding:24px;text-align:center;color:var(--muted);font-size:12px;">No notifications yet.</div>
        @endforelse
      </div>
    </div>
  </div>
</div>
@endsection

@section('page_scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
/* ─── DATE PICKER ─── */
function toggleDatePicker(e){e.stopPropagation();const dd=document.getElementById('date-dropdown');const isOpen=dd.style.display==='block';dd.style.display=isOpen?'none':'block';}
document.addEventListener('click',()=>{const dd=document.getElementById('date-dropdown');if(dd)dd.style.display='none';});

let allDailyData = {};
let topSpenders = {};
let spendChart = null;
let currentFromStr = '';
let currentToStr = '';

function getDataForRange(f, t) {
  const keys = Object.keys(allDailyData).sort();
  const r = keys.filter(k => k >= f && k <= t);
  return {
    dates: r,
    labels: r.map(k => allDailyData[k].labels),
    gradyn: r.map(k => allDailyData[k].gradyn),
    rockads: r.map(k => allDailyData[k].rockads),
    combined: r.map(k => allDailyData[k].gradyn + allDailyData[k].rockads),
    totalGradyn: r.reduce((s, k) => s + allDailyData[k].gradyn, 0),
    totalRockads: r.reduce((s, k) => s + allDailyData[k].rockads, 0),
    total: r.reduce((s, k) => s + allDailyData[k].gradyn + allDailyData[k].rockads, 0),
    days: r.length
  };
}

function localDateStr(d) {
  const yr = d.getFullYear(), mo = String(d.getMonth() + 1).padStart(2, '0'), day = String(d.getDate()).padStart(2, '0');
  return yr + '-' + mo + '-' + day;
}

function applyPreset(p) {
  const todayD = new Date();
  const todayStr = localDateStr(todayD);
  let fromStr = todayStr, toStr = todayStr;
  
  if (p === 'yesterday') {
    const y = new Date(todayD); y.setDate(y.getDate() - 1); fromStr = toStr = localDateStr(y);
  } else if (p === '7d') {
    const f = new Date(todayD); f.setDate(f.getDate() - 6); fromStr = localDateStr(f); toStr = todayStr;
  } else if (p === '14d') {
    const f = new Date(todayD); f.setDate(f.getDate() - 13); fromStr = localDateStr(f); toStr = todayStr;
  } else if (p === '30d') {
    const f = new Date(todayD); f.setDate(f.getDate() - 29); fromStr = localDateStr(f); toStr = todayStr;
  } else if (p === 'month') {
    const yr = todayD.getFullYear(), mo = String(todayD.getMonth() + 1).padStart(2, '0'); fromStr = yr + '-' + mo + '-01'; toStr = todayStr;
  }
  
  document.getElementById('date-from').value = fromStr;
  document.getElementById('date-to').value = toStr;
  applyDates();
}

function applyDates() {
  const f = document.getElementById('date-from').value, t = document.getElementById('date-to').value;
  if (!f || !t) return;
  currentFromStr = f; currentToStr = t;
  const fd = new Date(f), td = new Date(t);
  const M = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
  document.getElementById('date-display').textContent = fd.getDate() + ' ' + M[fd.getMonth()] + (f !== t ? ' – ' + td.getDate() + ' ' + M[td.getMonth()] + ' ' + td.getFullYear() : ' ' + fd.getFullYear());
  document.getElementById('date-dropdown').style.display = 'none';
  
  updateDashboard(f, t);
}

function updateDashboard(f, t) {
  const fromD = new Date(f);
  const toD = new Date(t);
  const nDays = Math.round((toD - fromD) / (1000 * 60 * 60 * 24)) + 1;
  
  const prevToD = new Date(fromD);
  prevToD.setDate(prevToD.getDate() - 1);
  const prevFromD = new Date(prevToD);
  prevFromD.setDate(prevFromD.getDate() - nDays + 1);
  
  const fetchFrom = localDateStr(prevFromD);
  const fetchTo = t;

  fetch(`/dashboard/chart-data?from=${fetchFrom}&to=${fetchTo}`)
    .then(r => r.json())
    .then(data => {
      allDailyData = data.allDailyData;
      topSpenders = data.topSpenders;
      renderDashboardData(f, t, localDateStr(prevFromD), localDateStr(prevToD));
    })
    .catch(err => console.error('Failed to fetch chart data:', err));
}

function renderDashboardData(f, t, prevFrom, prevTo) {
  const cur = getDataForRange(f, t);
  const prev = getDataForRange(prevFrom, prevTo);
  window.currentChartDates = cur.dates;

  const nDays = cur.days || 1;
  const spend = cur.total, prevSpend = prev.total || spend;
  
  const feeProfit = Math.round(spend * 0.92 * 0.134), prevFeeProfit = Math.round(prevSpend * 0.92 * 0.134);
  const affPeriod = Math.round(170 * nDays / 30), prevAffPeriod = Math.round(170 * (prev.days || 1) / 30);
  const netProfit = feeProfit + 1782 + 250 + 891 - affPeriod, prevNetProfit = prevFeeProfit + 1782 + 250 + 891 - prevAffPeriod;
  
  const pct = (a, b) => b > 0 ? ((a - b) / b * 100) : 0;
  const setEl = (id, v) => { const el = document.getElementById(id); if (el) el.textContent = v; };
  const fmtPct = d => (d >= 0 ? '▲ +' : '▼ ') + Math.abs(d).toFixed(1) + '% vs prev. period';
  
  setEl('kpi-spend', '$' + spend.toLocaleString());
  setEl('kpi-profit', '€ ' + netProfit.toLocaleString());
  setEl('kpi-affiliate', '€ ' + affPeriod.toLocaleString());
  
  const sdEl = document.getElementById('kpi-spend-delta');
  if (sdEl) { const d = pct(spend, prevSpend); sdEl.textContent = fmtPct(d); sdEl.style.color = d >= 0 ? 'var(--green)' : 'var(--red)'; }
  const pdEl = document.getElementById('kpi-profit-delta');
  if (pdEl) { const d = pct(netProfit, prevNetProfit); pdEl.textContent = fmtPct(d); pdEl.style.color = d >= 0 ? 'var(--green)' : 'var(--red)'; }
  
  const gSpend = cur.totalGradyn;
  const rSpend = cur.totalRockads;
  setEl('gradyn-spend', '$' + gSpend.toLocaleString());
  setEl('gradyn-profit', '€ ' + Math.round(gSpend * 0.127).toLocaleString());
  setEl('rockads-spend', '$' + rSpend.toLocaleString());
  setEl('rockads-profit', '€ ' + Math.round(rSpend * 0.145).toLocaleString());
  
  if (spendChart) {
    spendChart.data.labels = cur.labels;
    spendChart.data.datasets[0].data = cur.combined;
    spendChart.data.datasets[1].data = cur.gradyn;
    spendChart.data.datasets[2].data = cur.rockads;
    spendChart.update();
    closeDrill();
  }
}

function showDrill(idx) {
  if (!window.currentChartDates) return;
  const dateStr = window.currentChartDates[idx];
  const d = topSpenders[dateStr] || [];
  
  if (d.length === 0) {
    document.getElementById('ts-body').innerHTML = '<div style="padding:10px;text-align:center;font-size:11px;color:var(--muted);">No spend data for this day.</div>';
    document.getElementById('ts-date-label').textContent = dateStr;
    document.getElementById('top-spenders-panel').style.display = 'block';
    return;
  }
  
  const max = d[0].spend;
  document.getElementById('ts-body').innerHTML = d.map((item, i) => `<div style="display:flex;align-items:center;gap:8px;padding:5px 0;"><div style="font-size:10px;color:var(--muted);width:20px;">#${i + 1}</div><div style="flex:1;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${item.name}</div><div style="flex:2;height:4px;background:var(--border);border-radius:2px;overflow:hidden;"><div style="height:100%;background:${item.plat === 'gradyn' ? 'var(--gradyn)' : 'var(--rockads)'};width:${Math.round(item.spend / max * 100)}%"></div></div><span style="font-size:10px;font-weight:700;">$${item.spend.toLocaleString()}</span></div>`).join('');
  document.getElementById('ts-date-label').textContent = dateStr;
  document.getElementById('top-spenders-panel').style.display = 'block';
}

function closeDrill() {
  document.getElementById('top-spenders-panel').style.display = 'none';
}

function switchChart(el, mode) {
  document.querySelectorAll('.ct').forEach(t => t.classList.remove('active'));
  el.classList.add('active');
  const legend = document.getElementById('chart-legend');
  if (!spendChart) return;
  if (mode === 'combined') {
    spendChart.data.datasets[0].hidden = false;
    spendChart.data.datasets[1].hidden = true;
    spendChart.data.datasets[2].hidden = true;
    legend.innerHTML = '<span style="font-size:10px;color:var(--muted2);display:flex;align-items:center;"><span style="width:8px;height:8px;border-radius:50%;background:var(--purple);display:inline-block;margin-right:4px;"></span>Combined</span>';
  } else {
    spendChart.data.datasets[0].hidden = true;
    spendChart.data.datasets[1].hidden = false;
    spendChart.data.datasets[2].hidden = false;
    legend.innerHTML = '<span style="font-size:10px;color:var(--muted2);display:flex;align-items:center;margin-right:12px;"><span style="width:8px;height:8px;border-radius:50%;background:var(--gradyn);display:inline-block;margin-right:4px;"></span>Gradyn</span><span style="font-size:10px;color:var(--muted2);display:flex;align-items:center;"><span style="width:8px;height:8px;border-radius:50%;background:var(--rockads);display:inline-block;margin-right:4px;"></span>Rockads</span>';
  }
  spendChart.update();
}

window.addEventListener('load', function() {
  const ctx = document.getElementById('spendChart');
  if (!ctx) return;
  
  spendChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: [],
      datasets: [
        {label: 'Combined', data: [], borderColor: '#7c3aed', backgroundColor: 'rgba(124,58,237,0.12)', borderWidth: 2.5, fill: true, tension: 0.4, pointBackgroundColor: '#7c3aed', pointRadius: 3, pointHoverRadius: 6},
        {label: 'Gradyn', data: [], borderColor: '#e8321a', backgroundColor: 'rgba(232,50,26,0.08)', borderWidth: 2, fill: true, tension: 0.4, pointBackgroundColor: '#e8321a', pointRadius: 3, hidden: true},
        {label: 'Rockads', data: [], borderColor: '#3b82f6', backgroundColor: 'rgba(59,130,246,0.06)', borderWidth: 2, fill: true, tension: 0.4, pointBackgroundColor: '#3b82f6', pointRadius: 3, hidden: true}
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      onClick: (evt, elems) => { if (elems.length > 0) showDrill(elems[0].index); },
      plugins: {
        legend: { display: false },
        tooltip: { backgroundColor: '#13131a', borderColor: '#1e1e2e', borderWidth: 1, titleColor: '#fff', bodyColor: '#9ca3af', callbacks: { label: c => ' $' + c.parsed.y.toLocaleString() } }
      },
      scales: {
        x: { grid: { color: 'rgba(255,255,255,0.04)' }, ticks: { color: '#6b7280', font: { size: 10 } } },
        y: { grid: { color: 'rgba(255,255,255,0.04)' }, ticks: { color: '#6b7280', font: { size: 10 }, callback: v => v >= 1000 ? (v / 1000).toFixed(1) + 'K' : v } }
      }
    }
  });

  const todayD = new Date();
  currentToStr = localDateStr(todayD);
  const fD = new Date(todayD);
  fD.setDate(fD.getDate() - 6);
  currentFromStr = localDateStr(fD);
  
  document.getElementById('date-from').value = currentFromStr;
  document.getElementById('date-to').value = currentToStr;
  applyDates();
});
</script>
@endsection