@extends('nexus.layouts.app')

@section('page-title', 'Search Visibility')
@section('sys-mode', 'SEO')

@section('head')
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
<link rel="stylesheet" href="/nexus/nexus-seo.css?v={{ time() }}">
@endsection

@section('content')

@php
    $meta  = $report['meta'];
    $cards = $report['cards'];

    // one directional movement list instead of two ragged columns
    $moves = array_merge($report['movers']['up'] ?? [], $report['movers']['down'] ?? []);
    $seen  = [];
    $moves = array_values(array_filter($moves, function ($m) use (&$seen) {
        if (isset($seen[$m['query']])) { return false; }
        $seen[$m['query']] = true;
        return abs($m['move']) >= 0.5;
    }));
    usort($moves, fn ($a, $b) => abs($b['move']) <=> abs($a['move']));
    $moves = array_slice($moves, 0, 8);

    // lower is better for average position, so invert its delta colour
    $deltaClass = function ($card) {
        $d   = $card['delta'];
        $dir = $card['good'] === 'down'
            ? ($d['dir'] === 'up' ? 'down' : ($d['dir'] === 'down' ? 'up' : 'flat'))
            : $d['dir'];
        return $dir === 'up' ? 'chip-live' : ($dir === 'down' ? 'chip-error' : 'chip-pending');
    };

    $verdictChip = function ($pos) {
        if ($pos <= 3)  { return 'chip-active'; }
        if ($pos <= 10) { return 'chip-completed'; }
        if ($pos <= 20) { return 'chip-warning'; }
        return 'chip-pending';
    };
@endphp

{{-- ═══════════════ HEADER ═══════════════ --}}
<div class="page-header">
    <div>
        <h1>SEARCH <em>VISIBILITY</em></h1>
        <div class="page-header-sub">How people find GEAS on Google, and what to fix next</div>
    </div>

    <div class="page-header-right">
        <div class="quick-filters">
            @foreach([7 => '7D', 28 => '28D', 90 => '90D', 180 => '180D'] as $d => $l)
                <a href="/nexus/seo?days={{ $d }}"
                   class="quick-filter {{ $days === $d ? 'active' : '' }}"
                   style="text-decoration:none">{{ $l }}</a>
            @endforeach
        </div>
        <div style="display:flex;gap:8px;align-items:center">
            <a href="/nexus/seo/export?days={{ $days }}" class="btn-export" style="text-decoration:none">EXPORT CSV</a>
            <form method="POST" action="/nexus/seo/sync" style="display:inline">
                @csrf
                <input type="hidden" name="days" value="5">
                <button type="submit" class="btn-export">REFRESH</button>
            </form>
        </div>
    </div>
</div>

@if(session('nexus_ok'))
    <div class="alert-row"><span class="alert-prefix">OK</span><span class="alert-text">{{ session('nexus_ok') }}</span></div>
@endif
@if(session('nexus_err'))
    <div class="alert-row critical"><span class="alert-prefix">ERR</span><span class="alert-text">{{ session('nexus_err') }}</span></div>
@endif

{{-- ═══════════════ 1. PLAIN ENGLISH ═══════════════ --}}
<div class="section-header">
    <span class="section-label">In Plain English</span>
    <span class="section-right">
        {{ $meta['range_label'] }} · data through {{ $meta['end'] }} · sync {{ $meta['sync_status'] }}
    </span>
</div>

<div class="seo-plain">
    @forelse($report['headline'] as $line)
        <p>{{ $line }}</p>
    @empty
        <p>No Search Console data has been synced yet.</p>
    @endforelse
</div>

{{-- ═══════════════ 2. THE FOUR NUMBERS ═══════════════ --}}
<div class="section-header">
    <span class="section-label">The Four Numbers · Last {{ $meta['days'] }} Days</span>
</div>

<div class="stat-strip">
    @foreach($cards as $c)
        <div class="stat-cell">
            <div class="stat-label">{{ $c['label'] }}</div>
            <div class="stat-value {{ $loop->first ? 'orange' : '' }}">{{ $c['value'] }}</div>
            <div class="stat-delta">
                <span class="chip chip-sm {{ $deltaClass($c) }}">{{ $c['delta']['text'] }}</span>
            </div>
            <div class="stat-plain">{{ $c['plain'] }}</div>
        </div>
    @endforeach
