<script>
    /** @type {import('./$types').PageData} */
    import { onMount } from 'svelte';
    import { fade } from 'svelte/transition';
    
    let { data } = $props();
    let empData = $state({});
    let employee = $state({});
    let contract = $state({});
    let date = $state(new Date().toLocaleDateString());
    let loading = $state(true);
    let copySuccess = $state(false);

    const copyLink = async () => {
        try {
            await navigator.clipboard.writeText(window.location.href);
            copySuccess = true;
            setTimeout(() => {
                copySuccess = false;
            }, 2000);
        } catch (err) {
            console.error('Failed to copy:', err);
        }
    };

    onMount(async () => {
        try {
            empData = await fetch('https://db.cricket.af/employee-verification?code=' + data.code).then((x) => x.json());
            employee = empData.employee;
            contract = empData.contract;
            date = empData.date;
        } catch (error) {
            console.error('Error fetching employee data:', error);
        } finally {
            loading = false;
        }
    });
</script>

<section class="min-h-screen bg-gray-50 py-12 px-4" style="direction: ltr;">
    <div class="max-w-4xl mx-auto">
        {#if loading}
            <div class="bg-white rounded-lg shadow-lg overflow-hidden animate-pulse">
                <!-- Shimmer Header -->
                <div class="from-blue-950 to-blue-900 bg-gradient-to-l px-6 py-4">
                    <div class="h-8 w-48 bg-gray-200 rounded"></div>
                </div>
                
                <!-- Shimmer Content -->
                <div class="p-6">
                    <div class="flex flex-col items-center md:items-start md:flex-row gap-8">
                        <!-- Photo Skeleton -->
                        <div class="w-48 flex-shrink-0 flex flex-col items-center">
                            <div class="w-full h-48 bg-gray-200 rounded-lg mb-4"></div>
                            <div class="w-full h-20 bg-gray-200 rounded-lg"></div>
                        </div>

                        <!-- Details Skeleton -->
                        <div class="w-full flex-grow">
                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                                <!-- English Section Skeleton -->
                                <div class="space-y-3">
                                    <div class="h-6 w-24 bg-gray-200 rounded mb-4"></div>
                                    <div class="space-y-4">
                                        {#each Array(4) as _}
                                            <div class="space-y-2">
                                                <div class="h-4 w-20 bg-gray-200 rounded"></div>
                                                <div class="h-6 w-full bg-gray-200 rounded"></div>
                                            </div>
                                        {/each}
                                    </div>
                                </div>

                                <!-- Pashto Section Skeleton -->
                                <div class="space-y-3">
                                    <div class="h-6 w-24 bg-gray-200 rounded mb-4 ml-auto"></div>
                                    <div class="space-y-4">
                                        {#each Array(4) as _}
                                            <div class="space-y-2">
                                                <div class="h-4 w-20 bg-gray-200 rounded ml-auto"></div>
                                                <div class="h-6 w-full bg-gray-200 rounded"></div>
                                            </div>
                                        {/each}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Footer Skeleton -->
                <div class="bg-gray-50 px-6 py-4">
                    <div class="flex justify-between items-center">
                        <div class="h-4 w-48 bg-gray-200 rounded"></div>
                        <div class="h-8 w-40 bg-gray-200 rounded"></div>
                    </div>
                </div>
            </div>
        {:else if employee.id}
            <div class="bg-white rounded-lg shadow-lg overflow-hidden" transition:fade={{ duration: 300 }}>
                <!-- Header -->
                <div class=" from-blue-950  to-blue-900 bg-gradient-to-l px-6 py-4">
                    <h2 class="text-2xl font-bold text-white">Employee Verification</h2>
                </div>
                
                <!-- Content -->
                <div class="p-6">
                    <div class="flex flex-col items-center md:items-start md:flex-row gap-8">
                        <!-- Photo Section -->
                        <div class="w-48 flex-shrink-0 flex flex-col items-center">
                            <img 
                                src="{'https://db.cricket.af/' + employee.photo}"
                                alt="Employee"
                                class="w-full h-auto object-contain rounded-lg shadow-md mb-4"
                            />
                            <div class="w-full bg-gradient-to-r from-green-50 to-emerald-50 border border-green-100 rounded-lg p-3 shadow-sm text-center">
                                <div class="flex items-center justify-center gap-2 ">
                                    <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                    <span class="text-green-800 font-semibold">
                                        Verified Employee
                                    </span>
                                </div>
                                <div class="mt-1 text-center">
                                    <span class="text-xs text-green-600">
                                        Afghanistan Cricket Board
                                    </span>
                                </div>
                            </div>
                        </div>

                        <!-- Details Section -->
                        <div class="w-full flex-grow">
                           

                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                                
                                <!-- English Section -->
                                <div class="space-y-3">
                                    <div class="flex-1 text-center">
                                    <div class="border-b-2 border-sky-500 pb-2">
                                        <span class="text-sky-600 font-bold">English</span>
                                    </div>
                                </div>
                                    <h3 class="font-bold text-gray-700 mb-4">English Information</h3>
                                    <div class="border-b pb-2">
                                        <span class="text-gray-600 text-sm">Employee ID</span>
                                        <p class="font-semibold">ACB-{employee.id}</p>
                                    </div>
                                    <div class="border-b pb-2">
                                        <span class="text-gray-600 text-sm">Full Name</span>
                                        <p class="font-semibold">{employee.en_first_name + ' ' + employee.en_last_name}</p>
                                    </div>
                                    <div class="border-b pb-2">
                                        <span class="text-gray-600 text-sm">Department</span>
                                        <p class="font-semibold">{contract.department}</p>
                                    </div>
                                    <div class="border-b pb-2">
                                        <span class="text-gray-600 text-sm">Position</span>
                                        <p class="font-semibold">{contract.position}</p>
                                    </div>
                                </div>

                                <!-- Pashto Section -->
                                <div class="space-y-3 text-right" dir="rtl">
                                    
                                    <div class="flex-1 text-cente">
                                        <div class="border-b-2 border-sky-500 pb-2 text-center">
                                            <span class="text-sky-600 font-medium titr-bold">پښتو</span>
                                        </div>
                                    </div>
                                    <h3 class="font-semibold text-gray-700 mb-4 titr-bold">پښتو معلومات</h3>
                                    <div class="border-b pb-2">
                                        <span class="text-gray-600 text-sm titr-bold">د کارمند پېژند</span>
                                        <p class="font-semibold">ACB-{employee.id}</p>
                                    </div>
                                    <div class="border-b pb-2">
                                        <span class="text-gray-600 text-sm titr-bold">بشپړ نوم</span>
                                        <p class="font-semibold nassim-regular">{employee.pa_first_name + ' ' + employee.pa_last_name}</p>
                                    </div>
                                    <div class="border-b pb-2">
                                        <span class="text-gray-600 text-sm titr-bold">څانګه</span>
                                        <p class="font-semibold nassim-regular">{contract.pa_department}</p>
                                    </div>
                                    <div class="border-b pb-2">
                                        <span class="text-gray-600 text-sm titr-bold">دنده</span>
                                        <p class="font-semibold nassim-regular">{contract.pa_position}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Footer -->
                <div class="bg-gray-50 px-6 py-4">
                    <div class="flex flex-col sm:flex-row justify-between items-center gap-4">
                        <p class="text-sm text-gray-600">
                            This verification was generated on {date}
                        </p>
                        <button
                            onclick={copyLink}
                            class="inline-flex items-center px-4 py-2 bg-blue-800 hover:bg-blue-900 text-white text-sm font-medium rounded-md transition-colors duration-200"
                        >
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
                            </svg>
                            {copySuccess ? 'Copied!' : 'Copy Verification Link'}
                        </button>
                    </div>
                </div>
            </div>
        {:else}
            <div class="bg-white rounded-lg shadow-lg p-8 text-center" transition:fade={{ duration: 300 }}>
                <svg class="w-16 h-16 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M12 12h.01M12 12h.01"></path>
                </svg>
                <h3 class="text-xl font-semibold text-gray-900 mb-2">No Employee Found</h3>
                <p class="text-gray-600">
                    The QR code you scanned is invalid or the employee record could not be found.
                </p>
            </div>
        {/if}
    </div>
</section>