@extends('layouts.admin')

@section('title', 'Messages & grievances')

@section('content')
    <form method="GET" class="mb-5 flex flex-wrap items-center gap-3">
        <div class="relative">
            <x-icon name="search" class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-text-muted" />
            <input type="search" name="q" value="{{ request('q') }}" placeholder="Search name, email, subject…"
                   class="form-input w-64 pl-9" aria-label="Search messages">
        </div>

        <select name="type" onchange="this.form.submit()" class="form-input w-40" aria-label="Filter by type">
            <option value="">All types</option>
            @foreach ($types as $key => $label)
                <option value="{{ $key }}" @selected(request('type') === $key)>{{ $label }}</option>
            @endforeach
        </select>

        <select name="status" onchange="this.form.submit()" class="form-input w-40" aria-label="Filter by status">
            <option value="">All statuses</option>
            @foreach ($statuses as $key => $label)
                <option value="{{ $key }}" @selected(request('status') === $key)>{{ $label }}</option>
            @endforeach
        </select>

        @if ($unread)
            <span class="pill bg-primary-50 text-primary">{{ $unread }} unread</span>
        @endif
    </form>

    <div class="admin-card overflow-hidden">
        @if ($messages->isEmpty())
            <p class="px-6 py-16 text-center text-sm text-text-muted">No messages match these filters.</p>
        @else
            <ul class="divide-y divide-border">
                @foreach ($messages as $message)
                    <li>
                        <a href="{{ route('admin.messages.show', $message) }}" class="flex items-start gap-4 px-5 py-4 hover:bg-surface-muted">
                            <span @class([
                                'mt-2 size-2 shrink-0 rounded-full',
                                'bg-primary' => $message->status === 'new',
                                'bg-border' => $message->status !== 'new',
                            ])></span>

                            <div class="min-w-0 flex-1">
                                <div class="flex flex-wrap items-center gap-2">
                                    <span @class(['text-sm text-text', 'font-semibold' => $message->status === 'new'])>
                                        {{ $message->name }}
                                    </span>
                                    <span class="pill bg-primary-50 text-primary">{{ $message->typeLabel() }}</span>
                                    <span class="pill bg-surface-muted text-text-muted">{{ $statuses[$message->status] ?? $message->status }}</span>
                                </div>

                                <p class="mt-1 truncate text-sm text-text-secondary">
                                    {{ $message->subject ?: Str::limit($message->message, 90) }}
                                </p>
                                <p class="mt-0.5 text-xs text-text-muted">{{ $message->email }}</p>
                            </div>

                            <span class="shrink-0 text-xs text-text-muted">{{ $message->created_at->diffForHumans() }}</span>
                        </a>
                    </li>
                @endforeach
            </ul>

            @if ($messages->hasPages())
                <div class="border-t border-border px-5 py-4">{{ $messages->links() }}</div>
            @endif
        @endif
    </div>
@endsection