</div>

{{-- ═══════════════ 3. TREND ═══════════════ --}}
<div class="chart-row full">
    <div class="chart-panel">
        <div class="chart-title">Last 90 Days · Visitors vs Times Shown</div>
        <div class="section-note">
            Grey climbing while orange stays flat means people see GEAS in Google and do not click.
        </div>
        <div class="chart-wrap h250"><canvas id="cTrend"></canvas></div>
    </div>
</div>

{{-- ═══════════════ 4. BANDS + COUNTRIES ═══════════════ --}}
<div class="chart-row equal">
    <div class="chart-panel">
        <div class="chart-title">Are We Climbing?</div>
        <div class="section-note">Every search term GEAS ranks for, by where it sits. Complete weeks only. Dark shrinking is the goal.</div>
        <div class="chart-wrap h200"><canvas id="cBands"></canvas></div>
        <div class="seo-verdict">{{ $report['buckets']['verdict'] ?? '' }}</div>
    </div>

    <div class="chart-panel">
        <div class="chart-title">Where The Visitors Are</div>
        <div class="section-note">Many impressions with almost no visitors means the wrong kind of search.</div>
        <table class="data-table compact">
            <colgroup><col><col style="width:70px"><col style="width:58px"><col style="width:64px"><col style="width:52px"></colgroup>
            <thead>
                <tr>
                    <th>Country</th>
                    <th class="col-right">Visitors</th>
                    <th class="col-right">Share</th>
                    <th class="col-right">Shown</th>
                    <th class="col-right">Spot</th>
                </tr>
            </thead>
            <tbody>
            @forelse($report['countries']['rows'] as $c)
                <tr>
                    <td class="cell-trunc">
                        @if($c['flag'])
                            <img src="/nexus/flags/{{ $c['flag'] }}.svg" alt="" class="seo-flag" loading="lazy" onerror="this.remove()">
                        @endif
                        {{ $c['name'] }}
                    </td>
                    <td class="col-right">{{ number_format($c['clicks']) }}</td>
                    <td class="col-right text-dim">{{ $c['share'] }}%</td>
                    <td class="col-right text-grey">{{ number_format($c['impressions']) }}</td>
                    <td class="col-right text-grey">{{ $c['position'] }}</td>
                </tr>
            @empty
                <tr><td colspan="5"><div class="empty-state-text">No country data available</div></td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- ═══════════════ 5. TERMS + PAGES ═══════════════ --}}
<div class="chart-row equal">
    <div class="chart-panel">
        <div class="chart-title">What People Searched To Find GEAS</div>
        <table class="data-table compact">
            <colgroup><col style="width:26px"><col><col style="width:46px"><col style="width:50px"><col style="width:46px"><col style="width:92px"></colgroup>
            <thead>
                <tr>
                    <th></th>
                    <th>Search Term</th>
                    <th class="col-right">Visits</th>
                    <th class="col-right">Shown</th>
                    <th class="col-right">Spot</th>
                    <th class="col-right">Where</th>
                </tr>
            </thead>
            <tbody>
            @forelse(array_slice($report['topQueries'], 0, 10) as $i => $q)
                <tr>
                    <td class="col-num">{{ str_pad($i + 1, 2, '0', STR_PAD_LEFT) }}</td>
                    <td class="cell-trunc" title="{{ $q['query'] }}">{{ $q['query'] }}</td>
                    <td class="col-right">{{ number_format($q['clicks']) }}</td>
                    <td class="col-right text-grey">{{ number_format($q['impressions']) }}</td>
                    <td class="col-right text-grey">{{ $q['position'] }}</td>
                    <td class="col-right">
                        <span class="chip chip-sm {{ $verdictChip($q['position']) }}">{{ $q['verdict'] }}</span>
                    </td>
                </tr>
            @empty
                <tr><td colspan="6"><div class="empty-state-text">No query data available</div></td></tr>
            @endforelse
            </tbody>
        </table>
    </div>

    <div class="chart-panel">
        <div class="chart-title">Which Pages Google Sends People To</div>
        <table class="data-table compact">
            <colgroup><col style="width:26px"><col><col style="width:46px"><col style="width:50px"><col style="width:68px"></colgroup>
            <thead>
                <tr>
                    <th></th>
                    <th>Page</th>
                    <th class="col-right">Visits</th>
                    <th class="col-right">Shown</th>
                    <th class="col-right">CTR</th>
                </tr>
            </thead>
            <tbody>
            @forelse(array_slice($report['topPages'], 0, 10) as $i => $p)
                <tr>
                    <td class="col-num">{{ str_pad($i + 1, 2, '0', STR_PAD_LEFT) }}</td>
                    <td class="cell-trunc" title="{{ $p['page'] }}">{{ $p['path'] }}</td>
                    <td class="col-right">{{ number_format($p['clicks']) }}</td>
                    <td class="col-right text-grey">{{ number_format($p['impressions']) }}</td>
                    <td class="col-right text-grey">{{ $p['ctr'] }}%</td>
                </tr>
            @empty
                <tr><td colspan="5"><div class="empty-state-text">No page data available</div></td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- ═══════════════ 6. BRAND + DEVICE ═══════════════ --}}
