<script lang="ts">
    let { data } = $props();
</script>

<h1 class="mt-2 mb-4 text-center text-2xl font-bold">User Profile</h1>

<div class="mb-4 rounded border border-gray-300 bg-white p-6">
    <div class="flex flex-col gap-2">
        <div class="flex items-center gap-3 mb-4">
            <div class="h-12 w-12 rounded-full bg-gray-200 flex items-center justify-center text-xl font-bold text-gray-600">
                {data.user?.user_metadata.display_name?.[0] ?? "U"}
            </div>
            <div>
                <span class="text-lg font-semibold text-gray-800">{data.profile?.display_name}</span>
                <div class="text-sm text-gray-500">{data.user?.email}</div>
            </div>
        </div>
        <div class="flex flex-col gap-1">
            <div>
                <span class="font-medium text-gray-700">Section:</span>
                <span class="text-gray-900">{data.profile?.section.name ?? "N/A"}</span>
            </div>
            <div>
                <span class="font-medium text-gray-700">Position:</span>
                <span class="text-gray-900">{data.profile?.section_position ?? "N/A"}</span>
            </div>
        </div>
        <h2 class="text-lg mb-2 mt-4">User guide</h2>
        <p class="text-gray-700 text-sm leading-relaxed">
            To scan a QR code, head over to Scanner in the top right corner. Click on Start scanning and allow camera permissions.
            If you close and open your browser and your camera is stuck, simply refresh the page or click Stop scanning and then Start scanning again.
            When you scan a QR code, a request is sent to the server to get the user's personal information and to mark their tickets as scanned.
        </p>
        <h2 class="text-lg mb-2 mt-4">Administrator guide</h2>
        <p class="text-gray-700 text-sm leading-relaxed">
            You can view events 
        </p>
    </div>
</div>

<a
    href="/auth/signout"
    class="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 bg-red-500 hover:bg-red-600 text-white font-semibold py-3 px-8 rounded-full shadow-none border border-gray-300 transition"
>
    Sign out
</a>
