<x-filament-panels::page>
    @php
        $tabs = [
            'logs' => ['label' => __('Logs'), 'icon' => 'heroicon-o-document-text'],
            'stats' => ['label' => __('Statistics'), 'icon' => 'heroicon-o-chart-bar'],
            'activity' => ['label' => __('Activity Log'), 'icon' => 'heroicon-o-clipboard-document-list'],
        ];
    @endphp

    <nav class="fi-tabs flex max-w-full gap-x-1 overflow-x-auto mx-auto rounded-xl bg-white p-2 shadow-sm ring-1 ring-gray-950/5 dark:bg-white/5 dark:ring-white/10" role="tablist">
        @foreach($tabs as $key => $tab)
            <button
                type="button"
                role="tab"
                aria-selected="{{ $activeTab === $key ? 'true' : 'false' }}"
                wire:click="setTab('{{ $key }}')"
                @class([
                    'fi-tabs-item group flex items-center gap-x-2 rounded-lg px-3 py-2 text-sm font-medium outline-none transition duration-75',
                    'fi-active bg-gray-50 dark:bg-white/5' => $activeTab === $key,
                    'hover:bg-gray-50 focus-visible:bg-gray-50 dark:hover:bg-white/5 dark:focus-visible:bg-white/5' => $activeTab !== $key,
                ])
            >
                <x-filament::icon
                    :icon="$tab['icon']"
                    @class([
                        'fi-tabs-item-icon h-5 w-5 shrink-0 transition duration-75',
                        'text-primary-600 dark:text-primary-400' => $activeTab === $key,
                        'text-gray-400 group-hover:text-gray-500 group-focus-visible:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-400 dark:group-focus-visible:text-gray-400' => $activeTab !== $key,
                    ])
                />
                <span @class([
                    'fi-tabs-item-label transition duration-75',
                    'text-primary-600 dark:text-primary-400' => $activeTab === $key,
                    'text-gray-500 group-hover:text-gray-700 group-focus-visible:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-200 dark:group-focus-visible:text-gray-200' => $activeTab !== $key,
                ])>
                    {{ $tab['label'] }}
                </span>
            </button>
        @endforeach
    </nav>

    @if(in_array($activeTab, ['logs', 'stats'], true))
        @if(count($this->getDomainOptions()) > 0)
            <x-filament::section icon="heroicon-o-globe-alt" icon-color="primary" class="mt-4">
                <x-slot name="heading">
                    {{ __('Select Domain') }}
                </x-slot>
                <x-slot name="description">
                    {{ __('Choose the domain you want to view logs for.') }}
                </x-slot>

                <div class="max-w-md">
                    <x-filament::input.wrapper>
                        <x-filament::input.select wire:model.live="selectedDomain">
                            @foreach($this->getDomainOptions() as $value => $label)
                                <option value="{{ $value }}">{{ $label }}</option>
                            @endforeach
                        </x-filament::input.select>
                    </x-filament::input.wrapper>
                </div>
            </x-filament::section>

            @if($selectedDomain)
                @if($activeTab === 'stats')
                    @if($statsGenerated)
                        <x-filament::section icon="heroicon-o-check-circle" icon-color="success" class="mt-4">
                            <x-slot name="heading">
                                {{ __('Statistics Report Ready') }}
                            </x-slot>
                            <x-slot name="description">
                                {{ __('Traffic analysis report has been generated for :domain', ['domain' => $selectedDomain]) }}
                            </x-slot>

                            <x-filament::button
                                :href="$statsUrl"
                                tag="a"
                                target="_blank"
                                icon="heroicon-o-arrow-top-right-on-square"
                            >
                                {{ __('View Report') }}
                            </x-filament::button>
                        </x-filament::section>
                    @endif
                @endif

                @if($activeTab === 'logs')
                    <x-filament::section icon="heroicon-o-document-text" class="mt-4">
                        <x-slot name="heading">
                            {{ __('Log Viewer') }}
                        </x-slot>
                        <x-slot name="description">
                            {{ __('Viewing :type for :domain', ['type' => $logType === 'access' ? __('access log') : __('error log'), 'domain' => $selectedDomain]) }}
                            @if(!empty($logInfo))
                                ({{ $logInfo['file_size'] ?? '' }}, {{ __(':lines lines', ['lines' => $logInfo['lines'] ?? 100]) }})
                            @endif
                        </x-slot>

                        <div class="flex flex-wrap items-center gap-2 gap-y-2 mb-4">
                            <x-filament::button
                                wire:click="setLogType('access')"
                                :color="$logType === 'access' ? 'primary' : 'gray'"
                                :outlined="$logType !== 'access'"
                                size="sm"
                                icon="heroicon-o-arrow-right-circle"
                            >
                                {{ __('Access Log') }}
                            </x-filament::button>

                            <x-filament::button
                                wire:click="setLogType('error')"
                                :color="$logType === 'error' ? 'danger' : 'gray'"
                                :outlined="$logType !== 'error'"
                                size="sm"
                                icon="heroicon-o-exclamation-triangle"
                            >
                                {{ __('Error Log') }}
                            </x-filament::button>
                        </div>

                        @if($logContent)
                            <div class="fi-input-wrp rounded-lg shadow-sm ring-1 ring-gray-950/10 dark:ring-white/20 overflow-hidden">
                                <textarea
                                    readonly
                                    rows="25"
                                    class="w-full border-0 bg-gray-50 dark:bg-gray-900 text-gray-700 dark:text-gray-300 resize-none focus:ring-0"
                                    style="font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5;"
                                >{{ $logContent }}</textarea>
                            </div>
                        @else
                            <x-filament::section compact>
                                <x-slot name="heading">
                                    {{ __('No Log Entries') }}
                                </x-slot>
                                <x-slot name="description">
                                    {{ $logType === 'access'
                                        ? __('No access log entries found. Logs will appear after visitors access your site.')
                                        : __('No error log entries found. This is good - your site has no errors.') }}
                                </x-slot>
                            </x-filament::section>
                        @endif
                    </x-filament::section>
                @endif
            @endif
        @else
            <x-filament::section class="mt-4">
                <div class="flex flex-col items-center justify-center py-12">
                    <div class="mb-4 rounded-full bg-gray-100 p-3 dark:bg-gray-500/20">
                        <x-filament::icon icon="heroicon-o-globe-alt" class="h-6 w-6 text-gray-500 dark:text-gray-400" />
                    </div>
                    <h3 class="text-base font-semibold text-gray-950 dark:text-white">
                        {{ __('No Domains Yet') }}
                    </h3>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                        {{ __('Add a domain first to view logs and statistics.') }}
                    </p>
                    <div class="mt-6">
                        <x-filament::button href="{{ route('filament.jabali.pages.domains') }}" tag="a">
                            {{ __('Add Domain') }}
                        </x-filament::button>
                    </div>
                </div>
            </x-filament::section>
        @endif
    @endif

    @if($activeTab === 'activity')
        <x-filament::section class="mt-4" icon="heroicon-o-clipboard-document-list">
            <x-slot name="heading">{{ __('Activity Log') }}</x-slot>
            <x-slot name="description">{{ __('Recent actions performed in your account.') }}</x-slot>

            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                    <thead class="bg-gray-50 dark:bg-gray-800">
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">{{ __('Time') }}</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">{{ __('Category') }}</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">{{ __('Action') }}</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">{{ __('Description') }}</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">{{ __('IP') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                        @forelse($this->getActivityLogs() as $log)
                            <tr>
                                <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-300">{{ $log->created_at?->format('Y-m-d H:i') }}</td>
                                <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-300">{{ $log->category }}</td>
                                <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-300">{{ $log->action }}</td>
                                <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-300">{{ $log->description }}</td>
                                <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-300">{{ $log->ip_address }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="px-4 py-6 text-center text-sm text-gray-500">
                                    {{ __('No activity recorded yet.') }}
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </x-filament::section>
    @endif

    <x-filament-actions::modals />
</x-filament-panels::page>
