@extends('layouts.goberdata')

@section('title', 'Detalle de Campaña')
@section('page_title', 'Detalle de Campaña')
@section('page_sub', 'Vista alineada al diseño GoberData por rol')

@section('content')
<div class="gd-header text-white p-4">
        <div class="container mx-auto flex justify-between items-center">
            <h1 class="text-2xl font-bold">👑 Super Admin · Detalle de Campaña</h1>
            <a href="{{ url('/superadmin/dashboard') }}" class="bg-white text-purple-700 px-4 py-2 rounded-lg font-semibold">Volver</a>
        </div>
    </div>

    <div class="container mx-auto px-4 py-8">
        <div id="errorBox" class="hidden mb-6 p-4 bg-red-100 text-red-800 rounded"></div>

        <div id="header" class="mb-6"></div>

        <div class="grid md:grid-cols-3 gap-6 mb-8">
            <div class="bg-white rounded-xl shadow p-6">
                <p class="text-sm text-gray-500">Usuarios</p>
                <p id="usersCount" class="text-3xl font-bold">0</p>
            </div>
            <div class="bg-white rounded-xl shadow p-6">
                <p class="text-sm text-gray-500">Competidores</p>
                <p id="competitorsCount" class="text-3xl font-bold">0</p>
            </div>
            <div class="bg-white rounded-xl shadow p-6">
                <p class="text-sm text-gray-500">Encuestas</p>
                <p id="pollsCount" class="text-3xl font-bold">0</p>
            </div>
        </div>

        <div class="grid md:grid-cols-2 gap-6">
            <div class="bg-white rounded-xl shadow p-6">
                <h3 class="font-bold text-lg mb-4">Usuarios</h3>
                <ul id="usersList" class="list-disc pl-6 space-y-1 text-sm"></ul>
            </div>
            <div class="bg-white rounded-xl shadow p-6">
                <h3 class="font-bold text-lg mb-4">Competidores</h3>
                <ul id="competitorsList" class="list-disc pl-6 space-y-1 text-sm"></ul>
            </div>
            <div class="bg-white rounded-xl shadow p-6 md:col-span-2">
                <h3 class="font-bold text-lg mb-4">Encuestas</h3>
                <ul id="pollsList" class="list-disc pl-6 space-y-1 text-sm"></ul>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
        // Obtener ID de la URL si no fue inyectado por Blade
        const campaignId = (function() {
            const parts = window.location.pathname.split('/');
            return parts[parts.length - 1];
        })();

        const token = localStorage.getItem('auth_token');
        if (!token) window.location.href = '/login';

        (async () => {
            try {
                const res = await fetch(`/api/superadmin/campaigns/${campaignId}`, {
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Accept': 'application/json'
                    }
                });
                if (!res.ok) {
                    const text = await res.text();
                    document.getElementById('errorBox').classList.remove('hidden');
                    document.getElementById('errorBox').textContent = `Error ${res.status}: ${text}`;
                    return;
                }
                const data = await res.json();
                const c = data.campaign;

                document.title = `Campaña · ${c.name}`;
                document.getElementById('header').innerHTML = `
                    <div class='bg-white rounded-xl shadow p-6'>
                        <h2 class='text-2xl font-bold text-gray-800 mb-1'>${c.name}</h2>
                        <p class='text-sm text-gray-500'>Owner: ${c.owner?.name || 'N/A'} · Plan: ${(c.plan||'starter').toUpperCase()} · Jurisdicción: ${c.jurisdiction || 'N/A'}</p>
                    </div>`;

                document.getElementById('usersCount').textContent = c.users_count || 0;
                document.getElementById('competitorsCount').textContent = c.competitors_count || 0;
                document.getElementById('pollsCount').textContent = c.polls_count || 0;

                const usersUl = document.getElementById('usersList');
                (c.users || []).forEach(u => {
                    const li = document.createElement('li');
                    li.textContent = `${u.name} · ${u.email}`;
                    usersUl.appendChild(li);
                });

                const compsUl = document.getElementById('competitorsList');
                (c.competitors || []).forEach(cm => {
                    const li = document.createElement('li');
                    li.textContent = `${cm.name} · ${cm.party || 'Independiente'}`;
                    compsUl.appendChild(li);
                });

                const pollsUl = document.getElementById('pollsList');
                (c.polls || []).forEach(p => {
                    const li = document.createElement('li');
                    li.textContent = `${p.poll_name} · ${new Date(p.poll_date).toLocaleDateString('es-ES')} · n=${p.sample_size || '-'} · MOE±${p.margin_of_error || '-'}`;
                    pollsUl.appendChild(li);
                });
            } catch (e) {
                document.getElementById('errorBox').classList.remove('hidden');
                document.getElementById('errorBox').textContent = e?.message || 'Error cargando campaña';
            }
        })();
    </script>
@endpush