@extends('layouts.app')
@section('content')
<div class="flex items-end justify-between mb-4">
  <div>
    <h1 class="text-2xl font-bold">Realtime Dashboard</h1>
    <p class="text-slate-500 text-sm">Last 30 days • refresh to update (cached 5m)</p>
  </div>
  <div class="flex items-center gap-2">
    <form>
      <select name="acc_id" class="border rounded-xl p-2" onchange="this.form.submit()">
        @foreach($accounts as $a)
          <option value="{{ $a->id }}" {{ optional($active)->id===$a->id?'selected':'' }}>{{ $a->label }} ({{ $a->customer_id }})</option>
        @endforeach
      </select>
    </form>
    @if($active)
    <form method="GET" action="{{ route('dashboard') }}">
      <input type="hidden" name="acc_id" value="{{ $active->id }}" />
      <button name="refresh" value="1" class="px-3 py-2 rounded-xl border">Refresh</button>
    </form>
    @endif
  </div>
</div>

@if(!$active)
  <div class="bg-yellow-50 border border-yellow-200 text-yellow-800 p-4 rounded-xl">Connect an account to see data.</div>
@else
  <div class="grid md:grid-cols-4 gap-4 mb-6">
    @php $last = collect($metrics['rows'])->last(); @endphp
    <div class="bg-white rounded-2xl shadow p-4"><div class="text-slate-500 text-xs">Impressions</div><div class="text-2xl font-semibold">{{ number_format($last['impressions'] ?? 0) }}</div></div>
    <div class="bg-white rounded-2xl shadow p-4"><div class="text-slate-500 text-xs">Clicks</div><div class="text-2xl font-semibold">{{ number_format($last['clicks'] ?? 0) }}</div></div>
    <div class="bg-white rounded-2xl shadow p-4"><div class="text-slate-500 text-xs">Cost ({{ $metrics['currency'] }})</div><div class="text-2xl font-semibold">{{ number_format($last['cost'] ?? 0,2) }}</div></div>
    <div class="bg-white rounded-2xl shadow p-4"><div class="text-slate-500 text-xs">Avg CPC ({{ $metrics['currency'] }})</div><div class="text-2xl font-semibold">{{ number_format($last['avg_cpc'] ?? 0,2) }}</div></div>
  </div>

  <div class="bg-white rounded-2xl shadow p-5">
    <canvas id="lineChart" height="120"></canvas>
  </div>

  <div class="bg-white rounded-2xl shadow p-5 mt-6 overflow-x-auto">
    <table class="w-full text-sm">
      <thead class="text-left text-slate-500">
        <tr>
          <th class="py-2">Date</th>
          <th>Impr.</th>
          <th>Clicks</th>
          <th>CTR</th>
          <th>Cost ({{ $metrics['currency'] }})</th>
          <th>Avg CPC</th>
          <th>Conv.</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody>
        @foreach($metrics['rows'] as $row)
        <tr class="border-t">
          <td class="py-2">{{ $row['date'] }}</td>
          <td>{{ number_format($row['impressions']) }}</td>
          <td>{{ number_format($row['clicks']) }}</td>
          <td>{{ number_format($row['ctr'],2) }}%</td>
          <td>{{ number_format($row['cost'],2) }}</td>
          <td>{{ number_format($row['avg_cpc'],2) }}</td>
          <td>{{ number_format($row['conversions'],2) }}</td>
          <td>{{ number_format($row['conv_value'],2) }}</td>
        </tr>
        @endforeach
      </tbody>
    </table>
  </div>
@endif

@if($active)
<script type="module">
import Chart from 'chart.js/auto';
const rows = @json($metrics['rows'] ?? []);
const labels = rows.map(r=>r.date);
const clicks = rows.map(r=>r.clicks);
const cost = rows.map(r=>r.cost);
const conversions = rows.map(r=>r.conversions);
const ctx = document.getElementById('lineChart');
new Chart(ctx, { type:'line', data:{ labels, datasets:[ {label:'Clicks', data:clicks}, {label:'Cost ({{ $metrics['currency'] }})', data:cost}, {label:'Conversions', data:conversions} ] }, options:{ responsive:true, maintainAspectRatio:false, scales:{ y:{ beginAtZero:true } } } });
</script>
@endif
@endsection