@extends('layouts.goberdata')

@section('title', 'Gestión de Competidores')
@section('page_title', 'Gestión de Competidores')
@section('page_sub', 'Vista alineada al diseño GoberData por rol')

@section('content')
<!-- Top Bar -->
    <div class="gd-header text-white p-4 shadow-lg">
        <div class="container mx-auto flex justify-between items-center">
            <div class="flex items-center space-x-4">
                <h1 class="text-2xl font-bold">🎯 Gestión de Competidores</h1>
                <span id="campaignName" class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm"></span>
            </div>
            <div class="flex items-center space-x-4">
                <button onclick="window.location.href='/admin/dashboard'" class="bg-white text-orange-600 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100">
                    <i class="fas fa-arrow-left"></i> Volver
                </button>
            </div>
        </div>
    </div>

    <!-- Menú de Navegación -->
<div class="container mx-auto px-4 py-8">

        <!-- Límite del Plan -->
        <div id="planLimitCard" class="gd-header text-white rounded-xl shadow-lg p-6 mb-6">
            <div class="flex justify-between items-center">
                <div>
                    <h3 class="text-2xl font-bold mb-2">📊 Plan Actual: <span id="currentPlan">PRO</span></h3>
                    <p class="text-lg opacity-90">
                        <span id="competitorsCount">0</span> / <span id="competitorsLimit">10</span> competidores agregados
                    </p>
                    <div class="mt-3 bg-white bg-opacity-20 rounded-full h-3 overflow-hidden">
                        <div id="progressBar" class="bg-white h-full transition-all duration-500" style="width: 0%"></div>
                    </div>
                </div>
                <div class="text-6xl opacity-80">
                    <i class="fas fa-users-cog"></i>
                </div>
            </div>
        </div>

        <!-- Candidato Principal -->
        <div class="gd-header text-white rounded-xl shadow-lg p-6 mb-8">
            <div class="flex justify-between items-center">
                <div>
                    <div class="flex items-center gap-3 mb-2">
                        <i class="fas fa-star text-yellow-300 text-3xl"></i>
                        <h2 class="text-3xl font-bold">Tu Candidato</h2>
                    </div>
                    <div id="mainCandidateInfo" class="text-lg opacity-90">
                        Cargando...
                    </div>
                </div>
                <div class="text-6xl opacity-50">
                    <i class="fas fa-user-tie"></i>
                </div>
            </div>
        </div>

        <!-- Header con Botón -->
        <div class="flex justify-between items-center mb-6">
            <div>
                <h2 class="text-3xl font-bold text-gray-800">
                    <i class="fas fa-user-shield text-orange-600"></i> Candidatos Rivales
                </h2>
                <p class="text-gray-600 mt-1">Monitorea y analiza a tu competencia en tiempo real</p>
            </div>
            <div class="flex gap-3">
                <button id="addCompetitorBtn" onclick="openAddModal()" class="bg-orange-600 text-white px-6 py-3 rounded-lg font-bold hover:bg-orange-700 transition shadow-lg">
                    <i class="fas fa-plus"></i> Agregar Competidor
                </button>
                <button onclick="debugCompetitors()" class="bg-blue-600 text-white px-6 py-3 rounded-lg font-bold hover:bg-blue-700 transition shadow-lg">
                    <i class="fas fa-bug"></i> Debug
                </button>
            </div>
        </div>

        <!-- Grid de Competidores -->
        <div id="competitorsList" class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            <!-- Se llenará dinámicamente -->
        </div>

        <!-- Empty State -->
        <div id="emptyState" class="hidden text-center py-16">
            <div class="text-6xl mb-4">🎯</div>
            <h3 class="text-2xl font-bold text-gray-700 mb-2">No hay competidores agregados</h3>
            <p class="text-gray-500 mb-6">Agrega candidatos rivales para monitorear sus redes sociales y estrategias</p>
            <button onclick="openAddModal()" class="bg-orange-600 text-white px-8 py-3 rounded-lg font-bold hover:bg-orange-700 transition">
                <i class="fas fa-plus"></i> Agregar Primer Competidor
            </button>
        </div>
    </div>

    <!-- Modal: Agregar/Editar Competidor -->
    <div id="competitorModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-auto">
            <div class="px-6 py-4 border-b flex items-center justify-between bg-orange-50">
                <h3 id="modalTitle" class="text-2xl font-bold text-orange-800">
                    <i class="fas fa-user-plus"></i> Agregar Competidor
                </h3>
                <button onclick="closeModal()" class="text-gray-500 hover:text-gray-700">
                    <i class="fas fa-times text-2xl"></i>
                </button>
            </div>

            <form id="competitorForm" class="p-6">
                <div class="grid md:grid-cols-2 gap-4">
                    <!-- Nombre -->
                    <div class="md:col-span-2">
                        <label class="block text-gray-700 font-semibold mb-2">
                            <i class="fas fa-user"></i> Nombre Completo *
                        </label>
                        <input type="text" id="competitorName" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500" placeholder="Ej: Carlos Pérez López">
                    </div>

                    <!-- Partido -->
                    <div>
                        <label class="block text-gray-700 font-semibold mb-2">
                            <i class="fas fa-flag"></i> Partido Político
                        </label>
                        <input type="text" id="competitorParty" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500" placeholder="Ej: Partido Liberal">
                    </div>

                    <!-- Nivel -->
                    <div>
                        <label class="block text-gray-700 font-semibold mb-2">
                            <i class="fas fa-layer-group"></i> Nivel *
                        </label>
                        <select id="competitorLevel" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500">
                            <option value="municipal">Municipal</option>
                            <option value="departmental">Departamental</option>
                            <option value="national">Nacional</option>
                        </select>
                    </div>

                    <!-- Jurisdicción -->
                    <div class="md:col-span-2">
                        <label class="block text-gray-700 font-semibold mb-2">
                            <i class="fas fa-map-marker-alt"></i> Jurisdicción
                        </label>
                        <input type="text" id="competitorJurisdiction" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500" placeholder="Ej: Medellín">
                    </div>
                </div>

                <hr class="my-6">

                <!-- Redes Sociales -->
                <h4 class="text-lg font-bold text-gray-800 mb-4">
                    <i class="fas fa-share-alt"></i> Redes Sociales
                </h4>

                <div class="space-y-3">
                    <div class="flex items-center gap-2">
                        <i class="fab fa-facebook text-blue-600 text-xl w-6"></i>
                        <input type="text" id="socialFacebook" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500" placeholder="Usuario de Facebook">
                    </div>
                    <div class="flex items-center gap-2">
                        <i class="fab fa-twitter text-blue-400 text-xl w-6"></i>
                        <input type="text" id="socialTwitter" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500" placeholder="@usuario">
                    </div>
                    <div class="flex items-center gap-2">
                        <i class="fab fa-instagram text-pink-600 text-xl w-6"></i>
                        <input type="text" id="socialInstagram" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500" placeholder="@usuario">
                    </div>
                    <div class="flex items-center gap-2">
                        <i class="fab fa-tiktok text-black text-xl w-6"></i>
                        <input type="text" id="socialTiktok" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500" placeholder="@usuario">
                    </div>
                    <div class="flex items-center gap-2">
                        <i class="fab fa-youtube text-red-600 text-xl w-6"></i>
                        <input type="text" id="socialYoutube" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500" placeholder="Canal de YouTube">
                    </div>
                </div>

                <div class="flex gap-3 mt-6">
                    <button type="button" onclick="closeModal()" class="flex-1 px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 transition">
                        Cancelar
                    </button>
                    <button type="submit" class="flex-1 px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700 transition font-bold">
                        <i class="fas fa-save"></i> Guardar
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Toast Container -->
    <div id="toastContainer" class="fixed top-5 right-5 z-[100] space-y-3"></div>
