@extends('layouts.app')

@section('title', 'Quick Start Guide - FiveM MCP Server')

@section('content')
    <div class="max-w-4xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
        <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-8">
            <h1 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-6">FiveM MCP Quick Start Guide</h1>

            <!-- What is this -->
            <section class="mb-8">
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">What is this?</h2>
                <p class="text-gray-700 dark:text-gray-300 mb-4">
                    This MCP server gives AI assistants (like Claude) access to FiveM development tools including:
                </p>
                <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-2 ml-4">
                    <li>Documentation search</li>
                    <li>Native function lookups</li>
                    <li>Manifest generation</li>
                    <li>Event references</li>
                    <li>Resource boilerplate generation</li>
                </ul>
            </section>

            <!-- Choose Setup Type -->
            <section class="mb-8">
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Choose Your Setup</h2>

                <!-- Tab Buttons -->
                <div class="border-b border-gray-200 dark:border-gray-700 mb-6">
                    <nav class="-mb-px flex space-x-8">
                        <button data-tab="remote"
                            class="transition-all duration-200 ease-in-out active border-b-2 border-gta-orange py-4 px-1 text-center text-sm font-medium text-gta-orange">
                            <span class="flex items-center">
                                <span class="mr-2">🌐</span>
                                Remote Server
                                <span
                                    class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-700 border border-gta-orange text-gta-orange">
                                    Recommended
                                </span>
                            </span>
                        </button>
                        <button data-tab="local"
                            class="transition-all duration-200 ease-in-out border-b-2 border-transparent py-4 px-1 text-center text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600">
                            <span class="flex items-center">
                                <span class="mr-2">💻</span>
                                Local Installation
                            </span>
                        </button>
                    </nav>
                </div>

                <!-- Tab Content Container -->
                <div class="tab-content-container">
                    <!-- Remote Setup Tab -->
                    <div data-tab-content="remote" class="animate-fade-in active">
                        <div class="bg-gray-100 dark:bg-gray-700/30 border-l-4 border-gta-orange p-4 mb-6">
                            <p class="text-sm text-gray-800 dark:text-gray-200">
                                <strong>Easy setup!</strong> Connect to a hosted MCP server. Works from anywhere without any
                                local
                                installation.
                            </p>
                        </div>

                        <p class="text-gray-700 dark:text-gray-300 mb-6">
                            If someone is hosting the FiveM MCP server for you, follow these steps to connect:
                        </p>

                        <!-- Step 1 -->
                        <div class="mb-6">
                            <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">1. Get the Server URL</h3>
                            <p class="text-gray-700 dark:text-gray-300 mb-3">
                                Ask your server administrator for the MCP server URL. It will look like:
                            </p>
                            <pre
                                class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded p-3 text-sm"><code>https://your-domain.com/fivem</code></pre>
                            <p class="text-gray-700 dark:text-gray-300 mb-3 mt-4">
                                If you're using the official hosted server, use this URL:
                            </p>
                            <pre
                                class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded p-3 text-sm"><code>{{ route('fivem') }}</code></pre>
                        </div>

                        <!-- Step 2 -->
                        <div class="mb-6">
                            <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">2. Configure Claude Desktop
                            </h3>
                            <p class="text-gray-700 dark:text-gray-300 mb-3">Edit your Claude Desktop configuration file:
                            </p>
                            <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 mb-3 ml-4">
                                <li><strong>macOS:</strong> <code
                                        class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-2 py-1 rounded text-sm">~/Library/Application Support/Claude/claude_desktop_config.json</code>
                                </li>
                                <li><strong>Windows:</strong> <code
                                        class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-2 py-1 rounded text-sm">%APPDATA%\Claude\claude_desktop_config.json</code>
                                </li>
                            </ul>

                            <p class="text-gray-700 dark:text-gray-300 mb-3">Add this configuration (replace the URL with
                                your actual server URL):
                            </p>
                            <pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>@verbatim{
    "mcpServers": {
        "fivem": {
            "url": "https://your-domain.com/fivem"
        }
    }
}@endverbatim</code></pre>

                            <p class="text-gray-700 dark:text-gray-300 mb-3 mt-6"><strong>For VSCode (Cline Extension):</strong></p>
                            <p class="text-gray-700 dark:text-gray-300 mb-3">Edit your VSCode <code
                                    class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-2 py-1 rounded text-sm">settings.json</code>:
                            </p>
                            <pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>@verbatim{
    "mcp": {
        "servers": {
            "fivem": {
                "url": "https://your-domain.com/fivem"
            }
        }
    }
}@endverbatim</code></pre>
                        </div>

                        <!-- Step 3 -->
                        <div class="mb-6">
                            <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">3. Restart Claude Desktop</h3>
                            <p class="text-gray-700 dark:text-gray-300">
                                Completely quit and restart Claude Desktop for changes to take effect.
                            </p>
                        </div>

                        <!-- Step 4 -->
                        <div class="mb-6">
                            <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">4. Verify Connection</h3>
                            <p class="text-gray-700 dark:text-gray-300">
                                In Claude Desktop, you should see a small 🔌 icon or indication that the FiveM MCP server is
                                connected.
                            </p>
                        </div>

                        <div class="bg-green-50 dark:bg-green-900/20 border-l-4 border-green-500 p-4">
                            <p class="text-sm text-green-800 dark:text-green-200">
                                <strong>That's it!</strong> You're now connected to the remote MCP server and can start
                                using FiveM development
                                tools with Claude.
                            </p>
                        </div>
                    </div>

                    <!-- Local Setup Tab -->
                    <div data-tab-content="local" class="animate-fade-in hidden">
                        <div
                            class="bg-gray-50 dark:bg-gray-700/20 border-l-4 border-gray-400 dark:border-gray-500 p-4 mb-6">
                            <p class="text-sm text-gray-700 dark:text-gray-300">
                                <strong>Advanced setup.</strong> Run the MCP server on your own machine. Requires PHP and
                                Laravel
                                installation.
                            </p>
                        </div>

                        <p class="text-gray-700 dark:text-gray-300 mb-6">
                            If you want to run the MCP server on your own machine:
                        </p>

                        <!-- Step 1 -->
                        <div class="mb-6">
                            <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">1. Test the Server</h3>
                            <p class="text-gray-700 dark:text-gray-300 mb-3">First, verify the server works:</p>
                            <pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>cd /path/to/fivem-mcp
                                            php artisan mcp:inspector fivem</code></pre>
                            <p class="text-gray-600 dark:text-gray-400 text-sm mt-2">This opens a web inspector where you
                                can test all tools.</p>
                        </div>

                        <!-- Step 2 -->
                        <div class="mb-6">
                            <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">2. Configure Claude Desktop
                            </h3>
                            <p class="text-gray-700 dark:text-gray-300 mb-3">Edit your Claude Desktop configuration file:
                            </p>
                            <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 mb-3 ml-4">
                                <li><strong>macOS:</strong> <code
                                        class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-2 py-1 rounded text-sm">~/Library/Application Support/Claude/claude_desktop_config.json</code>
                                </li>
                                <li><strong>Windows:</strong> <code
                                        class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-2 py-1 rounded text-sm">%APPDATA%\Claude\claude_desktop_config.json</code>
                                </li>
                            </ul>

                            <p class="text-gray-700 dark:text-gray-300 mb-3">Add this configuration:</p>
                            <pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto mb-4"><code>@verbatim{
    "mcpServers": {
        "fivem": {
            "command": "php",
            "args": [
                "artisan",
                "mcp:start",
                "fivem"
            ],
            "cwd": "/path/to/fivem-mcp"
        }
    }
}@endverbatim</code></pre>

                            <p class="text-gray-700 dark:text-gray-300 mb-3"><strong>Or use the full PHP path (e.g., for
                                    Herd):</strong></p>
                            <pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>@verbatim{
    "mcpServers": {
        "fivem": {
            "command": "/path/to/php",
            "args": [
                "/path/to/fivem-mcp/artisan",
                "mcp:start",
                "fivem"
            ]
        }
    }
}@endverbatim</code></pre>

                            <p class="text-gray-700 dark:text-gray-300 mb-3 mt-6"><strong>For VSCode (Cline
                                    Extension):</strong></p>
                            <p class="text-gray-700 dark:text-gray-300 mb-3">Edit your VSCode <code
                                    class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-2 py-1 rounded text-sm">settings.json</code>:
                            </p>
                            <pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto mb-4"><code>@verbatim{
    "mcp": {
        "servers": {
            "fivem": {
                "command": "php",
                "args": ["artisan", "mcp:start", "fivem"],
                "cwd": "/path/to/fivem-mcp"
            }
        }
    }
}@endverbatim</code></pre>

                            <p class="text-gray-700 dark:text-gray-300 mb-3"><strong>Or with full paths:</strong></p>
                            <pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>@verbatim{
    "mcp": {
        "servers": {
            "fivem": {
                "command": "/path/to/php",
                "args": ["/path/to/fivem-mcp/artisan", "mcp:start", "fivem"]
            }
        }
    }
}@endverbatim</code></pre>
                        </div>

                        <!-- Step 3 -->
                        <div class="mb-6">
                            <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">3. Restart Claude Desktop
                            </h3>
                            <p class="text-gray-700 dark:text-gray-300">
                                Completely quit and restart Claude Desktop for changes to take effect.
                            </p>
                        </div>

                        <!-- Step 4 -->
                        <div class="mb-6">
                            <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">4. Verify Connection</h3>
                            <p class="text-gray-700 dark:text-gray-300">
                                In Claude Desktop, you should see a small 🔌 icon or indication that the FiveM MCP server is
                                connected.
                            </p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Quick Examples -->
            <section class="mb-8">
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Quick Examples</h2>
                <p class="text-gray-700 dark:text-gray-300 mb-4">Once connected, try these prompts in Claude:</p>

                <div class="space-y-4">
                    <div class="border-l-4 border-gta-orange pl-4">
                        <h4 class="font-semibold text-gray-900 dark:text-white mb-2">Example 1: Search Documentation</h4>
                        <pre
                            class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded p-3 text-sm"><code>Search FiveM docs for "state bags"</code></pre>
                    </div>

                    <div class="border-l-4 border-gta-orange pl-4">
                        <h4 class="font-semibold text-gray-900 dark:text-white mb-2">Example 2: Look Up a Native</h4>
                        <pre
                            class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded p-3 text-sm"><code>What does the GetPlayerPed native function do? Show me an example.</code></pre>
                    </div>

                    <div class="border-l-4 border-gta-orange pl-4">
                        <h4 class="font-semibold text-gray-900 dark:text-white mb-2">Example 3: Generate a Manifest</h4>
                        <pre
                            class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded p-3 text-sm"><code>Generate a fxmanifest.lua for my resource called "vehicle-shop" using ESX framework</code></pre>
                    </div>

                    <div class="border-l-4 border-gta-orange pl-4">
                        <h4 class="font-semibold text-gray-900 dark:text-white mb-2">Example 4: List Events</h4>
                        <pre
                            class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded p-3 text-sm"><code>Show me all FiveM core server events</code></pre>
                    </div>

                    <div class="border-l-4 border-gta-orange pl-4">
                        <h4 class="font-semibold text-gray-900 dark:text-white mb-2">Example 5: Create Boilerplate</h4>
                        <pre
                            class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded p-3 text-sm"><code>Create a complete resource structure for a QBCore script called "bank-heist" with NUI</code></pre>
                    </div>
                </div>
            </section>

            <!-- Troubleshooting -->
            <section class="mb-8">
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Troubleshooting</h2>

                <div class="mb-6">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">Server Not Connecting</h3>
                    <ol class="list-decimal list-inside text-gray-700 dark:text-gray-300 space-y-3 ml-4">
                        <li>
                            <strong>Check PHP Path:</strong> Make sure the PHP path in your config is correct
                            <pre class="bg-gray-900 text-gray-100 rounded p-3 mt-2 overflow-x-auto"><code>@verbatimwhich php
