<x-app-layout>
    <x-module-hero
        title="Email Logs"
        description="View and analyze email operation history"
        icon="fa-history">
        <x-slot name="tabs">
            @can('view email configuration')
            <a href="{{ route('config.email.index') }}"
               class="module-hero-tab {{ request()->routeIs('config.email.index') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
                <i class="fas fa-tachometer-alt"></i> Dashboard
            </a>
            @endcan
            @can('create email configuration')
            <a href="{{ route('config.email.create') }}"
               class="module-hero-tab {{ request()->routeIs('config.email.create') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
                <i class="fas fa-plus"></i> New Configuration
            </a>
            @endcan
            @can('view email logs')
            <a href="{{ route('config.email.logs') }}"
               class="module-hero-tab {{ request()->routeIs('config.email.logs') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
                <i class="fas fa-history"></i> Logs
            </a>
            @endcan
            <a href="{{ route('config.email.documentation') }}"
               class="module-hero-tab {{ request()->routeIs('config.email.documentation') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
                <i class="fas fa-book"></i> Documentation
            </a>
        </x-slot>
    </x-module-hero>

    <div class="p-6">
        {{-- Stats Row --}}
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
                <p class="text-xs text-gray-500 font-semibold uppercase tracking-wider">Total Logs</p>
                <p class="text-2xl font-bold mt-1 text-blue-600">{{ $statistics['total'] ?? 0 }}</p>
            </div>
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
                <p class="text-xs text-gray-500 font-semibold uppercase tracking-wider">Success Rate</p>
                <p class="text-2xl font-bold mt-1 text-green-600">{{ $statistics['success_rate'] ?? 0 }}%</p>
            </div>
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
                <p class="text-xs text-gray-500 font-semibold uppercase tracking-wider">Today</p>
                <p class="text-2xl font-bold mt-1 text-purple-600">{{ $statistics['today'] ?? 0 }}</p>
            </div>
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
                <p class="text-xs text-gray-500 font-semibold uppercase tracking-wider">Avg Time</p>
                <p class="text-2xl font-bold mt-1 text-orange-600">{{ round($statistics['avg_execution_time'] ?? 0) }}ms</p>
            </div>
        </div>

        {{-- Filters --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-4">
            <form method="GET" action="{{ route('config.email.logs') }}">
                <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">Type</label>
                        <select name="type" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
                            @foreach($types as $value => $label)
                                <option value="{{ $value }}" {{ request('type') == $value ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">Status</label>
                        <select name="status" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
                            @foreach($statuses as $value => $label)
                                <option value="{{ $value }}" {{ request('status') == $value ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">From Date</label>
                        <input type="date" name="date_from" value="{{ request('date_from') }}"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">To Date</label>
                        <input type="date" name="date_to" value="{{ request('date_to') }}"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
                    </div>
                    <div class="flex items-end gap-2">
                        <button type="submit"
                                class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition text-sm">
                            <i class="fas fa-search mr-1"></i> Filter
                        </button>
                        <a href="{{ route('config.email.logs') }}"
                           class="px-3 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition text-sm">
                            <i class="fas fa-times"></i>
                        </a>
                    </div>
                </div>
            </form>
        </div>

        {{-- Logs Table --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
            <div class="p-4 border-b border-gray-200 flex justify-between items-center">
                <h2 class="text-sm font-semibold text-gray-800 flex items-center gap-2">
                    <i class="fas fa-list text-green-600"></i> Email Logs
                </h2>
                @can('export email logs')
                    <a href="{{ route('config.email.logs.export', request()->query()) }}"
                       class="btn-action-download">
                        <i class="fas fa-download"></i> Export
                    </a>
                @endcan
            </div>
            <div class="overflow-x-auto">
                <table class="w-full table-zebra">
                    <thead>
                        <tr>
                            <th class="px-4 py-3 text-left th-col-1">Type</th>
                            <th class="px-4 py-3 text-left th-col-2">Details</th>
                            <th class="px-4 py-3 text-left th-col-3">Status</th>
                            <th class="px-4 py-3 text-left th-col-4">Execution Time</th>
                            <th class="px-4 py-3 text-left th-col-5">Date</th>
                            <th class="px-4 py-3 text-center th-col-6">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($logs as $log)
                            <tr class="odd:bg-white even:bg-gray-50 hover:bg-gray-100 transition-colors border-b border-gray-100 last:border-0">
                                <td class="px-4 py-3 whitespace-nowrap">
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium
                                        {{ $log->type === 'smtp_send' ? 'bg-blue-100 text-blue-800' :
                                           ($log->type === 'imap_receive' ? 'bg-purple-100 text-purple-800' : 'bg-gray-100 text-gray-800') }}">
                                        <i class="fas {{ $log->type === 'smtp_send' ? 'fa-paper-plane' :
                                                       ($log->type === 'imap_receive' ? 'fa-inbox' : 'fa-plug') }} mr-1"></i>
                                        {{ $log->type_label }}
                                    </span>
                                </td>
                                <td class="px-4 py-3">
                                    <div class="text-sm text-gray-900">
                                        @if($log->recipient)<span class="font-medium">{{ $log->recipient }}</span>@endif
                                        @if($log->subject)<br><span class="text-gray-500 text-xs">{{ Str::limit($log->subject, 50) }}</span>@endif
                                    </div>
                                </td>
                                <td class="px-4 py-3 whitespace-nowrap">
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium {{ $log->status_badge }}">
                                        <i class="fas {{ $log->status === 'success' ? 'fa-check-circle' : 'fa-times-circle' }} mr-1"></i>
                                        {{ ucfirst($log->status) }}
                                    </span>
                                </td>
                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                    {{ $log->formatted_execution_time }}
                                </td>
                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                    <div>{{ $log->created_at->format('M d, Y') }}</div>
                                    <div class="text-xs text-gray-400">{{ $log->created_at->format('H:i:s') }}</div>
                                </td>
                                <td class="px-4 py-3 whitespace-nowrap text-center">
                                    <button onclick="showLogDetails({{ $log->id }})"
                                            class="btn-action-view">
                                        <i class="fas fa-eye"></i> View
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="px-4 py-12 text-center">
                                    <i class="fas fa-inbox text-gray-300 text-4xl mb-4"></i>
                                    <p class="text-gray-500">No email logs found</p>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if($logs->hasPages())
                <div class="p-4 border-t border-gray-200">
                    {{ $logs->links() }}
                </div>
            @endif
        </div>
    </div>

    {{-- Log Details Modal --}}
    <div id="logDetailsModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
        <div class="flex items-center justify-center min-h-screen p-4">
            <div class="bg-white rounded-lg shadow-xl max-w-5xl w-full overflow-hidden">
                <div class="flex items-center justify-between px-6 py-4 bg-gradient-to-r from-blue-600 to-blue-700 rounded-t-lg">
                    <h3 class="text-base font-semibold text-white flex items-center gap-2">
                        <i class="fas fa-info-circle"></i> Log Details
                    </h3>
                    <button onclick="closeLogDetailsModal()" class="text-white/80 hover:text-white transition">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="p-6">
                    <div id="logDetailsContent" class="space-y-4"></div>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
        const logsData = @json($logs->items());
        function showLogDetails(logId) {
            const log = logsData.find(l => l.id === logId);
            if (!log) return;
            const content = document.getElementById('logDetailsContent');
            let html = `<div class="grid grid-cols-2 gap-4"><div><dt class="text-sm font-medium text-gray-500">Type</dt><dd class="mt-1 text-sm text-gray-900">${log.type_label}</dd></div><div><dt class="text-sm font-medium text-gray-500">Status</dt><dd class="mt-1"><span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${log.status_badge}">${log.status}</span></dd></div></div>`;
            if (log.recipient) html += `<div><dt class="text-sm font-medium text-gray-500">Recipient</dt><dd class="mt-1 text-sm text-gray-900">${log.recipient}</dd></div>`;
            if (log.subject) html += `<div><dt class="text-sm font-medium text-gray-500">Subject</dt><dd class="mt-1 text-sm text-gray-900">${log.subject}</dd></div>`;
            html += `<div class="grid grid-cols-2 gap-4"><div><dt class="text-sm font-medium text-gray-500">Execution Time</dt><dd class="mt-1 text-sm text-gray-900">${log.formatted_execution_time}</dd></div><div><dt class="text-sm font-medium text-gray-500">Date</dt><dd class="mt-1 text-sm text-gray-900">${log.time_ago}</dd></div></div>`;
            if (log.error_message) html += `<div><dt class="text-sm font-medium text-gray-500">Error</dt><dd class="mt-1 text-sm text-red-600 bg-red-50 p-2 rounded">${log.error_message}</dd></div>`;
            content.innerHTML = html;
            document.getElementById('logDetailsModal').classList.remove('hidden');
        }
        function closeLogDetailsModal() { document.getElementById('logDetailsModal').classList.add('hidden'); }
    </script>
    @endpush
</x-app-layout>
