@extends('layouts.app')
@section('title', 'PACA Rebuttals')
@section('page-title', 'PACA — Rebuttal Library')

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

    <div class="flex items-center gap-3">
        <a href="{{ route('admin.paca.index') }}" class="text-sm text-gray-500 hover:text-gray-700">← PACA Admin</a>
        <span class="text-gray-300">/</span><span class="text-sm font-medium text-gray-700">Rebuttals</span>
    </div>

    {{-- Add rebuttal form --}}
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
        <h2 class="text-sm font-bold text-gray-700 mb-4">+ Add New Rebuttal</h2>
        <form method="POST" action="{{ route('admin.paca.rebuttal.store') }}" class="space-y-4">
            @csrf
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Sector</label>
                    <select name="sector_id" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="">General (no sector)</option>
                        @foreach($sectors as $s)
                            <option value="{{ $s->id }}">{{ $s->icon }} {{ $s->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Evidence Grade</label>
                    <select name="evidence_grade" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="verified">✓ Verified</option>
                        <option value="published">— Published</option>
                        <option value="claimed">⚠ Claimed</option>
                    </select>
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1.5">NDC/Opposition Claim <span class="text-red-500">*</span></label>
                <textarea name="claim" rows="2" required placeholder="The claim being made against NPP…"
                          class="w-full px-3 py-2 text-sm border border-amber-300 bg-amber-50 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"></textarea>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1.5">NPP Rebuttal <span class="text-red-500">*</span></label>
                <textarea name="rebuttal" rows="4" required placeholder="The evidence-based NPP response — data, context, and closing line…"
                          class="w-full px-3 py-2 text-sm border border-green-300 bg-green-50 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"></textarea>
            </div>
            <div class="flex items-center gap-4">
                <label class="flex items-center gap-2 text-sm cursor-pointer">
                    <input type="checkbox" name="is_likely" value="1" class="rounded border-gray-300 text-red-600">
                    <span class="text-gray-700">Mark as "Likely to hear" (highlights for communicators)</span>
                </label>
                <button type="submit" class="ml-auto px-5 py-2 bg-npp-blue text-white text-sm font-semibold rounded-lg hover:bg-blue-800">
                    Add Rebuttal
                </button>
            </div>
        </form>
    </div>

    {{-- Existing rebuttals --}}
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
        <div class="px-5 py-3 bg-gray-50 border-b border-gray-200">
            <h2 class="text-sm font-semibold text-gray-700">All Rebuttals ({{ $rebuttals->total() }})</h2>
        </div>
        <div class="divide-y divide-gray-50">
            @forelse($rebuttals as $r)
            <div class="p-5">
                <div class="flex items-start justify-between gap-3">
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-2 flex-wrap mb-2">
                            @if($r->sector) <span class="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded-full">{{ $r->sector->icon }} {{ $r->sector->name }}</span> @endif
                            <span class="text-xs px-2 py-0.5 rounded-full font-semibold {{ $r->grade_badge }}">{{ ucfirst($r->evidence_grade) }}</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</span> @endif
                        </div>
                        <div class="bg-amber-50 border-l-4 border-amber-400 px-3 py-2 rounded-r-lg text-sm italic text-gray-700 mb-2">
                            "{{ Str::limit($r->claim, 120) }}"
                        </div>
                        <div class="bg-green-50 border-l-4 border-green-500 px-3 py-2 rounded-r-lg text-sm text-gray-700 leading-relaxed">
                            {{ Str::limit($r->rebuttal, 200) }}
                        </div>
                    </div>
                    <form method="POST" action="{{ route('admin.paca.rebuttal.destroy', $r) }}"
                          onsubmit="return confirm('Delete this rebuttal?')" class="shrink-0">
                        @csrf @method('DELETE')
                        <button type="submit" class="text-xs text-red-500 hover:underline">Delete</button>
                    </form>
                </div>
            </div>
            @empty
            <div class="text-center py-12 text-gray-400">
                <p class="text-3xl mb-2">🛡️</p>
                <p>No rebuttals yet. Add the first one above.</p>
            </div>
            @endforelse
        </div>
        @if($rebuttals->hasPages())
        <div class="px-5 py-3 border-t border-gray-100">{{ $rebuttals->links() }}</div>
        @endif
    </div>
</div>
@endsection