<section class="w-full py-16">
    <div class="container mx-auto px-4">
        <div class="max-w-3xl mx-auto bg-white shadow-xl rounded-xl overflow-hidden">
            <!-- Header -->
            <div class="flex items-center gap-3 p-6 border-b border-gray-200">
                <i data-lucide="user" class="h-6 w-6 text-blue-600"></i>
                <h2 class="text-2xl font-headline font-bold text-gray-800">My Profile</h2>
            </div>

            <!-- Loader -->
            <div id="loading" class="text-center text-gray-500 py-10">
                <i data-lucide="loader" class="h-6 w-6 animate-spin inline-block"></i>
                <p class="mt-2">Loading profile...</p>
            </div>

            <!-- Profile Content -->
            <div id="profile-content" class="hidden divide-y divide-gray-200">
                <!-- Section -->
                <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="text-sm font-semibold text-gray-500">Full Name</label>
                        <p id="fullName" class="text-gray-900 font-medium mt-1"></p>
                    </div>
                    <div>
                        <label class="text-sm font-semibold text-gray-500">Email</label>
                        <p id="email" class="text-gray-900 font-medium mt-1"></p>
                    </div>
                </div>

                <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="text-sm font-semibold text-gray-500">Address</label>
                        <p id="address" class="text-gray-900 font-medium mt-1"></p>
                    </div>
                    <div>
                        <label class="text-sm font-semibold text-gray-500">Phone</label>
                        <p id="phone" class="text-gray-900 font-medium mt-1"></p>
                    </div>
                </div>

                <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="text-sm font-semibold text-gray-500">Gender</label>
                        <p id="gender" class="text-gray-900 font-medium mt-1"></p>
                    </div>
                    <div>
                        <label class="text-sm font-semibold text-gray-500">Race</label>
                        <p id="race" class="text-gray-900 font-medium mt-1"></p>
                    </div>
                </div>

                <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="text-sm font-semibold text-gray-500">ID Number</label>
                        <p id="idNumber" class="text-gray-900 font-medium mt-1"></p>
                    </div>
                    <div>
                        <label class="text-sm font-semibold text-gray-500">Date of Birth</label>
                        <p id="dateOfBirth" class="text-gray-900 font-medium mt-1"></p>
                    </div>
                </div>

                <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="text-sm font-semibold text-gray-500">Institution</label>
                        <p id="institution" class="text-gray-900 font-medium mt-1"></p>
                    </div>
                    <div>
                        <label class="text-sm font-semibold text-gray-500">Qualification</label>
                        <p id="qualification" class="text-gray-900 font-medium mt-1"></p>
                    </div>
                </div>

                <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="text-sm font-semibold text-gray-500">Guardian Name</label>
                        <p id="guardianName" class="text-gray-900 font-medium mt-1"></p>
                    </div>
                    <div>
                        <label class="text-sm font-semibold text-gray-500">Guardian Contact</label>
                        <p id="guardianContact" class="text-gray-900 font-medium mt-1"></p>
                    </div>
                </div>

                <div class="p-6">
                    <label class="text-sm font-semibold text-gray-500">Disability Status</label>
                    <p id="disabilityStatus" class="text-gray-900 font-medium mt-1"></p>
                </div>

                <!-- Footer Actions -->
                <div class="p-6 flex justify-between items-center bg-gray-50 rounded-b-xl">
                    <a
                    href="/student/dashboard"
                    class="flex items-center text-gray-600 hover:text-gray-800 transition text-sm"
                    >
                    <i data-lucide="arrow-left" class="h-4 w-4 mr-2"></i>
                    Back to Dashboard
                </a>
                <a
                href="/student/update-profile"
                class="bg-blue-600 hover:bg-blue-700 text-white text-sm px-5 py-2 rounded-md flex items-center"
                >
                <i data-lucide="edit" class="h-4 w-4 mr-2"></i>
                Edit Profile
            </a>
        </div>
    </div>
</div>
</div>
</section>

<script nonce="<%= nonce %>">
    async function fetchProfile() {
        const loading = document.getElementById('loading');
        const profileContent = document.getElementById('profile-content');

        const token = localStorage.getItem('jwtToken');
        if (!token) {
            return Swal.fire({
                icon: 'error',
                title: 'Session Expired',
                text: 'Please log in again.',
                iconColor: '#dc2626',
                background: '#f9fafb',
                customClass: {
                    popup: 'bg-white rounded-lg shadow-lg',
                    title: 'text-gray-900 font-headline',
                    content: 'text-gray-600'
                }
            }).then(() => {
                window.location.href = '/auth/login';
            });
        }

        try {
            const response = await api.get('/api/v1/users/profile', {
                headers: {
                    Authorization: `Bearer ${token}`
                }
            });

            const user = response.data?.user || response.data; // handles both formats
            document.getElementById('fullName').textContent = user.fullName || 'Not provided';
            document.getElementById('email').textContent = user.email || 'Not provided';
            document.getElementById('address').textContent = user.address || 'Not provided';
            document.getElementById('phone').textContent = user.phone || 'Not provided';
            document.getElementById('gender').textContent = user.gender || 'Not provided';
            document.getElementById('race').textContent = user.race || 'Not provided';
            document.getElementById('idNumber').textContent = user.idNumber || 'Not provided';
            document.getElementById('dateOfBirth').textContent = user.dateOfBirth ? new Date(user.dateOfBirth).toLocaleDateString() : 'Not provided';
            document.getElementById('institution').textContent = user.institution || 'Not provided';
            document.getElementById('qualification').textContent = user.qualification || 'Not provided';
            document.getElementById('guardianName').textContent = user.guardianName || 'Not provided';
            document.getElementById('guardianContact').textContent = user.guardianContact || 'Not provided';
            document.getElementById('disabilityStatus').textContent = user.disabilityStatus ? 'Yes' : 'No';

            loading.classList.add('hidden');
            profileContent.classList.remove('hidden');
            lucide.createIcons(); // Safe to re-trigger after content load
        } catch (err) {
            console.error('Error fetching profile:', err);
            loading.classList.add('hidden');
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: err.response?.data?.message || 'Unable to load profile. Please try again.',
                iconColor: '#dc2626',
                background: '#f9fafb',
                customClass: {
                    popup: 'bg-white rounded-lg shadow-lg',
                    title: 'text-gray-900 font-headline',
                    content: 'text-gray-600'
                }
            }).then(() => {
                window.location.href = '/student/dashboard';
            });
        }
    }

    document.addEventListener('DOMContentLoaded', fetchProfile);
</script>