# or for Herd:
ls -la "~/Library/Application Support/Herd/bin/"@endverbatim</code></pre>
                        </li>
                        <li>
                            <strong>Test Manually:</strong> Run the server command directly
                            <pre class="bg-gray-900 text-gray-100 rounded p-3 mt-2 overflow-x-auto"><code>@verbatimcd /path/to/fivem-mcp
php artisan mcp:start fivem@endverbatim</code></pre>
                        </li>
                        <li>
                            <strong>Check Logs:</strong> Look at Claude Desktop logs
                            <ul class="list-disc list-inside ml-6 mt-2">
                                <li>macOS: <code
                                        class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-2 py-1 rounded text-sm">~/Library/Logs/Claude/</code>
                                </li>
                                <li>Windows: Check Event Viewer or app logs</li>
                            </ul>
                        </li>
                    </ol>
                </div>

                <div class="mb-6">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">Permission Issues</h3>
                    <p class="text-gray-700 dark:text-gray-300 mb-3">If you get permission errors:</p>
                    <pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>@verbatimcd /path/to/fivem-mcp
chmod +x artisan@endverbatim</code></pre>
                </div>

                <div class="mb-6">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">Path Issues</h3>
                    <p class="text-gray-700 dark:text-gray-300">
                        Make sure to use <strong>absolute paths</strong> in your config, not relative paths.
                    </p>
                </div>
            </section>

            <!-- Next Steps -->
            <section class="mb-8">
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Next Steps</h2>
                <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-2 ml-4">
                    <li><a href="{{ route('docs.documentation') }}"
                            class="link-gta">Read
                            the full
                            documentation</a></li>
                    <li>Explore all 5 tools in the MCP Inspector</li>
                    <li>Try creating a complete FiveM resource with AI assistance</li>
                    <li>Contribute new tools or improve existing ones</li>
                </ul>
            </section>

            <!-- Support -->
            <section>
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Support</h2>
                <p class="text-gray-700 dark:text-gray-300 mb-3">For issues:</p>
                <ol class="list-decimal list-inside text-gray-700 dark:text-gray-300 space-y-2 ml-4">
                    <li>Check <a href="https://laravel.com/docs/mcp"
                        class="link-gta">Laravel
                            MCP
                            Documentation</a></li>
                    <li>Check <a href="https://docs.fivem.net/"
                        class="link-gta">FiveM
                            Documentation</a></li>
                    <li>Review server logs</li>
                    <li>Open a GitHub issue</li>
                </ol>
                <p class="text-gray-700 dark:text-gray-300 mt-6 text-lg font-semibold">Happy coding! 🎮</p>
            </section>
        </div>
    </div>
@endsection