@extends('layouts.app')
@section('title', 'PACA — Political Affairs Communications Archive')
@section('page-title', 'PACA — Political Affairs Communications Archive')

@section('content')
<div class="mt-4 space-y-4">

    {{-- Header banner --}}
    <div class="rounded-xl p-5 text-white flex items-center justify-between"
         style="background: linear-gradient(135deg, #003087 0%, #1a4aad 100%);">
        <div>
            <h2 class="font-bold text-lg leading-tight">⚡ Political Affairs Communications Archive</h2>
            <p class="text-blue-200 text-sm mt-0.5">Evidence-based data for communicators — achievements, comparatives, rebuttals, and fast facts.</p>
        </div>
        @if(auth()->user()->hasRole('admin') || auth()->user()->hasRole('supervisor'))
        <a href="{{ route('admin.paca.index') }}"
           class="px-4 py-2 bg-white text-blue-800 text-sm font-semibold rounded-lg hover:bg-blue-50 shrink-0">
            Manage PACA →
        </a>
        @endif
    </div>

    {{-- Tabs --}}
    <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
        <div class="flex border-b border-gray-200 overflow-x-auto">
            @foreach([
                'sectors'         => ['⊞', 'Sectors'],
                'fast-facts'      => ['⚡', 'Fast Facts'],
                'rebuttals'       => ['🛡️', 'Rebuttals'],
                'constituencies'  => ['🗺️', 'Constituencies'],
                'compare'         => ['📊', 'NPP vs NDC'],
            ] as $key => [$icon, $label])
            <a href="{{ route('paca.index', ['tab' => $key]) }}"
               class="flex items-center gap-1.5 px-5 py-3.5 text-sm font-semibold whitespace-nowrap border-b-2 transition-colors
                      {{ $tab === $key
                         ? 'border-blue-700 text-blue-700 bg-blue-50'
                         : 'border-transparent text-gray-500 hover:text-gray-700 hover:bg-gray-50' }}">
                <span>{{ $icon }}</span>{{ $label }}
            </a>
            @endforeach
        </div>

        <div class="p-5">

            {{-- ═══════════════ SECTORS ═══════════════ --}}
            @if($tab === 'sectors')
            <p class="text-sm text-gray-500 mb-5">Click any sector to view NPP achievements and NPP vs NDC comparatives.</p>
            <div class="grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-5 gap-3">
                @foreach($sectors as $sector)
                <a href="{{ route('paca.sector', $sector->slug) }}"
                   class="flex flex-col items-center text-center p-4 rounded-xl border border-gray-200 hover:border-blue-300 hover:shadow-md hover:-translate-y-0.5 transition-all bg-white">
                    <span class="text-3xl mb-2">{{ $sector->icon }}</span>
                    <span class="text-sm font-bold text-gray-800 leading-tight">{{ $sector->name }}</span>
                    <span class="text-xs text-gray-400 mt-1">{{ $sector->achievements_count ?? $sector->achievements->count() }} records</span>
                    <div class="mt-2 flex gap-1.5 text-[10px] font-bold">
                        <span class="px-1.5 py-0.5 bg-blue-100 text-blue-700 rounded">NPP {{ $sector->npp_score }}</span>
                        <span class="px-1.5 py-0.5 bg-teal-100 text-teal-700 rounded">NDC {{ $sector->ndc_score }}</span>
                    </div>
                </a>
                @endforeach
            </div>
            @endif

            {{-- ═══════════════ FAST FACTS ═══════════════ --}}
            @if($tab === 'fast-facts')
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
                {{-- Selector --}}
                <div class="bg-gradient-to-br from-purple-50 to-white border border-purple-200 rounded-xl p-5">
                    <h3 class="font-bold text-gray-800 mb-1">⚡ Pre-Show Quick Prep</h3>
                    <p class="text-xs text-gray-500 mb-4">Select a sector to get your top facts in seconds.</p>
                    <form method="GET" action="{{ route('paca.index') }}" class="space-y-3">
                        <input type="hidden" name="tab" value="fast-facts">
                        <div>
                            <label class="block text-xs font-semibold text-gray-600 mb-1">Sector</label>
                            <select name="sector_id" required
                                    class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
                                <option value="">Choose sector…</option>
                                @foreach($sectors as $s)
                                    <option value="{{ $s->id }}" {{ request('sector_id') == $s->id ? 'selected' : '' }}>
                                        {{ $s->icon }} {{ $s->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <button type="submit"
                                class="w-full py-2.5 text-sm font-bold text-white rounded-lg"
                                style="background: linear-gradient(135deg, #7C3AED, #a855f7);">
                            ⚡ Get My Facts
                        </button>
                    </form>
                    @if($selectedSector)
                    <div class="mt-4 pt-4 border-t border-purple-100 text-sm text-purple-700">
                        <p class="font-semibold">{{ $selectedSector->icon }} {{ $selectedSector->name }}</p>
                        <p class="text-xs mt-1">{{ $selectedSector->achievements->count() }} achievement records</p>
                    </div>
                    @endif
                </div>

                {{-- Facts list --}}
                <div class="lg:col-span-2">
                    @if($selectedSector && $selectedSector->achievements->count())
                        <h3 class="font-bold text-gray-800 mb-3">
                            {{ $selectedSector->icon }} Top Facts — {{ $selectedSector->name }}
                        </h3>
                        <div class="space-y-3">
                            @foreach($selectedSector->achievements as $a)
                            <div class="bg-white border border-gray-200 rounded-xl p-4">
                                <div class="flex items-start justify-between gap-3 mb-1">
                                    <span class="text-2xl font-bold text-blue-700 leading-tight">{{ $a->metric }}</span>
                                    <span class="text-[10px] font-bold px-2 py-0.5 rounded-full {{ $a->grade_badge }} shrink-0">
                                        {{ $a->grade_label }}
                                    </span>
                                </div>
                                <p class="text-sm font-semibold text-gray-800">{{ $a->title }}</p>
                                @if($a->talking_point)
                                <div class="mt-2 text-xs text-gray-600 bg-blue-50 border-l-2 border-blue-400 px-3 py-2 rounded-r-lg leading-relaxed italic">
                                    💬 {{ $a->talking_point }}
                                </div>
                                <button onclick="navigator.clipboard?.writeText('{{ addslashes($a->talking_point) }}')"
                                        class="mt-2 text-xs text-blue-600 hover:text-blue-800 font-medium">
                                    📋 Copy Talking Point
                                </button>
                                @endif
                            </div>
                            @endforeach
                        </div>
                        <div class="mt-3">
                            <a href="{{ route('paca.sector', $selectedSector->slug) }}"
                               class="text-sm text-blue-600 hover:underline font-medium">
                                View full {{ $selectedSector->name }} sector brief →
                            </a>
                        </div>
                    @elseif($selectedSector)
                        <div class="text-center py-12 text-gray-400">
                            <p class="text-4xl mb-3">📂</p>
                            <p class="font-semibold">No records for {{ $selectedSector->name }} yet</p>
                        </div>
                    @else
                        <div class="text-center py-16 text-gray-300">
                            <p class="text-5xl mb-4">⚡</p>
                            <p class="text-gray-500 font-medium">Select a sector and click "Get My Facts"</p>
                            <p class="text-sm text-gray-400 mt-1">Your top evidence-based talking points will appear here.</p>
                        </div>
                    @endif
                </div>
            </div>
            @endif

            {{-- ═══════════════ REBUTTALS ═══════════════ --}}
            @if($tab === 'rebuttals')
            {{-- Search + Filter --}}
            <form method="GET" action="{{ route('paca.index') }}" class="flex flex-wrap gap-3 mb-5">
                <input type="hidden" name="tab" value="rebuttals">
                <input type="text" name="q" value="{{ request('q') }}" placeholder="Search claims or rebuttals…"
                       class="flex-1 min-w-48 px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                <select name="sector_id" class="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="">All Sectors</option>
                    @foreach($sectors as $s)
                        <option value="{{ $s->id }}" {{ request('sector_id') == $s->id ? 'selected' : '' }}>{{ $s->icon }} {{ $s->name }}</option>
                    @endforeach
                </select>
                <button type="submit" class="px-4 py-2 bg-npp-blue text-white text-sm rounded-lg hover:bg-blue-800">Filter</button>
                <a href="{{ route('paca.index', ['tab' => 'rebuttals']) }}" class="px-4 py-2 text-sm text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50">Clear</a>
            </form>

            @if($rebuttals->isEmpty())
                <div class="text-center py-12 text-gray-400">
                    <p class="text-4xl mb-3">🛡️</p>
                    <p>No rebuttals found matching your search.</p>
                </div>
            @else
            <div class="space-y-4">
                @foreach($rebuttals as $r)
                <div class="bg-white border border-gray-200 rounded-xl p-5">
                    <div class="flex items-center gap-2 flex-wrap mb-3">
                        @if($r->sector)
                            <span class="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-600">{{ $r->sector->icon }} {{ $r->sector->name }}</span>
                        @endif
                        <span class="text-xs px-2 py-0.5 rounded-full font-semibold {{ $r->grade_badge }}">{{ $r->evidence_grade === 'verified' ? '✓ Verified' : ($r->evidence_grade === 'published' ? '— Published' : '⚠ Claimed') }}</span>
                        @if($r->is_likely)
                            <span class="text-xs px-2 py-0.5 rounded-full bg-red-100 text-red-700 font-semibold">⚠ Likely to hear</span>
                        @endif
                    </div>
                    <p class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">NDC CLAIM:</p>
                    <div class="bg-amber-50 border-l-3 border-l-amber-400 border border-amber-200 px-4 py-3 rounded-r-lg text-sm italic text-gray-700 mb-3">
                        "{{ $r->claim }}"
                    </div>
                    <p class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">NPP REBUTTAL:</p>
                    <div class="bg-green-50 border-l-3 border-l-green-500 border border-green-200 px-4 py-3 rounded-r-lg text-sm text-gray-800 leading-relaxed">
                        {{ $r->rebuttal }}
                    </div>
                    <button onclick="navigator.clipboard?.writeText('{{ addslashes($r->rebuttal) }}')"
                            class="mt-2 text-xs text-blue-600 hover:text-blue-800 font-medium">
                        📋 Copy Rebuttal
                    </button>
                </div>
                @endforeach
            </div>
            @endif
            @endif

            {{-- ═══════════════ CONSTITUENCIES ═══════════════ --}}
            @if($tab === 'constituencies')
            <form method="GET" action="{{ route('paca.index') }}" class="flex flex-wrap gap-3 mb-5">
                <input type="hidden" name="tab" value="constituencies">
                <input type="text" name="const_q" value="{{ request('const_q') }}" placeholder="Search constituency or region…"
                       class="flex-1 min-w-48 px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                <select name="region_id" class="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="">All Regions</option>
                    @foreach($regions as $r)
                        <option value="{{ $r->id }}" {{ request('region_id') == $r->id ? 'selected' : '' }}>{{ $r->name }}</option>
                    @endforeach
                </select>
                <select name="seat" class="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="">All Seats</option>
                    <option value="npp"   {{ request('seat') === 'npp'   ? 'selected' : '' }}>NPP Held</option>
                    <option value="swing" {{ request('seat') === 'swing' ? 'selected' : '' }}>Swing</option>
                    <option value="ndc"   {{ request('seat') === 'ndc'   ? 'selected' : '' }}>NDC Held</option>
                </select>
                <button type="submit" class="px-4 py-2 bg-npp-blue text-white text-sm rounded-lg hover:bg-blue-800">Filter</button>
                <a href="{{ route('paca.index', ['tab' => 'constituencies']) }}" class="px-4 py-2 text-sm text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50">Clear</a>
            </form>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                @forelse($constituencies as $c)
                <div class="bg-white border border-gray-200 rounded-xl p-4 hover:shadow-md transition-shadow">
                    <div class="flex items-start justify-between gap-2 mb-2">
                        <div>
                            <h3 class="font-bold text-gray-900">{{ $c->name }}</h3>
                            <p class="text-xs text-gray-400">{{ $c->region?->name }} Region{{ $c->mp_name ? ' · MP: '.$c->mp_name : '' }}</p>
                        </div>
                        <span class="text-xs px-2 py-0.5 rounded font-bold {{ $c->seat_badge }} shrink-0">{{ $c->seat_label }}</span>
                    </div>
                    @if($c->npp_vote_pct || $c->ndc_vote_pct)
                    <div class="flex gap-4 text-sm font-semibold mb-2">
                        <span class="text-blue-700">NPP {{ $c->npp_vote_pct }}%</span>
                        <span class="text-teal-700">NDC {{ $c->ndc_vote_pct }}%</span>
                    </div>
                    @endif
                    @if($c->deliverables)
                    <div class="mt-2 text-xs text-gray-600 bg-blue-50 px-3 py-2 rounded-lg">
                        🏗️ {{ $c->deliverables }}
                    </div>
                    @endif
                </div>
                @empty
                <div class="col-span-2 text-center py-12 text-gray-400">
                    <p class="text-4xl mb-3">🗺️</p>
                    <p>No constituencies found.</p>
                </div>
                @endforelse
            </div>
            @endif

            {{-- ═══════════════ NPP vs NDC COMPARE ═══════════════ --}}
            @if($tab === 'compare')
            <div class="mb-5 rounded-xl p-4 text-white text-sm"
                 style="background: linear-gradient(135deg, #003087, #1a4aad);">
                <strong>NPP vs NDC — Performance Comparison</strong>
                <span class="ml-2 opacity-75">Evidence grades: ✓ Verified · — Published · ⚠ Claimed</span>
            </div>
            <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Sector</th>
                                <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Indicator</th>
                                <th class="text-left px-4 py-3 text-xs font-semibold text-blue-700 bg-blue-50 uppercase tracking-wider">🔵 NPP</th>
                                <th class="text-left px-4 py-3 text-xs font-semibold text-teal-700 bg-teal-50 uppercase tracking-wider">🟢 NDC</th>
                                <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Winner</th>
                                <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Grade</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-50">
                            @foreach($comparatives as $comp)
                            <tr class="hover:bg-gray-50">
                                <td class="px-4 py-3 text-xs font-medium text-gray-600">
                                    {{ $comp->sector?->icon }} {{ $comp->sector?->name }}
                                </td>
                                <td class="px-4 py-3 text-sm font-semibold text-gray-800">{{ $comp->indicator }}</td>
                                <td class="px-4 py-3 text-sm font-bold text-blue-700 bg-blue-50">{{ $comp->npp_data }}</td>
                                <td class="px-4 py-3 text-sm font-bold text-teal-700 bg-teal-50">{{ $comp->ndc_data }}</td>
                                <td class="px-4 py-3">
                                    <span class="text-xs px-2 py-0.5 rounded-full font-bold {{ $comp->edge_badge }}">
                                        {{ $comp->edge_label }}
                                    </span>
                                </td>
                                <td class="px-4 py-3">
                                    <span class="text-xs px-2 py-0.5 rounded-full font-semibold
                                        {{ $comp->npp_grade === 'verified' ? 'bg-green-100 text-green-700' : 'bg-blue-100 text-blue-700' }}">
                                        {{ $comp->npp_grade === 'verified' ? '✓' : '—' }} {{ ucfirst($comp->npp_grade) }}
                                    </span>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            @endif

        </div>
    </div>
</div>
@endsection