<x-app-layout>
    <x-slot name="header">
        <div class="flex justify-between items-center">
            <div>
                <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200 leading-tight">
                    <i class="fas fa-book mr-2"></i>Documentație API
                </h2>
                <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                    <a href="{{ route('dashboard') }}" class="text-blue-600 dark:text-blue-400 hover:underline">Dashboard</a>
                    <span class="mx-2">/</span>
                    <span>API Documentation</span>
                </p>
            </div>
            <a href="{{ route('dashboard') }}" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200">
                <i class="fas fa-arrow-left mr-2"></i>
                Înapoi
            </a>
        </div>
    </x-slot>

    <div class="py-12">
        <div class="px-6 lg:px-8">
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6">
                    <!-- Introduction -->
                    <div class="mb-8">
                        <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">DNS Panel API v1</h1>
                        <p class="text-gray-600 dark:text-gray-400 mb-4">
                            Bine ai venit la documentația API DNS Panel. Acest API îți permite să gestionezi programatic zonele și înregistrările DNS.
                        </p>
                        <div class="bg-blue-50 dark:bg-blue-900/20 border-l-4 border-blue-500 p-4 rounded">
                            <p class="text-sm text-blue-800 dark:text-blue-300">
                                <strong>URL de Bază:</strong> <code class="bg-gray-900 text-green-400 px-2 py-1 rounded">{{ $baseUrl }}</code>
                            </p>
                        </div>
                    </div>

                    <!-- Quick Start -->
                    <div class="mb-8">
                        <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">🚀 Început Rapid</h2>
                        <ol class="list-decimal list-inside space-y-2 text-gray-600 dark:text-gray-400">
                            <li><a href="{{ route('api-tokens.index') }}" class="text-blue-600 hover:underline">Creează un token API</a></li>
                            <li>Include token-ul în header-ul <code class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">Authorization</code></li>
                            <li>Fă cereri către endpoint-urile API</li>
                        </ol>
                    </div>

                    <!-- Authentication -->
                    <div class="mb-8 border-t border-gray-200 dark:border-gray-700 pt-8">
                        <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">🔐 Autentificare</h2>
                        <p class="text-gray-600 dark:text-gray-400 mb-4">
                            Toate cererile API necesită autentificare folosind un token Bearer în header-ul Authorization.
                        </p>
                        <div class="bg-gray-900 p-4 rounded-lg overflow-x-auto">
                            <pre class="text-green-400 text-sm"><code>curl -H "Authorization: Bearer TOKEN_TAU_API" \
     {{ $baseUrl }}/account</code></pre>
                        </div>
                    </div>

                    <!-- Rate Limits -->
                    <div class="mb-8 border-t border-gray-200 dark:border-gray-700 pt-8">
                        <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">⚡ Limite de Rată</h2>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg">
                                <div class="text-sm text-gray-600 dark:text-gray-400">Limită Orară</div>
                                <div class="text-2xl font-bold text-blue-600">{{ $plan ? number_format($plan->api_rate_limit_hour) : 'Unlimited' }}</div>
                            </div>
                            <div class="bg-green-50 dark:bg-green-900/20 p-4 rounded-lg">
                                <div class="text-sm text-gray-600 dark:text-gray-400">Limită Zilnică</div>
                                <div class="text-2xl font-bold text-green-600">{{ $plan ? number_format($plan->api_rate_limit_day) : 'Unlimited' }}</div>
                            </div>
                        </div>
                        <p class="text-sm text-gray-600 dark:text-gray-400 mt-4">
                            Informațiile despre limitele de rată sunt incluse în header-ele răspunsului: <code>X-RateLimit-Limit-Hour</code>, <code>X-RateLimit-Remaining-Hour</code>
                        </p>
                    </div>

                    <!-- Response Format -->
                    <div class="mb-8 border-t border-gray-200 dark:border-gray-700 pt-8">
                        <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">📦 Format Răspuns</h2>
                        <p class="text-gray-600 dark:text-gray-400 mb-4">Toate răspunsurile sunt în format JSON.</p>

                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Răspuns Succes:</h3>
                        <div class="bg-gray-900 p-4 rounded-lg overflow-x-auto mb-4">
                            <pre class="text-green-400 text-sm"><code>{
  "success": true,
  "data": { ... }
}</code></pre>
                        </div>

                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Răspuns Eroare:</h3>
                        <div class="bg-gray-900 p-4 rounded-lg overflow-x-auto">
                            <pre class="text-red-400 text-sm"><code>{
  "success": false,
  "error": {
    "code": "COD_EROARE",
    "message": "Descriere eroare",
    "details": { ... }
  }
}</code></pre>
                        </div>
                    </div>

                    <!-- Endpoints -->
                    <div class="mb-8 border-t border-gray-200 dark:border-gray-700 pt-8">
                        <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">📡 Endpoint-uri API</h2>

                        <!-- Account Endpoints -->
                        <div class="mb-6">
                            <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Cont</h3>

                            <div class="space-y-4">
                                <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                                    <div class="flex items-center gap-2 mb-2">
                                        <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs font-semibold rounded">GET</span>
                                        <code class="text-sm">/account</code>
                                    </div>
                                    <p class="text-sm text-gray-600 dark:text-gray-400">Obține informații cont</p>
                                </div>

                                <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                                    <div class="flex items-center gap-2 mb-2">
                                        <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs font-semibold rounded">GET</span>
                                        <code class="text-sm">/account/usage</code>
                                    </div>
                                    <p class="text-sm text-gray-600 dark:text-gray-400">Obține statistici utilizare API</p>
                                </div>
                            </div>
                        </div>

                        <!-- Zones Endpoints -->
                        <div class="mb-6">
                            <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Zone DNS</h3>

                            <div class="space-y-4">
                                <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                                    <div class="flex items-center gap-2 mb-2">
                                        <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs font-semibold rounded">GET</span>
                                        <code class="text-sm">/zones</code>
                                    </div>
                                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Listează toate zonele DNS</p>
                                    <p class="text-xs text-gray-500">Parametri query: <code>search</code>, <code>status</code>, <code>per_page</code></p>
                                </div>

                                <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                                    <div class="flex items-center gap-2 mb-2">
                                        <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs font-semibold rounded">GET</span>
                                        <code class="text-sm">/zones/{'{id}'}</code>
                                    </div>
                                    <p class="text-sm text-gray-600 dark:text-gray-400">Obține o zonă DNS specifică</p>
                                </div>

                                <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                                    <div class="flex items-center gap-2 mb-2">
                                        <span class="px-2 py-1 bg-green-100 text-green-800 text-xs font-semibold rounded">POST</span>
                                        <code class="text-sm">/zones</code>
                                    </div>
                                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Creează o zonă DNS nouă</p>
                                    <details class="text-sm">
                                        <summary class="cursor-pointer text-blue-600 hover:underline">Exemplu</summary>
                                        <div class="bg-gray-900 p-3 rounded mt-2 overflow-x-auto">
                                            <pre class="text-green-400 text-xs"><code>curl -X POST {{ $baseUrl }}/zones \
  -H "Authorization: Bearer TOKEN_TAU" \
  -H "Content-Type: application/json" \
  -d '{
    "domain": "exemplu.ro",
    "nameserver_id": 1
  }'</code></pre>
                                        </div>
                                    </details>
                                </div>

                                <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                                    <div class="flex items-center gap-2 mb-2">
                                        <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs font-semibold rounded">PUT</span>
                                        <code class="text-sm">/zones/{'{id}'}</code>
                                    </div>
                                    <p class="text-sm text-gray-600 dark:text-gray-400">Actualizează o zonă DNS</p>
                                </div>

                                <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                                    <div class="flex items-center gap-2 mb-2">
                                        <span class="px-2 py-1 bg-red-100 text-red-800 text-xs font-semibold rounded">DELETE</span>
                                        <code class="text-sm">/zones/{'{id}'}</code>
                                    </div>
                                    <p class="text-sm text-gray-600 dark:text-gray-400">Șterge o zonă DNS</p>
                                </div>
                            </div>
                        </div>

                        <!-- Records Endpoints -->
                        <div class="mb-6">
                            <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Înregistrări DNS</h3>

                            <div class="space-y-4">
                                <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                                    <div class="flex items-center gap-2 mb-2">
                                        <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs font-semibold rounded">GET</span>
                                        <code class="text-sm">/zones/{'{id}'}/records</code>
                                    </div>
                                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Listează toate înregistrările pentru o zonă</p>
                                    <p class="text-xs text-gray-500">Parametri query: <code>type</code>, <code>search</code></p>
                                </div>

                                <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                                    <div class="flex items-center gap-2 mb-2">
                                        <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs font-semibold rounded">GET</span>
                                        <code class="text-sm">/records/{'{id}'}</code>
                                    </div>
                                    <p class="text-sm text-gray-600 dark:text-gray-400">Obține o înregistrare DNS specifică</p>
                                </div>

                                <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                                    <div class="flex items-center gap-2 mb-2">
                                        <span class="px-2 py-1 bg-green-100 text-green-800 text-xs font-semibold rounded">POST</span>
                                        <code class="text-sm">/zones/{'{id}'}/records</code>
                                    </div>
                                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Creează o înregistrare DNS nouă</p>
                                    <details class="text-sm">
                                        <summary class="cursor-pointer text-blue-600 hover:underline">Exemplu</summary>
                                        <div class="bg-gray-900 p-3 rounded mt-2 overflow-x-auto">
                                            <pre class="text-green-400 text-xs"><code>curl -X POST {{ $baseUrl }}/zones/1/records \
  -H "Authorization: Bearer TOKEN_TAU" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "www",
    "type": "A",
    "content": "192.168.1.1",
    "ttl": 3600
  }'</code></pre>
                                        </div>
                                    </details>
                                </div>

                                <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                                    <div class="flex items-center gap-2 mb-2">
                                        <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs font-semibold rounded">PUT</span>
                                        <code class="text-sm">/records/{'{id}'}</code>
                                    </div>
                                    <p class="text-sm text-gray-600 dark:text-gray-400">Actualizează o înregistrare DNS</p>
                                </div>

                                <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                                    <div class="flex items-center gap-2 mb-2">
                                        <span class="px-2 py-1 bg-red-100 text-red-800 text-xs font-semibold rounded">DELETE</span>
                                        <code class="text-sm">/records/{'{id}'}</code>
                                    </div>
                                    <p class="text-sm text-gray-600 dark:text-gray-400">Șterge o înregistrare DNS</p>
                                </div>

                                @if(!$plan || $plan->hasApiFeature('bulk_operations'))
                                <div class="border border-green-200 dark:border-green-700 rounded-lg p-4 bg-green-50 dark:bg-green-900/10">
                                    <div class="flex items-center gap-2 mb-2">
                                        <span class="px-2 py-1 bg-green-100 text-green-800 text-xs font-semibold rounded">POST</span>
                                        <code class="text-sm">/zones/{'{id}'}/records/bulk</code>
                                        <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs font-semibold rounded">PRO</span>
                                    </div>
                                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Creează înregistrări DNS în masă (până la 100)</p>
                                    <details class="text-sm">
                                        <summary class="cursor-pointer text-blue-600 hover:underline">Exemplu</summary>
                                        <div class="bg-gray-900 p-3 rounded mt-2 overflow-x-auto">
                                            <pre class="text-green-400 text-xs"><code>curl -X POST {{ $baseUrl }}/zones/1/records/bulk \
  -H "Authorization: Bearer TOKEN_TAU" \
  -H "Content-Type: application/json" \
  -d '{
    "records": [
      {"name": "www", "type": "A", "content": "192.168.1.1"},
      {"name": "mail", "type": "A", "content": "192.168.1.2"}
    ]
  }'</code></pre>
                                        </div>
                                    </details>
                                </div>
                                @endif
                            </div>
                        </div>

                        <!-- Statistics Endpoints -->
                        @if(!$plan || in_array('statistics:read', $plan->api_endpoints_access ?? []))
                        <div class="mb-6">
                            <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Statistici</h3>

                            <div class="space-y-4">
                                <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                                    <div class="flex items-center gap-2 mb-2">
                                        <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs font-semibold rounded">GET</span>
                                        <code class="text-sm">/zones/{'{id}'}/statistics</code>
                                    </div>
                                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Obține statistici pentru o zonă</p>
                                    <p class="text-xs text-gray-500">Parametri query: <code>period</code>, <code>days</code></p>
                                </div>

                                <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                                    <div class="flex items-center gap-2 mb-2">
                                        <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs font-semibold rounded">GET</span>
                                        <code class="text-sm">/statistics/summary</code>
                                    </div>
                                    <p class="text-sm text-gray-600 dark:text-gray-400">Obține statistici sumar pentru toate zonele</p>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>

                    <!-- Error Codes -->
                    <div class="mb-8 border-t border-gray-200 dark:border-gray-700 pt-8">
                        <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">⚠️ Coduri de Eroare</h2>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                                <thead class="bg-gray-50 dark:bg-gray-900">
                                    <tr>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Cod</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Status HTTP</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Descriere</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                                    <tr>
                                        <td class="px-6 py-4 text-sm font-mono text-gray-900 dark:text-white">UNAUTHORIZED</td>
                                        <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">401</td>
                                        <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">Token API invalid sau lipsă</td>
                                    </tr>
                                    <tr>
                                        <td class="px-6 py-4 text-sm font-mono text-gray-900 dark:text-white">FORBIDDEN</td>
                                        <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">403</td>
                                        <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">Permisiuni insuficiente</td>
                                    </tr>
                                    <tr>
                                        <td class="px-6 py-4 text-sm font-mono text-gray-900 dark:text-white">NOT_FOUND</td>
                                        <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">404</td>
                                        <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">Resursă negăsită</td>
                                    </tr>
                                    <tr>
                                        <td class="px-6 py-4 text-sm font-mono text-gray-900 dark:text-white">VALIDATION_ERROR</td>
                                        <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">422</td>
                                        <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">Date de intrare invalide</td>
                                    </tr>
                                    <tr>
                                        <td class="px-6 py-4 text-sm font-mono text-gray-900 dark:text-white">RATE_LIMIT_EXCEEDED</td>
                                        <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">429</td>
                                        <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">Prea multe cereri</td>
                                    </tr>
                                    <tr>
                                        <td class="px-6 py-4 text-sm font-mono text-gray-900 dark:text-white">LIMIT_EXCEEDED</td>
                                        <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">403</td>
                                        <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">Limită plan atinsă</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Support -->
                    <div class="border-t border-gray-200 dark:border-gray-700 pt-8">
                        <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">💬 Ai Nevoie de Ajutor?</h2>
                        <p class="text-gray-600 dark:text-gray-400 mb-4">
                            Dacă ai întrebări sau ai nevoie de asistență cu API-ul, te rugăm să contactezi echipa noastră de suport.
                        </p>
                        <a href="{{ route('api-tokens.index') }}" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition">
                            <i class="fas fa-key mr-2"></i>
                            Gestionează Token-uri API
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
