@extends('backend.layout.master-tailwind')
@section('title', __('Analytics'))
@section('breadcrumb_section', 'Overview')
@section('breadcrumb_page', __('Analytics'))

@section('content')
@php
// ── Helpers ───────────────────────────────────────────────────────────────────
$fmt = function($n) {
    if (!$n) return '$0';
    if ($n >= 1_000_000) return '$' . rtrim(rtrim(number_format($n / 1_000_000, 2), '0'), '.') . 'M';
    if ($n >= 1_000)     return '$' . rtrim(rtrim(number_format($n / 1_000, 1), '0'), '.') . 'k';
    return '$' . number_format($n, 0);
};

$fmtYn = function($n) {
    if ($n >= 1_000_000) return rtrim(rtrim(number_format($n / 1_000_000, 1), '0'), '.') . 'M';
    if ($n >= 1_000)     return intval($n / 1_000) . 'k';
    return number_format($n, 0);
};

$fmtY = function($n) use ($fmt) { return $fmt($n); };

$delta = function($cur, $prev) {
    if (!$prev) return ['—', true];
    $pct = round(($cur - $prev) / $prev * 100, 1);
    return [$pct >= 0 ? "↑ {$pct}%" : "↓ " . abs($pct) . "%", $pct >= 0];
};

$sfn = function(array $data, $w = 220, $h = 36) {
    $vals = array_values($data);
    if (count($vals) < 2) return "M0 " . ($h-3) . " L{$w} " . ($h-3);
    $min = min($vals); $max = max($vals);
    $range = max($max - $min, 1); $n = count($vals);
    $pts = [];
    foreach ($vals as $i => $v) {
        $x = round($i / ($n-1) * $w, 2);
        $y = round($h - (($v - $min) / $range) * ($h - 6) - 3, 2);
        $pts[] = "$x $y";
    }
    return 'M' . implode(' L', $pts);
};

$niceMax = function($maxVal, $steps = 4) {
    if (!$maxVal || $maxVal <= 0) return 100;
    $mag = pow(10, floor(log10($maxVal)));
    foreach ([1, 2, 2.5, 5, 10] as $c) {
        if ($c * $mag * $steps >= $maxVal) return $c * $mag * $steps;
    }
    return $mag * 10 * $steps;
};

// ── KPI deltas ────────────────────────────────────────────────────────────────
[$gmvDelta,       $gmvUp      ] = $delta($gmvCur,       $gmvPrev);
[$feesDelta,      $feesUp     ] = $delta($feesCur,      $feesPrev);
[$contractsDelta, $contractsUp] = $delta($contractsCur, $contractsPrev);
[$signupsDelta,   $signupsUp  ] = $delta($signupsCur,   $signupsPrev);
$takeRate = $gmvCur > 0 ? round($feesCur / $gmvCur * 100, 2) : 0;

// ── KPI sparkline paths ───────────────────────────────────────────────────────
$gmvSparkPath       = $sfn(array_values($gmvSparkRaw));
$feesSparkPath      = $sfn(array_values($feesSparkRaw));
$contractsSparkPath = $sfn(array_values($contractsSparkRaw));
$signupsSparkPath   = $sfn(array_values($signupsSparkRaw));

// ── Revenue area chart (viewBox 760×280) ──────────────────────────────────────
$rX0 = 36; $rXe = 748; $rY0 = 12; $rYe = 256;
$rCW = $rXe - $rX0; $rCH = $rYe - $rY0;
$rMax = $niceMax($revSeries->max('gmv') ?: 1);
$rn   = $revSeries->count();

