<?php

use Livewire\Component;
use App\Models\ReporterApplication;

new class extends Component
{
    public $filter = 'all';
    public $viewingId = null;
    public $remarksInput = '';

    public function render()
    {
        return $this->view()->layout('layouts::auth');
    }

    public function with()
    {
        $query = ReporterApplication::latest();

        if ($this->filter !== 'all') {
            $query->where('status', $this->filter);
        }

        return [
            'applications' => $query->get(),
            'viewing'      => $this->viewingId ? ReporterApplication::find($this->viewingId) : null,
            'counts' => [
                'all'       => ReporterApplication::count(),
                'pending'   => ReporterApplication::where('status', 'pending')->count(),
                'interview' => ReporterApplication::where('status', 'interview')->count(),
                'selected'  => ReporterApplication::where('status', 'selected')->count(),
                'rejected'  => ReporterApplication::where('status', 'rejected')->count(),
            ],
        ];
    }

    public function openApplication($id)
    {
        $this->viewingId = $id;
        $app = ReporterApplication::find($id);
        $this->remarksInput = $app ? $app->admin_remarks ?? '' : '';
    }

    public function closeView()
    {
        $this->viewingId = null;
        $this->remarksInput = '';
    }

    public function updateStatus($id, $status)
    {
        ReporterApplication::find($id)?->update(['status' => $status]);
        if ($this->viewingId === $id) {
            // refresh remarks
        }
        session()->flash('message', 'Status updated.');
    }

    public function saveRemarks()
    {
        if (!$this->viewingId) return;
        ReporterApplication::find($this->viewingId)?->update(['admin_remarks' => $this->remarksInput]);
        session()->flash('message', 'Remarks saved.');
    }
};
?>

