@extends('layouts.app')

@section('title', 'Gestión de Prompts IA')

@section('content')
<div x-data="{
    showCreate: false,
    editId: null,
    editName: '',
    editType: 'summary',
    editContentType: '',
    editText: '',
    editActive: true,
    openEdit(p) {
        this.editId = p.id;
        this.editName = p.name;
        this.editType = p.type;
        this.editContentType = p.content_type ?? '';
        this.editText = p.prompt_text;
        this.editActive = p.is_active;
    },
    closeEdit() { this.editId = null; }
}">
    <div class="max-w-5xl mx-auto py-8 px-4 space-y-6">

        {{-- Encabezado --}}
        <div class="flex items-center justify-between">
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
                <i class="fa-solid fa-wand-magic-sparkles mr-2 text-violet-500"></i>Prompts de IA
            </h1>
            <button @click="showCreate = !showCreate"
                    class="btn-primary text-sm px-4 py-2 rounded-lg bg-violet-600 hover:bg-violet-700 text-white">
                <i class="fa-solid fa-plus mr-1"></i> Nuevo prompt
            </button>
        </div>

        @if(session('success'))
            <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-700 text-green-800 dark:text-green-300 rounded-lg px-4 py-3 text-sm">
                {{ session('success') }}
            </div>
        @endif

        {{-- Formulario crear --}}
        <div x-show="showCreate" x-cloak class="bg-white dark:bg-gray-800 rounded-xl shadow p-6 space-y-4">
            <h2 class="font-semibold text-gray-800 dark:text-gray-200">Crear nuevo prompt</h2>
            <form method="POST" action="{{ route('admin.ai-prompts.store') }}" class="space-y-4">
                @csrf
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Nombre</label>
                        <input type="text" name="name" required maxlength="100"
                               class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-violet-500">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Tipo</label>
                        <select name="type" class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-violet-500">
                            <option value="summary">Resumen</option>
                            <option value="tags">Etiquetas</option>
                            <option value="analysis">Análisis</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Tipo de contenido (vacío = todos)</label>
                        <input type="text" name="content_type" maxlength="40" placeholder="article, video, pdf..."
                               class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-violet-500">
                    </div>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
                        Texto del prompt
                        <span class="text-gray-400 font-normal">(variables: {{title}}, {{description}}, {{text}}, {{#text}}...{{/text}})</span>
                    </label>
                    <textarea name="prompt_text" rows="6" required
                              class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-violet-500"></textarea>
                </div>
                <div class="flex items-center gap-2">
                    <input type="checkbox" name="is_active" value="1" checked id="new_active" class="rounded">
                    <label for="new_active" class="text-sm text-gray-700 dark:text-gray-300">Activo (desactiva versiones anteriores del mismo tipo)</label>
                </div>
                <div class="flex gap-3">
                    <button type="submit" class="px-4 py-2 bg-violet-600 hover:bg-violet-700 text-white text-sm rounded-lg">Guardar</button>
                    <button type="button" @click="showCreate = false" class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm rounded-lg">Cancelar</button>
                </div>
            </form>
        </div>

        {{-- Lista de prompts --}}
        <div class="space-y-3">
            @forelse($prompts as $prompt)
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow">
                    {{-- Cabecera del prompt --}}
                    <div class="flex items-center justify-between px-5 py-3 border-b border-gray-100 dark:border-gray-700">
                        <div class="flex items-center gap-3">
                            <span class="text-xs font-bold px-2 py-0.5 rounded
                                @if($prompt->type === 'summary') bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300
                                @elseif($prompt->type === 'tags') bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-300
                                @else bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300 @endif">
                                {{ $prompt->type }}
                            </span>
                            @if($prompt->content_type)
                                <span class="text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 px-2 py-0.5 rounded">{{ $prompt->content_type }}</span>
                            @else
                                <span class="text-xs text-gray-400">todos los tipos</span>
                            @endif
                            <span class="font-medium text-gray-800 dark:text-gray-200">{{ $prompt->name }}</span>
                            <span class="text-xs text-gray-400">v{{ $prompt->version }}</span>
                            @if($prompt->is_active)
                                <span class="text-xs bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 px-2 py-0.5 rounded">Activo</span>
                            @endif
                        </div>
                        <div class="flex items-center gap-2">
                            <button @click="openEdit({{ $prompt->toJson() }})"
                                    class="text-xs text-blue-600 hover:text-blue-800 dark:text-blue-400 px-3 py-1 rounded border border-blue-200 dark:border-blue-700 hover:bg-blue-50 dark:hover:bg-blue-900/20">
                                <i class="fa-solid fa-pen mr-1"></i>Editar
                            </button>
                            <form method="POST" action="{{ route('admin.ai-prompts.destroy', $prompt) }}"
                                  onsubmit="return confirm('¿Eliminar este prompt?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="text-xs text-red-600 hover:text-red-800 dark:text-red-400 px-3 py-1 rounded border border-red-200 dark:border-red-700 hover:bg-red-50 dark:hover:bg-red-900/20">
                                    <i class="fa-solid fa-trash mr-1"></i>Eliminar
                                </button>
                            </form>
                        </div>
                    </div>
                    {{-- Preview del texto --}}
                    <pre class="px-5 py-3 text-xs text-gray-600 dark:text-gray-400 whitespace-pre-wrap font-mono leading-relaxed max-h-32 overflow-y-auto">{{ $prompt->prompt_text }}</pre>
                </div>
            @empty
                <div class="text-center py-12 text-gray-400 dark:text-gray-500">
                    <i class="fa-solid fa-wand-magic-sparkles text-3xl mb-2 block"></i>
                    No hay prompts configurados. Crea el primero.
                </div>
            @endforelse
        </div>

        {{-- Modal editar --}}
        <div x-show="editId !== null" x-cloak
             class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4"
             @keydown.escape.window="closeEdit()">
            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto p-6 space-y-4" @click.stop>
                <div class="flex items-center justify-between">
                    <h2 class="font-semibold text-gray-800 dark:text-gray-200">Editar prompt</h2>
                    <button @click="closeEdit()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"><i class="fa-solid fa-xmark text-xl"></i></button>
                </div>
                <template x-if="editId">
                    <form method="POST" :action="`/admin/ai-prompts/${editId}`" class="space-y-4">
                        @csrf @method('PUT')
                        <div>
                            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Nombre</label>
                            <input type="text" name="name" x-model="editName" required maxlength="100"
                                   class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-violet-500">
                        </div>
                        <div class="flex items-center gap-2">
                            <span class="text-xs font-medium text-gray-600 dark:text-gray-400">Tipo:</span>
                            <span class="text-sm font-semibold text-gray-800 dark:text-gray-200" x-text="editType"></span>
                            <span class="text-gray-400 mx-1">·</span>
                            <span class="text-xs font-medium text-gray-600 dark:text-gray-400">Contenido:</span>
                            <span class="text-sm text-gray-600 dark:text-gray-400" x-text="editContentType || 'todos'"></span>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Texto del prompt</label>
                            <textarea name="prompt_text" x-model="editText" rows="10"
                                      class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-violet-500"></textarea>
                        </div>
                        <div class="flex items-center gap-2">
                            <input type="checkbox" name="is_active" value="1" :checked="editActive" id="edit_active" class="rounded">
                            <label for="edit_active" class="text-sm text-gray-700 dark:text-gray-300">Activo</label>
                        </div>
                        <div class="flex gap-3 pt-2">
                            <button type="submit" class="px-4 py-2 bg-violet-600 hover:bg-violet-700 text-white text-sm rounded-lg">Guardar cambios</button>
                            <button type="button" @click="closeEdit()" class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm rounded-lg">Cancelar</button>
                        </div>
                    </form>
                </template>
            </div>
        </div>
    </div>
</div>
@endsection