$rGmvPts = []; $rFeesPts = [];
foreach ($revSeries as $i => $row) {
    $x = round($rX0 + ($rn > 1 ? $i / ($rn-1) : 0) * $rCW, 1);
    $rGmvPts[]  = "$x " . round($rYe - ($row->gmv  / $rMax) * $rCH, 1);
    $rFeesPts[] = "$x " . round($rYe - ($row->fees / $rMax) * $rCH, 1);
}
$rGmvLine  = $rn ? 'M' . implode(' L', $rGmvPts) : '';
$rGmvArea  = $rn ? $rGmvLine . " L{$rXe} {$rYe} L{$rX0} {$rYe} Z" : '';
$rFeesLine = $rn ? 'M' . implode(' L', $rFeesPts) : '';

$rSteps = [];
for ($i = 0; $i <= 4; $i++) {
    $v = $rMax * $i / 4;
    $rSteps[] = ['v' => $v, 'y' => round($rYe - ($v / $rMax) * $rCH, 1)];
}
$rLabels = []; $rLblStep = max(1, (int)ceil($rn / 6));
foreach ($revSeries as $i => $row) {
    if ($i % $rLblStep === 0 || $i === $rn - 1) {
        $x = round($rX0 + ($rn > 1 ? $i / ($rn-1) : 0) * $rCW, 1);
        $rLabels[] = ['x' => $x, 'label' => \Carbon\Carbon::parse($row->bucket)->format($labelFmt)];
    }
}

// ── Category mix donut ────────────────────────────────────────────────────────
$totalCatJobs = $catMix->sum('job_count') ?: 1;
$donutColors  = [
    'var(--accent)',
    'color-mix(in oklch, var(--accent) 70%, white)',
    'color-mix(in oklch, var(--accent) 50%, white)',
    'color-mix(in oklch, var(--accent) 30%, white)',
    'var(--text-dim)',
    'var(--surface-2)',
];
$donutPaths = []; $donutAngle = -90;
foreach ($catMix as $ci => $cat) {
    $sweep = ($cat->job_count / $totalCatJobs) * 360;
    $ea = $donutAngle + $sweep;
    $cx = 70; $cy = 70; $ro = 66; $ri = 46;
    $x1 = round($cx + $ro * cos(deg2rad($donutAngle)), 3); $y1 = round($cy + $ro * sin(deg2rad($donutAngle)), 3);
    $x2 = round($cx + $ro * cos(deg2rad($ea)), 3);         $y2 = round($cy + $ro * sin(deg2rad($ea)), 3);
    $x3 = round($cx + $ri * cos(deg2rad($ea)), 3);         $y3 = round($cy + $ri * sin(deg2rad($ea)), 3);
    $x4 = round($cx + $ri * cos(deg2rad($donutAngle)), 3); $y4 = round($cy + $ri * sin(deg2rad($donutAngle)), 3);
    $la = $sweep > 180 ? 1 : 0;
    $donutPaths[] = [
        'path'  => "M {$x1} {$y1} A {$ro} {$ro} 0 {$la} 1 {$x2} {$y2} L {$x3} {$y3} A {$ri} {$ri} 0 {$la} 0 {$x4} {$y4} Z",
        'color' => $donutColors[$ci] ?? 'var(--surface-2)',
        'pct'   => round($cat->job_count / $totalCatJobs * 100),
        'name'  => $cat->category,
    ];
    $donutAngle = $ea;
}

// ── Jobs posted vs filled bar chart (viewBox 760×240) ────────────────────────
$jX0 = 36; $jXe = 748; $jY0 = 12; $jYe = 216;
$jCW = $jXe - $jX0; $jCH = $jYe - $jY0;

$postedMap = $jobsPostedSeries->keyBy('bucket');
$filledMap = $jobsFilledSeries->keyBy('bucket');
$jBuckets  = $jobsPostedSeries->pluck('bucket')->merge($jobsFilledSeries->pluck('bucket'))->unique()->sort()->values();
$jData = $jBuckets->map(function($b) use ($postedMap, $filledMap) {
    $posted = (int)($postedMap->get($b)?->cnt ?? 0);
    $filled = min((int)($filledMap->get($b)?->cnt ?? 0), $posted);
    return ['bucket' => $b, 'posted' => $posted, 'filled' => $filled, 'unfilled' => $posted - $filled];
});

