@php
    $user = auth()->user();
    $initial = strtoupper(substr($user?->name ?? 'U', 0, 1));
    $avatarUrl = $user?->avatar ? asset('storage/'.$user->avatar) : null;
    $firstName = $user?->profile?->first_name
        ?: strtok(trim($user?->name ?? __('common.user')), ' ');
@endphp

<div
    class="relative"
    x-data="{
        open: false,
        avatarUrl: @js($avatarUrl),
        initial: @js($initial),
    }"
    @platform-avatar-changed.window="
        avatarUrl = $event.detail.url;
        if ($event.detail.initial !== undefined) {
            initial = $event.detail.initial;
        }
    "
    @keydown.escape.window="open = false"
>
    <button
        type="button"
        @click="open = !open"
        class="platform-avatar"
        :class="{ 'platform-avatar--image': avatarUrl }"
        aria-label="{{ __('common.profile') }}"
        :aria-expanded="open"
    >
        <img
            x-show="avatarUrl"
            x-cloak
            :src="avatarUrl"
            alt=""
            class="platform-avatar__image"
        >
        <span x-show="!avatarUrl" x-text="initial"></span>
    </button>

    <div
        x-show="open"
        x-transition.opacity
        @click="open = false"
        class="platform-overlay fixed inset-0 z-40 sm:hidden"
        style="display: none;"
        aria-hidden="true"
    ></div>

    <div
        x-show="open"
        @click.outside="open = false"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-1 sm:scale-95"
        x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
        x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-1 sm:scale-95"
        class="profile-panel profile-panel--sheet fixed inset-x-0 bottom-0 z-50 sm:absolute sm:inset-auto sm:right-0 sm:top-full sm:mt-3"
        style="display: none;"
        role="dialog"
        aria-modal="true"
        :aria-label="@js(__('platform.profile_panel_title'))"
    >
        <div class="profile-panel__header">
            <p class="profile-panel__email">{{ $user?->email }}</p>
            <button
                type="button"
                class="profile-panel__close"
                @click="open = false"
                aria-label="{{ __('platform.profile_panel_close') }}"
            >
                <svg class="profile-panel__close-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                </svg>
            </button>
        </div>

        <div class="profile-panel__body">
            <a
                href="{{ route('personal-info.profile-photo') }}"
                class="profile-panel__avatar-link"
                @click="open = false"
            >
                <span
                    class="profile-panel__avatar"
                    :class="{ 'profile-panel__avatar--image': avatarUrl }"
                >
                    <img
                        x-show="avatarUrl"
                        x-cloak
                        :src="avatarUrl"
                        alt=""
                        class="profile-panel__avatar-image"
                    >
                    <span x-show="!avatarUrl" x-text="initial"></span>
                </span>
                <span class="profile-panel__avatar-edit" aria-hidden="true">
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z" />
                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z" />
                    </svg>
                </span>
            </a>

            <h2 class="profile-panel__greeting">
                {{ __('platform.profile_panel_greeting', ['name' => $firstName]) }}
            </h2>

            <a
                href="{{ route('platform.profile') }}"
                class="profile-panel__manage"
                @click="open = false"
            >
                {{ __('platform.profile_panel_manage') }}
            </a>
        </div>

        <div class="profile-panel__footer">
            <div class="profile-panel__languages">
                @foreach (['tr' => 'common.turkish', 'en' => 'common.english'] as $locale => $label)
                    <form method="POST" action="{{ route('locale.change') }}">
                        @csrf
                        <input type="hidden" name="locale" value="{{ $locale }}">
                        <button
                            type="submit"
                            class="profile-panel__lang {{ app()->getLocale() === $locale ? 'profile-panel__lang--active' : '' }}"
                        >
                            {{ __($label) }}
                        </button>
                    </form>
                @endforeach
            </div>

            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button type="submit" class="profile-panel__logout">
                    {{ __('common.logout') }}
                </button>
            </form>
        </div>
    </div>
</div>