{{-- resources/views/filament/components/seo-audit-panel.blade.php --}}
{{-- 100% inline styles — Filament CSS does not scan this file --}}
@php
$score = $result->score;
$checks = $result->checks;
$primaryKeyword = $result->primaryKeyword;
$secondaryKeywords = $result->secondaryKeywords;

$isEmpty = ($score === 0 && $primaryKeyword === '');

[$ringColor, $bgColor, $textColor, $labelText] = match(true) {
$score >= 71 => ['#16a34a', '#f0fdf4', '#15803d', 'Bon'],
$score >= 41 => ['#d97706', '#fffbeb', '#b45309', 'À améliorer'],
default => ['#dc2626', '#fef2f2', '#b91c1c', 'Insuffisant'],
};

$circumference = 2 * M_PI * 40;
$dashOffset = $circumference * (1 - $score / 100);

$fails = array_values(array_filter($checks, fn($c) => $c['status'] === 'fail'));
$warnings = array_values(array_filter($checks, fn($c) => $c['status'] === 'warning'));
$passes = array_values(array_filter($checks, fn($c) => $c['status'] === 'pass'));

$groups = [];
if (count($fails)) $groups[] = ['checks' => $fails, 'color' => '#dc2626', 'bg' => '#fef2f2', 'dot' => '#fca5a5', 'label' => 'Problèmes'];
if (count($warnings)) $groups[] = ['checks' => $warnings, 'color' => '#d97706', 'bg' => '#fffbeb', 'dot' => '#fcd34d', 'label' => 'Avertissements'];
if (count($passes)) $groups[] = ['checks' => $passes, 'color' => '#16a34a', 'bg' => '#f0fdf4', 'dot' => '#86efac', 'label' => 'Validé'];
@endphp

@if($isEmpty)
<div style="display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px 16px;border:1.5px dashed #d1d5db;border-radius:12px;text-align:center;">
    <svg style="width:40px;height:40px;color:#9ca3af;" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
    </svg>
    <p style="margin:0;font-size:14px;font-weight:500;color:#6b7280;">Ajoutez du contenu pour lancer l'analyse SEO</p>
    <p style="margin:0;font-size:12px;color:#9ca3af;">L'audit démarre automatiquement dès que l'article contient assez de texte.</p>
</div>

@else
<div style="display:flex;flex-direction:column;gap:16px;padding:4px 0;">

    {{-- Header: ring + keywords --}}
    <div style="display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;padding:20px;">

        {{-- Circular score ring --}}
        <div style="position:relative;width:80px;height:80px;flex-shrink:0;">
            <svg width="80" height="80" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="50" cy="50" r="40" stroke="#e5e7eb" stroke-width="10" fill="none" />
                <circle cx="50" cy="50" r="40"
                    stroke="{{ $ringColor }}"
                    stroke-width="10"
                    fill="none"
                    stroke-linecap="round"
                    stroke-dasharray="{{ number_format($circumference, 2, '.', '') }}"
                    stroke-dashoffset="{{ number_format($dashOffset, 2, '.', '') }}"
                    transform="rotate(-90 50 50)" />
            </svg>
            <div style="position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;">
                <span style="font-size:20px;font-weight:700;color:{{ $ringColor }};">{{ $score }}</span>
                <span style="font-size:10px;color:#9ca3af;margin-top:2px;">/100</span>
            </div>
        </div>

        {{-- Score label + keywords --}}
        <div style="flex:1;min-width:0;">
            <div style="display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px;">
                <span style="display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;background:{{ $bgColor }};color:{{ $textColor }};">
                    @if($score >= 71)
                    <svg style="width:12px;height:12px;" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
                    </svg>
                    @elseif($score >= 41)
                    <svg style="width:12px;height:12px;" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" />
                    </svg>
                    @else
                    <svg style="width:12px;height:12px;" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z" clip-rule="evenodd" />
                    </svg>
                    @endif
                    {{ $labelText }}
                </span>
                <span style="font-size:12px;color:#9ca3af;">{{ count($passes) }}/{{ count($checks) }} points validés</span>
            </div>

            @if($primaryKeyword)
            <div>
                <p style="margin:0 0 6px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#9ca3af;">Mots-clés détectés</p>
                <div style="display:flex;flex-wrap:wrap;gap:6px;">
                    <span style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600;background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;">
                        <svg style="width:11px;height:11px;opacity:.7;" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 15.803a7.5 7.5 0 0 0 10.607 0Z" />
                        </svg>
                        {{ $primaryKeyword }}
                    </span>
                    @foreach($secondaryKeywords as $kw)
                    <span style="display:inline-flex;padding:4px 10px;border-radius:6px;font-size:12px;color:#374151;background:#f3f4f6;border:1px solid #e5e7eb;">{{ $kw }}</span>
                    @endforeach
                </div>
                <p style="margin:6px 0 0;font-size:11px;color:#9ca3af;font-style:italic;">Détection automatique — vérifiez la pertinence.</p>
            </div>
            @endif
        </div>
    </div>

    {{-- Check groups --}}
    @foreach($groups as $grp)
    <div style="border-radius:10px;overflow:hidden;border:1px solid {{ $grp['color'] }}30;">
        <div style="display:flex;align-items:center;gap:8px;padding:8px 16px;background:{{ $grp['bg'] }};">
            <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:{{ $grp['color'] }};flex-shrink:0;"></span>
            <span style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:{{ $grp['color'] }};">{{ $grp['label'] }}</span>
            <span style="margin-left:auto;font-size:11px;color:{{ $grp['color'] }};opacity:.7;">{{ count($grp['checks']) }}</span>
        </div>
        <div>
            @foreach($grp['checks'] as $i => $check)
            <div style="display:flex;align-items:flex-start;gap:10px;padding:10px 16px;{{ $i > 0 ? 'border-top:1px solid #f3f4f6;' : '' }}">
                <span style="margin-top:6px;width:6px;height:6px;border-radius:50%;background:{{ $grp['dot'] }};flex-shrink:0;"></span>
                <div style="flex:1;min-width:0;">
                    <p style="margin:0;font-size:13px;font-weight:500;color:#111827;line-height:1.4;">{{ $check['label'] }}</p>
                    <p style="margin:2px 0 0;font-size:12px;color:#6b7280;line-height:1.5;">{{ $check['message'] }}</p>
                </div>
                <span style="flex-shrink:0;font-size:11px;color:#d1d5db;font-variant-numeric:tabular-nums;margin-top:2px;">{{ $check['weight'] }}pt</span>
            </div>
            @endforeach
        </div>
    </div>
    @endforeach

</div>
@endif