$jMax    = $niceMax($jData->max('posted') ?: 1);
$jn      = $jData->count();
$jSlotW  = $jn > 0 ? $jCW / $jn : $jCW;
$jBarW   = max(6, min(18, round($jSlotW * 0.35, 1)));

$jSteps = [];
for ($i = 0; $i <= 4; $i++) {
    $v = $jMax * $i / 4;
    $jSteps[] = ['v' => $v, 'y' => round($jYe - ($v / $jMax) * $jCH, 1)];
}
$jLabels = []; $jLblStep = max(1, (int)ceil($jn / 8));
foreach ($jData as $i => $row) {
    if ($i % $jLblStep === 0 || $i === $jn - 1) {
        $jLabels[] = ['x' => round($jX0 + ($i + 0.5) * $jSlotW, 1), 'label' => \Carbon\Carbon::parse($row['bucket'])->format($labelFmt)];
    }
}

// ── Activation funnel ─────────────────────────────────────────────────────────
$fBase  = max($funnelVisited, 1);
$funnel = [
    ['label' => __('Registered users'),     'n' => $funnelVisited,   'pct' => 100,                                        'drop' => false],
    ['label' => __('Signed up (period)'),   'n' => $funnelSignups,   'pct' => round($funnelSignups   / $fBase * 100, 1), 'drop' => true],
    ['label' => __('Posted job/proposal'),  'n' => $funnelPosted,    'pct' => round($funnelPosted    / $fBase * 100, 1), 'drop' => true],
    ['label' => __('First contract'),       'n' => $funnelContracts, 'pct' => round($funnelContracts / $fBase * 100, 1), 'drop' => true],
    ['label' => __('Paid'),                 'n' => $funnelPaid,      'pct' => round($funnelPaid      / $fBase * 100, 1), 'drop' => true],
];

// ── Category sparklines ───────────────────────────────────────────────────────
$catSparkPaths = [];
foreach ($topCatRows as $cr) {
    $vals = $catSpark30->has($cr->cat_id) ? $catSpark30[$cr->cat_id]->toArray() : [0, 0];
    $catSparkPaths[$cr->cat_id] = $sfn($vals, 80, 22);
}

// ── Top markets ───────────────────────────────────────────────────────────────
$mMax   = $topMarkets->max('cnt') ?: 1;
$mTotal = $topMarkets->sum('cnt') ?: 1;
@endphp

