<?php
use App\Enums\ContactStatus;
use App\Models\ContactSubmission;
use Illuminate\Contracts\Pagination\LengthAwarePaginator;
use Livewire\Attributes\Computed;
use Livewire\Attributes\Title;
use Livewire\Attributes\Url;
use Livewire\Component;
use Livewire\WithPagination;
?>

<section class="w-full space-y-6">
    <div>
        <flux:heading size="xl" level="1">{{ __('Contact Submissions') }}</flux:heading>
        <flux:subheading size="lg">{{ __('Manage inbound contact form submissions') }}</flux:subheading>
    </div>

    <div class="grid grid-cols-2 gap-4 lg:grid-cols-5">
        <flux:card size="sm" data-test="stat-total">
            <flux:subheading>{{ __('Total Submissions') }}</flux:subheading>
            <flux:heading size="xl">{{ $this->stats['total'] }}</flux:heading>
        </flux:card>

        <flux:card size="sm" data-test="stat-new">
            <flux:subheading>{{ __('New') }}</flux:subheading>
            <flux:heading size="xl">{{ $this->stats['new'] }}</flux:heading>
        </flux:card>

        <flux:card size="sm" data-test="stat-contacted">
            <flux:subheading>{{ __('Contacted') }}</flux:subheading>
            <flux:heading size="xl">{{ $this->stats['contacted'] }}</flux:heading>
        </flux:card>

        <flux:card size="sm" data-test="stat-converted">
            <flux:subheading>{{ __('Converted') }}</flux:subheading>
            <flux:heading size="xl">{{ $this->stats['converted'] }}</flux:heading>
        </flux:card>

        <flux:card size="sm" data-test="stat-today">
            <flux:subheading>{{ __('Today') }}</flux:subheading>
            <flux:heading size="xl">{{ $this->stats['today'] }}</flux:heading>
        </flux:card>
    </div>

    <div class="flex flex-col gap-4 sm:flex-row sm:items-end">
        <flux:input
            wire:model.live.debounce.300ms="search"
            icon="magnifying-glass"
            :label="__('Search')"
            :placeholder="__('Search by name, email, or phone')"
            class="sm:max-w-sm"
            data-test="contacts-search-input"
        />

        <flux:select wire:model.live="status" :label="__('Status')" class="sm:max-w-xs" data-test="contacts-status-filter">
            <flux:select.option value="all">{{ __('All') }}</flux:select.option>
            @foreach (ContactStatus::cases() as $case)
                <flux:select.option :value="$case->value">{{ $case->label() }}</flux:select.option>
            @endforeach
        </flux:select>

        <flux:select wire:model.live="perPage" :label="__('Per page')" class="sm:max-w-32" data-test="contacts-per-page">
            <flux:select.option value="25">25</flux:select.option>
            <flux:select.option value="50">50</flux:select.option>
            <flux:select.option value="100">100</flux:select.option>
        </flux:select>
    </div>

    <flux:table :paginate="$this->submissions">
        <flux:table.columns>
            <flux:table.column>{{ __('ID') }}</flux:table.column>
            <flux:table.column>{{ __('Name') }}</flux:table.column>
            <flux:table.column>{{ __('Phone') }}</flux:table.column>
            <flux:table.column>{{ __('Email') }}</flux:table.column>
            <flux:table.column>{{ __('Service') }}</flux:table.column>
            <flux:table.column>{{ __('Event Date') }}</flux:table.column>
            <flux:table.column>{{ __('Status') }}</flux:table.column>
            <flux:table.column>{{ __('Submitted') }}</flux:table.column>
            <flux:table.column>{{ __('Actions') }}</flux:table.column>
        </flux:table.columns>

        <flux:table.rows>
            @forelse ($this->submissions as $submission)
                <flux:table.row :key="$submission->id" data-test="contact-row">
                    <flux:table.cell>#{{ $submission->id }}</flux:table.cell>
                    <flux:table.cell variant="strong">{{ $submission->name }}</flux:table.cell>
                    <flux:table.cell>
                        <flux:link href="tel:{{ $submission->phone }}">{{ $submission->phone }}</flux:link>
                    </flux:table.cell>
                    <flux:table.cell>
                        <flux:link href="mailto:{{ $submission->email }}">{{ $submission->email }}</flux:link>
                    </flux:table.cell>
                    <flux:table.cell>{{ $submission->service->label() }}</flux:table.cell>
                    <flux:table.cell>{{ $submission->event_date?->format('d M Y') ?? '-' }}</flux:table.cell>
                    <flux:table.cell>
                        <flux:badge :color="$submission->status?->badgeColor()">
                            {{ $submission->status?->label() }}
                        </flux:badge>
                    </flux:table.cell>
                    <flux:table.cell>{{ $submission->created_at?->format('d M Y, H:i') }}</flux:table.cell>
                    <flux:table.cell>
                        <flux:button
                            size="sm"
                            variant="ghost"
                            :href="route('admin.contacts.show', $submission)"
                            wire:navigate
                            data-test="view-contact-button"
                        >
                            {{ __('View') }}
                        </flux:button>
                    </flux:table.cell>
                </flux:table.row>
            @empty
                <flux:table.row>
                    <flux:table.cell colspan="9" align="center" data-test="contacts-empty-state">
                        {{ __('No contact submissions found') }}
                    </flux:table.cell>
                </flux:table.row>
            @endforelse
        </flux:table.rows>
    </flux:table>
</section>