<div class="chart-row equal">
    <div class="chart-panel">
        <div class="chart-title">Did They Already Know Us?</div>
        <div class="section-note">{{ $report['branded']['plain'] }}</div>
        <div class="chart-wrap h200">
            <canvas id="cBrand"></canvas>
            <div class="chart-center-label">
                <div class="chart-center-value">{{ $report['branded']['branded_pct'] }}%</div>
                <div class="chart-center-text">Knew The Name</div>
            </div>
        </div>
    </div>

    <div class="chart-panel">
        <div class="chart-title">Phone Or Computer</div>
        <div class="section-note">Where the {{ number_format($report['devices']['total']) }} Google visitors came from.</div>
        <div class="chart-wrap h200">
            <canvas id="cDev"></canvas>
            <div class="chart-center-label">
                <div class="chart-center-value">{{ number_format($report['devices']['total']) }}</div>
                <div class="chart-center-text">Total Visitors</div>
            </div>
        </div>
    </div>
</div>

{{-- ═══════════════ 7. MOVERS + UNDERPERFORMERS ═══════════════ --}}
<div class="chart-row equal">
    <div class="chart-panel">
        <div class="chart-title">Biggest Movements</div>
        <div class="section-note">Terms that climbed or fell against the previous {{ $days }} days.</div>
        <table class="data-table compact">
            <colgroup><col><col style="width:88px"><col style="width:104px"></colgroup>
            <thead>
                <tr>
                    <th>Search Term</th>
                    <th>Movement</th>
                    <th class="col-right">Spot</th>
                </tr>
            </thead>
            <tbody>
            @forelse($moves as $m)
                <tr>
                    <td class="cell-trunc" title="{{ $m['query'] }}">{{ $m['query'] }}</td>
                    <td>
                        <span class="chip chip-sm {{ $m['move'] > 0 ? 'chip-live' : 'chip-error' }}">
                            <span class="move-arrow">{{ $m['move'] > 0 ? '▲' : '▼' }}</span>
                            {{ number_format(abs($m['move']), 1) }}
                        </span>
                    </td>
                    <td class="col-right text-dim">{{ $m['from'] }} → {{ $m['to'] }}</td>
                </tr>
            @empty
                <tr><td colspan="3"><div class="empty-state-text">No movement data available</div></td></tr>
            @endforelse
            </tbody>
        </table>
    </div>

    <div class="chart-panel">
        <div class="chart-title">Ranking Well But Not Getting Clicked</div>
        <div class="section-note">High enough in Google, people scroll past. Usually the title, not the ranking.</div>
        <table class="data-table compact">
            <colgroup><col><col style="width:46px"><col style="width:52px"><col style="width:60px"><col style="width:46px"></colgroup>
            <thead>
                <tr>
                    <th>Page</th>
                    <th class="col-right">Spot</th>
                    <th class="col-right">Gets</th>
                    <th class="col-right">Should</th>
                    <th class="col-right">Lost</th>
                </tr>
            </thead>
            <tbody>
            @forelse(array_slice($report['underperformers'], 0, 8) as $u)
                <tr>
                    <td class="cell-trunc" title="{{ $u['plain'] }}">{{ $u['path'] }}</td>
                    <td class="col-right text-grey">{{ $u['position'] }}</td>
                    <td class="col-right text-red">{{ $u['actual'] }}%</td>
                    <td class="col-right text-green">{{ $u['expected'] }}%</td>
                    <td class="col-right">{{ $u['lost'] }}</td>
                </tr>
            @empty
                <tr><td colspan="5"><div class="empty-state-text">Every page earns roughly what its position deserves</div></td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- ═══════════════ 7b. BLOG PERFORMANCE ═══════════════ --}}
