{{-- Analytics (design: Screens · Dashboard / Analytics). Plain numbers first, charts second. --}}
@extends('layouts.app')
@section('title', 'Analytics — InLynq')
@section('heading', 'Analytics')

@php($k = $report['kpis'])

@section('content')
<div class="iq-stack" style="gap:24px">
  <div class="iq-row" style="justify-content:space-between;gap:12px">
    <form method="GET" action="{{ route('analytics.index') }}" class="iq-seg" style="flex-wrap:wrap" aria-label="Date range">
      @foreach (config('inlynq.analytics.ranges') as $key => $r)
        <button name="range" value="{{ $key }}" @class(['is-active' => $range === $key])>{{ $r['label'] }}@if($allowedDays !== null && ($r['days'] === null || $r['days'] > $allowedDays)) <x-iq.icon name="lock" size="sm" />@endif</button>
      @endforeach
    </form>
    @if ($canExport)
      <a class="iq-btn iq-btn-secondary iq-btn-sm" href="{{ route('analytics.export', ['range' => $range]) }}"><x-iq.icon name="upload" /> Export CSV</a>
    @else
      <button type="button" class="iq-btn iq-btn-secondary iq-btn-sm" data-dialog-open="upgrade-dialog"><x-iq.icon name="upload" /> Export CSV <span class="iq-badge iq-badge-pro" style="height:18px;padding:0 5px">Pro</span></button>
    @endif
  </div>

  @if ($gated)
    <div class="iq-banner"><x-iq.icon name="lock" /><div><b>{{ config("inlynq.analytics.ranges.{$requestedRange}.label") }} is on Pro.</b> Free keeps the last 7 days. <a class="iq-link" href="{{ route('checkout.show', 'pro-yearly') }}">Upgrade</a></div></div>
  @endif

  @if (! $profile->published_at)
    <x-iq.empty icon="chart" title="No insights yet." action="Publish profile" :href="route('builder.show')" variant="secondary">Publish your profile to start collecting insights.</x-iq.empty>
  @else
  <div class="app-grid-4">
    <x-iq.kpi label="Profile views" :value="number_format($k['views']['value'])" :delta="$k['views']['delta']" />
    <x-iq.kpi label="Unique visitors" :value="number_format($k['uniques']['value'])" :delta="$k['uniques']['delta']" />
    <x-iq.kpi label="Link clicks" :value="number_format($k['clicks']['value'])" :delta="$k['clicks']['delta']" />
    <x-iq.kpi label="Click-through rate" :value="$k['ctr']['value'].'%'" :delta="$k['ctr']['delta']" suffix=" pt" />
  </div>

  <div class="iq-card" style="padding:24px">
    <div class="iq-row" style="justify-content:space-between;margin-bottom:16px"><span style="font-weight:600">Views over time</span>
      <span class="iq-row" style="gap:16px;font-size:12px"><span class="iq-row" style="gap:6px"><i style="width:12px;height:2px;background:var(--chart-1)"></i>Views</span><span class="iq-row iq-muted" style="gap:6px"><i style="width:12px;border-top:2px dashed var(--chart-2)"></i>Unique</span></span></div>
    <x-iq.line-chart :series="$report['series']" :label="'Profile views, '.$report['days'].' days'" />
  </div>

  <div class="app-grid-main cols-14-10">
    <div class="iq-stack" style="gap:12px">
      <span style="font-weight:600">Top links</span>
      @if ($report['targets'])
      <div class="iq-table-wrap"><table class="iq-table app-stack-table">
        <thead><tr><th>Link</th><th>Section</th><th class="r">Clicks</th><th class="r">CTR</th></tr></thead>
        <tbody>
        @foreach ($report['targets'] as $t)
          <tr><td class="strong">{{ $t['label'] }}</td><td data-label="Section">{{ $t['section'] }}</td><td class="r iq-num" data-label="Clicks">{{ number_format($t['clicks']) }}</td><td class="r iq-num" data-label="CTR">{{ $t['ctr'] }}%</td></tr>
        @endforeach
        </tbody>
      </table></div>
      @else
        <p class="iq-muted" style="margin:0">No clicks in this period.</p>
      @endif
    </div>
    <div class="iq-stack" style="gap:24px">
      <div class="iq-card iq-stack" style="padding:24px"><span style="font-weight:600">Traffic sources</span>
        @forelse ($report['sources'] as $s)<x-iq.hbar :label="$s['label']" :value="$s['percent'].'%'" :percent="$s['percent'] * 2" />@empty<p class="iq-muted" style="margin:0;font-size:14px">No visits yet.</p>@endforelse
      </div>
      <div class="iq-card iq-stack" style="padding:24px"><span style="font-weight:600">Devices</span>
        @if ($report['devices'])
        <div class="iq-stack" style="gap:16px">
          <div style="display:flex;height:10px;border-radius:5px;overflow:hidden;gap:2px">
            @foreach ($report['devices'] as $i => $d)<i style="flex:{{ max(1, $d['percent']) }};background:{{ ['var(--chart-1)', 'var(--chart-2)', 'var(--border-strong)'][$i] ?? 'var(--border-strong)' }}"></i>@endforeach
          </div>
          <div class="iq-stack" style="gap:8px;font-size:14px">
            @foreach ($report['devices'] as $i => $d)
              <div class="iq-row" style="justify-content:space-between"><span class="iq-row" style="gap:8px"><i style="width:8px;height:8px;border-radius:2px;background:{{ ['var(--chart-1)', 'var(--chart-2)', 'var(--border-strong)'][$i] ?? 'var(--border-strong)' }}"></i>{{ $d['label'] }}</span><span class="iq-num iq-sub">{{ $d['percent'] }}%</span></div>
            @endforeach
          </div>
        </div>
        @else<p class="iq-muted" style="margin:0;font-size:14px">No visits yet.</p>@endif
      </div>
    </div>
  </div>

  <div class="app-grid-main cols-10-14">
    <div class="iq-card iq-stack" style="padding:24px"><span style="font-weight:600">Where visitors are</span>
      @forelse ($report['countries'] as $c)<x-iq.hbar :label="$c['label']" :value="$c['percent'].'%'" :percent="$c['percent'] * 2" />@empty<p class="iq-muted" style="margin:0;font-size:14px">Country shows when your site runs behind a CDN that reports it.</p>@endforelse
    </div>
    <div class="iq-card" style="padding:24px">
      <div class="iq-row" style="justify-content:space-between;margin-bottom:8px"><span style="font-weight:600">Profile growth</span><span class="iq-muted" style="font-size:12px">monthly views, last 12 months</span></div>
      <x-iq.bar-chart :months="$report['monthly']" />
    </div>
  </div>
  <p class="iq-help" style="margin:0">Visitors are counted without cookies or stored IP addresses. Unique visitors are counted per day.</p>
  @endif
</div>
@include('dashboard.partials.upgrade-dialog')
@endsection