<x-filament-panels::page>
    @php
        $progress = $this->getVerificationProgress();
        $alert = $progress['alert'];
        $hasJournalists = $progress['journalists'] && $progress['journalists']->count() > 0;
    @endphp

    <div class="space-y-6">
        {{-- Unified Verification Card --}}
        <x-filament::section>
            <x-slot name="heading">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <div class="p-2 rounded-lg bg-primary-50 dark:bg-primary-500/10">
                            <x-heroicon-o-check-badge class="w-6 h-6 text-primary-500" />
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                                Verifikasi Data
                            </h3>
                            <p class="text-sm text-gray-500 dark:text-gray-400">
                                Lengkapi data perusahaan, media, dan jurnalis Anda untuk mengajukan verifikasi kepada
                                Administrator.
                            </p>
                        </div>
                    </div>

                    {{-- Status Badge --}}
                    <x-filament::badge :color="$progress['status']['color']" size="lg">
                        {{ $progress['status']['label'] }}
                    </x-filament::badge>
                </div>
            </x-slot>

            <div class="space-y-6">
                {{-- Stepper Progress --}}
                <div class="pt-4">
                    <x-stepper :current-step="$progress['currentStep']" :steps="$progress['steps']" />
                </div>

                {{-- Data Summary --}}
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    {{-- Company Summary --}}
                    <div
                        class="p-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
                        <div class="flex items-center gap-2 mb-2">
                            <x-heroicon-o-building-office-2 class="w-5 h-5 text-primary-500" />
                            <h4 class="font-medium text-gray-900 dark:text-white">Perusahaan</h4>
                        </div>
                        <p class="text-sm text-gray-600 dark:text-gray-400">{{ $progress['company']?->name }}</p>
                        <x-filament::badge :color="$progress['company'] ? 'success' : 'warning'" size="sm" class="mt-2">
                            {{ $progress['company'] ? '✓ Lengkap' : 'Belum Lengkap' }}
                        </x-filament::badge>
                    </div>

                    {{-- Media Summary --}}
                    <div
                        class="p-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
                        <div class="flex items-center gap-2 mb-2">
                            <x-heroicon-o-newspaper class="w-5 h-5 text-info-500" />
                            <h4 class="font-medium text-gray-900 dark:text-white">Media</h4>
                        </div>
                        <p class="text-sm text-gray-600 dark:text-gray-400">{{ $progress['partnerMedia']?->name }}
                        </p>
                        <x-filament::badge :color="$progress['partnerMedia'] ? 'success' : 'warning'" size="sm" class="mt-2">
                            {{ $progress['partnerMedia'] ? '✓ Lengkap' : 'Belum Lengkap' }}
                        </x-filament::badge>
                    </div>

                    {{-- Journalists Summary --}}
                    <div
                        class="p-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
                        <div class="flex items-center gap-2 mb-2">
                            <x-heroicon-o-identification class="w-5 h-5 text-info-500" />
                            <h4 class="font-medium text-gray-900 dark:text-white">Jurnalis</h4>
                        </div>
                        <p class="text-sm text-gray-600 dark:text-gray-400">
                            {{ $progress['journalists']?->count() }} jurnalis terdaftar
                        </p>
                        <x-filament::badge :color="$hasJournalists ? 'success' : 'warning'" size="sm" class="mt-2">
                            {{ $hasJournalists ? '✓ Lengkap' : 'Belum Lengkap' }}
                        </x-filament::badge>
                    </div>
                </div>

                {{-- Alert Messages --}}
                @if ($alert)
                    @php
                        $alertClasses = match ($alert['color']) {
                            'success'
                                => 'bg-success-50 dark:bg-success-500/10 border-success-200 dark:border-success-500/20',
                            'warning'
                                => 'bg-warning-50 dark:bg-warning-500/10 border-warning-200 dark:border-warning-500/20',
                            'danger'
                                => 'bg-danger-50 dark:bg-danger-500/10 border-danger-200 dark:border-danger-500/20',
                            'info' => 'bg-info-50 dark:bg-info-500/10 border-info-200 dark:border-info-500/20',
                            default => 'bg-gray-50 dark:bg-gray-500/10 border-gray-200 dark:border-gray-500/20',
                        };
                        $alertIconClasses = match ($alert['color']) {
                            'success' => 'text-success-500',
                            'warning' => 'text-warning-500',
                            'danger' => 'text-danger-500',
                            'info' => 'text-info-500',
                            default => 'text-gray-500',
                        };
                        $alertTitleClasses = match ($alert['color']) {
                            'success' => 'text-success-800 dark:text-success-200',
                            'warning' => 'text-warning-800 dark:text-warning-200',
                            'danger' => 'text-danger-800 dark:text-danger-200',
                            'info' => 'text-info-800 dark:text-info-200',
                            default => 'text-gray-800 dark:text-gray-200',
                        };
                        $alertMessageClasses = match ($alert['color']) {
                            'success' => 'text-success-700 dark:text-success-300',
                            'warning' => 'text-warning-700 dark:text-warning-300',
                            'danger' => 'text-danger-700 dark:text-danger-300',
                            'info' => 'text-info-700 dark:text-info-300',
                            default => 'text-gray-700 dark:text-gray-300',
                        };
                        $iconName = 'heroicon-s-' . $alert['icon'];
                        $iconClasses =
                            $alertIconClasses . (isset($alert['animate']) && $alert['animate'] ? ' animate-pulse' : '');
                    @endphp
                    <div class="p-4 rounded-xl border {{ $alertClasses }}">
                        <div class="flex gap-3">
                            <div class="shrink-0">
                                <x-dynamic-component :component="$iconName" class="w-5 h-5 {{ $iconClasses }}" />
                            </div>
                            <div>
                                <h4 class="font-medium {{ $alertTitleClasses }}">
                                    {{ $alert['title'] }}
                                </h4>
                                <p class="mt-1 text-sm {{ $alertMessageClasses }}">
                                    {{ $alert['message'] }}
                                </p>
                            </div>
                        </div>
                    </div>
                @endif

                {{-- Review History Accordion --}}
                @if ($progress['reviewHistory']->isNotEmpty())
                    <div x-data="{ open: false }"
                        class="border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden">
                        <button @click="open = !open"
                            class="w-full flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                            <div class="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300">
                                <x-heroicon-o-clock class="w-4 h-4" />
                                Riwayat Review ({{ $progress['reviewHistory']->count() }})
                            </div>
                            <x-heroicon-o-chevron-down class="w-4 h-4 text-gray-500 transition-transform duration-200"
                                x-bind:class="{ 'rotate-180': open }" />
                        </button>

                        <div x-show="open" x-collapse class="border-t border-gray-200 dark:border-gray-700">
                            <div class="divide-y divide-gray-100 dark:divide-gray-700">
                                @foreach ($progress['reviewHistory'] as $review)
                                    <div class="p-4">
                                        <div class="flex items-start justify-between gap-4">
                                            <div class="flex-1 min-w-0">
                                                <div class="flex items-center gap-2 mb-1">
                                                    <x-filament::badge :color="$review->decision->getColor()" size="sm">
                                                        {{ $review->decision->getLabel() }}
                                                    </x-filament::badge>
                                                    <span class="text-xs text-gray-500 dark:text-gray-400">
                                                        oleh {{ $review->reviewer?->name ?? 'Admin' }}
                                                    </span>
                                                </div>
                                                @if ($review->note)
                                                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                                                        {{ $review->note }}
                                                    </p>
                                                @endif
                                            </div>
                                            <div class="shrink-0 text-xs text-gray-400">
                                                {{ $review->created_at->translatedFormat('l, d M Y H:i') }}
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif
            </div>

            {{-- Footer with Actions --}}
            @if ($progress['canSubmit'])
                <x-slot name="footer">
                    <div class="flex items-center justify-between">
                        <div class="text-sm text-gray-500 dark:text-gray-400">
                            @if ($progress['lastSubmittedAt'])
                                Terakhir diajukan: {{ $progress['lastSubmittedAt'] }}
                            @endif
                        </div>

                        <div class="flex items-center gap-2">
                            {{ $this->submitVerificationAction }}
                        </div>
                    </div>
                </x-slot>
            @endif
        </x-filament::section>
    </div>

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