<div class="section-header">
    <span class="section-label">Blog Performance</span>
    <span class="section-right">
        {{ number_format($report['blog']['clicks']) }} visitors · {{ $report['blog']['share'] }}% of all Google traffic
    </span>
</div>

<div class="section-note" style="padding-bottom:12px">{{ $report['blog']['plain'] }}</div>

<table class="data-table">
    <colgroup><col style="width:50px"><col><col style="width:26%"><col style="width:90px"><col style="width:80px"><col style="width:90px"><col style="width:70px"></colgroup>
    <thead>
        <tr>
            <th></th>
            <th>Post</th>
            <th>Search Term Carrying It</th>
            <th class="col-right">Visitors</th>
            <th class="col-right">Shown</th>
            <th class="col-right">Click Rate</th>
            <th class="col-right">Spot</th>
        </tr>
    </thead>
    <tbody>
    @forelse($report['blog']['posts'] as $i => $b)
        <tr>
            <td class="col-num">{{ str_pad($i + 1, 2, '0', STR_PAD_LEFT) }}</td>
            <td class="cell-trunc" title="{{ $b['slug'] }}">
                {{ $b['slug'] }}
                @if($b['legacy'])
                    <span class="chip chip-sm chip-warning" style="margin-left:6px">OLD URL</span>
                @endif
            </td>
            <td class="cell-trunc text-dim" title="{{ $b['top_query'] }}">{{ $b['top_query'] }}</td>
            <td class="col-right">{{ number_format($b['clicks']) }}</td>
            <td class="col-right text-grey">{{ number_format($b['impressions']) }}</td>
            <td class="col-right text-grey">{{ $b['ctr'] }}%</td>
            <td class="col-right">
                <span class="chip chip-sm {{ $verdictChip($b['position']) }}">{{ $b['position'] }}</span>
            </td>
        </tr>
    @empty
        <tr><td colspan="7"><div class="empty-state"><div class="empty-state-text">No blog posts picking up search traffic yet</div></div></td></tr>
    @endforelse
    </tbody>
</table>

{{-- ═══════════════ 8. ACTION LIST ═══════════════ --}}
<div class="section-header">
    <span class="section-label">Almost On Page One</span>
    <span class="section-right">{{ count($report['striking']) }} {{ Str::plural('term', count($report['striking'])) }} · fastest available wins</span>
</div>

<div class="section-note" style="padding-bottom:12px">
    These already get shown to plenty of people but sit just below page one.
    Improving the page behind each is the quickest way to add visitors.
</div>

<table class="data-table">
    <colgroup><col style="width:50px"><col><col style="width:30%"><col style="width:90px"><col style="width:80px"><col style="width:90px"><col style="width:130px"></colgroup>
    <thead>
        <tr>
            <th></th>
            <th>Search Term</th>
            <th>Page To Edit</th>
            <th class="col-right">Times Shown</th>
            <th class="col-right">Spot</th>
            <th class="col-right">To Page 1</th>
            <th class="col-right">Closeness</th>
        </tr>
    </thead>
    <tbody>
    @forelse($report['striking'] as $i => $s)
        <tr>
            <td class="col-num">{{ str_pad($i + 1, 2, '0', STR_PAD_LEFT) }}</td>
            <td class="cell-trunc" title="{{ $s['query'] }}">{{ $s['query'] }}</td>
            <td class="cell-trunc text-orange" title="{{ $s['page'] }}">{{ $s['page'] }}</td>
            <td class="col-right">{{ number_format($s['impressions']) }}</td>
            <td class="col-right text-grey">{{ $s['position'] }}</td>
            <td class="col-right text-grey">{{ $s['gap'] > 0 ? $s['gap'] : '—' }}</td>
            <td>
                <div class="inline-bar-cell">
                    <div class="inline-bar-track">
                        <div class="inline-bar-fill orange"
                             style="width:{{ max(4, min(100, (int) round((1 - ($s['gap'] / 10)) * 100))) }}%"></div>
                    </div>
                </div>
            </td>
        </tr>
    @empty
        <tr><td colspan="7"><div class="empty-state"><div class="empty-state-text">Nothing currently sitting just outside page one</div></div></td></tr>
    @endforelse
    </tbody>
