@php
    $hasEntity = $progress['entity'] !== null;
    $verification = $progress['verification'];
    $status = $verification?->status;
@endphp

<x-filament::section>
    <x-slot name="heading">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
                {{-- Icon based on type --}}
                @if ($type === 'company')
                    <div class="p-2 rounded-lg bg-info-50 dark:bg-info-500/10">
                        <x-heroicon-o-building-office-2 class="w-6 h-6 text-info-500" />
                    </div>
                @elseif($type === 'media')
                    <div class="p-2 rounded-lg bg-info-50 dark:bg-info-500/10">
                        <x-heroicon-o-newspaper class="w-6 h-6 text-info-500" />
                    </div>
                @else
                    <div class="p-2 rounded-lg bg-info-50 dark:bg-info-500/10">
                        <x-heroicon-o-user-circle class="w-6 h-6 text-info-500" />
                    </div>
                @endif

                <div>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                        {{ $progress['title'] }}
                    </h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">
                        {{ $progress['description'] }}
                    </p>
                </div>
            </div>

            {{-- Status Badge --}}
            @if ($verification)
                <x-filament::badge :color="$status->getColor()" size="lg">
                    {{ $status->getLabel() }}
                </x-filament::badge>
            @else
                <x-filament::badge color="gray" size="lg">
                    Belum Mengajukan
                </x-filament::badge>
            @endif
        </div>
    </x-slot>

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

        {{-- Alert for Revision Notes --}}
        @if ($progress['needsRevision'] && $progress['latestNotes'])
            <div
                class="p-4 rounded-xl bg-warning-50 dark:bg-warning-500/10 border border-warning-200 dark:border-warning-500/20">
                <div class="flex gap-3">
                    <div class="shrink-0">
                        <x-heroicon-s-exclamation-triangle class="w-5 h-5 text-warning-500" />
                    </div>
                    <div>
                        <h4 class="font-medium text-warning-800 dark:text-warning-200">
                            Catatan Revisi dari Admin
                        </h4>
                        <p class="mt-1 text-sm text-warning-700 dark:text-warning-300">
                            {{ $progress['latestNotes'] }}
                        </p>
                        <div class="mt-3">
                            <x-filament::button tag="a" :href="$progress['editUrl']" size="sm" color="warning"
                                icon="heroicon-m-pencil-square">
                                Perbaiki Data
                            </x-filament::button>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        {{-- Alert for Rejection --}}
        @if ($progress['isRejected'] && $progress['latestNotes'])
            <div
                class="p-4 rounded-xl bg-danger-50 dark:bg-danger-500/10 border border-danger-200 dark:border-danger-500/20">
                <div class="flex gap-3">
                    <div class="shrink-0">
                        <x-heroicon-s-x-circle class="w-5 h-5 text-danger-500" />
                    </div>
                    <div>
                        <h4 class="font-medium text-danger-800 dark:text-danger-200">
                            Pengajuan Ditolak
                        </h4>
                        <p class="mt-1 text-sm text-danger-700 dark:text-danger-300">
                            {{ $progress['latestNotes'] }}
                        </p>
                    </div>
                </div>
            </div>
        @endif

        {{-- Success Message for Approved --}}
        @if ($progress['isApproved'])
            <div
                class="p-4 rounded-xl bg-success-50 dark:bg-success-500/10 border border-success-200 dark:border-success-500/20">
                <div class="flex gap-3">
                    <div class="shrink-0">
                        <x-heroicon-s-check-circle class="w-5 h-5 text-success-500" />
                    </div>
                    <div>
                        <h4 class="font-medium text-success-800 dark:text-success-200">
                            Verifikasi Diterima
                        </h4>
                        <p class="mt-1 text-sm text-success-700 dark:text-success-300">
                            Data {{ strtolower($progress['title']) }} Anda telah diverifikasi dan disetujui oleh admin.
                        </p>
                    </div>
                </div>
            </div>
        @endif

        {{-- Pending Message --}}
        @if ($progress['isPending'])
            <div class="p-4 rounded-xl bg-info-50 dark:bg-info-500/10 border border-info-200 dark:border-info-500/20">
                <div class="flex gap-3">
                    <div class="shrink-0">
                        <x-heroicon-s-clock class="w-5 h-5 text-info-500 animate-pulse" />
                    </div>
                    <div>
                        <h4 class="font-medium text-info-800 dark:text-info-200">
                            Menunggu Verifikasi
                        </h4>
                        <p class="mt-1 text-sm text-info-700 dark:text-info-300">
                            Data sedang dalam proses verifikasi oleh admin. Mohon tunggu.
                        </p>
                    </div>
                </div>
            </div>
        @endif

        {{-- No Data Message --}}
        @if (!$hasEntity)
            <div class="p-4 rounded-xl bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
                <div class="flex gap-3">
                    <div class="shrink-0">
                        <x-heroicon-o-information-circle class="w-5 h-5 text-gray-400" />
                    </div>
                    <div>
                        <h4 class="font-medium text-gray-700 dark:text-gray-300">
                            Data Belum Tersedia
                        </h4>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                            Silakan lengkapi data {{ strtolower($progress['title']) }} terlebih dahulu sebelum
                            mengajukan verifikasi.
                        </p>
                        <div class="mt-3">
                            <x-filament::button tag="a" :href="$progress['editUrl']" size="sm" color="gray"
                                icon="heroicon-m-plus">
                                Lengkapi Data
                            </x-filament::button>
                        </div>
                    </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->format('d M Y, H:i') }}
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif
    </div>

    {{-- Footer with Actions --}}
    <x-slot name="footer">
        <div class="flex items-center justify-between">
            <div class="text-sm text-gray-500 dark:text-gray-400">
                @if ($verification)
                    Terakhir diajukan: {{ $verification->updated_at->format('d M Y, H:i') }}
                @endif
            </div>

            <div class="flex items-center gap-2">
                @if ($hasEntity && !$progress['isPending'] && !$progress['isApproved'])
                    <x-filament::button tag="a" :href="$progress['editUrl']" color="gray" size="sm"
                        icon="heroicon-m-pencil">
                        Edit Data
                    </x-filament::button>
                @endif

                @if ($progress['canSubmit'])
                    {{ $submitAction }}
                @endif
            </div>
        </div>
    </x-slot>
</x-filament::section>