@extends('layouts.app')

@section('title', session('locale', 'en') === 'fr' ? 'Paramètres du compte' : 'Account Settings')
@section('page-title', session('locale', 'en') === 'fr' ? 'Paramètres' : 'Settings')

@section('content')
@php
    $lang = session('locale', 'en');
    $tr = $lang === 'fr' ? [
        'account_center'=>'CENTRE DU COMPTE','title'=>'Paramètres du compte','subtitle'=>'Gérez votre profil, votre mot de passe, vos connexions et la sécurité de votre compte.','profile'=>'Informations du profil','profile_help'=>'Mettez à jour votre nom public et vos coordonnées.','security'=>'Mot de passe et sécurité','security_help'=>'Utilisez un mot de passe fort pour protéger votre compte.','devices'=>'Activité de connexion et appareils','devices_help'=>'Consultez tous les appareils actuellement connectés à votre compte.','account'=>'Informations du compte','account_help'=>'Consultez les informations de votre compte UsedStore.','danger'=>'Supprimer le compte','danger_help'=>'Supprimez définitivement votre compte et les informations associées.','name'=>'Nom complet','email'=>'Adresse courriel','phone'=>'Numéro de téléphone','whatsapp'=>'WhatsApp','save_profile'=>'Enregistrer le profil','current_password'=>'Mot de passe actuel','new_password'=>'Nouveau mot de passe','confirm_password'=>'Confirmer le nouveau mot de passe','change_password'=>'Changer le mot de passe','password_help'=>'Utilisez au moins 8 caractères avec des majuscules, des minuscules, des chiffres et des symboles.','current_device'=>'Appareil actuel','active_now'=>'Actif maintenant','last_activity'=>'Dernière activité','logout'=>'Déconnexion','logout_confirm'=>'Déconnecter cet appareil ?','logout_all'=>'Déconnecter tous les autres appareils','logout_all_help'=>'Votre appareil actuel restera connecté.','confirm_password_short'=>'Confirmez votre mot de passe','logout_others'=>'Déconnecter les autres appareils','logout_others_confirm'=>'Déconnecter tous les autres appareils ?','no_sessions'=>'Aucune session de connexion active trouvée.','member_since'=>'Membre depuis','email_status'=>'Statut du courriel','verified'=>'Vérifié','not_verified'=>'Non vérifié','account_id'=>'ID du compte','listings'=>'Annonces','delete_warning'=>'Cette action est irréversible. Vos annonces et vos données seront définitivement supprimées.','delete_password'=>'Confirmez votre mot de passe','delete_button'=>'Supprimer mon compte','delete_confirm'=>'Voulez-vous vraiment supprimer définitivement votre compte ?'
    ] : [
        'account_center'=>'ACCOUNT CENTER','title'=>'Account Settings','subtitle'=>'Manage your profile, password, login activity and account security.','profile'=>'Profile Information','profile_help'=>'Update your public name and contact details.','security'=>'Password & Security','security_help'=>'Use a strong password to protect your account.','devices'=>'Login Activity & Devices','devices_help'=>'Review every device currently signed in to your account.','account'=>'Account Information','account_help'=>'Review information about your UsedStore account.','danger'=>'Delete Account','danger_help'=>'Permanently remove your account and associated information.','name'=>'Full Name','email'=>'Email Address','phone'=>'Phone Number','whatsapp'=>'WhatsApp','save_profile'=>'Save Profile','current_password'=>'Current Password','new_password'=>'New Password','confirm_password'=>'Confirm New Password','change_password'=>'Change Password','password_help'=>'Use at least 8 characters with uppercase letters, lowercase letters, numbers and symbols.','current_device'=>'Current device','active_now'=>'Active now','last_activity'=>'Last activity','logout'=>'Log Out','logout_confirm'=>'Log out this device?','logout_all'=>'Log out all other devices','logout_all_help'=>'Your current device will remain connected.','confirm_password_short'=>'Confirm your password','logout_others'=>'Log Out Other Devices','logout_others_confirm'=>'Log out all other devices?','no_sessions'=>'No active login sessions were found.','member_since'=>'Member Since','email_status'=>'Email Status','verified'=>'Verified','not_verified'=>'Not Verified','account_id'=>'Account ID','listings'=>'Listings','delete_warning'=>'This action cannot be undone. Your listings and account data will be permanently deleted.','delete_password'=>'Confirm Your Password','delete_button'=>'Delete My Account','delete_confirm'=>'Are you sure you want to permanently delete your account?'
    ];