</table>

@endsection

@section('scripts')
<script>
(function () {
    if (typeof Chart === 'undefined') { return; }

    var ORANGE = '#e8842a', GREEN = '#00aa00', YELLOW = '#ccaa00',
        GREY = '#999999', DIM = '#7a7a7a', LINE = '#222222', DEEP = '#3a3a3a';

    Chart.defaults.color = DIM;
    Chart.defaults.borderColor = LINE;
    Chart.defaults.font.family = "'IBM Plex Mono', monospace";
    Chart.defaults.font.size = 9;

    var trend   = @json($report['trend']);
    var bands   = @json($report['buckets']);
    var brand   = @json($report['branded']);
    var devices = @json($report['devices']);

    var ax = {
        grid: { color: LINE },
        border: { display: false },
        ticks: { color: DIM, maxRotation: 0, autoSkipPadding: 20 }
    };

    var legend = {
        position: 'bottom',
        labels: { boxWidth: 8, boxHeight: 8, padding: 14, color: GREY }
    };

    new Chart(document.getElementById('cTrend'), {
        type: 'line',
        data: {
            labels: trend.labels,
            datasets: [
                {
                    label: 'Visitors', data: trend.clicks,
                    borderColor: ORANGE, backgroundColor: 'rgba(232,132,42,0.09)',
                    borderWidth: 1.8, fill: true, tension: 0.35,
                    pointRadius: 0, pointHoverRadius: 3, yAxisID: 'y'
                },
                {
                    label: 'Times shown', data: trend.impressions,
                    borderColor: DIM, borderWidth: 1.2, fill: false, tension: 0.35,
                    pointRadius: 0, pointHoverRadius: 3, yAxisID: 'y1'
                }
            ]
        },
        options: {
            responsive: true, maintainAspectRatio: false,
            interaction: { mode: 'index', intersect: false },
            plugins: { legend: legend },
            scales: {
                x: ax,
                y:  { position: 'left',  grid: { color: LINE }, border: { display: false }, ticks: { color: ORANGE } },
                y1: { position: 'right', grid: { drawOnChartArea: false }, border: { display: false }, ticks: { color: DIM } }
            }
        }
    });

    new Chart(document.getElementById('cBands'), {
        type: 'bar',
        data: {
            labels: bands.labels,
            datasets: [
                { label: 'Top 3',        data: bands.top3,  backgroundColor: ORANGE, barPercentage: 0.62 },
                { label: 'Rest of page 1', data: bands.page1, backgroundColor: GREEN, barPercentage: 0.62 },
                { label: 'Page 2+',      data: bands.rest,  backgroundColor: DEEP,   barPercentage: 0.62 }
            ]
        },
        options: {
            responsive: true, maintainAspectRatio: false,
            plugins: { legend: legend },
            scales: { x: Object.assign({ stacked: true }, ax), y: Object.assign({ stacked: true }, ax) }
        }
    });

    new Chart(document.getElementById('cBrand'), {
        type: 'doughnut',
        data: {
            labels: ['Knew the name', 'Found us another way'],
            datasets: [{
                data: [brand.branded_clicks, brand.other_clicks],
                backgroundColor: [ORANGE, DEEP], borderColor: '#0a0a0a', borderWidth: 2
            }]
        },
        options: { responsive: true, maintainAspectRatio: false, cutout: '72%', plugins: { legend: legend } }
    });

    new Chart(document.getElementById('cDev'), {
        type: 'doughnut',
        data: {
            labels: devices.labels,
            datasets: [{
                data: devices.values,
                backgroundColor: [ORANGE, DEEP, DIM], borderColor: '#0a0a0a', borderWidth: 2
            }]
        },
        options: { responsive: true, maintainAspectRatio: false, cutout: '72%', plugins: { legend: legend } }
    });
})();
</script>
@endsection