@extends('layouts.goberdata')

@section('title', 'Mis campañas')
@section('page_title', 'Mis campañas')
@section('page_sub', 'Configuración y cambio de campaña activa')

@section('content')
<div class="toolbar">
    <a href="{{ url('/campaigns/wizard') }}" class="btn btn-primary btn-sm"><i class="fas fa-plus"></i> Nueva campaña</a>
    <a href="{{ url('/campaigns/create') }}" class="btn btn-ghost btn-sm">Crear rápida</a>
    <a href="{{ url('/dashboard') }}" class="btn btn-ghost btn-sm">Volver al panel</a>
</div>

<div id="emptyState" class="alert a-info" style="display:none">
    <div>
        <div class="alert-t">Aún no tienes campañas</div>
        <div class="alert-d">Crea tu primera campaña para configurar branding, equipo e integraciones.</div>
        <a href="{{ url('/campaigns/wizard') }}" class="btn btn-primary btn-sm" style="margin-top:10px">Configurar campaña</a>
    </div>
</div>

<div id="campaignsList" class="grid g2"></div>
@endsection

@push('scripts')
<script>
(async function () {
    const token = localStorage.getItem('auth_token');
    if (!token) { window.location.href = '/login'; return; }

    const box = document.getElementById('campaignsList');
    const empty = document.getElementById('emptyState');

    try {
        const res = await fetch('/api/campaigns', {
            headers: { 'Authorization': `Bearer ${token}`, 'Accept': 'application/json' }
        });
        if (!res.ok) throw new Error('api');
        const data = await res.json();
        const campaigns = data.my_campaigns || data.data || [];

        if (!campaigns.length) {
            empty.style.display = 'flex';
            return;
        }

        box.innerHTML = campaigns.map(c => `
            <div class="card">
                <div class="card-b">
                    <div class="card-t">${c.name || 'Campaña'}</div>
                    <div class="card-s" style="margin-top:6px">
                        ${c.candidate_name ? c.candidate_name + ' · ' : ''}
                        ${c.is_current ? '<span class="pill p-info">Actual</span>' : '<span class="pill p-mute">Inactiva</span>'}
                    </div>
                    <div style="display:flex;gap:8px;margin-top:14px;flex-wrap:wrap">
                        ${!c.is_current ? `<button class="btn btn-primary btn-sm" onclick="switchCampaign(${c.id})">Activar</button>` : ''}
                        <a class="btn btn-ghost btn-sm" href="/campaigns/${c.id}/settings">Configurar</a>
                    </div>
                </div>
            </div>
        `).join('');
    } catch (e) {
        empty.style.display = 'flex';
        empty.querySelector('.alert-t').textContent = 'No se pudieron cargar las campañas';
        empty.querySelector('.alert-d').textContent = 'Inicia sesión de nuevo o crea una campaña nueva.';
    }

    window.switchCampaign = async function (id) {
        const r = await fetch(`/api/campaigns/${id}/switch`, {
            method: 'POST',
            headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json', 'Accept': 'application/json' }
        });
        if (r.ok) location.reload();
        else alert('No se pudo cambiar de campaña');
    };
})();
</script>
@endpush