@endphp

<div class="settings-page">
    @if(session('status')) <div class="alert success-alert">{{ session('status') }}</div> @endif
    @if(session('error')) <div class="alert error-alert">{{ session('error') }}</div> @endif
    @if($errors->any())
        <div class="alert error-alert"><ul>@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div>
    @endif

    <section class="settings-hero">
        <div class="settings-avatar">{{ strtoupper(mb_substr($user->name ?? 'U', 0, 1)) }}</div>
        <div><span class="settings-label">{{ $tr['account_center'] }}</span><h1>{{ $tr['title'] }}</h1><p>{{ $tr['subtitle'] }}</p></div>
    </section>

    <div class="settings-layout">
        <aside class="settings-navigation">
            <a href="#profile" class="active">👤 {{ $tr['profile'] }}</a>
            <a href="#security">🔐 {{ $tr['security'] }}</a>
            <a href="#devices">📱 {{ $tr['devices'] }}</a>
            <a href="#account">⚙️ {{ $tr['account'] }}</a>
            <a href="#danger">⚠️ {{ $tr['danger'] }}</a>
        </aside>

        <div class="settings-content">
            <section id="profile" class="settings-card">
                <div class="card-heading"><div class="card-icon">👤</div><div><h2>{{ $tr['profile'] }}</h2><p>{{ $tr['profile_help'] }}</p></div></div>
                <form method="POST" action="{{ route('settings.profile.update') }}">@csrf @method('PATCH')
                    <div class="form-grid">
                        <div class="field"><label for="name">{{ $tr['name'] }}</label><input id="name" type="text" name="name" value="{{ old('name', $user->name) }}" required maxlength="255"></div>
                        <div class="field"><label for="email">{{ $tr['email'] }}</label><input id="email" type="email" name="email" value="{{ old('email', $user->email) }}" required maxlength="255"></div>
                    </div>
                    <div class="form-grid">
                        <div class="field"><label for="phone_number">{{ $tr['phone'] }}</label><input id="phone_number" type="text" name="phone_number" value="{{ old('phone_number', $user->phone_number ?? '') }}" placeholder="+1 514 555 1234" maxlength="30"></div>
                        <div class="field"><label for="whatsapp">{{ $tr['whatsapp'] }}</label><input id="whatsapp" type="text" name="whatsapp" value="{{ old('whatsapp', $user->whatsapp ?? '') }}" placeholder="+1 514 555 1234" maxlength="30"></div>
                    </div>
                    <button type="submit" class="primary-button">{{ $tr['save_profile'] }}</button>
                </form>
            </section>

            <section id="security" class="settings-card">
                <div class="card-heading"><div class="card-icon security">🔐</div><div><h2>{{ $tr['security'] }}</h2><p>{{ $tr['security_help'] }}</p></div></div>
                <form method="POST" action="{{ route('settings.password.update') }}">@csrf @method('PUT')
                    <div class="field"><label for="current_password">{{ $tr['current_password'] }}</label><input id="current_password" type="password" name="current_password" required autocomplete="current-password"></div>
                    <div class="form-grid">
                        <div class="field"><label for="password">{{ $tr['new_password'] }}</label><input id="password" type="password" name="password" required autocomplete="new-password"></div>
                        <div class="field"><label for="password_confirmation">{{ $tr['confirm_password'] }}</label><input id="password_confirmation" type="password" name="password_confirmation" required autocomplete="new-password"></div>
                    </div>
                    <div class="password-help">{{ $tr['password_help'] }}</div>
                    <button type="submit" class="primary-button dark">{{ $tr['change_password'] }}</button>
                </form>
            </section>

            <section id="devices" class="settings-card">
                <div class="card-heading"><div class="card-icon devices">📱</div><div><h2>{{ $tr['devices'] }}</h2><p>{{ $tr['devices_help'] }}</p></div></div>
                <div class="devices-list">
                    @forelse($sessions ?? collect() as $loginSession)
                        <article class="device-card">
                            <div class="device-main"><div class="device-icon">{{ $loginSession->icon }}</div><div class="device-information">
                                <div class="device-title"><h3>{{ $loginSession->device }}</h3>@if($loginSession->is_current)<span class="current-device">{{ $tr['current_device'] }}</span>@endif</div>
                                <p>{{ $loginSession->browser }} · {{ $loginSession->platform }}</p>
                                <div class="device-meta"><span>🌐 {{ $loginSession->ip_address }}</span><span>🕒 {{ $loginSession->is_current ? $tr['active_now'] : $loginSession->last_activity->diffForHumans() }}</span></div>
                                <small>{{ $tr['last_activity'] }}: {{ $loginSession->last_activity->format('M d, Y · h:i A') }}</small>
                            </div></div>
                            @unless($loginSession->is_current)
                                <form method="POST" action="{{ route('settings.sessions.destroy', $loginSession->id) }}" onsubmit="return confirm(@js($tr['logout_confirm']))">@csrf @method('DELETE')<button type="submit" class="logout-device-button">{{ $tr['logout'] }}</button></form>
                            @endunless
                        </article>
                    @empty
                        <div class="empty-devices">{{ $tr['no_sessions'] }}</div>
                    @endforelse
                </div>

                @if(($sessions ?? collect())->where('is_current', false)->count() > 0)
                    <div class="logout-all-box"><div><h3>{{ $tr['logout_all'] }}</h3><p>{{ $tr['logout_all_help'] }}</p></div>
                        <form method="POST" action="{{ route('settings.sessions.destroy-others') }}" onsubmit="return confirm(@js($tr['logout_others_confirm']))">@csrf @method('DELETE')
                            <div class="logout-all-form"><input type="password" name="password" placeholder="{{ $tr['confirm_password_short'] }}" required autocomplete="current-password"><button type="submit">{{ $tr['logout_others'] }}</button></div>
                            @error('password', 'logoutDevices')<small class="device-validation-error">{{ $message }}</small>@enderror
                        </form>
                    </div>
                @endif
            </section>

            <section id="account" class="settings-card">
                <div class="card-heading"><div class="card-icon account">⚙️</div><div><h2>{{ $tr['account'] }}</h2><p>{{ $tr['account_help'] }}</p></div></div>
                <div class="account-information-grid">
                    <div class="information-box"><span>{{ $tr['member_since'] }}</span><strong>{{ $user->created_at ? $user->created_at->format('M d, Y') : '-' }}</strong></div>
                    <div class="information-box"><span>{{ $tr['email_status'] }}</span><strong>{{ $user->hasVerifiedEmail() ? $tr['verified'] : $tr['not_verified'] }}</strong></div>
                    <div class="information-box"><span>{{ $tr['account_id'] }}</span><strong>#{{ $user->id }}</strong></div>
                    <div class="information-box"><span>{{ $tr['listings'] }}</span><strong>{{ method_exists($user, 'products') ? $user->products()->count() : 0 }}</strong></div>
                </div>
            </section>
 
            <section id="danger" class="settings-card danger-card">
                <div class="card-heading"><div class="card-icon danger">⚠️</div><div><h2>{{ $tr['danger'] }}</h2><p>{{ $tr['danger_help'] }}</p></div></div>
                <div class="danger-warning">{{ $tr['delete_warning'] }}</div>
                <form method="POST" action="{{ route('settings.account.destroy') }}" onsubmit="return confirm(@js($tr['delete_confirm']))">@csrf @method('DELETE')
                    <div class="field"><label for="delete_password">{{ $tr['delete_password'] }}</label><input id="delete_password" type="password" name="password" required autocomplete="current-password"></div>
                    <button type="submit" class="danger-button">{{ $tr['delete_button'] }}</button>
                </form>
            </section>
        </div>
    </div>
