@extends('admin.layouts.app')

@section('title', 'SEO')

@php($C = 2 * 3.14159 * 52)

@section('content')
    <style>
        .seo-hero { display: flex; align-items: center; gap: 28px; }
        .seo-gauge { position: relative; width: 132px; height: 132px; flex-shrink: 0; }
        .seo-gauge .seo-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
        .seo-gauge .seo-num b { font-family: 'Cormorant Garamond', serif; font-size: 2.3rem; line-height: 1; }
        .seo-gauge .seo-num span { font-size: .72rem; color: var(--ff-muted); text-transform: uppercase; letter-spacing: .1em; }
        .seo-ring { transition: stroke-dashoffset 1s ease; }
        .seo-checklist { list-style: none; padding: 0; margin: 0; }
        .seo-checklist li { display: flex; align-items: baseline; gap: 9px; padding: 5px 0; font-size: .9rem; }
        .seo-checklist .ic { font-weight: 700; }
        .seo-ok { color: #2f6b2a; } .seo-no { color: #c0392b; }
        .seo-sugg { border-left: 3px solid var(--ff-gold); padding: 8px 0 8px 14px; margin-bottom: 12px; }
        .seo-sugg .h { font-weight: 600; }
        .seo-sugg .p { color: var(--ff-muted); font-size: .82rem; margin-top: 2px; }
        .seo-score-badge { display: inline-block; min-width: 44px; text-align: center; padding: .2rem .5rem; border-radius: 999px; font-weight: 700; font-size: .82rem; color: #fff; }
        .seo-issue { display: block; color: var(--ff-muted); font-size: .82rem; margin-top: 3px; }
    </style>

    <div class="btn-row" style="justify-content: space-between; align-items: flex-start;">
        <div>
            <h1 class="page-title">SEO</h1>
            <p class="lead">Qualité du référencement, mesurée sur les pages réellement publiées (comme Google les voit).</p>
        </div>
        <form method="POST" action="{{ route('admin.seo.refresh') }}">
            @csrf
            <button class="btn btn-sm" type="submit">↻ Ré-analyser</button>
        </form>
    </div>

    @if ($drafts->isNotEmpty())
        <div class="form-note">
            {{ $drafts->count() }} page(s) en brouillon, non analysées car invisibles des moteurs :
            <strong>{{ $drafts->pluck('title')->implode(', ') }}</strong>. Publiez-les pour qu'elles soient référencées.
        </div>
    @endif

    {{-- Score gauge --}}
    <div class="card seo-hero">
        <div class="seo-gauge">
            <svg viewBox="0 0 120 120" width="132" height="132" aria-hidden="true">
                <circle cx="60" cy="60" r="52" fill="none" stroke="#f0ebe1" stroke-width="9"></circle>
                <circle class="seo-ring" cx="60" cy="60" r="52" fill="none" stroke="{{ $rating['color'] }}" stroke-width="9" stroke-linecap="round"
                        transform="rotate(-90 60 60)" stroke-dasharray="{{ $C }}" stroke-dashoffset="{{ $C }}"
                        data-target="{{ $score }}"></circle>
            </svg>
            <div class="seo-num"><b style="color: {{ $rating['color'] }};">{{ $score }}%</b><span>{{ $rating['label'] }}</span></div>
        </div>
        <div>
            <h2 style="margin: 0 0 6px;">Score SEO global : {{ $rating['label'] }}</h2>
            <p class="hint" style="margin: 0;">Moyenne sur {{ $pages->count() }} pages. Le score monte quand chaque page a un titre et une description uniques et bien dimensionnés, du contenu, et est publiée.</p>
            <ul class="seo-checklist" style="margin-top: 12px;">
                @foreach ($siteChecks as $c)
                    <li>
                        <span class="ic {{ $c['ok'] ? 'seo-ok' : 'seo-no' }}">{{ $c['ok'] ? '✓' : '✗' }}</span>
                        <span>{{ $c['label'] }} <span class="seo-issue" style="display:inline;">— {{ $c['note'] }}</span></span>
                    </li>
                @endforeach
            </ul>
        </div>
    </div>

    {{-- Prioritised suggestions --}}
    <div class="card">
        <h2>Suggestions d'amélioration</h2>
        @if (empty($suggestions))
            <p class="hint">🎉 Aucune amélioration prioritaire — votre référencement est en bon état.</p>
        @else
            <p class="hint">Par ordre d'impact. Modifiez chaque page concernée (réglage « Titre / Description SEO »).</p>
            @foreach ($suggestions as $s)
                <div class="seo-sugg">
                    <div class="h">{{ $s['label'] }} <span style="color: var(--ff-muted); font-weight: 400;">· {{ $s['count'] }} page{{ $s['count'] > 1 ? 's' : '' }}</span></div>
                    <div class="p">{{ implode(' · ', array_slice($s['pages'], 0, 8)) }}{{ count($s['pages']) > 8 ? '…' : '' }}</div>
                </div>
            @endforeach
        @endif
    </div>

    {{-- Per-page breakdown --}}
    <div class="card">
        <h2>Détail par page</h2>
        <table class="tbl">
            <thead>
                <tr><th>Page</th><th>Score</th><th>À améliorer</th><th></th></tr>
            </thead>
            <tbody>
                @foreach ($pages as $r)
                    <tr>
                        <td>{{ $r['page']->title }} <span class="ro">/{{ $r['page']->slug }}</span></td>
                        <td><span class="seo-score-badge" style="background: {{ $r['rating']['color'] }};">{{ $r['score'] }}%</span></td>
                        <td>
                            @forelse ($r['issues'] as $issue)
                                <span class="seo-issue">• {{ $issue['advice'] }}</span>
                            @empty
                                <span class="seo-ok" style="font-size: .85rem;">✓ Rien à signaler</span>
                            @endforelse
                        </td>
                        <td><a class="btn btn-sm" href="{{ route('admin.pages.edit', $r['page']) }}">Modifier</a></td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <script>
        (function () {
            var ring = document.querySelector('.seo-ring');
            if (!ring) return;
            var C = parseFloat(ring.getAttribute('stroke-dasharray'));
            var target = parseInt(ring.getAttribute('data-target'), 10) || 0;
            // Animate the ring filling to the score on load.
            requestAnimationFrame(function () {
                ring.style.strokeDashoffset = C * (1 - target / 100);
            });
        })();
    </script>
@endsection