@php
    $metaDescription = $site->description
        ?: ($site->title
            ? "{$site->title} ({$site->domain}) — competitor analysis, backlinks, and tech stack."
            : "Competitor analysis for {$site->domain}: pages, backlinks, and tech stack.");
@endphp
<x-layouts.app :title="$site->domain" :description="$metaDescription">
    <div class="mx-auto max-w-5xl px-4 py-8">
        <a href="{{ route('sites.index') }}" class="text-sm text-blue-600 hover:underline dark:text-blue-400">&larr; Back to sites</a>

        <h1 class="mt-2 text-2xl font-semibold">{{ $site->domain }}</h1>

        @if ($rootSite)
            <p class="mt-1 text-sm text-neutral-500">
                Subdomain of
                <a href="{{ route('sites.show', $rootSite) }}" class="text-blue-600 hover:underline dark:text-blue-400">{{ $rootSite->domain }}</a>
            </p>
        @endif

        @if ($site->title)
            <p class="mt-1 text-neutral-700 dark:text-neutral-300">{{ $site->title }}</p>
        @endif

        @if ($site->description)
            <p class="mt-1 text-sm text-neutral-500">{{ $site->description }}</p>
        @endif

        @if ($site->url)
            <p class="mt-1 text-sm">
                <a href="{{ $site->url }}" target="_blank" rel="noopener" class="text-blue-600 hover:underline dark:text-blue-400">{{ $site->url }}</a>
            </p>
        @endif

        @guest
            <div class="mt-4 rounded-lg border border-blue-200 bg-blue-50 px-4 py-3 text-sm text-blue-800 dark:border-blue-900 dark:bg-blue-950 dark:text-blue-300">
                You're viewing limited data for this site.
                <a href="{{ route('register') }}" class="font-medium underline">Create a free account</a>
                or
                <a href="{{ route('login') }}" class="font-medium underline">sign in</a>
                to see all of its pages, backlinks, and subdomains.
            </div>
        @endguest

        @if ($site->server || $site->powered_by || $site->generator)
            <div class="mt-3 flex flex-wrap gap-2">
                @if ($site->generator)
                    <span class="rounded-full bg-blue-50 px-3 py-1 text-xs font-medium text-blue-700 dark:bg-blue-950 dark:text-blue-300">{{ $site->generator }}</span>
                @endif
                @if ($site->server)
                    <span class="rounded-full bg-neutral-100 px-3 py-1 text-xs text-neutral-600 dark:bg-neutral-800 dark:text-neutral-400">Server: {{ $site->server }}</span>
                @endif
                @if ($site->powered_by)
                    <span class="rounded-full bg-neutral-100 px-3 py-1 text-xs text-neutral-600 dark:bg-neutral-800 dark:text-neutral-400">Powered by: {{ $site->powered_by }}</span>
                @endif
            </div>
        @endif

        <h2 class="mt-8 text-lg font-medium">Pages ({{ $pages->total() }})</h2>

        <div class="mt-4 overflow-hidden rounded-lg border border-neutral-200 dark:border-neutral-800">
            <table class="min-w-full divide-y divide-neutral-200 dark:divide-neutral-800">
                <thead class="bg-neutral-50 dark:bg-neutral-900">
                    <tr>
                        <th class="px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-neutral-500">URL</th>
                        <th class="px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-neutral-500">Title</th>
                        <th class="px-4 py-2 text-right text-xs font-medium uppercase tracking-wide text-neutral-500">Status</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-neutral-200 dark:divide-neutral-800">
                    @forelse ($pages as $page)
                        <tr>
                            <td class="max-w-md truncate px-4 py-2 text-sm">
                                <a href="{{ $page->url }}" target="_blank" rel="noopener" class="text-blue-600 hover:underline dark:text-blue-400">{{ $page->url }}</a>
                            </td>
                            <td class="px-4 py-2 text-sm text-neutral-600 dark:text-neutral-400">{{ $page->title ?? '—' }}</td>
                            <td class="px-4 py-2 text-right text-sm text-neutral-600 dark:text-neutral-400">{{ $page->status ?? '—' }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="3" class="px-4 py-6 text-center text-sm text-neutral-500">No pages found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="mt-4">
            @auth
                {{ $pages->links() }}
            @else
                <x-guest-preview-notice :paginator="$pages" />
            @endauth
        </div>

        <h2 class="mt-10 text-lg font-medium">
            Backlinks ({{ $backlinks->total() }} from {{ number_format($referringDomainsCount) }} referring {{ \Illuminate\Support\Str::plural('domain', $referringDomainsCount) }})
        </h2>
        <p class="mt-1 text-sm text-neutral-500">
            Also links out to {{ number_format($outboundLinksCount) }} {{ \Illuminate\Support\Str::plural('page', $outboundLinksCount) }} on other domains.
        </p>

        <div class="mt-4 overflow-hidden rounded-lg border border-neutral-200 dark:border-neutral-800">
            <table class="min-w-full divide-y divide-neutral-200 dark:divide-neutral-800">
                <thead class="bg-neutral-50 dark:bg-neutral-900">
                    <tr>
                        <th class="px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-neutral-500">Referring site</th>
                        <th class="px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-neutral-500">Source page</th>
                        <th class="px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-neutral-500">Anchor text</th>
                        <th class="px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-neutral-500">Link type</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-neutral-200 dark:divide-neutral-800">
                    @forelse ($backlinks as $backlink)
                        @php
                            $relTags = $backlink->rel
                                ? array_values(array_intersect(preg_split('/\s+/', strtolower($backlink->rel)), ['nofollow', 'sponsored', 'ugc']))
                                : [];
                        @endphp
                        <tr>
                            <td class="px-4 py-2 text-sm">
                                @if ($backlink->site)
                                    <a href="{{ route('sites.show', $backlink->site) }}" class="font-medium text-blue-600 hover:underline dark:text-blue-400">
                                        {{ $backlink->site->domain }}
                                    </a>
                                @else
                                    <span class="text-neutral-500">—</span>
                                @endif
                            </td>
                            <td class="max-w-md truncate px-4 py-2 text-sm">
                                @if ($backlink->sitePage)
                                    <a href="{{ $backlink->sitePage->url }}" target="_blank" rel="noopener" class="text-blue-600 hover:underline dark:text-blue-400">
                                        {{ $backlink->sitePage->url }}
                                    </a>
                                @else
                                    <span class="text-neutral-500">—</span>
                                @endif
                            </td>
                            <td class="max-w-xs truncate px-4 py-2 text-sm text-neutral-600 dark:text-neutral-400">{{ $backlink->anchor_text ?? '—' }}</td>
                            <td class="px-4 py-2 text-sm">
                                @forelse ($relTags as $tag)
                                    <span class="mr-1 inline-block rounded-full bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700 dark:bg-amber-950 dark:text-amber-300">{{ $tag }}</span>
                                @empty
                                    <span class="inline-block rounded-full bg-green-50 px-2 py-0.5 text-xs font-medium text-green-700 dark:bg-green-950 dark:text-green-300">dofollow</span>
                                @endforelse
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="px-4 py-6 text-center text-sm text-neutral-500">No backlinks found yet.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="mt-4">
            @auth
                {{ $backlinks->links() }}
            @else
                <x-guest-preview-notice :paginator="$backlinks" />
            @endauth
        </div>

        <h2 class="mt-10 text-lg font-medium">Subdomains ({{ $subdomains->total() }})</h2>

        <div class="mt-4 overflow-hidden rounded-lg border border-neutral-200 dark:border-neutral-800">
            <table class="min-w-full divide-y divide-neutral-200 dark:divide-neutral-800">
                <thead class="bg-neutral-50 dark:bg-neutral-900">
                    <tr>
                        <th class="px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-neutral-500">Subdomain</th>
                        <th class="px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-neutral-500">Title</th>
                        <th class="px-4 py-2 text-right text-xs font-medium uppercase tracking-wide text-neutral-500">Pages</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-neutral-200 dark:divide-neutral-800">
                    @forelse ($subdomains as $subdomain)
                        <tr>
                            <td class="px-4 py-2 text-sm">
                                <a href="{{ route('sites.show', $subdomain) }}" class="font-medium text-blue-600 hover:underline dark:text-blue-400">
                                    {{ $subdomain->domain }}
                                </a>
                            </td>
                            <td class="px-4 py-2 text-sm text-neutral-600 dark:text-neutral-400">{{ $subdomain->title ?? '—' }}</td>
                            <td class="px-4 py-2 text-right text-sm text-neutral-600 dark:text-neutral-400">{{ $subdomain->pages_count }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="3" class="px-4 py-6 text-center text-sm text-neutral-500">No subdomains found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="mt-4">
            @auth
                {{ $subdomains->links() }}
            @else
                <x-guest-preview-notice :paginator="$subdomains" />
            @endauth
        </div>
    </div>
</x-layouts.app>