<div class="max-content">

    @if($viewing)
        <!-- Detail Panel -->
        <div class="mb-6">
            <button wire:click="closeView" class="flex items-center gap-2 text-sm font-semibold text-gray-500 hover:text-gray-900 transition-colors mb-6">
                <i class="fa-solid fa-arrow-left"></i> All Applications
            </button>

            <div class="flex flex-col lg:flex-row gap-8">
                <!-- Main Info -->
                <div class="flex-1 space-y-6">
                    <!-- Personal -->
                    <div class="card p-6">
                        <h3 class="text-xs font-bold uppercase tracking-widest text-gray-400 mb-4">Personal Details</h3>
                        <div class="grid grid-cols-2 gap-4 text-sm">
                            <div><span class="text-gray-400 text-[11px] uppercase font-bold block mb-0.5">Full Name</span><span class="font-semibold text-gray-900">{{ $viewing->full_name }}</span></div>
                            <div><span class="text-gray-400 text-[11px] uppercase font-bold block mb-0.5">Gender</span><span class="font-semibold text-gray-900">{{ ucfirst($viewing->gender ?? '—') }}</span></div>
                            <div><span class="text-gray-400 text-[11px] uppercase font-bold block mb-0.5">Date of Birth</span><span class="font-semibold text-gray-900">{{ $viewing->dob ? $viewing->dob->format('d M Y') : '—' }}</span></div>
                            <div><span class="text-gray-400 text-[11px] uppercase font-bold block mb-0.5">Mobile</span><span class="font-semibold text-gray-900">{{ $viewing->mobile_number }}</span></div>
                            <div><span class="text-gray-400 text-[11px] uppercase font-bold block mb-0.5">WhatsApp</span><span class="font-semibold text-gray-900">{{ $viewing->whatsapp_number ?? '—' }}</span></div>
                            <div><span class="text-gray-400 text-[11px] uppercase font-bold block mb-0.5">Email</span><span class="font-semibold text-gray-900">{{ $viewing->email ?? '—' }}</span></div>
                            <div class="col-span-2"><span class="text-gray-400 text-[11px] uppercase font-bold block mb-0.5">Address</span><span class="font-semibold text-gray-900">{{ $viewing->address ?? '—' }}</span></div>
                        </div>
                    </div>

                    <!-- Education & Reporting -->
                    <div class="card p-6">
                        <h3 class="text-xs font-bold uppercase tracking-widest text-gray-400 mb-4">Education & Reporting</h3>
                        <div class="grid grid-cols-2 gap-4 text-sm">
                            <div><span class="text-gray-400 text-[11px] uppercase font-bold block mb-0.5">Qualification</span><span class="font-semibold text-gray-900">{{ $viewing->highest_qualification ?? '—' }}</span></div>
                            <div><span class="text-gray-400 text-[11px] uppercase font-bold block mb-0.5">School / College</span><span class="font-semibold text-gray-900">{{ $viewing->school_college_name ?? '—' }}</span></div>
                            <div><span class="text-gray-400 text-[11px] uppercase font-bold block mb-0.5">Applying For</span><span class="font-semibold text-gray-900">{{ $viewing->applying_for ? implode(', ', $viewing->applying_for) : '—' }}</span></div>
                            <div><span class="text-gray-400 text-[11px] uppercase font-bold block mb-0.5">Area</span><span class="font-semibold text-gray-900">{{ $viewing->area ?? '—' }}</span></div>
                        </div>
                    </div>

                    <!-- Experience & Skills -->
                    <div class="card p-6">
                        <h3 class="text-xs font-bold uppercase tracking-widest text-gray-400 mb-4">Experience & Skills</h3>
                        <div class="grid grid-cols-2 gap-4 text-sm">
                            <div><span class="text-gray-400 text-[11px] uppercase font-bold block mb-0.5">Has Experience</span><span class="font-semibold text-gray-900">{{ $viewing->has_experience ? 'Yes' : 'No' }}</span></div>
                            @if($viewing->has_experience)
                                <div class="col-span-2"><span class="text-gray-400 text-[11px] uppercase font-bold block mb-0.5">Details</span><span class="font-semibold text-gray-900">{{ $viewing->experience_details ?? '—' }}</span></div>
                            @endif
                            <div class="col-span-2"><span class="text-gray-400 text-[11px] uppercase font-bold block mb-0.5">Skills</span><span class="font-semibold text-gray-900">{{ $viewing->skills ? implode(', ', $viewing->skills) : '—' }}</span></div>
                        </div>
                        <div class="flex flex-wrap gap-3 mt-4">
                            <span class="px-3 py-1 rounded-full text-[11px] font-bold {{ $viewing->has_smartphone ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-400' }}">Smartphone</span>
                            <span class="px-3 py-1 rounded-full text-[11px] font-bold {{ $viewing->has_microphone ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-400' }}">Microphone</span>
                            <span class="px-3 py-1 rounded-full text-[11px] font-bold {{ $viewing->has_internet ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-400' }}">Internet</span>
                            <span class="px-3 py-1 rounded-full text-[11px] font-bold {{ $viewing->availability_daily ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-400' }}">Daily Available</span>
                        </div>
                    </div>

                    <!-- Documents -->
                    @if($viewing->photo_path || $viewing->id_proof_path)
                        <div class="card p-6">
                            <h3 class="text-xs font-bold uppercase tracking-widest text-gray-400 mb-4">Documents</h3>
                            <div class="flex gap-4">
                                @if($viewing->photo_path)
                                    <a href="{{ Storage::url($viewing->photo_path) }}" target="_blank" class="flex items-center gap-2 text-sm font-semibold hover:underline" style="color: #99BC85;">
                                        <i class="fa-solid fa-image"></i> View Photo
                                    </a>
                                @endif
                                @if($viewing->id_proof_path)
                                    <a href="{{ Storage::url($viewing->id_proof_path) }}" target="_blank" class="flex items-center gap-2 text-sm font-semibold hover:underline" style="color: #99BC85;">
                                        <i class="fa-solid fa-id-card"></i> View ID Proof
                                    </a>
                                @endif
                            </div>
                        </div>
                    @endif
                </div>

                <!-- Action Sidebar -->
                <div class="w-full lg:w-72 space-y-6">
                    <!-- Status -->
                    <div class="card p-6">
                        <h3 class="text-xs font-bold uppercase tracking-widest text-gray-400 mb-4">Update Status</h3>
                        <div class="space-y-2">
                            @foreach(['pending' => 'Pending', 'interview' => 'Interview', 'selected' => 'Selected', 'rejected' => 'Rejected'] as $val => $label)
                                <button wire:click="updateStatus({{ $viewing->id }}, '{{ $val }}')"
                                    wire:loading.attr="disabled"
                                    class="w-full text-left px-4 py-2.5 rounded-md text-sm font-semibold transition-colors
                                    {{ $viewing->status === $val ? 'bg-sage text-white' : 'bg-gray-50 text-gray-700 hover:bg-gray-100' }}"
                                    style="{{ $viewing->status === $val ? 'background-color:#99BC85;' : '' }}">
                                    <span wire:loading.remove wire:target="updateStatus({{ $viewing->id }}, '{{ $val }}')">{{ $label }}</span>
                                    <span wire:loading wire:target="updateStatus({{ $viewing->id }}, '{{ $val }}')">Updating...</span>
                                </button>
                            @endforeach
                        </div>
                    </div>

                    <!-- Remarks -->
                    <div class="card p-6">
                        <h3 class="text-xs font-bold uppercase tracking-widest text-gray-400 mb-4">Admin Remarks</h3>
                        <textarea wire:model="remarksInput" rows="4" class="input-field w-full resize-none text-sm" placeholder="Internal notes..."></textarea>
                        <button wire:click="saveRemarks" wire:loading.attr="disabled" class="mt-3 w-full py-2 bg-gray-900 text-white text-xs font-bold rounded-md hover:bg-gray-700 transition-colors">
                            <span wire:loading.remove wire:target="saveRemarks">Save Remarks</span>
                            <span wire:loading wire:target="saveRemarks">Saving...</span>
                        </button>
                    </div>

                    <!-- Meta -->
                    <div class="card p-6 text-xs text-gray-400 space-y-1">
                        <p>Applied on: <span class="font-semibold text-gray-600">{{ $viewing->created_at->format('d M Y, h:i A') }}</span></p>
                    </div>
                </div>
            </div>
        </div>

    @else
        <!-- List View -->
        <header class="flex flex-col items-start sm:flex-row sm:justify-between sm:items-center gap-4 mb-10">
            <div>
                <h1 class="text-2xl font-semibold tracking-tight text-gray-900">Reporter Applications</h1>
                <p class="text-sm text-gray-500 mt-1">Manage all reporter job applications submitted via the website.</p>
            </div>
            <!-- Filter Tabs -->
            <div class="flex flex-wrap gap-1 p-1 bg-gray-100 rounded-lg">
                @foreach(['all' => 'All', 'pending' => 'Pending', 'interview' => 'Interview', 'selected' => 'Selected', 'rejected' => 'Rejected'] as $val => $label)
                    <button wire:click="$set('filter', '{{ $val }}')"
                        class="px-3 py-1.5 text-xs font-semibold rounded-md transition-all {{ $filter === $val ? 'bg-white shadow-sm' : 'text-gray-500 hover:text-gray-700' }}">
                        {{ $label }}
                        <span class="ml-1 text-[10px] font-bold {{ $filter === $val ? 'text-gray-700' : 'text-gray-400' }}">{{ $counts[$val] }}</span>
                    </button>
                @endforeach
            </div>
        </header>

        @if (session()->has('message'))
            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4 text-sm">{{ session('message') }}</div>
        @endif

        <div class="card">
            <div class="overflow-x-auto">
                <table>
                    <thead>
                        <tr>
                            <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Applicant</th>
                            <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Applying For</th>
                            <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Area</th>
                            <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                            <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                            <th class="px-6 py-3 bg-gray-50 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @forelse($applications as $app)
                            <tr class="hover:bg-gray-50/50 transition-colors">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="font-semibold text-gray-900 text-sm">{{ $app->full_name }}</div>
                                    <div class="text-[11px] text-gray-400">{{ $app->mobile_number }}</div>
                                </td>
                                <td class="px-6 py-4 text-sm text-gray-600">
                                    {{ $app->applying_for ? implode(', ', $app->applying_for) : '—' }}
                                </td>
                                <td class="px-6 py-4 text-sm text-gray-600">{{ $app->area ?? '—' }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-xs text-gray-500">{{ $app->created_at->format('d M Y') }}</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    @php
                                        $statusMap = [
                                            'pending'   => 'pending',
                                            'interview' => 'warning',
                                            'selected'  => 'success',
                                            'rejected'  => 'secondary',
                                        ];
                                        $labelMap = [
                                            'pending'   => 'Pending',
                                            'interview' => 'Interview',
                                            'selected'  => 'Selected',
                                            'rejected'  => 'Rejected',
                                        ];
                                    @endphp
                                    <span class="status-badge {{ $statusMap[$app->status] ?? 'secondary' }}">
                                        {{ $labelMap[$app->status] ?? $app->status }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right">
                                    <button wire:click="openApplication({{ $app->id }})" class="text-xs font-semibold px-2 hover:underline" style="color: #99BC85;">View</button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="px-6 py-10 text-center text-gray-400 text-sm">No applications found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    @endif

</div>
