@extends('layouts.app')

@section('title', 'XML Sitemap Generator - 100 Toolbox')
@section('meta_description',
    'Generate valid XML sitemaps for your website instantly. Enter your URL, check progress,
    and download. Supports crawling and text list inputs.')

@section('content')
    <div class="max-w-4xl mx-auto space-y-8" x-data="sitemapGenerator()">

        <!-- Header -->
        <div class="text-center space-y-4">
            <h1 class="text-3xl md:text-5xl font-bold text-white tracking-tight">XML Sitemap Generator</h1>
            <p class="text-slate-400 text-lg max-w-2xl mx-auto">
                Create an XML sitemap for your website instantly. Enter your URLs manually or let our crawler find them for
                you.
            </p>
        </div>

        <!-- Main Tool Interface -->
        <div class="bg-slate-900/50 backdrop-blur-sm border border-white/10 rounded-2xl p-6 md:p-8 shadow-xl">

            <!-- Tabs -->
            <div class="flex space-x-1 rounded-xl bg-slate-950/50 p-1 mb-6 border border-white/5">
                <button @click="activeTab = 'text'"
                    :class="{ 'bg-indigo-600 text-white shadow': activeTab === 'text', 'text-slate-400 hover:text-white hover:bg-white/5': activeTab !== 'text' }"
                    class="w-full rounded-lg py-2.5 text-sm font-medium leading-5 transition-all duration-200">
                    Enter URLs Manually
                </button>
                <button @click="activeTab = 'crawl'"
                    :class="{ 'bg-indigo-600 text-white shadow': activeTab === 'crawl', 'text-slate-400 hover:text-white hover:bg-white/5': activeTab !== 'crawl' }"
                    class="w-full rounded-lg py-2.5 text-sm font-medium leading-5 transition-all duration-200">
                    Crawl Website
                </button>
            </div>

            <!-- Text Input Mode -->
            <div x-show="activeTab === 'text'" x-transition:enter="transition ease-out duration-300"
                x-transition:enter-start="opacity-0 transform scale-95"
                x-transition:enter-end="opacity-100 transform scale-100">
                <form action="{{ route('tools.sitemap.text') }}" method="POST" class="space-y-4">
                    @csrf
                    <!-- Honeypot -->
                    <div style="opacity: 0; position: absolute; top: 0; left: 0; height: 0; width: 0; z-index: -1;">
                        <input type="text" name="website_hp" tabindex="-1" autocomplete="off">
                    </div>
                    <div>
                        <label for="urls" class="block text-sm font-medium text-slate-300 mb-2">Paste your URLs (one per
                            line)</label>
                        <textarea name="urls" id="urls" rows="10"
                            class="w-full rounded-xl bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 focus:ring-indigo-500/20 placeholder:text-slate-600 font-mono text-sm p-4"
                            placeholder="https://example.com/&#10;https://example.com/about&#10;https://example.com/contact" required></textarea>
                    </div>
                    <button type="submit"
                        class="w-full flex justify-center py-3 px-4 border border-transparent rounded-xl shadow-sm text-sm font-bold text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 focus:ring-offset-slate-900 transition-all">
                        Generate Sitemap
                    </button>
                </form>
            </div>

            <!-- Crawler Mode -->
            <div x-show="activeTab === 'crawl'" style="display: none;" x-transition:enter="transition ease-out duration-300"
                x-transition:enter-start="opacity-0 transform scale-95"
                x-transition:enter-end="opacity-100 transform scale-100">
                <form @submit.prevent="startCrawl" class="space-y-4">
                    <!-- Honeypot -->
                    <div style="opacity: 0; position: absolute; top: 0; left: 0; height: 0; width: 0; z-index: -1;">
                        <input type="text" name="website_hp" x-model="honeypot" tabindex="-1" autocomplete="off">
                    </div>
                    <div>
                        <label for="url" class="block text-sm font-medium text-slate-300 mb-2">Website URL to
                            Crawl</label>
                        <div class="relative rounded-md shadow-sm">
                            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                <span class="text-slate-500 sm:text-sm">🌐</span>
                            </div>
                            <input x-model="crawlUrl" type="url" name="url" id="url"
                                class="block w-full rounded-xl border-white/10 bg-slate-950 pl-10 text-slate-200 focus:border-indigo-500 focus:ring-indigo-500/20 placeholder:text-slate-600 sm:text-sm py-3"
                                placeholder="https://example.com" required>
                        </div>
                        <p class="mt-2 text-xs text-slate-500 flex justify-between">
                            <span>We will crawl up to 100 pages from this domain.</span>
                            <span x-show="isCrawling" class="text-indigo-400 font-medium"
                                x-text="`Scanning: ${crawledCount} pages found...`"></span>
                        </p>
                    </div>

                    <div x-show="isCrawling" class="w-full bg-slate-800 rounded-full h-1.5 mb-4 overflow-hidden">
                        <div class="bg-indigo-500 h-1.5 rounded-full animate-indeterminate"></div>
                    </div>

                    <div x-show="currentUrl" class="text-xs text-slate-500 truncate font-mono">
                        <span class="text-slate-400">Current:</span> <span x-text="currentUrl"
                            class="text-indigo-300"></span>
                    </div>

                    <button type="submit" :disabled="isCrawling" :class="{ 'opacity-50 cursor-not-allowed': isCrawling }"
                        class="w-full flex justify-center py-3 px-4 border border-transparent rounded-xl shadow-sm text-sm font-bold text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 focus:ring-offset-slate-900 transition-all">
                        <span x-show="!isCrawling">Start Crawler</span>
                        <span x-show="isCrawling" class="flex items-center gap-2">
                            <svg class="animate-spin h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none"
                                viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                                    stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor"
                                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                                </path>
                            </svg>
                            Crawling...
                        </span>
                    </button>
                </form>
            </div>

            <!-- Results Section (Manual or Crawl) -->
            <div x-show="sitemapResult" class="mt-8 pt-8 border-t border-white/10 animate-fade-in" style="display: none;">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center gap-3">
                        <h3 class="text-lg font-medium text-white">Generated Sitemap</h3>
                        <span
                            class="px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-500/20 text-indigo-300 border border-indigo-500/20"
                            x-text="`${crawledCount} Pages`"></span>
                    </div>
                    <div class="flex gap-3">
                        <button @click="downloadSitemap"
                            class="text-xs flex items-center gap-1 text-slate-300 hover:text-white transition-colors bg-white/5 hover:bg-white/10 px-3 py-1.5 rounded-lg border border-white/5">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                            </svg>
                            Download XML
                        </button>
                        <button @click="copyToClipboard"
                            class="text-xs flex items-center gap-1 text-indigo-400 hover:text-indigo-300 transition-colors px-3 py-1.5 rounded-lg hover:bg-indigo-500/10 border border-transparent hover:border-indigo-500/20">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                            </svg>
                            Copy XML
                        </button>
                    </div>
                </div>
                <div class="relative">
                    <pre x-text="sitemapResult"
                        class="bg-slate-950 p-4 rounded-xl text-xs md:text-sm text-slate-300 font-mono overflow-x-auto border border-white/5 max-h-96"></pre>
                </div>
            </div>

            @if (session('sitemap'))
                <!-- Fallback for Manual Input (Flash Session) -->
                <div x-init="sitemapResult = `{{ session('sitemap') }}`;
                crawledCount = {{ session('count', 0) }}" style="display: none;"></div>
            @endif

            @if ($errors->any())
                <div class="mt-6 p-4 rounded-xl bg-red-500/10 border border-red-500/20 text-red-400 text-sm">
                    <ul class="list-disc list-inside">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </div>

        <!-- Educational Content -->
        <div class="space-y-6 pt-8">
            <div class="grid md:grid-cols-2 gap-6">
                <div class="bg-white/5 rounded-xl p-6 border border-white/5">
                    <h3 class="text-lg font-semibold text-white mb-3 flex items-center gap-2">
                        <span class="p-1.5 rounded-lg bg-indigo-500/20 text-indigo-400">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </span>
                        What is an XML Sitemap?
                    </h3>
                    <p class="text-slate-400 text-sm leading-relaxed">
                        An XML sitemap is a file that lists essential pages of a website, making sure search engines can
                        find and crawl them all. It acts as a roadmap for Google and Bing to understand your site structure.
                    </p>
                </div>

                <div class="bg-white/5 rounded-xl p-6 border border-white/5">
                    <h3 class="text-lg font-semibold text-white mb-3 flex items-center gap-2">
                        <span class="p-1.5 rounded-lg bg-indigo-500/20 text-indigo-400">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </span>
                        Why do I need one?
                    </h3>
                    <p class="text-slate-400 text-sm leading-relaxed">
                        Sitemaps are crucial for SEO. They help search engines Index your content faster, understand your
                        site hierarchy, and discover new or updated pages that might not be easily found through internal
                        links.
                    </p>
                </div>
            </div>

            <!-- Documentation -->
            <div class="bg-slate-900/30 rounded-xl p-6 border border-white/5">
                <h3 class="text-lg font-semibold text-white mb-4">Understanding Schema Elements</h3>
                <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                    <div class="space-y-2">
                        <code
                            class="text-indigo-400 font-mono text-sm bg-indigo-500/10 px-2 py-0.5 rounded">&lt;urlset&gt;</code>
                        <p class="text-slate-500 text-sm">The root tag of the file. It encapsulates all the URLs in the
                            sitemap and references the current protocol standard.</p>
                    </div>
                    <div class="space-y-2">
                        <code
                            class="text-indigo-400 font-mono text-sm bg-indigo-500/10 px-2 py-0.5 rounded">&lt;url&gt;</code>
                        <p class="text-slate-500 text-sm">The parent tag for each URL entry. The remaining tags are
                            children of this tag.</p>
                    </div>
                    <div class="space-y-2">
                        <code
                            class="text-indigo-400 font-mono text-sm bg-indigo-500/10 px-2 py-0.5 rounded">&lt;loc&gt;</code>
                        <p class="text-slate-500 text-sm">URL of the page. This URL must begin with the protocol (such as
                            http) and end with a trailing slash, if your web server requires it.</p>
                    </div>
                    <div class="space-y-2">
                        <code
                            class="text-indigo-400 font-mono text-sm bg-indigo-500/10 px-2 py-0.5 rounded">&lt;lastmod&gt;</code>
                        <p class="text-slate-500 text-sm">The date of last modification of the file. This date should be in
                            W3C Datetime format (YYYY-MM-DD).</p>
                    </div>
                    <div class="space-y-2">
                        <code
                            class="text-indigo-400 font-mono text-sm bg-indigo-500/10 px-2 py-0.5 rounded">&lt;changefreq&gt;</code>
                        <p class="text-slate-500 text-sm">How frequently the page is likely to change. Valid values:
                            always, hourly, daily, weekly, monthly, yearly, never.</p>
                    </div>
                    <div class="space-y-2">
                        <code
                            class="text-indigo-400 font-mono text-sm bg-indigo-500/10 px-2 py-0.5 rounded">&lt;priority&gt;</code>
                        <p class="text-slate-500 text-sm">The priority of this URL relative to other URLs on your site.
                            Valid values range from 0.0 to 1.0.</p>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('sitemapGenerator', () => ({
                activeTab: 'text',
                crawlUrl: '',
                honeypot: '',
                isCrawling: false,
                crawledCount: 0,
                sitemapResult: '',
                currentUrl: '',
                pollInterval: null,

                async startCrawl() {
                    if (this.honeypot) return; // Bot detection

                    this.isCrawling = true;
                    this.crawledCount = 0;
                    this.sitemapResult = '';
                    this.currentUrl = 'Initializing...';

                    // Generate a unique request ID
                    const requestId = 'req_' + Math.random().toString(36).substr(2, 9);

                    try {
                        // Start the crawl process
                        fetch('{{ route('tools.sitemap.crawl') }}', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            body: JSON.stringify({
                                url: this.crawlUrl,
                                request_id: requestId,
                                website_hp: this.honeypot
                            })
                        });

                        // Start polling
                        this.pollInterval = setInterval(async () => {
                            await this.checkProgress(requestId);
                        }, 1000);

                    } catch (error) {
                        console.error('Crawl initiation failed', error);
                        alert('An error occurred starting the crawler.');
                        this.isCrawling = false;
                    }
                },

                async checkProgress(requestId) {
                    try {
                        const response = await fetch(
                            `{{ route('tools.sitemap.progress') }}?request_id=${requestId}`);

                        if (response.ok) {
                            const data = await response.json();

                            if (data.status === 'crawling') {
                                this.crawledCount = data.count;
                                this.currentUrl = data.current;
                            } else if (data.status === 'completed') {
                                this.crawledCount = data.count;
                                this.sitemapResult = data.sitemap;
                                this.currentUrl = 'Completed';
                                this.stopPolling();
                            }
                        }
                    } catch (error) {
                        console.error('Polling error', error);
                    }
                },

                stopPolling() {
                    clearInterval(this.pollInterval);
                    this.isCrawling = false;
                },

                copyToClipboard() {
                    navigator.clipboard.writeText(this.sitemapResult).then(() => {
                        alert('Sitemap copied to clipboard!');
                    });
                },

                downloadSitemap() {
                    const blob = new Blob([this.sitemapResult], {
                        type: 'text/xml'
                    });
                    const url = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.style.display = 'none';
                    a.href = url;
                    a.download = 'sitemap.xml';
                    document.body.appendChild(a);
                    a.click();
                    window.URL.revokeObjectURL(url);
                }
            }))
        })
    </script>

    <style>
        @keyframes indeterminate {
            0% {
                transform: translateX(-100%);
                width: 20%;
            }

            50% {
                width: 60%;
            }

            100% {
                transform: translateX(200%);
                width: 20%;
            }
        }

        .animate-indeterminate {
            animation: indeterminate 1.5s infinite linear;
        }
    </style>

    {{-- Related Tools --}}
    <div class="max-w-4xl mx-auto mt-12 pt-8 border-t border-white/5">
        <p class="text-sm text-slate-500 mb-4">Related tools</p>
        <div class="flex flex-wrap gap-3">
            <a href="{{ route('tools.robots.index') }}"
                class="inline-flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-sm text-slate-300 hover:text-white transition-colors">Visual
                Robots.txt Builder</a>
            <a href="{{ route('tools.schema.index') }}"
                class="inline-flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-sm text-slate-300 hover:text-white transition-colors">Schema
                Markup Generator</a>
            <a href="{{ route('tools.url.index') }}"
                class="inline-flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-sm text-slate-300 hover:text-white transition-colors">URL
                Sanitiser</a>
        </div>
    </div>
@endsection