<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page Analysis - SEO Analyzer</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>hljs.highlightAll();</script>
</head>
<body class="bg-gray-50 text-gray-800 font-sans">

    <!-- Header -->
    <header class="bg-white shadow-sm sticky top-0 z-10">
        <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center gap-3">
                <a href="/report/{{ report_id }}" class="text-gray-500 hover:text-gray-700 transition">
                    <i class="fa-solid fa-arrow-left text-xl"></i>
                </a>
                <h1 class="text-xl font-bold text-gray-900">Page Analysis</h1>
            </div>
            <div>
                 <span class="px-3 py-1 rounded-full text-sm font-semibold
                    {% if 'Critical' in data.status %} bg-red-100 text-red-800
                    {% elif 'Warning' in data.status %} bg-yellow-100 text-yellow-800
                    {% elif 'Notice' in data.status %} bg-blue-100 text-blue-800
                    {% else %} bg-green-100 text-green-800 {% endif %}">
                    {{ data.status }}
                </span>
            </div>
        </div>
    </header>

    <main class="max-w-7xl mx-auto px-4 py-8">

        <!-- URL & Basic Stats -->
        <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
            <h2 class="text-lg font-semibold text-gray-700 mb-4">Overview</h2>
            <div class="mb-4">
                <label class="block text-xs font-bold text-gray-500 uppercase tracking-wide">URL</label>
                <a href="{{ url }}" target="_blank" class="text-blue-600 hover:underline break-all text-lg">{{ url }}</a>
            </div>

            <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mt-6 border-t pt-4">
                <!-- Status Code -->
                <div>
                    <div class="text-xs text-gray-500 uppercase mb-1">Status Code</div>
                    <div class="flex items-center gap-2">
                        <span class="font-mono font-bold text-xl">{{ data.status_code }}</span>
                        {% if data.status_code == 200 %}
                            <i class="fa-solid fa-check-circle text-green-500"></i>
                        {% else %}
                            <i class="fa-solid fa-circle-exclamation text-red-500"></i>
                        {% endif %}
                    </div>
                </div>

                <!-- Word Count -->
                <div>
                    <div class="text-xs text-gray-500 uppercase mb-1">Word Count</div>
                    <div class="flex items-center gap-2">
                        <span class="font-mono font-bold text-xl">{{ data.words }}</span>
                        {% if data.words >= config.min_word_count %}
                            <i class="fa-solid fa-check-circle text-green-500"></i>
                        {% else %}
                            <i class="fa-solid fa-triangle-exclamation text-yellow-500"></i>
                        {% endif %}
                    </div>
                    <div class="text-xs text-gray-400 mt-1">Target: > {{ config.min_word_count }}</div>
                </div>

                <!-- Page Size -->
                <div>
                    <div class="text-xs text-gray-500 uppercase mb-1">Page Size</div>
                    <div class="flex items-center gap-2">
                        <span class="font-mono font-bold text-xl">{{ (data.size / 1024)|round(1) }} KB</span>
                        {% if data.size <= config.max_page_size_bytes %}
                            <i class="fa-solid fa-check-circle text-green-500"></i>
                        {% else %}
                            <i class="fa-solid fa-circle-exclamation text-red-500"></i>
                        {% endif %}
                    </div>
                    <div class="text-xs text-gray-400 mt-1">Limit: < {{ (config.max_page_size_bytes / 1024 / 1024)|round(0) }} MB</div>
                </div>

                <!-- Load Time -->
                <div>
                    <div class="text-xs text-gray-500 uppercase mb-1">Load Time</div>
                    <div class="flex items-center gap-2">
                        <span class="font-mono font-bold text-xl">{{ data.load_time|round(3) }}s</span>
                        {% if data.load_time <= config.slow_page_threshold %}
                            <i class="fa-solid fa-check-circle text-green-500"></i>
                        {% else %}
                            <i class="fa-solid fa-triangle-exclamation text-yellow-500"></i>
                        {% endif %}
                    </div>
                    <div class="text-xs text-gray-400 mt-1">Target: < {{ config.slow_page_threshold }}s</div>
                </div>
            </div>
        </div>

        <!-- Issues -->
        {% if data.issues %}
        <div class="bg-white rounded-lg shadow-sm p-6 mb-6 border-l-4 border-red-500">
            <h2 class="text-lg font-semibold text-red-700 mb-4">Issues Detected</h2>
            <ul class="space-y-3">
                {% for issue in data.issues %}
                <li class="text-gray-700">
                    <div class="flex items-center gap-2 font-medium">
                        <i class="fa-solid fa-triangle-exclamation text-red-500"></i>
                        {% set issue_name = issue.split(':')[0] %}
                        <span>{{ issue }}</span>
                    </div>
                    <!-- Issue Description Lookup Logic could go here if passed completely -->
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

            <!-- Meta Data & Social Preview -->
            <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                 <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                    <h2 class="text-lg font-semibold text-gray-700">Metadata & Social Preview</h2>
                </div>
                <div class="p-6 space-y-6">

                    <!-- Standard Meta -->
                    <div>
                        <h3 class="text-sm font-bold text-gray-900 mb-1">Title Tag</h3>
                        <div class="bg-gray-50 p-3 rounded border border-gray-200 font-mono text-sm text-gray-700 break-words">
                            {{ data.title if data.title else '<span class="text-red-400 italic">Missing</span>'|safe }}
                        </div>
                    </div>

                    <div>
                        <h3 class="text-sm font-bold text-gray-900 mb-1">Meta Description</h3>
                        <div class="bg-gray-50 p-3 rounded border border-gray-200 font-mono text-sm text-gray-700 break-words">
                            {{ data.meta_desc if data.meta_desc else '<span class="text-red-400 italic">Missing</span>'|safe }}
                        </div>
                    </div>

                    <!-- Social Card Preview -->
                    <div>
                        <h3 class="text-sm font-bold text-gray-900 mb-2">Social Share Preview (Open Graph)</h3>
                        <div class="border border-gray-300 rounded-lg overflow-hidden max-w-sm mx-auto shadow-sm">
                            <!-- Image -->
                            <div class="bg-gray-200 h-48 flex items-center justify-center overflow-hidden">
                                {% if data.og_image %}
                                    <img src="{{ data.og_image }}" alt="OG Image" class="w-full h-full object-cover">
                                {% else %}
                                    <span class="text-gray-400 italic">No OG Image</span>
                                {% endif %}
                            </div>
                            <!-- Text Content -->
                            <div class="p-4 bg-gray-50">
                                <div class="uppercase tracking-wide text-xs text-gray-500 font-semibold mb-1">
                                    {{ url.split('/')[2] if url.split('/')|length > 2 else 'WEBSITE.COM' }}
                                </div>
                                <h4 class="text-gray-900 font-bold text-lg mb-2 leading-tight">
                                    {{ data.og_title if data.og_title else data.title }}
                                </h4>
                                <p class="text-gray-600 text-sm line-clamp-3">
                                    {{ data.og_desc if data.og_desc else data.meta_desc }}
                                </p>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <!-- Schema & Technical -->
            <div class="space-y-6">

                <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                        <h2 class="text-lg font-semibold text-gray-700">H1 & Canonical</h2>
                    </div>
                    <div class="p-6 grid gap-6">
                        <div>
                            <h3 class="text-sm font-bold text-gray-900 mb-1">H1 Tag</h3>
                             <div class="bg-gray-50 p-3 rounded border border-gray-200 font-mono text-sm text-gray-700 break-words">
                                {{ data.h1 if data.h1 else '<span class="text-red-400 italic">Missing</span>'|safe }}
                            </div>
                        </div>
                        <div>
                            <h3 class="text-sm font-bold text-gray-900 mb-1">Canonical URL</h3>
                             <div class="bg-gray-50 p-3 rounded border border-gray-200 font-mono text-sm text-gray-700 break-all">
                                {{ data.canonical if data.canonical else '<span class="text-gray-400 italic">None</span>'|safe }}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                        <h2 class="text-lg font-semibold text-gray-700">Schema (JSON-LD)</h2>
                    </div>
                    <div class="p-0">
                        {% if data.jsonld %}
                            <pre><code class="language-json text-sm p-4 overflow-x-auto">{{ data.jsonld }}</code></pre>
                        {% else %}
                            <div class="p-6 text-gray-500 italic text-center">No JSON-LD Schema found.</div>
                        {% endif %}
                    </div>
                </div>

            </div>

        </div>

    </main>

</body>
</html>
