@extends('frontend.layouts.app')

@section('title', 'Verifikasi Pemilihan — ' . $event->name)
@section('meta_description', trim(strip_tags($event->description)) ?: 'Halaman verifikasi publik untuk pemilihan ' . $event->name . '. Cek transparansi dan integritas data suara.')

@section('page-style')
<style>
    @keyframes rotateCircle {
        from { stroke-dashoffset: 440; }
        to { stroke-dashoffset: var(--dashoffset); }
    }
    .score-circle-fill {
        animation: rotateCircle 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
</style>
@endsection

@section('content')
<div class="container-main py-10">
    <!-- Breadcrumbs -->
    <div class="mb-6">
        <a href="{{ route('landing') }}" class="inline-flex items-center gap-1.5 text-sm font-semibold text-primary hover:text-primary-hover transition-colors">
            <iconify-icon icon="ph:arrow-left-bold" class="align-middle"></iconify-icon>
            Kembali ke Beranda
        </a>
    </div>

    <!-- Header Section -->
    <div class="text-center mb-10 animate-fade-in-up">
        <div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold bg-primary/10 text-primary mb-4 border border-primary/20">
            Pusat Verifikasi Pemilihan
        </div>
        <h1 class="mb-4 text-3xl md:text-5xl font-extrabold tracking-tight text-dark font-heading leading-tight">{{ $event->name }}</h1>
        
        <div class="flex justify-center items-center gap-3 flex-wrap">
            @php
                $statusLabel = match($event->status) {
                    'draft'     => ['label' => 'Draft', 'icon' => 'ph:pencil-line', 'class' => 'bg-gray-100 text-gray-700 border border-gray-200'],
                    'published' => ['label' => 'Dipublikasikan', 'icon' => 'ph:paper-plane-tilt', 'class' => 'bg-primary/10 text-primary border border-primary/20'],
                    'active'    => ['label' => 'Sedang Berlangsung', 'icon' => 'ph:play-circle', 'class' => 'bg-success/10 text-success border border-success/20'],
                    'closed'    => ['label' => 'Ditutup', 'icon' => 'ph:stop-circle', 'class' => 'bg-warning/10 text-yellow-700 border border-warning/20'],
                    'archived'  => ['label' => 'Diarsip', 'icon' => 'ph:archive', 'class' => 'bg-slate-200 text-slate-700 border border-slate-300'],
                    default     => ['label' => ucfirst($event->status), 'icon' => 'ph:info', 'class' => 'bg-gray-100 text-gray-700 border border-gray-200'],
                };
            @endphp
            <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold {{ $statusLabel['class'] }}">
                <iconify-icon icon="{{ $statusLabel['icon'] }}"></iconify-icon>
                {{ $statusLabel['label'] }}
            </span>
            
            @if($event->starts_at)
            <span class="inline-flex items-center gap-1 text-xs text-graytext">
                <iconify-icon icon="ph:calendar" class="align-middle"></iconify-icon>
                Mulai: {{ $event->starts_at->format('d M Y, H:i') }} WIB
            </span>
            @endif
            @if($event->ends_at)
            <span class="inline-flex items-center gap-1 text-xs text-graytext">
                <iconify-icon icon="ph:calendar-check" class="align-middle"></iconify-icon>
                Selesai: {{ $event->ends_at->format('d M Y, H:i') }} WIB
            </span>
            @endif
        </div>
    </div>

    <!-- Main Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
        
        <!-- Left Column: Integrity Score & Indicators -->
        <div class="lg:col-span-1 flex flex-col gap-6">
            @php
                $score = 0;
                if ($integrityIndicators['event_locked']) $score += 20;
                if ($integrityIndicators['candidates_locked']) $score += 20;
                if ($integrityIndicators['voters_locked']) $score += 20;
                if ($integrityIndicators['vote_count_valid']) $score += 20;
                if ($hashStats['total_votes'] === 0 || $hashStats['chain_valid']) $score += 20;
                
                $dashoffset = 440 - (440 * $score) / 100;
            @endphp

            <!-- Integrity Score Card -->
            <div class="glass-card p-6 md:p-8 text-center animate-fade-in-up">
                <div class="mb-4">
                    <h3 class="text-lg font-bold text-dark font-heading">Integrity Score</h3>
                    <p class="text-xs text-graytext mt-1">Skor Kepercayaan Pemilihan</p>
                </div>
                
                <!-- Circular Score Progress -->
                <div class="relative w-40 h-40 mx-auto my-6 flex items-center justify-center">
                    <svg class="w-full h-full transform -rotate-90">
                        <circle cx="80" cy="80" r="70" stroke="rgba(0,132,255,0.06)" stroke-width="12" fill="transparent" />
                        <circle cx="80" cy="80" r="70" stroke="#0084FF" stroke-width="12" fill="transparent" 
                            stroke-dasharray="440" 
                            stroke-dashoffset="440"
                            style="--dashoffset: {{ $dashoffset }};"
                            class="score-circle-fill" />
                    </svg>
                    <div class="absolute text-center">
                        <span class="text-5xl font-extrabold text-dark font-heading">{{ $score }}</span>
                        <span class="text-xl font-bold text-graytext font-heading">%</span>
                    </div>
                </div>
                
                @if($score === 100)
                <div class="text-success font-semibold text-sm flex items-center justify-center gap-1.5 py-2 px-4 bg-success/5 border border-success/15 rounded-xl">
                    <iconify-icon icon="ph:shield-check-fill" width="18" class="align-middle"></iconify-icon>
                    Fully Secured & Verified
                </div>
                @elseif($score >= 60)
                <div class="text-warning font-semibold text-sm flex items-center justify-center gap-1.5 py-2 px-4 bg-warning/5 border border-warning/15 rounded-xl">
                    <iconify-icon icon="ph:shield-warning-fill" width="18" class="align-middle"></iconify-icon>
                    Partially Verified
                </div>
                @else
                <div class="text-danger font-semibold text-sm flex items-center justify-center gap-1.5 py-2 px-4 bg-danger/5 border border-danger/15 rounded-xl">
                    <iconify-icon icon="ph:shield-slash-fill" width="18" class="align-middle"></iconify-icon>
                    Integrity Compromised
                </div>
                @endif
            </div>
            
            <!-- Integrity Indicators List -->
            <div class="glass-card p-6 md:p-8 animate-fade-in-up" style="animation-delay: 100ms;">
                <h3 class="text-lg font-bold text-dark font-heading mb-4 flex items-center gap-2">
                    <iconify-icon icon="ph:lock-laminated" class="text-primary" width="20"></iconify-icon>
                    Status Integritas Pemilihan
                </h3>
                <div class="space-y-4">
                    <!-- Indicator 1: Event Locked -->
                    <div class="flex items-start gap-3.5 p-3.5 rounded-xl transition-all duration-300 {{ $integrityIndicators['event_locked'] ? 'bg-success/5 border border-success/15' : 'bg-black/[0.02] border border-black/5' }}">
                        <div class="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 {{ $integrityIndicators['event_locked'] ? 'bg-success text-white' : 'bg-black/[0.06] text-graytext' }}">
                            <iconify-icon icon="{{ $integrityIndicators['event_locked'] ? 'ph:lock-fill' : 'ph:lock-key-open-light' }}" width="16"></iconify-icon>
                        </div>
                        <div>
                            <div class="font-bold text-sm text-dark">Konfigurasi Event {{ $integrityIndicators['event_locked'] ? 'Terkunci' : 'Terbuka' }}</div>
                            <div class="text-xs text-graytext mt-0.5 leading-relaxed">
                                {{ $integrityIndicators['event_locked'] ? 'Event sudah dipublikasikan dan pengaturan event dilindungi secara permanen.' : 'Event masih dalam status draft dan konfigurasinya masih dapat diedit.' }}
                            </div>
                        </div>
                    </div>

                    <!-- Indicator 2: Candidates Locked -->
                    <div class="flex items-start gap-3.5 p-3.5 rounded-xl transition-all duration-300 {{ $integrityIndicators['candidates_locked'] ? 'bg-success/5 border border-success/15' : 'bg-black/[0.02] border border-black/5' }}">
                        <div class="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 {{ $integrityIndicators['candidates_locked'] ? 'bg-success text-white' : 'bg-black/[0.06] text-graytext' }}">
                            <iconify-icon icon="{{ $integrityIndicators['candidates_locked'] ? 'ph:user-list-fill' : 'ph:user-list-light' }}" width="16"></iconify-icon>
                        </div>
                        <div>
                            <div class="font-bold text-sm text-dark">Daftar Kandidat {{ $integrityIndicators['candidates_locked'] ? 'Terkunci' : 'Terbuka' }}</div>
                            <div class="text-xs text-graytext mt-0.5 leading-relaxed">
                                {{ $integrityIndicators['candidates_locked'] ? 'Daftar calon atau kandidat pemilihan telah terkunci dan tidak dapat diubah.' : 'Kandidat masih dalam proses penyusunan dan dapat dimodifikasi.' }}
                            </div>
                        </div>
                    </div>

                    <!-- Indicator 3: Voters Locked -->
                    <div class="flex items-start gap-3.5 p-3.5 rounded-xl transition-all duration-300 {{ $integrityIndicators['voters_locked'] ? 'bg-success/5 border border-success/15' : 'bg-black/[0.02] border border-black/5' }}">
                        <div class="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 {{ $integrityIndicators['voters_locked'] ? 'bg-success text-white' : 'bg-black/[0.06] text-graytext' }}">
                            <iconify-icon icon="{{ $integrityIndicators['voters_locked'] ? 'ph:users-fill' : 'ph:users-light' }}" width="16"></iconify-icon>
                        </div>
                        <div>
                            <div class="font-bold text-sm text-dark">Daftar Pemilih {{ $integrityIndicators['voters_locked'] ? 'Terkunci' : 'Terbuka' }}</div>
                            <div class="text-xs text-graytext mt-0.5 leading-relaxed">
                                {{ $integrityIndicators['voters_locked'] ? 'Daftar pemilih sah (voter list) telah disegel dan tidak dapat ditambah/dikurangi.' : 'Daftar pemilih masih dapat disesuaikan oleh panitia.' }}
                            </div>
                        </div>
                    </div>

                    <!-- Indicator 4: Vote Count Valid -->
                    <div class="flex items-start gap-3.5 p-3.5 rounded-xl transition-all duration-300 {{ $integrityIndicators['vote_count_valid'] ? 'bg-success/5 border border-success/15' : 'bg-danger/5 border border-danger/15' }}">
                        <div class="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 {{ $integrityIndicators['vote_count_valid'] ? 'bg-success text-white' : 'bg-danger text-white' }}">
                            <iconify-icon icon="{{ $integrityIndicators['vote_count_valid'] ? 'ph:check-bold' : 'ph:x-bold' }}" width="16"></iconify-icon>
                        </div>
                        <div>
                            <div class="font-bold text-sm text-dark">Jumlah Suara {{ $integrityIndicators['vote_count_valid'] ? 'Konsisten' : 'Gagal' }}</div>
                            <div class="text-xs text-graytext mt-0.5 leading-relaxed">
                                {{ $integrityIndicators['vote_count_valid'] ? "Jumlah suara masuk ($totalVotes) konsisten dengan riwayat aktivitas sistem." : 'Terdapat ketidakcocokan jumlah suara dalam database.' }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right Column: Stats, Hash Chain, Info -->
        <div class="lg:col-span-2 flex flex-col gap-6">
            
            <!-- Statistics Grid -->
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 animate-fade-in-up">
                <!-- Stat 1: Total Voters -->
                <div class="glass-card p-5 flex flex-col justify-between">
                    <div class="flex justify-between items-start mb-3">
                        <div class="w-10 h-10 bg-primary/10 rounded-xl flex items-center justify-center text-primary">
                            <iconify-icon icon="ph:users-three" width="22"></iconify-icon>
                        </div>
                        <span class="text-[10px] uppercase font-bold tracking-wider text-graytext bg-black/[0.03] px-2.5 py-0.5 rounded-full">Pemilih</span>
                    </div>
                    <div>
                        <div class="text-3xl font-extrabold text-dark font-heading leading-none">{{ number_format($totalVoters) }}</div>
                        <div class="text-xs text-graytext mt-1.5 font-medium">Pemilih Terdaftar</div>
                    </div>
                </div>

                <!-- Stat 2: Verified Voters -->
                <div class="glass-card p-5 flex flex-col justify-between">
                    <div class="flex justify-between items-start mb-3">
                        <div class="w-10 h-10 bg-success/10 rounded-xl flex items-center justify-center text-success">
                            <iconify-icon icon="ph:user-focus" width="22"></iconify-icon>
                        </div>
                        <span class="text-[10px] uppercase font-bold tracking-wider text-success bg-success/10 px-2.5 py-0.5 rounded-full">OTP</span>
                    </div>
                    <div>
                        <div class="text-3xl font-extrabold text-dark font-heading leading-none">{{ number_format($verifiedVoters) }}</div>
                        <div class="text-xs text-graytext mt-1.5 font-medium">Terverifikasi OTP</div>
                    </div>
                </div>

                <!-- Stat 3: Total Votes -->
                <div class="glass-card p-5 flex flex-col justify-between">
                    <div class="flex justify-between items-start mb-3">
                        <div class="w-10 h-10 bg-purple-100 rounded-xl flex items-center justify-center text-purple-600">
                            <iconify-icon icon="ph:ballot" width="22"></iconify-icon>
                        </div>
                        <span class="text-[10px] uppercase font-bold tracking-wider text-purple-600 bg-purple-50 px-2.5 py-0.5 rounded-full">Suara</span>
                    </div>
                    <div>
                        <div class="text-3xl font-extrabold text-dark font-heading leading-none">{{ number_format($totalVotes) }}</div>
                        <div class="text-xs text-graytext mt-1.5 font-medium">Total Suara Masuk</div>
                    </div>
                </div>

                <!-- Stat 4: Participation Rate -->
                <div class="glass-card p-5 flex flex-col justify-between">
                    <div class="flex justify-between items-start mb-3">
                        <div class="w-10 h-10 bg-warning/10 rounded-xl flex items-center justify-center text-warning">
                            <iconify-icon icon="ph:chart-pie-slice" width="22"></iconify-icon>
                        </div>
                        <span class="text-[10px] uppercase font-bold tracking-wider text-warning bg-warning/10 px-2.5 py-0.5 rounded-full">Tingkat</span>
                    </div>
                    <div>
                        <div class="text-3xl font-extrabold text-dark font-heading leading-none">{{ $participationRate }}%</div>
                        <div class="text-xs text-graytext mt-1.5 font-medium mb-2">Tingkat Partisipasi</div>
                        <div class="w-full h-1.5 bg-black/[0.04] rounded-full overflow-hidden">
                            <div class="h-full bg-gradient-to-r from-primary to-success rounded-full transition-all duration-1000" style="width: {{ min($participationRate, 100) }}%"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Hash Chain Verification Card -->
            <div class="glass-card p-6 md:p-8 animate-fade-in-up" style="animation-delay: 150ms;">
                <h3 class="text-lg font-bold text-dark font-heading mb-4 flex items-center gap-2">
                    <iconify-icon icon="ph:link-bold" class="text-primary" width="20"></iconify-icon>
                    Verifikasi Kriptografis (Hash Chain)
                </h3>
                
                @if($hashStats['total_votes'] === 0)
                <div class="flex flex-col sm:flex-row items-center gap-4 p-5 rounded-2xl bg-black/[0.02] border border-black/5">
                    <div class="w-12 h-12 rounded-full bg-black/[0.04] text-graytext flex items-center justify-center flex-shrink-0">
                        <iconify-icon icon="ph:database-light" width="24"></iconify-icon>
                    </div>
                    <div class="text-center sm:text-left">
                        <h4 class="text-sm font-bold text-dark font-heading">Belum Ada Suara Masuk</h4>
                        <p class="text-xs text-graytext mt-0.5 leading-relaxed">Rantai hash (SHA-256 chain) akan otomatis diverifikasi secara real-time setelah suara pertama masuk.</p>
                    </div>
                </div>
                @elseif($hashStats['chain_valid'])
                <div class="flex flex-col sm:flex-row items-center gap-4 p-5 rounded-2xl bg-success/5 border border-success/20">
                    <div class="w-12 h-12 rounded-full bg-success text-white flex items-center justify-center flex-shrink-0 shadow-lg shadow-success/20">
                        <iconify-icon icon="ph:shield-check" width="24"></iconify-icon>
                    </div>
                    <div class="text-center sm:text-left">
                        <h4 class="text-sm font-bold text-emerald-950 font-heading">Rantai Hash Terverifikasi Valid</h4>
                        <p class="text-xs text-emerald-800/80 mt-0.5 leading-relaxed">Seluruh <strong>{{ number_format($hashStats['total_votes']) }}</strong> suara terhubung dalam rantai hash SHA-256 secara aman. Tidak ada manipulasi atau modifikasi data terdeteksi.</p>
                    </div>
                </div>
                @else
                <div class="flex flex-col sm:flex-row items-center gap-4 p-5 rounded-2xl bg-danger/5 border border-danger/20">
                    <div class="w-12 h-12 rounded-full bg-danger text-white flex items-center justify-center flex-shrink-0 shadow-lg shadow-danger/20">
                        <iconify-icon icon="ph:warning-octagon" width="24"></iconify-icon>
                    </div>
                    <div class="text-center sm:text-left">
                        <h4 class="text-sm font-bold text-red-950 font-heading">Rantai Kriptografi Terputus!</h4>
                        <p class="text-xs text-red-800/80 mt-0.5 leading-relaxed">Terjadi kegagalan verifikasi integritas pada suara <strong>#{{ $hashStats['broken_at'] }}</strong>. Data suara mungkin telah dimodifikasi langsung di luar sistem. Harap hubungi administrator.</p>
                    </div>
                </div>
                @endif
                
                <div class="mt-4 p-4 rounded-xl bg-primary/5 border border-primary/10 flex items-start gap-3">
                    <iconify-icon icon="ph:info" class="text-primary mt-0.5 flex-shrink-0" width="18"></iconify-icon>
                    <div class="text-xs text-primary leading-relaxed">
                        <strong>Kerahasiaan Terjamin:</strong> Rantai hash mengaitkan urutan transaksi masuk secara matematis tanpa menyimpan hubungan antara identitas pemilih dengan pilihan kandidatnya. Anonimitas pilihan Anda dijamin 100%.
                    </div>
                </div>
            </div>

            <!-- Transparency Information -->
            <div class="glass-card p-6 md:p-8 animate-fade-in-up" style="animation-delay: 200ms;">
                <h3 class="text-lg font-bold text-dark font-heading mb-3 flex items-center gap-2">
                    <iconify-icon icon="ph:eye" class="text-primary" width="20"></iconify-icon>
                    Informasi Transparansi &amp; Keamanan
                </h3>
                <div class="text-sm text-graytext leading-relaxed space-y-3">
                    <p>
                        Musyawara berkomitmen menyelenggarakan pemilihan yang jujur, transparan, dan adil. Halaman ini berfungsi sebagai pos audit publik di mana siapa saja dapat memantau jalannya pemilihan tanpa perlu login.
                    </p>
                    <p>
                        Teknologi <strong>SHA-256 Hash Chain</strong> bekerja serupa dengan blockchain. Setiap suara yang masuk memuat tanda tangan digital (hash) yang dihitung dari data suara tersebut dan digabungkan dengan hash dari suara sebelumnya. Jika ada data suara yang diubah, dihapus, atau disisipkan secara ilegal, rantai hash akan langsung terputus dan status integritas akan menampilkan peringatan bahaya secara real-time.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection