<?php

use Livewire\Component;
use App\Models\Subscriber;

new class extends Component
{
    public string $filterStatus = 'all';

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

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

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

        return [
            'subscribers'  => $query->paginate(25),
            'totalActive'  => Subscriber::where('status', 'active')->count(),
            'totalAll'     => Subscriber::count(),
        ];
    }

    public function toggleStatus(int $id): void
    {
        $sub = Subscriber::find($id);
        if (! $sub) return;
        $sub->update(['status' => $sub->status === 'active' ? 'unsubscribed' : 'active']);
    }

    public function delete(int $id): void
    {
        Subscriber::find($id)?->delete();
        session()->flash('message', 'Subscriber removed.');
    }
};
?>

<div class="max-content">

    <header class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-10">
        <div>
            <h1 class="text-2xl font-semibold tracking-tight text-gray-900">Newsletter Subscribers</h1>
            <p class="text-sm text-gray-500 mt-1">Manage email addresses that subscribed via the website footer.</p>
        </div>
        <div class="flex items-center gap-3">
            <div class="text-right">
                <p class="text-2xl font-black text-gray-900">{{ $totalActive }}</p>
                <p class="text-[10px] text-gray-400 uppercase font-bold tracking-widest">Active</p>
            </div>
            <div class="w-px h-10 bg-gray-100"></div>
            <div class="text-right">
                <p class="text-2xl font-black text-gray-400">{{ $totalAll }}</p>
                <p class="text-[10px] text-gray-400 uppercase font-bold tracking-widest">Total</p>
            </div>
        </div>
    </header>

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

    <!-- Filter Tabs -->
    <div class="flex gap-1 mb-6 border-b border-gray-100 pb-0">
        @foreach(['all' => 'All', 'active' => 'Active', 'unsubscribed' => 'Unsubscribed'] as $val => $label)
        <button wire:click="$set('filterStatus', '{{ $val }}')"
            class="px-4 py-2 text-xs font-bold rounded-t-md border-b-2 transition-colors
            {{ $filterStatus === $val ? 'border-[#99BC85] text-gray-900 bg-white' : 'border-transparent text-gray-400 hover:text-gray-700' }}">
            {{ $label }}
        </button>
        @endforeach
    </div>

    <div class="card overflow-hidden">
        <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">Email</th>
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Subscribed On</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">Actions</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-100">
                    @forelse($subscribers as $sub)
                    <tr class="hover:bg-gray-50/50 transition-colors">
                        <td class="px-6 py-4 text-sm text-gray-900 font-medium">{{ $sub->email }}</td>
                        <td class="px-6 py-4 text-xs text-gray-400">{{ $sub->created_at->format('d M Y, h:i A') }}</td>
                        <td class="px-6 py-4">
                            <button wire:click="toggleStatus({{ $sub->id }})"
                                class="inline-flex items-center gap-1.5 text-[11px] font-bold px-2.5 py-1 rounded-full transition-colors
                                {{ $sub->status === 'active' ? 'bg-green-50 text-green-700 hover:bg-green-100' : 'bg-gray-100 text-gray-500 hover:bg-gray-200' }}">
                                <span class="w-1.5 h-1.5 rounded-full {{ $sub->status === 'active' ? 'bg-green-500' : 'bg-gray-400' }}"></span>
                                {{ $sub->status === 'active' ? 'Active' : 'Unsubscribed' }}
                            </button>
                        </td>
                        <td class="px-6 py-4 text-right">
                            <button wire:click="delete({{ $sub->id }})"
                                wire:confirm="Remove this subscriber permanently?"
                                class="text-xs font-semibold text-red-400 hover:text-red-600 transition-colors">
                                Remove
                            </button>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="4" class="px-6 py-12 text-center">
                            <i class="fa-solid fa-envelope text-3xl text-gray-200 mb-3 block"></i>
                            <p class="text-gray-400 text-sm">No subscribers yet.</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($subscribers->hasPages())
        <div class="px-6 py-4 border-t border-gray-100">
            {{ $subscribers->links() }}
        </div>
        @endif
    </div>

</div>
