<?php
use Livewire\Component;
use App\Models\Inquiry;
?>

<div class="max-content">
    <header class="flex justify-between items-center mb-10">
        <div>
            <h1 class="text-2xl font-semibold tracking-tight text-gray-900">Community Inquiries</h1>
            <p class="text-sm text-gray-500 mt-1">Review and respond to messages from the community.</p>
        </div>
        <div class="flex gap-2 p-1 bg-gray-100 rounded-lg">
            <button wire:click="$set('filter', 'all')" class="px-4 py-1.5 text-xs font-semibold rounded-md {{ $filter === 'all' ? 'bg-white shadow-sm' : 'text-gray-500 hover:text-gray-700' }} transition-all">All</button>
            <button wire:click="$set('filter', 'unread')" class="px-4 py-1.5 text-xs font-semibold rounded-md {{ $filter === 'unread' ? 'bg-white shadow-sm' : 'text-gray-500 hover:text-gray-700' }} transition-all">Unread</button>
            <button wire:click="$set('filter', 'archive')" class="px-4 py-1.5 text-xs font-semibold rounded-md {{ $filter === 'archive' ? 'bg-white shadow-sm' : 'text-gray-500 hover:text-gray-700' }} transition-all">Archive</button>
        </div>
    </header>

    @if (session()->has('message'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4" role="alert">
            <span class="block sm:inline">{{ session('message') }}</span>
        </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">Sender</th>
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Subject</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">Actions</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @forelse($inquiries as $inquiry)
                        <tr class="{{ $inquiry->status === 'new' ? 'bg-sage/5' : '' }}">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="font-semibold text-gray-900 text-sm">{{ $inquiry->name }}</div>
                                <div class="text-[11px] text-gray-400">{{ $inquiry->email }}</div>
                            </td>
                            <td class="px-6 py-4 max-w-[300px]">
                                <div class="font-semibold truncate text-sm text-gray-900">{{ $inquiry->subject }}</div>
                                <div class="text-[11px] text-gray-400 truncate italic">"{{ Str::limit($inquiry->message, 50) }}"</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-xs text-gray-500">{{ $inquiry->created_at->format('M d, Y') }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm">
                                <span class="status-badge {{ $inquiry->status === 'new' ? 'pending' : ($inquiry->status === 'replied' ? 'success' : 'secondary') }}">
                                    {{ ucfirst($inquiry->status) }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <a href="{{ route('admin.inquiries.view', $inquiry->id) }}" wire:navigate class="text-sage font-semibold text-xs px-2" style="color: #99BC85;">Read</a>
                                @if($inquiry->status !== 'archived')
                                    <button wire:click="archive({{ $inquiry->id }})" wire:loading.attr="disabled" class="text-gray-400 font-semibold text-xs px-2">Archive</button>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-6 py-4 text-center text-gray-500 text-sm">No inquiries found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>