@extends('layouts.goberdata')

@section('title', 'Guía: Obtener Claves de API para IA')
@section('page_title', 'Guía: Obtener Claves de API para IA')
@section('page_sub', 'Vista alineada al diseño GoberData por rol')

@section('content')
<div class="container mx-auto p-8 max-w-4xl">
        <div class="bg-white rounded-lg shadow-lg p-8">
            <h1 class="text-3xl font-bold mb-6">🔑 Guía: Cómo Obtener Claves de API para IA</h1>

            <!-- Advertencia -->
            <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6">
                <p class="text-sm text-yellow-700">
                    ⚠️ <strong>Importante:</strong> La mayoría de los servicios de IA requieren pago o tienen límites. La opción más económica es Ollama local (gratis).
                </p>
            </div>

            <!-- Opción 1: Ollama Local (GRATIS) -->
            <div class="mb-8 bg-green-50 p-6 rounded-lg border-2 border-green-500">
                <h2 class="text-2xl font-bold mb-4">✅ Opción 1: Ollama Local (GRATIS)</h2>
                <div class="space-y-4">
                    <p class="text-gray-700"><strong>Completamente gratuito</strong> - Instala un modelo LLM localmente</p>
                    <ol class="list-decimal list-inside space-y-2">
                        <li><strong>Descargar Ollama:</strong> <a href="https://ollama.ai/download" target="_blank" class="text-blue-600 hover:underline">https://ollama.ai/download</a></li>
                        <li><strong>Instalar</strong> en tu computadora (Windows/Mac/Linux)</li>
                        <li><strong>Descargar modelo:</strong> Abre terminal y ejecuta:
                            <pre class="bg-gray-800 text-white p-3 rounded mt-2">ollama pull llama2</pre>
                            o
                            <pre class="bg-gray-800 text-white p-3 rounded">ollama pull mistral</pre>
                        </li>
                        <li><strong>Configurar en la plataforma:</strong>
                            <ul class="list-disc list-inside ml-4 mt-2">
                                <li>Proveedor: <code>Ollama</code></li>
                                <li>Base URL: <code>http://localhost:11434</code></li>
                                <li>Modelo: <code>llama2</code> (o el que descargaste)</li>
                                <li>API Key: <strong>Dejar vacío</strong></li>
                            </ul>
                        </li>
                    </ol>
                    <p class="text-sm text-gray-600 mt-4">💡 <strong>Ventajas:</strong> Gratis, privado, sin límites. <strong>Desventaja:</strong> Requiere estar ejecutándose en tu máquina.</p>
                </div>
            </div>

            <!-- Opción 2: OpenAI -->
            <div class="mb-8 bg-blue-50 p-6 rounded-lg">
                <h2 class="text-2xl font-bold mb-4">🔵 Opción 2: OpenAI (ChatGPT)</h2>
                <div class="space-y-4">
                    <p class="text-gray-700"><strong>Pago por uso:</strong> ~$0.01-0.10 por 1000 tokens</p>
                    <ol class="list-decimal list-inside space-y-2">
                        <li><strong>Registrarse:</strong> <a href="https://platform.openai.com/signup" target="_blank" class="text-blue-600 hover:underline">https://platform.openai.com/signup</a></li>
                        <li><strong>Crear API Key:</strong> <a href="https://platform.openai.com/api-keys" target="_blank" class="text-blue-600 hover:underline">https://platform.openai.com/api-keys</a></li>
                        <li><strong>Agregar crédito</strong> (mínimo $5)</li>
                        <li><strong>Copiar API Key</strong> (empieza con <code>sk-</code>)</li>
                    </ol>
                    <p class="text-sm text-gray-600 mt-4">💸 <strong>Precio:</strong> ~$5-20/mes para uso moderado</p>
                </div>
            </div>

            <!-- Opción 3: Google Gemini -->
            <div class="mb-8 bg-purple-50 p-6 rounded-lg">
                <h2 class="text-2xl font-bold mb-4">🟣 Opción 3: Google Gemini</h2>
                <div class="space-y-4">
                    <p class="text-gray-700"><strong>Plan gratuito disponible</strong> con límites</p>
                    <ol class="list-decimal list-inside space-y-2">
                        <li><strong>Registrarse:</strong> <a href="https://aistudio.google.com/app/apikey" target="_blank" class="text-blue-600 hover:underline">https://aistudio.google.com/app/apikey</a></li>
                        <li><strong>Crear API Key</strong> (gratis con límites diarios)</li>
                        <li><strong>Copiar API Key</strong></li>
                    </ol>
                    <p class="text-sm text-green-600 mt-4">✅ <strong>Ventaja:</strong> Plan gratuito con 60 solicitudes/minuto</p>
                </div>
            </div>

            <!-- Opción 4: Anthropic Claude -->
            <div class="mb-8 bg-red-50 p-6 rounded-lg">
                <h2 class="text-2xl font-bold mb-4">🔴 Opción 4: Anthropic Claude</h2>
                <div class="space-y-4">
                    <p class="text-gray-700"><strong>Pago por uso</strong></p>
                    <ol class="list-decimal list-inside space-y-2">
                        <li><strong>Registrarse:</strong> <a href="https://console.anthropic.com/" target="_blank" class="text-blue-600 hover:underline">https://console.anthropic.com/</a></li>
                        <li><strong>Crear API Key</strong></li>
                        <li><strong>Agregar crédito</strong> (mínimo $5)</li>
                    </ol>
                    <p class="text-sm text-gray-600 mt-4">💰 Similar en precio a OpenAI</p>
                </div>
            </div>

            <!-- Tabla comparativa -->
            <div class="bg-white border-2 rounded-lg p-6">
                <h2 class="text-2xl font-bold mb-4">📊 Comparación de Proveedores</h2>
                <table class="w-full text-sm">
                    <thead>
                        <tr class="bg-gray-200">
                            <th class="p-3 text-left">Proveedor</th>
                            <th class="p-3 text-left">Precio</th>
                            <th class="p-3 text-left">Calidad</th>
                            <th class="p-3 text-left">Velocidad</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="border-b">
                            <td class="p-3"><strong>Ollama Local</strong></td>
                            <td class="p-3 text-green-600">GRATIS</td>
                            <td class="p-3">Buena (depende del modelo)</td>
                            <td class="p-3">Rápida (local)</td>
                        </tr>
                        <tr class="border-b bg-gray-50">
                            <td class="p-3"><strong>Google Gemini</strong></td>
                            <td class="p-3 text-green-600">GRATIS (con límites)</td>
                            <td class="p-3">Muy buena</td>
                            <td class="p-3">Rápida</td>
                        </tr>
                        <tr class="border-b">
                            <td class="p-3"><strong>OpenAI</strong></td>
                            <td class="p-3 text-orange-600">~$5-20/mes</td>
                            <td class="p-3">Excelente</td>
                            <td class="p-3">Muy rápida</td>
                        </tr>
                        <tr class="border-b bg-gray-50">
                            <td class="p-3"><strong>Anthropic</strong></td>
                            <td class="p-3 text-orange-600">~$5-20/mes</td>
                            <td class="p-3">Excelente</td>
                            <td class="p-3">Muy rápida</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- Instrucciones finales -->
            <div class="mt-8 bg-blue-100 p-6 rounded-lg">
                <h2 class="text-xl font-bold mb-3">🚀 Cómo Configurar en la Plataforma</h2>
                <ol class="list-decimal list-inside space-y-2">
                    <li>Ve a <strong>Generador de Contenido IA</strong> en tu dashboard</li>
                    <li>Haz clic en <strong>"Configurar IA"</strong> (botón superior derecho)</li>
                    <li>Selecciona el proveedor deseado</li>
                    <li>Ingresa tu API Key (o deja vacío para Ollama)</li>
                    <li>Haz clic en <strong>"Agregar Proveedor"</strong></li>
                    <li>Haz clic en <strong>"Probar"</strong> para validar la conexión</li>
                    <li>¡Listo! Ahora puedes generar contenido con IA</li>
                </ol>
            </div>

            <div class="mt-8 text-center">
                <a href="{{ url('/admin/content-ai/dashboard') }}" class="bg-purple-600 text-white px-8 py-3 rounded-lg hover:bg-purple-700 inline-block">
                    <i class="fas fa-arrow-left mr-2"></i> Volver al Generador
                </a>
            </div>
        </div>
    </div>
@endsection