@if(Auth::user()->isAdmin())
    <x-app-layout>
        <x-slot name="header">
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                {{ __('Profile') }}
            </h2>
        </x-slot>

        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
                <div class="p-4 sm:p-8 bg-white shadow sm:rounded-lg">
                    <div class="max-w-xl">
                        @include('profile.partials.update-profile-information-form')
                    </div>
                </div>

                <div class="p-4 sm:p-8 bg-white shadow sm:rounded-lg">
                    <div class="max-w-xl">
                        @include('profile.partials.update-password-form')
                    </div>
                </div>

                <div class="p-4 sm:p-8 bg-white shadow sm:rounded-lg">
                    <div class="max-w-xl">
                        @include('profile.partials.delete-user-form')
                    </div>
                </div>
            </div>
        </div>
    </x-app-layout>
@else
    <x-main-layout :title="'Account Settings'">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10 sm:py-16 space-y-8">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div>
                    <h1 class="text-2xl sm:text-3xl font-black text-white uppercase tracking-tight">Account <span class="text-pink-600">Settings</span></h1>
                    <p class="text-xs sm:text-sm text-gray-400 mt-1">Manage your Fibbers archive login credentials and personal details.</p>
                </div>
                <div>
                    <a href="{{ route('community.show', [Auth::user(), Auth::user()->slug]) }}" class="inline-flex items-center gap-2 px-4 py-2 rounded-none bg-white/5 hover:bg-white/10 border border-white/15 text-xs font-bold uppercase tracking-wider text-gray-300 hover:text-white transition">
                        &larr; View Contributor Profile
                    </a>
                </div>
            </div>

            @if (session('status') === 'profile-updated')
                <div class="p-4 bg-green-950/40 border border-green-500/30 rounded-none text-green-400 text-xs font-bold uppercase tracking-wider">
                    Profile updated successfully.
                </div>
            @endif

            @if (session('status') === 'password-updated')
                <div class="p-4 bg-green-950/40 border border-green-500/30 rounded-none text-green-400 text-xs font-bold uppercase tracking-wider">
                    Password updated successfully.
                </div>
            @endif

            <!-- Update Information -->
            <div class="glass-panel p-6 sm:p-8 rounded-none border-white/10">
                <h2 class="text-lg font-bold text-white uppercase tracking-wide mb-1">Profile Information</h2>
                <p class="text-xs text-gray-400 mb-6">Update your account's display name and email address.</p>

                <form method="post" action="{{ route('profile.update') }}" class="space-y-4 max-w-xl">
                    @csrf
                    @method('patch')

                    <div>
                        <label for="first_name" class="block text-xs font-bold uppercase tracking-widest text-gray-300 mb-1.5">First Name</label>
                        <input id="first_name" name="first_name" type="text" class="w-full bg-black/50 border border-white/15 focus:border-pink-500 focus:ring-1 focus:ring-pink-500 rounded-none px-4 py-2.5 text-sm text-white placeholder-gray-500 transition-all outline-none" value="{{ old('first_name', $user->first_name) }}" required autofocus autocomplete="given-name" />
                        <x-input-error class="mt-2 text-pink-500 text-xs font-semibold" :messages="$errors->get('first_name')" />
                    </div>

                    <div>
                        <label for="last_name" class="block text-xs font-bold uppercase tracking-widest text-gray-300 mb-1.5">Last Name</label>
                        <input id="last_name" name="last_name" type="text" class="w-full bg-black/50 border border-white/15 focus:border-pink-500 focus:ring-1 focus:ring-pink-500 rounded-none px-4 py-2.5 text-sm text-white placeholder-gray-500 transition-all outline-none" value="{{ old('last_name', $user->last_name) }}" required autocomplete="family-name" />
                        <x-input-error class="mt-2 text-pink-500 text-xs font-semibold" :messages="$errors->get('last_name')" />
                    </div>

                    <div>
                        <label for="email" class="block text-xs font-bold uppercase tracking-widest text-gray-300 mb-1.5">Email Address</label>
                        <input id="email" name="email" type="email" class="w-full bg-black/50 border border-white/15 focus:border-pink-500 focus:ring-1 focus:ring-pink-500 rounded-none px-4 py-2.5 text-sm text-white placeholder-gray-500 transition-all outline-none" value="{{ old('email', $user->email) }}" required autocomplete="username" />
                        <x-input-error class="mt-2 text-pink-500 text-xs font-semibold" :messages="$errors->get('email')" />
                    </div>

                    <div class="pt-2">
                        <button type="submit" class="px-6 py-2.5 bg-pink-600 hover:bg-pink-700 text-white text-xs font-bold uppercase tracking-wider rounded-none shadow-lg shadow-pink-600/30 transition">
                            Save Details
                        </button>
                    </div>
                </form>
            </div>

            <!-- Update Password -->
            <div class="glass-panel p-6 sm:p-8 rounded-none border-white/10">
                <h2 class="text-lg font-bold text-white uppercase tracking-wide mb-1">Update Password</h2>
                <p class="text-xs text-gray-400 mb-6">Ensure your account is using a long, random password to stay secure.</p>

                <form method="post" action="{{ route('password.update') }}" class="space-y-4 max-w-xl">
                    @csrf
                    @method('put')

                    <div>
                        <label for="update_password_current_password" class="block text-xs font-bold uppercase tracking-widest text-gray-300 mb-1.5">Current Password</label>
                        <input id="update_password_current_password" name="current_password" type="password" class="w-full bg-black/50 border border-white/15 focus:border-pink-500 focus:ring-1 focus:ring-pink-500 rounded-none px-4 py-2.5 text-sm text-white placeholder-gray-500 transition-all outline-none" autocomplete="current-password" />
                        <x-input-error :messages="$errors->updatePassword->get('current_password')" class="mt-2 text-pink-500 text-xs font-semibold" />
                    </div>

                    <div>
                        <label for="update_password_password" class="block text-xs font-bold uppercase tracking-widest text-gray-300 mb-1.5">New Password</label>
                        <input id="update_password_password" name="password" type="password" class="w-full bg-black/50 border border-white/15 focus:border-pink-500 focus:ring-1 focus:ring-pink-500 rounded-none px-4 py-2.5 text-sm text-white placeholder-gray-500 transition-all outline-none" autocomplete="new-password" />
                        <x-input-error :messages="$errors->updatePassword->get('password')" class="mt-2 text-pink-500 text-xs font-semibold" />
                    </div>

                    <div>
                        <label for="update_password_password_confirmation" class="block text-xs font-bold uppercase tracking-widest text-gray-300 mb-1.5">Confirm Password</label>
                        <input id="update_password_password_confirmation" name="password_confirmation" type="password" class="w-full bg-black/50 border border-white/15 focus:border-pink-500 focus:ring-1 focus:ring-pink-500 rounded-none px-4 py-2.5 text-sm text-white placeholder-gray-500 transition-all outline-none" autocomplete="new-password" />
                        <x-input-error :messages="$errors->updatePassword->get('password_confirmation')" class="mt-2 text-pink-500 text-xs font-semibold" />
                    </div>

                    <div class="pt-2">
                        <button type="submit" class="px-6 py-2.5 bg-pink-600 hover:bg-pink-700 text-white text-xs font-bold uppercase tracking-wider rounded-none shadow-lg shadow-pink-600/30 transition">
                            Update Password
                        </button>
                    </div>
                </form>
            </div>

            <!-- Delete Account -->
            <div class="glass-panel p-6 sm:p-8 rounded-none border-red-500/20 bg-red-500/[0.02]">
                <h2 class="text-lg font-bold text-red-400 uppercase tracking-wide mb-1">Delete Account</h2>
                <p class="text-xs text-gray-400 mb-6">Once your account is deleted, your contributions will remain in the archive, but you will no longer be able to log in.</p>

                <form method="post" action="{{ route('profile.destroy') }}" onsubmit="return confirm('Are you sure you want to delete your account? This action cannot be undone.')" class="space-y-4 max-w-xl">
                    @csrf
                    @method('delete')

                    <div>
                        <label for="delete_account_password" class="block text-xs font-bold uppercase tracking-widest text-gray-300 mb-1.5">Confirm Your Password</label>
                        <input id="delete_account_password" name="password" type="password" class="w-full bg-black/50 border border-white/15 focus:border-red-500 focus:ring-1 focus:ring-red-500 rounded-none px-4 py-2.5 text-sm text-white placeholder-gray-500 transition-all outline-none" placeholder="Enter password to confirm deletion" required />
                        <x-input-error :messages="$errors->userDeletion->get('password')" class="mt-2 text-pink-500 text-xs font-semibold" />
                    </div>

                    <div class="pt-2">
                        <button type="submit" class="px-6 py-2.5 bg-red-600 hover:bg-red-700 text-white text-xs font-bold uppercase tracking-wider rounded-none transition">
                            Delete Account
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </x-main-layout>
@endif