<x-app-layout>
<x-module-hero title="Email History" description="Complete log of all sent emails" icon="fa-envelope-open-text">
    <x-slot name="tabs">
        @can('view emails')
        <a href="{{ route('emails.index') }}"
           class="module-hero-tab inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0
                  {{ request()->routeIs('emails.index') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}">
            <i class="fas fa-tachometer-alt text-sm"></i> Inbox
        </a>
        @endcan
        @can('create emails')
        <a href="{{ route('emails.compose') }}"
           class="module-hero-tab inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0
                  {{ request()->routeIs('emails.compose') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}">
            <i class="fas fa-pen text-sm"></i> Compose
        </a>
        @endcan
        @can('view emails')
        <a href="{{ route('emails.history') }}"
           class="module-hero-tab inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0
                  {{ request()->routeIs('emails.history') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}">
            <i class="fas fa-history text-sm"></i> History
        </a>
        @endcan
        @can('manage email templates')
        <a href="{{ route('emails.templates') }}"
           class="module-hero-tab inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0
                  {{ request()->routeIs('emails.templates') || request()->routeIs('emails.*template*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}">
            <i class="fas fa-file-lines text-sm"></i> Templates
        </a>
        @endcan
    </x-slot>
</x-module-hero>

<div class="p-6">
    @if(session('success'))
        <div class="mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center gap-2">
            <i class="fas fa-check-circle"></i> {{ session('success') }}
        </div>
    @endif

    {{-- Search/Filter --}}
    <div class="bg-white border-b border-gray-200 p-4 rounded-t-lg">
        <form method="GET" class="flex flex-wrap gap-3 items-end">
            <div class="flex-1 min-w-[200px]">
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Search by subject or recipient..."
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500">
            </div>
            <select name="status" class="px-4 py-2 border border-gray-300 rounded-lg text-sm bg-white">
                <option value="">All Statuses</option>
                <option value="sent" {{ request('status') == 'sent' ? 'selected' : '' }}>Sent</option>
                <option value="scheduled" {{ request('status') == 'scheduled' ? 'selected' : '' }}>Scheduled</option>
                <option value="failed" {{ request('status') == 'failed' ? 'selected' : '' }}>Failed</option>
                <option value="draft" {{ request('status') == 'draft' ? 'selected' : '' }}>Draft</option>
            </select>
            <input type="date" name="date_from" value="{{ request('date_from') }}" class="px-4 py-2 border border-gray-300 rounded-lg text-sm">
            <input type="date" name="date_to" value="{{ request('date_to') }}" class="px-4 py-2 border border-gray-300 rounded-lg text-sm">
            <button type="submit" class="btn-action-view px-4 py-2 rounded-lg">
                <i class="fas fa-search"></i> Filter
            </button>
            @if(request()->hasAny(['search','status','date_from','date_to']))
                <a href="{{ route('emails.history') }}" class="btn-action-delete px-4 py-2 rounded-lg">
                    <i class="fas fa-times"></i> Clear
                </a>
            @endif
        </form>
    </div>

    <div class="w-full">
        <div class="overflow-x-auto">
            <table class="w-full table-zebra">
                <thead>
                    <tr>
                        <th class="px-4 py-3 text-left th-col-1">Subject</th>
                        <th class="px-4 py-3 text-left th-col-2">Recipients</th>
                        <th class="px-4 py-3 text-left th-col-3">Sender</th>
                        <th class="px-4 py-3 text-left th-col-4">Status</th>
                        <th class="px-4 py-3 text-left th-col-5">Sent At</th>
                        <th class="px-4 py-3 text-center th-col-6">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($messages as $email)
                        <tr>
                            <td class="px-4 py-3">
                                <div class="text-sm font-medium text-gray-800">{{ Str::limit($email->subject, 50) }}</div>
                            </td>
                            <td class="px-4 py-3 text-sm text-gray-600">{{ count($email->to_recipients ?? []) }} recipient(s)</td>
                            <td class="px-4 py-3 text-sm text-gray-700">{{ $email->sender->name ?? 'System' }}</td>
                            <td class="px-4 py-3">
                                @php
                                    $statusColors = ['sent'=>'bg-green-100 text-green-800','scheduled'=>'bg-blue-100 text-blue-800','failed'=>'bg-red-100 text-red-800','draft'=>'bg-gray-100 text-gray-800','partial'=>'bg-orange-100 text-orange-800'];
                                    $sc = $statusColors[$email->status] ?? 'bg-gray-100 text-gray-800';
                                @endphp
                                <span class="px-2 py-1 rounded-full text-xs font-semibold {{ $sc }}">{{ ucfirst($email->status) }}</span>
                            </td>
                            <td class="px-4 py-3 text-sm text-gray-600">{{ $email->sent_at ? $email->sent_at->diffForHumans() : '—' }}</td>
                            <td class="px-4 py-3 text-center">
                                <div class="flex items-center justify-center gap-1">
                                    <a href="{{ route('emails.show', $email) }}" class="btn-action-view"><i class="fas fa-eye"></i></a>
                                    @can('reply emails')
                                        @if(auth()->user()->hasAnyRole(['Super Manager', 'Manager']))
                                            <a href="{{ route('emails.reply', $email) }}" class="btn-action-edit"><i class="fas fa-reply"></i></a>
                                        @endif
                                    @endcan
                                    @can('delete emails')
                                        <form action="{{ route('emails.destroy', $email) }}" method="POST" class="inline" onsubmit="return confirm('Delete this email?')">
                                            @csrf @method('DELETE')
                                            <button type="submit" class="btn-action-delete"><i class="fas fa-trash"></i></button>
                                        </form>
                                    @endcan
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-4 py-12 text-center text-gray-500">
                                <i class="fas fa-inbox text-4xl mb-3 opacity-40"></i>
                                <p class="text-sm">No emails found.</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($messages->hasPages())
            <div class="px-4 py-3 border-t border-gray-200 bg-white">{{ $messages->links() }}</div>
        @endif
    </div>
</div>
</x-app-layout>