</div>

<style>
*{box-sizing:border-box}html{scroll-behavior:smooth}.settings-page{width:100%;max-width:1250px;margin:0 auto}.alert{margin-bottom:20px;padding:16px 18px;border-radius:16px;font-size:13px;font-weight:750}.alert ul{margin:0;padding-left:20px}.success-alert{border:1px solid #bbf7d0;background:#f0fdf4;color:#166534}.error-alert{border:1px solid #fecaca;background:#fef2f2;color:#991b1b}.settings-hero{display:flex;align-items:center;gap:22px;margin-bottom:27px;padding:30px;border-radius:29px;background:radial-gradient(circle at top right,rgba(255,255,255,.18),transparent 37%),linear-gradient(135deg,#4f46e5,#111827);color:#fff;box-shadow:0 25px 55px rgba(79,70,229,.22)}.settings-avatar{display:flex;align-items:center;justify-content:center;flex:0 0 78px;width:78px;height:78px;border:3px solid rgba(255,255,255,.2);border-radius:25px;background:rgba(255,255,255,.15);font-size:31px;font-weight:950}.settings-label{display:inline-flex;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.15);color:#e0e7ff;font-size:11px;font-weight:950;letter-spacing:.07em}.settings-hero h1{margin:11px 0 5px;font-size:clamp(30px,5vw,43px);font-weight:950;letter-spacing:-.04em}.settings-hero p{margin:0;color:#c7d2fe;font-weight:650}.settings-layout{display:grid;grid-template-columns:255px minmax(0,1fr);gap:22px;align-items:start}.settings-navigation{position:sticky;top:20px;padding:13px;border:1px solid #e2e8f0;border-radius:23px;background:#fff;box-shadow:0 16px 38px rgba(15,23,42,.06)}.settings-navigation a{display:flex;align-items:center;gap:11px;padding:13px 14px;border-radius:14px;color:#475569;text-decoration:none;font-size:13px;font-weight:850;transition:.2s}.settings-navigation a:hover,.settings-navigation a.active{background:#eef2ff;color:#4f46e5}.settings-content{display:grid;gap:22px}.settings-card{padding:27px;border:1px solid #e2e8f0;border-radius:27px;background:#fff;box-shadow:0 18px 45px rgba(15,23,42,.06)}.card-heading{display:flex;align-items:center;gap:14px;margin-bottom:24px}.card-icon{display:flex;align-items:center;justify-content:center;flex:0 0 48px;width:48px;height:48px;border-radius:15px;background:#eef2ff;font-size:20px}.card-icon.security{background:#ecfdf5}.card-icon.devices{background:#ecfeff}.card-icon.account{background:#eff6ff}.card-icon.danger{background:#fef2f2}.card-heading h2{margin:0 0 4px;color:#0f172a;font-size:23px;font-weight:950}.card-heading p{margin:0;color:#64748b;font-size:13px;font-weight:650}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.field{margin-bottom:19px}.field label{display:block;margin-bottom:8px;color:#334155;font-size:13px;font-weight:900}.field input{width:100%;padding:15px 17px;border:1px solid #dbe2ea;border-radius:16px;background:#f8fafc;color:#0f172a;outline:none;font:inherit;font-weight:700;transition:.2s}.field input:focus{border-color:#4f46e5;background:#fff;box-shadow:0 0 0 5px rgba(79,70,229,.1)}.primary-button,.danger-button{display:inline-flex;align-items:center;justify-content:center;min-height:47px;padding:13px 21px;border:0;border-radius:15px;color:#fff;font:inherit;font-size:13px;font-weight:950;cursor:pointer}.primary-button{background:linear-gradient(135deg,#4f46e5,#7c3aed);box-shadow:0 11px 26px rgba(79,70,229,.22)}.primary-button.dark{background:#0f172a}.password-help{margin:-4px 0 18px;padding:13px 15px;border:1px solid #dbeafe;border-radius:14px;background:#eff6ff;color:#1e40af;font-size:12px;font-weight:700;line-height:1.6}.devices-list{display:grid;gap:13px}.device-card{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px;border:1px solid #e2e8f0;border-radius:19px;background:#f8fafc}.device-main{display:flex;align-items:center;gap:15px;min-width:0}.device-icon{display:flex;align-items:center;justify-content:center;flex:0 0 54px;width:54px;height:54px;border-radius:17px;background:#fff;font-size:25px;box-shadow:0 8px 20px rgba(15,23,42,.07)}.device-information{min-width:0}.device-title{display:flex;align-items:center;flex-wrap:wrap;gap:9px}.device-title h3{margin:0;color:#0f172a;font-size:16px;font-weight:950}.current-device{display:inline-flex;padding:5px 9px;border-radius:999px;background:#dcfce7;color:#15803d;font-size:10px;font-weight:950}.device-information p{margin:5px 0 8px;color:#475569;font-size:13px;font-weight:750}.device-meta{display:flex;flex-wrap:wrap;gap:8px}.device-meta span{display:inline-flex;padding:6px 9px;border-radius:999px;background:#fff;color:#64748b;font-size:11px;font-weight:800}.device-information small{display:block;margin-top:8px;color:#94a3b8;font-size:11px;font-weight:700}.logout-device-button{padding:10px 14px;border:1px solid #fecaca;border-radius:13px;background:#fef2f2;color:#dc2626;font:inherit;font-size:12px;font-weight:950;cursor:pointer}.logout-all-box{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:20px;padding:18px;border:1px solid #fde68a;border-radius:18px;background:#fffbeb}.logout-all-box h3{margin:0 0 4px;color:#92400e;font-size:16px;font-weight:950}.logout-all-box p{margin:0;color:#a16207;font-size:12px;font-weight:700}.logout-all-form{display:flex;gap:9px}.logout-all-form input{min-width:210px;padding:11px 13px;border:1px solid #fcd34d;border-radius:13px;background:#fff;outline:none}.logout-all-form button{padding:11px 15px;border:0;border-radius:13px;background:#0f172a;color:#fff;font:inherit;font-size:12px;font-weight:950;cursor:pointer}.device-validation-error{display:block;margin-top:8px;color:#b91c1c;font-weight:800}.empty-devices{padding:25px;border:1px dashed #cbd5e1;border-radius:17px;color:#64748b;text-align:center;font-weight:750}.account-information-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.information-box{padding:17px;border:1px solid #e2e8f0;border-radius:17px;background:#f8fafc}.information-box span,.information-box strong{display:block}.information-box span{margin-bottom:6px;color:#64748b;font-size:12px;font-weight:800}.information-box strong{color:#0f172a;font-size:17px;font-weight:950}.danger-card{border-color:#fecaca}.danger-warning{margin-bottom:19px;padding:15px;border:1px solid #fecaca;border-radius:15px;background:#fef2f2;color:#991b1b;font-size:13px;font-weight:750;line-height:1.6}.danger-button{background:#dc2626}@media(max-width:900px){.settings-layout{grid-template-columns:1fr}.settings-navigation{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.device-card,.logout-all-box{align-items:stretch;flex-direction:column}.logout-device-button{width:100%}.logout-all-form{flex-direction:column}.logout-all-form input,.logout-all-form button{width:100%;min-width:0}}@media(max-width:650px){.settings-hero{align-items:flex-start;flex-direction:column;padding:23px;border-radius:23px}.settings-card{padding:19px;border-radius:22px}.form-grid,.account-information-grid,.settings-navigation{grid-template-columns:1fr}.primary-button,.danger-button{width:100%}}
</style>
@endsection