<div class="page">

  {{-- Page head --}}
  <div class="page-head">
    <div>
      <h1 class="page-title">{{ __('Analytics') }}</h1>
      <p class="page-sub">{{ __('Marketplace health across GMV, supply, and demand') }}</p>
    </div>
    <div class="page-actions">
      <div class="seg">
        @foreach(['24h','7d','30d','90d','ytd','all'] as $p)
        <button onclick="location.href='?period={{ $p }}'" class="{{ $period === $p ? 'on' : '' }}">{{ strtoupper($p) }}</button>
        @endforeach
      </div>
      <a href="{{ route('admin.analytics.export', ['period' => $period]) }}" class="btn">
        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12"/><path d="m7 10 5 5 5-5"/><path d="M5 21h14"/></svg>
        {{ __('Export CSV') }}
      </a>
    </div>
  </div>

  {{-- KPI row --}}
  <div class="kpis">

    <div class="kpi">
      <div class="kpi-body">
        <div class="kpi-label">{{ __('Gross volume') }}</div>
        <div class="kpi-value">{{ $fmt($gmvCur) }}</div>
        <div class="kpi-meta">
          <span class="delta {{ $gmvUp ? 'up' : 'down' }}">{{ $gmvDelta }}</span>
          <span>vs {{ $fmt($gmvPrev) }} prev</span>
        </div>
      </div>
      <div class="kpi-spark">
        <svg width="100%" height="52" viewBox="-2 -2 224 40" preserveAspectRatio="none" style="display:block">
          <defs><linearGradient id="ksg1" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="{{ $gmvUp ? 'var(--success)' : 'var(--danger)' }}" stop-opacity="0.28"/><stop offset="100%" stop-color="{{ $gmvUp ? 'var(--success)' : 'var(--danger)' }}" stop-opacity="0"/></linearGradient></defs>
          <path d="{{ $gmvSparkPath }} L220 36 L0 36 Z" fill="url(#ksg1)"/>
          <path d="{{ $gmvSparkPath }}" stroke="{{ $gmvUp ? 'var(--success)' : 'var(--danger)' }}" stroke-width="1.4" fill="none"/>
        </svg>
      </div>
    </div>

    <div class="kpi">
      <div class="kpi-body">
        <div class="kpi-label">{{ __('Platform fees') }}</div>
        <div class="kpi-value">{{ $fmt($feesCur) }}</div>
        <div class="kpi-meta">
          <span class="delta {{ $feesUp ? 'up' : 'down' }}">{{ $feesDelta }}</span>
          <span>{{ $takeRate }}% take rate</span>
        </div>
      </div>
      <div class="kpi-spark">
        <svg width="100%" height="52" viewBox="-2 -2 224 40" preserveAspectRatio="none" style="display:block">
          <defs><linearGradient id="ksg2" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="{{ $feesUp ? 'var(--success)' : 'var(--danger)' }}" stop-opacity="0.28"/><stop offset="100%" stop-color="{{ $feesUp ? 'var(--success)' : 'var(--danger)' }}" stop-opacity="0"/></linearGradient></defs>
          <path d="{{ $feesSparkPath }} L220 36 L0 36 Z" fill="url(#ksg2)"/>
          <path d="{{ $feesSparkPath }}" stroke="{{ $feesUp ? 'var(--success)' : 'var(--danger)' }}" stroke-width="1.4" fill="none"/>
        </svg>
      </div>
    </div>

    <div class="kpi">
      <div class="kpi-body">
        <div class="kpi-label">{{ __('Active contracts') }}</div>
        <div class="kpi-value">{{ number_format($contractsCur) }}</div>
        <div class="kpi-meta">
          <span class="delta {{ $contractsUp ? 'up' : 'down' }}">{{ $contractsDelta }}</span>
          <span>{{ number_format($contractsCur) }} new this period</span>
        </div>
      </div>
      <div class="kpi-spark">
        <svg width="100%" height="52" viewBox="-2 -2 224 40" preserveAspectRatio="none" style="display:block">
          <defs><linearGradient id="ksg3" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="{{ $contractsUp ? 'var(--success)' : 'var(--danger)' }}" stop-opacity="0.28"/><stop offset="100%" stop-color="{{ $contractsUp ? 'var(--success)' : 'var(--danger)' }}" stop-opacity="0"/></linearGradient></defs>
          <path d="{{ $contractsSparkPath }} L220 36 L0 36 Z" fill="url(#ksg3)"/>
          <path d="{{ $contractsSparkPath }}" stroke="{{ $contractsUp ? 'var(--success)' : 'var(--danger)' }}" stroke-width="1.4" fill="none"/>
        </svg>
      </div>
    </div>

    <div class="kpi">
      <div class="kpi-body">
        <div class="kpi-label">{{ __('New sign-ups') }}</div>
        <div class="kpi-value">{{ number_format($signupsCur) }}</div>
        <div class="kpi-meta">
          <span class="delta {{ $signupsUp ? 'up' : 'down' }}">{{ $signupsDelta }}</span>
          <span>vs {{ number_format($signupsPrev) }} prev</span>
        </div>
      </div>
      <div class="kpi-spark">
        <svg width="100%" height="52" viewBox="-2 -2 224 40" preserveAspectRatio="none" style="display:block">
          <defs><linearGradient id="ksg4" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="{{ $signupsUp ? 'var(--success)' : 'var(--danger)' }}" stop-opacity="0.28"/><stop offset="100%" stop-color="{{ $signupsUp ? 'var(--success)' : 'var(--danger)' }}" stop-opacity="0"/></linearGradient></defs>
          <path d="{{ $signupsSparkPath }} L220 36 L0 36 Z" fill="url(#ksg4)"/>
          <path d="{{ $signupsSparkPath }}" stroke="{{ $signupsUp ? 'var(--success)' : 'var(--danger)' }}" stroke-width="1.4" fill="none"/>
        </svg>
      </div>
    </div>

  </div>

  {{-- Row 1: Revenue area chart + Category mix --}}
  <div class="grid grid-12" style="margin-top:16px">

    <div class="card span-8">
      <div class="card-head">
        <div>
          <div class="card-title">{{ __('Gross volume & platform fees') }}</div>
          <div class="card-sub">{{ ucfirst($period) }}</div>
        </div>
        <div class="page-actions" style="margin-left:auto">
          <span style="display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-3);margin-right:4px"><span style="width:8px;height:8px;border-radius:2px;background:var(--accent)"></span>GMV</span>
          <span style="display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-3);margin-right:4px"><span style="width:8px;height:8px;border-radius:2px;background:var(--text-dim)"></span>{{ __('Platform fees') }}</span>
        </div>
      </div>
      <div class="card-body" style="padding:8px">
        @if($rn > 0)
        <svg viewBox="0 0 760 280" preserveAspectRatio="none" style="display:block;width:100%;height:280px">
          @foreach($rSteps as $step)
          <line x1="{{ $rX0 }}" x2="{{ $rXe }}" y1="{{ $step['y'] }}" y2="{{ $step['y'] }}" stroke="var(--border)" stroke-dasharray="2 3"/>
          <text x="{{ $rX0 - 4 }}" y="{{ $step['y'] + 3.5 }}" text-anchor="end" font-size="10" fill="var(--text-3)" font-family="var(--font-mono)">{{ $fmtY($step['v']) }}</text>
          @endforeach
          @foreach($rLabels as $lbl)
          <text x="{{ $lbl['x'] }}" y="274" text-anchor="middle" font-size="10" fill="var(--text-3)" font-family="var(--font-mono)">{{ $lbl['label'] }}</text>
          @endforeach
          <defs><linearGradient id="rg1" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="var(--accent)" stop-opacity="0.22"/><stop offset="100%" stop-color="var(--accent)" stop-opacity="0"/></linearGradient></defs>
          <path d="{{ $rGmvArea }}" fill="url(#rg1)"/>
          <path d="{{ $rGmvLine }}" stroke="var(--accent)" stroke-width="1.6" fill="none"/>
          <path d="{{ $rFeesLine }}" stroke="var(--text-dim)" stroke-width="1.4" fill="none" stroke-dasharray="4 3"/>
        </svg>
        @else
        <div style="height:280px;display:grid;place-items:center;color:var(--text-3);font-size:12px">{{ __('No data for this period') }}</div>
        @endif
      </div>
    </div>

    <div class="card span-4">
      <div class="card-head">
        <div class="card-title">{{ __('Category mix') }}</div>
        <div class="page-actions" style="margin-left:auto"><span class="card-sub">{{ __('By jobs') }}</span></div>
      </div>
      <div class="card-body" style="display:flex;align-items:center;gap:16px">
        @if($catMix->sum('job_count') > 0)
        <svg width="140" height="140" style="display:block;flex:none">
          @foreach($donutPaths as $dp)
          <path d="{{ $dp['path'] }}" fill="{{ $dp['color'] }}"/>
          @endforeach
        </svg>
        <div style="flex:1;display:grid;gap:6px">
          @foreach($donutPaths as $dp)
          <div style="display:flex;align-items:center;gap:8px;font-size:12px">
            <span style="width:8px;height:8px;border-radius:2px;background:{{ $dp['color'] }};flex:none"></span>
            <span style="flex:1;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="{{ $dp['name'] }}">{{ $dp['name'] }}</span>
            <span style="font-family:var(--font-mono);color:var(--text)">{{ $dp['pct'] }}%</span>
          </div>
          @endforeach
        </div>
        @else
        <div style="flex:1;display:grid;place-items:center;color:var(--text-3);font-size:12px;min-height:120px">{{ __('No data') }}</div>
        @endif
      </div>
    </div>

  </div>

  {{-- Row 2: Jobs posted vs filled + Activation funnel --}}
  <div class="grid grid-12" style="margin-top:12px">

    <div class="card span-7">
      <div class="card-head">
        <div>
          <div class="card-title">{{ __('Jobs posted vs filled') }}</div>
          @php
            $totalPosted = $jData->sum('posted'); $totalFilled = $jData->sum('filled');
            $fillRate = $totalPosted > 0 ? round($totalFilled / $totalPosted * 100, 1) : 0;
          @endphp
          <div class="card-sub">{{ __('Fill rate') }} {{ $fillRate }}%</div>
        </div>
        <div class="page-actions" style="margin-left:auto">
          <span style="display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-3);margin-right:4px"><span style="width:8px;height:8px;border-radius:2px;background:var(--accent);opacity:.9"></span>{{ __('Filled') }}</span>
          <span style="display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-3);margin-right:4px"><span style="width:8px;height:8px;border-radius:2px;background:var(--text-dim);opacity:.55"></span>{{ __('Unfilled') }}</span>
        </div>
      </div>
      <div class="card-body" style="padding:8px">
        @if($jn > 0)
        <svg viewBox="0 0 760 240" preserveAspectRatio="none" style="display:block;width:100%;height:240px">
          @foreach($jSteps as $step)
          <line x1="{{ $jX0 }}" x2="{{ $jXe }}" y1="{{ $step['y'] }}" y2="{{ $step['y'] }}" stroke="var(--border)" stroke-dasharray="2 3"/>
          <text x="{{ $jX0 - 4 }}" y="{{ $step['y'] + 3.5 }}" text-anchor="end" font-size="10" fill="var(--text-3)" font-family="var(--font-mono)">{{ $fmtYn($step['v']) }}</text>
          @endforeach
          @foreach($jLabels as $lbl)
          <text x="{{ $lbl['x'] }}" y="234" text-anchor="middle" font-size="10" fill="var(--text-3)" font-family="var(--font-mono)">{{ $lbl['label'] }}</text>
          @endforeach
          @foreach($jData as $i => $row)
          @php
            $cx   = round($jX0 + ($i + 0.5) * $jSlotW, 1);
            $bx   = round($cx - $jBarW / 2, 1);
            $hFill = $jMax > 0 ? round(($row['filled']   / $jMax) * $jCH, 1) : 0;
            $hUnf  = $jMax > 0 ? round(($row['unfilled'] / $jMax) * $jCH, 1) : 0;
          @endphp
          @if($hUnf > 0)
          <rect x="{{ $bx }}" y="{{ round($jYe - $hFill - $hUnf, 1) }}" width="{{ $jBarW }}" height="{{ $hUnf }}" rx="2" fill="var(--text-dim)" opacity="0.55"/>
          @endif
          @if($hFill > 0)
          <rect x="{{ $bx }}" y="{{ round($jYe - $hFill, 1) }}" width="{{ $jBarW }}" height="{{ $hFill }}" fill="var(--accent)" opacity="0.9"/>
          @endif
          @endforeach
        </svg>
        @else
        <div style="height:240px;display:grid;place-items:center;color:var(--text-3);font-size:12px">{{ __('No data for this period') }}</div>
        @endif
      </div>
    </div>

    <div class="card span-5">
      <div class="card-head">
        <div class="card-title">{{ __('Activation funnel') }}</div>
        <div class="card-sub" style="margin-left:auto">{{ strtoupper($period) }}</div>
      </div>
      <div class="card-body">
        @foreach($funnel as $fi => $step)
        <div style="margin-bottom:10px">
          <div style="display:flex;justify-content:space-between;margin-bottom:4px;font-size:12px">
            <span style="color:var(--text-2)">{{ $step['label'] }}</span>
            <span style="font-family:var(--font-mono)">
              <span style="color:var(--text)">{{ number_format($step['n']) }}</span>
              <span style="color:var(--text-3);margin-left:8px">{{ $step['pct'] }}%</span>
            </span>
          </div>
          <div class="bar"><span style="width:{{ min($step['pct'], 100) }}%"></span></div>
          @if($step['drop'] && $fi > 0)
          @php
            $prevPct = $funnel[$fi - 1]['pct'];
            $dropOff = $prevPct > 0 ? round(($prevPct - $step['pct']) / $prevPct * 100, 1) : 0;
          @endphp
          <div style="font-size:11px;color:var(--text-3);margin-top:3px;font-family:var(--font-mono)">↓ {{ $dropOff }}% drop-off</div>
          @endif
        </div>
        @endforeach
      </div>
    </div>

  </div>

  {{-- Row 3: Top categories + Top markets --}}
  <div class="grid grid-12" style="margin-top:12px">

    <div class="card span-7">
      <div class="card-head">
        <div class="card-title">{{ __('Top categories') }}</div>
      </div>
      <div style="overflow-x:auto">
        @if($topCatRows->count())
        <table class="tbl">
          <thead>
            <tr>
              <th>{{ __('Category') }}</th>
              <th class="num">{{ __('Active jobs') }}</th>
              <th class="num">{{ __('GMV') }}</th>
              <th>{{ __('Trend') }}</th>
              <th class="num">Δ vs prev</th>
            </tr>
          </thead>
          <tbody>
            @foreach($topCatRows as $catRow)
            @php
              $catName   = $topCatNames[$catRow->cat_id] ?? 'Unknown';
              $abbr      = strtoupper(substr(preg_replace('/[^A-Za-z]/','', $catName), 0, 3));
              $prevGmv   = $topCatPrev[$catRow->cat_id] ?? 0;
              [$catDelta, $catUp] = $delta($catRow->gmv, $prevGmv);
              $sparkPath = $catSparkPaths[$catRow->cat_id] ?? 'M0 11 L80 11';
            @endphp
            <tr>
              <td>
                <div class="usercell">
                  <div class="av" style="background:var(--accent-soft);color:var(--accent);border-color:transparent;font-family:var(--font-mono);font-size:9px">{{ $abbr }}</div>
                  <div class="nm">{{ $catName }}</div>
                </div>
              </td>
              <td class="num">{{ number_format($catRow->active_jobs) }}</td>
              <td class="num">{{ $fmt($catRow->gmv) }}</td>
              <td>
                <svg width="80" height="22" style="display:block">
                  <path d="{{ $sparkPath }}" stroke="{{ $catUp ? 'var(--accent)' : 'var(--danger)' }}" stroke-width="1.4" fill="none"/>
                </svg>
              </td>
              <td class="num"><span class="delta {{ $catUp ? 'up' : 'down' }}">{{ $catDelta }}</span></td>
            </tr>
            @endforeach
          </tbody>
        </table>
        @else
        <div style="padding:24px;text-align:center;color:var(--text-3);font-size:12px">{{ __('No category data for this period') }}</div>
        @endif
      </div>
    </div>

    <div class="card span-5">
      <div class="card-head">
        <div class="card-title">{{ __('Top markets') }}</div>
        <div class="page-actions" style="margin-left:auto"><span class="card-sub">{{ __('By sign-ups') }}</span></div>
      </div>
      <div class="card-body" style="padding-top:6px">
        @if($topMarkets->count())
        @foreach($topMarkets as $market)
        @php
          $tag      = strtoupper(substr(preg_replace('/[^A-Za-z]/','', $market->country_name), 0, 2));
          $barPct   = round($market->cnt / $mMax * 100, 1);
          $sharePct = round($market->cnt / $mTotal * 100, 1);
        @endphp
        <div style="display:flex;align-items:center;gap:10px;padding:6px 0">
          <span class="tag" style="min-width:32px;justify-content:center;font-family:var(--font-mono);font-size:10px">{{ $tag }}</span>
          <span style="flex:0 0 130px;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="{{ $market->country_name }}">{{ $market->country_name }}</span>
          <div class="bar" style="flex:1"><span style="width:{{ $barPct }}%"></span></div>
          <span style="font-family:var(--font-mono);font-size:12px;color:var(--text-2);min-width:40px;text-align:right">{{ $sharePct }}%</span>
        </div>
        @endforeach
        @else
        <div style="padding:24px;text-align:center;color:var(--text-3);font-size:12px">{{ __('No market data for this period') }}</div>
        @endif
      </div>
    </div>

  </div>

  {{-- Row 4: Activity by hour heatmap --}}
  <div class="grid grid-12" style="margin-top:12px">
    <div class="card span-12">
      <div class="card-head">
        <div>
          <div class="card-title">{{ __('Activity by hour · UTC') }}</div>
          <div class="card-sub">{{ __('Contract events per hour, by day of week') }}</div>
        </div>
        <div class="page-actions" style="margin-left:auto">
          <span style="display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-3);margin-right:4px"><span style="width:8px;height:8px;border-radius:2px;background:var(--surface-2)"></span>{{ __('Low') }}</span>
          <span style="display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-3);margin-right:4px"><span style="width:8px;height:8px;border-radius:2px;background:var(--accent-soft)"></span>{{ __('Med') }}</span>
          <span style="display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-3);margin-right:4px"><span style="width:8px;height:8px;border-radius:2px;background:var(--accent)"></span>{{ __('High') }}</span>
        </div>
      </div>
      <div class="card-body">
        <div style="display:grid;grid-template-columns:48px repeat(24, 1fr);gap:3px;font-family:var(--font-mono);font-size:10px">
          {{-- Hour labels --}}
          <div></div>
          @for($h = 0; $h < 24; $h++)
          <div style="text-align:center;color:var(--text-3);font-size:10px">{{ $h % 3 === 0 ? str_pad($h, 2, '0', STR_PAD_LEFT) : '' }}</div>
          @endfor
          {{-- Day rows --}}
          @php $dayNames = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']; @endphp
          @for($d = 0; $d < 7; $d++)
          <div style="color:var(--text-3);padding-right:6px;text-align:right;align-self:center">{{ $dayNames[$d] }}</div>
          @for($h = 0; $h < 24; $h++)
          @php
            $cnt = $heatmap[$d][$h] ?? 0;
            $pct = $heatmapMax > 0 ? round($cnt / $heatmapMax * 90) : 0;
            $bg  = $pct > 0 ? "color-mix(in oklch, var(--accent) {$pct}%, var(--surface-2))" : 'var(--surface-2)';
            $tip = $dayNames[$d] . ' ' . str_pad($h, 2, '0', STR_PAD_LEFT) . ':00 · ' . $cnt . ' events';
          @endphp
          <div style="height:18px;border-radius:3px;background:{{ $bg }}" title="{{ $tip }}"></div>
          @endfor
          @endfor
        </div>
      </div>
    </div>
  </div>

</div>
@endsection

@section('admin_styles')
<style>
  .seg { display: inline-flex; background: var(--hover); border: 1px solid var(--border); border-radius: var(--radius); padding: 2px; gap: 1px; }
  .seg button { background: none; border: none; padding: 4px 10px; border-radius: calc(var(--radius) - 2px); font-size: 12px; color: var(--text-3); cursor: pointer; transition: background 0.1s, color 0.1s; }
  .seg button:hover { color: var(--text); }
  .seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
</style>
@endsection