@endsection

@push('scripts')
<script>
        let competitors = [];
        let editingId = null;
        let currentCampaign = null;

        // Verificar autenticación
        const token = localStorage.getItem('auth_token');
        if (!token) {
            window.location.href = '/login';
        }

        // Cargar datos
        (async () => {
            await loadCampaignInfo();
            await loadCompetitors();
        })();

        async function loadCampaignInfo() {
            try {
                const response = await fetch('/api/campaigns', {
                    headers: { 'Authorization': `Bearer ${token}` }
                });
                if (response.ok) {
                    const data = await response.json();
                    currentCampaign = data.current_campaign;
                    if (currentCampaign) {
                        document.getElementById('campaignName').textContent = currentCampaign.name;
                        document.getElementById('currentPlan').textContent = (currentCampaign.plan || 'PRO').toUpperCase();

                        // Límites según plan
                        const limits = {
                            'starter': 3,
                            'pro': 10,
                            'enterprise': 50
                        };
                        const limit = limits[currentCampaign.plan] || 10;
                        document.getElementById('competitorsLimit').textContent = limit;
                    }
                }
            } catch (err) {
                console.error('Error loading campaign:', err);
            }
        }

        async function loadCompetitors() {
            console.log('🔧 Cargando competidores...');
            console.log('🔧 Token:', token ? 'Presente' : 'Ausente');

            try {
                const response = await fetch('/api/social-monitoring/competitors', {
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Accept': 'application/json'
                    }
                });

                console.log('🔧 Response status:', response.status);
                console.log('🔧 Response headers:', Object.fromEntries(response.headers.entries()));

                if (response.ok) {
                    const data = await response.json();
                    console.log('🔧 Response data:', data);

                    const allCompetitors = data.data || [];
                    console.log('🔧 All competitors:', allCompetitors);

                    // Separar candidato principal de rivales
                    const mainCandidate = allCompetitors.find(c => c.is_main_candidate === true);
                    competitors = allCompetitors.filter(c => c.is_main_candidate !== true);

                    console.log('🔧 Main candidate:', mainCandidate);
                    console.log('🔧 Rival competitors:', competitors);

                    renderMainCandidate(mainCandidate);
                    renderCompetitors();
                    updateProgress();
                } else {
                    const errorData = await response.json();
                    console.error('❌ Error loading competitors:', errorData);
                }
            } catch (err) {
                console.error('❌ Error loading competitors:', err);
            }
        }

        function renderMainCandidate(candidate) {
            const mainCandidateInfo = document.getElementById('mainCandidateInfo');

            if (!candidate) {
                mainCandidateInfo.innerHTML = `
                    <p class="text-sm opacity-75">⚠️ No se ha configurado el candidato principal</p>
                    <p class="text-xs opacity-60 mt-1">El candidato se crea automáticamente al crear la campaña</p>
                `;
                return;
            }

            mainCandidateInfo.innerHTML = `
                <div class="flex items-center gap-4">
                    <div class="bg-white bg-opacity-20 rounded-full w-16 h-16 flex items-center justify-center text-2xl">
                        ${candidate.photo_url ? `<img src="${candidate.photo_url}" class="w-full h-full rounded-full object-cover" />` : '👤'}
                    </div>
                    <div>
                        <p class="text-2xl font-bold">${candidate.name}</p>
                        <p class="text-sm opacity-90">${candidate.party || 'Sin partido'}</p>
                        <p class="text-xs opacity-75 mt-1">
                            <i class="fas fa-users"></i> ${(candidate.total_followers || 0).toLocaleString()} seguidores
                        </p>
                    </div>
                </div>
            `;
        }

        function renderCompetitors() {
            console.log('🔧 Renderizando competidores...');
            console.log('🔧 Competitors array:', competitors);
            console.log('🔧 Competitors length:', competitors.length);

            const container = document.getElementById('competitorsList');
            const emptyState = document.getElementById('emptyState');

            console.log('🔧 Container element:', container);
            console.log('🔧 Empty state element:', emptyState);

            if (competitors.length === 0) {
                console.log('🔧 No hay competidores, mostrando empty state');
                container.classList.add('hidden');
                emptyState.classList.remove('hidden');
                return;
            }

            console.log('🔧 Hay competidores, renderizando lista');
            container.classList.remove('hidden');
            emptyState.classList.add('hidden');

            const html = competitors.map(c => `
                <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition">
                    <div class="gd-header p-4 text-white">
                        <h3 class="text-xl font-bold">${c.name}</h3>
                        <p class="text-sm opacity-90">${c.party || 'Independiente'}</p>
                    </div>
                    <div class="p-4">
                        <div class="mb-3">
                            <span class="text-xs font-semibold text-gray-500">NIVEL</span>
                            <p class="text-sm font-semibold text-gray-700 capitalize">${c.level}</p>
                        </div>
                        <div class="mb-3">
                            <span class="text-xs font-semibold text-gray-500">JURISDICCIÓN</span>
                            <p class="text-sm font-semibold text-gray-700">${c.jurisdiction || 'N/A'}</p>
                        </div>

                        <!-- Redes Sociales -->
                        <div class="flex gap-2 mb-4">
                            ${c.social_handles?.facebook ? '<i class="fab fa-facebook text-blue-600"></i>' : ''}
                            ${c.social_handles?.twitter ? '<i class="fab fa-twitter text-blue-400"></i>' : ''}
                            ${c.social_handles?.instagram ? '<i class="fab fa-instagram text-pink-600"></i>' : ''}
                            ${c.social_handles?.tiktok ? '<i class="fab fa-tiktok"></i>' : ''}
                            ${c.social_handles?.youtube ? '<i class="fab fa-youtube text-red-600"></i>' : ''}
                        </div>

                        <div class="flex gap-2">
                            <button onclick="editCompetitor(${c.id})" class="flex-1 px-3 py-2 bg-blue-500 text-white text-sm rounded-lg hover:bg-blue-600 transition">
                                <i class="fas fa-edit"></i> Editar
                            </button>
                            <button onclick="deleteCompetitor(${c.id})" class="flex-1 px-3 py-2 bg-red-500 text-white text-sm rounded-lg hover:bg-red-600 transition">
                                <i class="fas fa-trash"></i> Eliminar
                            </button>
                        </div>
                    </div>
                </div>
            `).join('');

            console.log('🔧 HTML generado:', html);
            console.log('🔧 HTML length:', html.length);

            container.innerHTML = html;

            console.log('🔧 HTML insertado en container');
            console.log('🔧 Container innerHTML length:', container.innerHTML.length);
        }

        function updateProgress() {
            const count = competitors.length;
            const limit = parseInt(document.getElementById('competitorsLimit').textContent);
            const percentage = (count / limit) * 100;

            document.getElementById('competitorsCount').textContent = count;
            document.getElementById('progressBar').style.width = `${percentage}%`;

            // Deshabilitar botón si alcanzó el límite
            const addBtn = document.getElementById('addCompetitorBtn');
            if (count >= limit) {
                addBtn.disabled = true;
                addBtn.className = 'bg-gray-400 text-white px-6 py-3 rounded-lg font-bold cursor-not-allowed';
                addBtn.innerHTML = '<i class="fas fa-lock"></i> Límite Alcanzado';
            }
        }

        function openAddModal() {
            editingId = null;
            document.getElementById('modalTitle').innerHTML = '<i class="fas fa-user-plus"></i> Agregar Competidor';
            document.getElementById('competitorForm').reset();
            document.getElementById('competitorModal').classList.remove('hidden');
        }

        function closeModal() {
            document.getElementById('competitorModal').classList.add('hidden');
        }

        async function editCompetitor(id) {
            const competitor = competitors.find(c => c.id === id);
            if (!competitor) return;

            editingId = id;
            document.getElementById('modalTitle').innerHTML = '<i class="fas fa-edit"></i> Editar Competidor';
            document.getElementById('competitorName').value = competitor.name;
            document.getElementById('competitorParty').value = competitor.party || '';
            document.getElementById('competitorLevel').value = competitor.level;
            document.getElementById('competitorJurisdiction').value = competitor.jurisdiction || '';

            if (competitor.social_handles) {
                document.getElementById('socialFacebook').value = competitor.social_handles.facebook || '';
                document.getElementById('socialTwitter').value = competitor.social_handles.twitter || '';
                document.getElementById('socialInstagram').value = competitor.social_handles.instagram || '';
                document.getElementById('socialTiktok').value = competitor.social_handles.tiktok || '';
                document.getElementById('socialYoutube').value = competitor.social_handles.youtube || '';
            }

            document.getElementById('competitorModal').classList.remove('hidden');
        }

        async function deleteCompetitor(id) {
            if (!confirm('¿Estás seguro de eliminar este competidor?')) return;

            try {
                const response = await fetch(`/api/social-monitoring/competitors/${id}`, {
                    method: 'DELETE',
                    headers: { 'Authorization': `Bearer ${token}` }
                });

                if (response.ok) {
                    showToast('Competidor eliminado exitosamente', 'success');
                    await loadCompetitors();
                } else {
                    showToast('Error al eliminar competidor', 'error');
                }
            } catch (err) {
                showToast('Error de red', 'error');
            }
        }

        document.getElementById('competitorForm').addEventListener('submit', async (e) => {
            e.preventDefault();

            const data = {
                name: document.getElementById('competitorName').value,
                party: document.getElementById('competitorParty').value,
                level: document.getElementById('competitorLevel').value,
                jurisdiction: document.getElementById('competitorJurisdiction').value,
                social_handles: {
                    facebook: document.getElementById('socialFacebook').value,
                    twitter: document.getElementById('socialTwitter').value,
                    instagram: document.getElementById('socialInstagram').value,
                    tiktok: document.getElementById('socialTiktok').value,
                    youtube: document.getElementById('socialYoutube').value,
                }
            };

            console.log('🔧 Guardando competidor con datos:', data);
            console.log('🔧 Token:', token ? 'Presente' : 'Ausente');
            console.log('🔧 Editing ID:', editingId);

            try {
                const url = editingId
                    ? `/api/social-monitoring/competitors/${editingId}`
                    : '/api/social-monitoring/competitors';

                console.log('🔧 URL:', url);
                console.log('🔧 Method:', editingId ? 'PUT' : 'POST');

                const response = await fetch(url, {
                    method: editingId ? 'PUT' : 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${token}`,
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify(data)
                });

                console.log('🔧 Response status:', response.status);
                console.log('🔧 Response headers:', Object.fromEntries(response.headers.entries()));

                const result = await response.json();
                console.log('🔧 Response data:', result);

                if (response.ok) {
                    showToast(editingId ? 'Competidor actualizado' : 'Competidor agregado', 'success');
                    closeModal();
                    await loadCompetitors();
                } else {
                    console.error('❌ Error response:', result);
                    showToast(result.message || 'Error al guardar', 'error');
                }
            } catch (err) {
                console.error('❌ Error de red:', err);
                showToast('Error de red: ' + err.message, 'error');
            }
        });

        function debugCompetitors() {
            console.log('🔧 === DEBUG COMPETIDORES ===');
            console.log('🔧 Token:', token ? 'Presente' : 'Ausente');
            console.log('🔧 Competitors array:', competitors);
            console.log('🔧 Competitors length:', competitors.length);
            console.log('🔧 Container element:', document.getElementById('competitorsList'));
            console.log('🔧 Empty state element:', document.getElementById('emptyState'));
            console.log('🔧 Container classes:', document.getElementById('competitorsList').className);
            console.log('🔧 Empty state classes:', document.getElementById('emptyState').className);

            // Forzar recarga
            console.log('🔧 Forzando recarga de competidores...');
            loadCompetitors();
        }

        function showToast(message, type = 'info') {
            const container = document.getElementById('toastContainer');
            const colors = {
                success: 'bg-green-600',
                error: 'bg-red-600',
                warning: 'bg-yellow-600',
                info: 'bg-blue-600',
            };
            const icons = {
                success: 'fa-check-circle',
                error: 'fa-times-circle',
                warning: 'fa-exclamation-triangle',
                info: 'fa-info-circle',
            };

            const toast = document.createElement('div');
            toast.className = `${colors[type]} text-white shadow-xl rounded-xl px-4 py-3 flex items-center gap-3 transform transition-all duration-300 translate-x-full opacity-0`;
            toast.innerHTML = `
                <i class="fas ${icons[type]} text-xl"></i>
                <div class="text-sm">${message}</div>
            `;
            container.appendChild(toast);

            setTimeout(() => {
                toast.classList.remove('translate-x-full', 'opacity-0');
            }, 100);

            setTimeout(() => {
                toast.classList.add('translate-x-full', 'opacity-0');
                setTimeout(() => toast.remove(), 300);
            }, 3500);
        }
    </script>
@endpush