@extends('admin.layout')

@section('title', 'Profile Settings')
@section('page-title', 'Profile Settings')
@section('page-subtitle', 'Manage your account information, security settings, and preferences')

@section('breadcrumb')
    <span class="breadcrumb-item">Admin</span>
    <span class="breadcrumb-separator">/</span>
    <span class="breadcrumb-item active">Profile</span>
@endsection

@push('header-actions')
    <button class="btn btn-secondary" onclick="resetToDefaults()">
        <i class="fas fa-undo"></i>
        Reset
    </button>
    <button class="btn btn-primary" onclick="saveAllChanges()">
        <i class="fas fa-save"></i>
        Save All
    </button>
@endpush

@section('content')
    <!-- Profile Header -->
    <div class="profile-header">
        <div class="profile-avatar-section">
            <div class="profile-avatar">
                <img id="avatarImage" src="{{ auth()->user()->avatar ? Storage::url(auth()->user()->avatar) : asset('images/default-avatar.png') }}" alt="Profile Avatar">
                <div class="avatar-overlay">
                    <button class="btn btn-ghost" onclick="document.getElementById('avatarInput').click()">
                        <i class="fas fa-camera"></i>
                    </button>
                </div>
                <input type="file" id="avatarInput" accept="image/*" style="display: none;" onchange="uploadAvatar(this)">
            </div>
            <div class="avatar-actions">
                <button class="btn btn-primary btn-sm" onclick="document.getElementById('avatarInput').click()">
                    <i class="fas fa-upload"></i>
                    Upload
                </button>
                <button class="btn btn-danger btn-sm" onclick="removeAvatar()">
                    <i class="fas fa-trash"></i>
                    Remove
                </button>
            </div>
        </div>
        
        <div class="profile-info">
            <h2 class="profile-name">{{ auth()->user()->name }}</h2>
            <p class="profile-email">{{ auth()->user()->email }}</p>
            <p class="profile-role">
                <i class="fas fa-shield-alt"></i>
                System Administrator
            </p>
            <p class="profile-last-login">
                <i class="fas fa-clock"></i>
                Last login: {{ auth()->user()->last_login_at ? auth()->user()->last_login_at->diffForHumans() : 'Never' }}
            </p>
        </div>
    </div>

    <!-- Profile Tabs -->
    <div class="profile-tabs">
        <div class="tab-navigation">
            <button class="tab-link active" onclick="showTab('general')">
                <i class="fas fa-user"></i>
                General
            </button>
            <button class="tab-link" onclick="showTab('security')">
                <i class="fas fa-shield-alt"></i>
                Security
            </button>
            <button class="tab-link" onclick="showTab('notifications')">
                <i class="fas fa-bell"></i>
                Notifications
            </button>
            <button class="tab-link" onclick="showTab('preferences')">
                <i class="fas fa-cog"></i>
                Preferences
            </button>
            <button class="tab-link" onclick="showTab('sessions')">
                <i class="fas fa-laptop"></i>
                Sessions
            </button>
        </div>

        <!-- General Information Tab -->
        <div id="generalTab" class="tab-content active">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">Personal Information</div>
                    <div class="card-description">Update your basic profile information</div>
                </div>
                <div class="card-body">
                    <form id="profileForm" onsubmit="updateProfile(event)">
                        <div class="form-grid">
                            <div class="form-group">
                                <label class="form-label">Full Name</label>
                                <input type="text" class="form-control" name="name" value="{{ auth()->user()->name }}" required>
                            </div>
                            
                            <div class="form-group">
                                <label class="form-label">Email Address</label>
                                <input type="email" class="form-control" name="email" value="{{ auth()->user()->email }}" required>
                            </div>
                            
                            <div class="form-group">
                                <label class="form-label">Phone Number</label>
                                <input type="tel" class="form-control" name="phone" value="{{ auth()->user()->phone }}">
                            </div>
                            
                            <div class="form-group">
                                <label class="form-label">Position</label>
                                <input type="text" class="form-control" name="position" value="{{ auth()->user()->position }}">
                            </div>
                            
                            <div class="form-group">
                                <label class="form-label">Department</label>
                                <input type="text" class="form-control" name="department" value="{{ auth()->user()->department }}">
                            </div>
                            
                            <div class="form-group">
                                <label class="form-label">Timezone</label>
                                <select class="form-control form-select" name="timezone">
                                    <option value="UTC" {{ (auth()->user()->timezone ?? 'UTC') === 'UTC' ? 'selected' : '' }}>UTC</option>
                                    <option value="America/New_York" {{ (auth()->user()->timezone ?? '') === 'America/New_York' ? 'selected' : '' }}>Eastern Time</option>
                                    <option value="America/Chicago" {{ (auth()->user()->timezone ?? '') === 'America/Chicago' ? 'selected' : '' }}>Central Time</option>
                                    <option value="America/Denver" {{ (auth()->user()->timezone ?? '') === 'America/Denver' ? 'selected' : '' }}>Mountain Time</option>
                                    <option value="America/Los_Angeles" {{ (auth()->user()->timezone ?? '') === 'America/Los_Angeles' ? 'selected' : '' }}>Pacific Time</option>
                                    <option value="Europe/London" {{ (auth()->user()->timezone ?? '') === 'Europe/London' ? 'selected' : '' }}>London</option>
                                    <option value="Europe/Paris" {{ (auth()->user()->timezone ?? '') === 'Europe/Paris' ? 'selected' : '' }}>Paris</option>
                                    <option value="Asia/Tokyo" {{ (auth()->user()->timezone ?? '') === 'Asia/Tokyo' ? 'selected' : '' }}>Tokyo</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Bio</label>
                            <textarea class="form-control" name="bio" rows="4" placeholder="Tell us about yourself...">{{ auth()->user()->bio }}</textarea>
                        </div>
                        
                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i>
                                Update Profile
                            </button>
                            <button type="button" class="btn btn-secondary" onclick="resetForm('profileForm')">
                                <i class="fas fa-undo"></i>
                                Reset
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Security Tab -->
        <div id="securityTab" class="tab-content">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- Change Password -->
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">Change Password</div>
                        <div class="card-description">Update your account password</div>
                    </div>
                    <div class="card-body">
                        <form id="passwordForm" onsubmit="changePassword(event)">
                            <div class="form-group">
                                <label class="form-label">Current Password</label>
                                <div class="password-input">
                                    <input type="password" class="form-control" name="current_password" required>
                                    <button type="button" class="password-toggle" onclick="togglePassword(this)">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label class="form-label">New Password</label>
                                <div class="password-input">
                                    <input type="password" class="form-control" name="password" required>
                                    <button type="button" class="password-toggle" onclick="togglePassword(this)">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                                <div class="password-strength" id="passwordStrength"></div>
                            </div>
                            
                            <div class="form-group">
                                <label class="form-label">Confirm New Password</label>
                                <div class="password-input">
                                    <input type="password" class="form-control" name="password_confirmation" required>
                                    <button type="button" class="password-toggle" onclick="togglePassword(this)">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <div class="form-actions">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-key"></i>
                                    Change Password
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Two-Factor Authentication -->
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">Two-Factor Authentication</div>
                        <div class="card-description">Add an extra layer of security</div>
                    </div>
                    <div class="card-body">
                        <div class="security-status">
                            <div class="status-indicator {{ (auth()->user()->two_factor_enabled ?? false) ? 'enabled' : 'disabled' }}">
                                <i class="fas fa-{{ (auth()->user()->two_factor_enabled ?? false) ? 'shield-check' : 'shield-slash' }}"></i>
                            </div>
                            <div class="status-info">
                                <div class="status-title">
                                    {{ (auth()->user()->two_factor_enabled ?? false) ? 'Enabled' : 'Disabled' }}
                                </div>
                                <div class="status-description">
                                    {{ (auth()->user()->two_factor_enabled ?? false) ? 'Your account is protected with 2FA' : 'Enable 2FA for better security' }}
                                </div>
                            </div>
                        </div>
                        
                        <form id="twoFactorForm" onsubmit="toggleTwoFactor(event)">
                            <div class="form-group">
                                <label class="form-label">Password Confirmation</label>
                                <input type="password" class="form-control" name="password" placeholder="Enter your password to continue" required>
                            </div>
                            
                            <div class="form-actions">
                                <button type="submit" class="btn {{ (auth()->user()->two_factor_enabled ?? false) ? 'btn-danger' : 'btn-success' }}">
                                    <i class="fas fa-{{ (auth()->user()->two_factor_enabled ?? false) ? 'times' : 'check' }}"></i>
                                    {{ (auth()->user()->two_factor_enabled ?? false) ? 'Disable' : 'Enable' }} 2FA
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Notifications Tab -->
        <div id="notificationsTab" class="tab-content">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">Notification Preferences</div>
                    <div class="card-description">Choose how you want to be notified</div>
                </div>
                <div class="card-body">
                    <form id="notificationsForm" onsubmit="updateNotifications(event)">
                        <div class="notification-settings">
                            <div class="notification-item">
                                <div class="notification-info">
                                    <div class="notification-title">Email Notifications</div>
                                    <div class="notification-description">Receive notifications via email</div>
                                </div>
                                <label class="toggle-switch">
                                    <input type="checkbox" name="email_notifications" {{ (auth()->user()->email_notifications ?? true) ? 'checked' : '' }}>
                                    <span class="toggle-slider"></span>
                                </label>
                            </div>
                            
                            <div class="notification-item">
                                <div class="notification-info">
                                    <div class="notification-title">Push Notifications</div>
                                    <div class="notification-description">Receive browser push notifications</div>
                                </div>
                                <label class="toggle-switch">
                                    <input type="checkbox" name="push_notifications" {{ (auth()->user()->push_notifications ?? true) ? 'checked' : '' }}>
                                    <span class="toggle-slider"></span>
                                </label>
                            </div>
                            
                            <div class="notification-item">
                                <div class="notification-info">
                                    <div class="notification-title">SMS Notifications</div>
                                    <div class="notification-description">Receive notifications via SMS</div>
                                </div>
                                <label class="toggle-switch">
                                    <input type="checkbox" name="sms_notifications" {{ (auth()->user()->sms_notifications ?? false) ? 'checked' : '' }}>
                                    <span class="toggle-slider"></span>
                                </label>
                            </div>
                        </div>
                        
                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i>
                                Save Preferences
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Preferences Tab -->
        <div id="preferencesTab" class="tab-content">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">Application Preferences</div>
                    <div class="card-description">Customize your application experience</div>
                </div>
                <div class="card-body">
                    <form id="preferencesForm" onsubmit="updatePreferences(event)">
                        <div class="form-grid">
                            <div class="form-group">
                                <label class="form-label">Language</label>
                                <select class="form-control form-select" name="language">
                                    <option value="en" {{ (auth()->user()->language ?? 'en') === 'en' ? 'selected' : '' }}>English</option>
                                    <option value="es" {{ (auth()->user()->language ?? '') === 'es' ? 'selected' : '' }}>Spanish</option>
                                    <option value="fr" {{ (auth()->user()->language ?? '') === 'fr' ? 'selected' : '' }}>French</option>
                                    <option value="de" {{ (auth()->user()->language ?? '') === 'de' ? 'selected' : '' }}>German</option>
                                    <option value="it" {{ (auth()->user()->language ?? '') === 'it' ? 'selected' : '' }}>Italian</option>
                                    <option value="pt" {{ (auth()->user()->language ?? '') === 'pt' ? 'selected' : '' }}>Portuguese</option>
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label class="form-label">Theme</label>
                                <select class="form-control form-select" name="theme">
                                    <option value="light" {{ (auth()->user()->theme ?? 'light') === 'light' ? 'selected' : '' }}>Light</option>
                                    <option value="dark" {{ (auth()->user()->theme ?? '') === 'dark' ? 'selected' : '' }}>Dark</option>
                                    <option value="auto" {{ (auth()->user()->theme ?? '') === 'auto' ? 'selected' : '' }}>Auto</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i>
                                Save Preferences
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Sessions Tab -->
        <div id="sessionsTab" class="tab-content">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">Active Sessions</div>
                    <div class="card-description">Manage your login sessions across devices</div>
                </div>
                <div class="card-body">
                    <div class="sessions-list" id="sessionsList">
                        <!-- Sessions will be loaded here -->
                    </div>
                    
                    <div class="session-actions">
                        <button class="btn btn-danger" onclick="revokeAllSessions()">
                            <i class="fas fa-sign-out-alt"></i>
                            Revoke All Other Sessions
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Logout Confirmation Modal -->
    <div id="logoutModal" class="modal" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirm Logout</h5>
                    <button type="button" class="btn-close" onclick="AdminUtils.closeModal('logoutModal')">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to logout? Any unsaved changes will be lost.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="AdminUtils.closeModal('logoutModal')">Cancel</button>
                    <button type="button" class="btn btn-danger" onclick="confirmLogout()">
                        <i class="fas fa-sign-out-alt"></i>
                        Logout
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Revoke Sessions Modal -->
    <div id="revokeSessionsModal" class="modal" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Revoke All Sessions</h5>
                    <button type="button" class="btn-close" onclick="AdminUtils.closeModal('revokeSessionsModal')">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <form onsubmit="confirmRevokeAllSessions(event)">
                    <div class="modal-body">
                        <div class="alert alert-warning">
                            <div class="alert-icon">
                                <i class="fas fa-exclamation-triangle"></i>
                            </div>
                            <div class="alert-content">
                                This will log you out from all other devices and browsers. You will remain logged in on this device.
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Password Confirmation</label>
                            <input type="password" class="form-control" name="password" placeholder="Enter your password to continue" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" onclick="AdminUtils.closeModal('revokeSessionsModal')">Cancel</button>
                        <button type="submit" class="btn btn-danger">
                            <i class="fas fa-sign-out-alt"></i>
                            Revoke All Sessions
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('styles')
<style>
.profile-header {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
    padding: var(--space-6);
    background: white;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.profile-avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.profile-avatar {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--primary-100);
    box-shadow: var(--shadow-lg);
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.profile-avatar:hover .avatar-overlay {
    opacity: 1;
}

.avatar-actions {
    display: flex;
    gap: var(--space-2);
}

.profile-info {
    flex: 1;
}

.profile-name {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--neutral-900);
    margin-bottom: var(--space-2);
}

.profile-email {
    font-size: var(--text-lg);
    color: var(--neutral-600);
    margin-bottom: var(--space-2);
}

.profile-role,
.profile-last-login {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--neutral-500);
    margin-bottom: var(--space-1);
}

.profile-tabs {
    background: white;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.tab-navigation {
    display: flex;
    border-bottom: 1px solid var(--neutral-200);
    background: var(--neutral-50);
}

.tab-link {
    flex: 1;
    padding: var(--space-4) var(--space-6);
    border: none;
    background: none;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--neutral-600);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.tab-link:hover {
    background: var(--neutral-100);
    color: var(--neutral-700);
}

.tab-link.active {
    background: white;
    color: var(--primary-600);
    border-bottom: 2px solid var(--primary-500);
}

.tab-content {
    display: none;
    padding: var(--space-6);
}

.tab-content.active {
    display: block;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-4);
}

.form-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--neutral-200);
}

.password-input {
    position: relative;
}

.password-toggle {
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--neutral-500);
    cursor: pointer;
    padding: var(--space-2);
}

.password-strength {
    margin-top: var(--space-2);
    font-size: var(--text-xs);
}

.strength-weak {
    color: var(--error-600);
}

.strength-medium {
    color: var(--warning-600);
}

.strength-strong {
    color: var(--success-600);
}

.security-status {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--neutral-50);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
}

.status-indicator {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    color: white;
}

.status-indicator.enabled {
    background: var(--success-500);
}

.status-indicator.disabled {
    background: var(--error-500);
}

.status-info {
    flex: 1;
}

.status-title {
    font-weight: var(--font-weight-semibold);
    color: var(--neutral-900);
    margin-bottom: var(--space-1);
}

.status-description {
    font-size: var(--text-sm);
    color: var(--neutral-600);
}

.notification-settings {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.notification-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    background: var(--neutral-50);
    border-radius: var(--radius-lg);
}

.notification-info {
    flex: 1;
}

.notification-title {
    font-weight: var(--font-weight-medium);
    color: var(--neutral-900);
    margin-bottom: var(--space-1);
}

.notification-description {
    font-size: var(--text-sm);
    color: var(--neutral-600);
}

.sessions-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.session-item {
    display: flex;
    align-items: center;
    justify-content: between;
    padding: var(--space-4);
    background: var(--neutral-50);
    border-radius: var(--radius-lg);
    border: 1px solid var(--neutral-200);
}

.session-info {
    flex: 1;
}

.session-title {
    font-weight: var(--font-weight-medium);
    color: var(--neutral-900);
    margin-bottom: var(--space-1);
}

.session-details {
    font-size: var(--text-sm);
    color: var(--neutral-600);
}

.session-actions {
    display: flex;
    justify-content: center;
    padding-top: var(--space-4);
    border-top: 1px solid var(--neutral-200);
}

.current-session {
    border-left: 4px solid var(--success-500);
}

@media (max-width: 768px) {
    .profile-header {
        flex-direction: column;
        text-align: center;
    }
    
    .tab-navigation {
        flex-direction: column;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .form-actions {
        flex-direction: column;
    }
}
</style>
@endpush

@push('scripts')
<script>
let currentTab = 'general';

// Tab management
function showTab(tabName) {
    // Hide all tabs
    document.querySelectorAll('.tab-content').forEach(tab => {
        tab.classList.remove('active');
    });
    
    // Remove active class from all tab links
    document.querySelectorAll('.tab-link').forEach(link => {
        link.classList.remove('active');
    });
    
    // Show selected tab
    document.getElementById(tabName + 'Tab').classList.add('active');
    
    // Add active class to selected tab link
    event.target.classList.add('active');
    
    currentTab = tabName;
    
    // Load tab-specific data
    if (tabName === 'sessions') {
        loadSessions();
    }
}

// Profile management
async function updateProfile(event) {
    event.preventDefault();
    
    const form = event.target;
    const submitBtn = form.querySelector('button[type="submit"]');
    
    if (!AdminUtils.validateForm(form)) {
        return;
    }
    
    AdminUtils.showLoadingState(submitBtn, 'Updating...');
    
    try {
        const formData = new FormData(form);
        const response = await fetch('/api/admin/profile', {
            method: 'PUT',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(Object.fromEntries(formData))
        });
        
        const result = await response.json();
        
        if (result.success) {
            AdminUtils.createNotification('success', result.message);
            
            // Update header information
            document.querySelector('.profile-name').textContent = result.data.name;
            document.querySelector('.profile-email').textContent = result.data.email;
        } else {
            AdminUtils.createNotification('error', result.message || 'Failed to update profile');
        }
    } catch (error) {
        AdminUtils.createNotification('error', 'An error occurred while updating profile');
    } finally {
        AdminUtils.hideLoadingState(submitBtn);
    }
}

// Avatar management
async function uploadAvatar(input) {
    if (!input.files || input.files.length === 0) {
        return;
    }
    
    const file = input.files[0];
    
    // Validate file
    if (!file.type.startsWith('image/')) {
        AdminUtils.createNotification('error', 'Please select a valid image file');
        return;
    }
    
    if (file.size > 2 * 1024 * 1024) { // 2MB
        AdminUtils.createNotification('error', 'Image size must be less than 2MB');
        return;
    }
    
    try {
        const formData = new FormData();
        formData.append('avatar', file);
        
        const response = await fetch('/api/admin/profile/avatar', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: formData
        });
        
        const result = await response.json();
        
        if (result.success) {
            AdminUtils.createNotification('success', result.message);
            document.getElementById('avatarImage').src = result.data.avatar_url;
        } else {
            AdminUtils.createNotification('error', result.message || 'Failed to upload avatar');
        }
    } catch (error) {
        AdminUtils.createNotification('error', 'An error occurred while uploading avatar');
    }
}

async function removeAvatar() {
    if (!confirm('Are you sure you want to remove your profile picture?')) {
        return;
    }
    
    try {
        const response = await fetch('/api/admin/profile/avatar', {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            }
        });
        
        const result = await response.json();
        
        if (result.success) {
            AdminUtils.createNotification('success', result.message);
            document.getElementById('avatarImage').src = '/images/default-avatar.png';
        } else {
            AdminUtils.createNotification('error', result.message || 'Failed to remove avatar');
        }
    } catch (error) {
        AdminUtils.createNotification('error', 'An error occurred while removing avatar');
    }
}

// Password management
async function changePassword(event) {
    event.preventDefault();
    
    const form = event.target;
    const submitBtn = form.querySelector('button[type="submit"]');
    
    if (!AdminUtils.validateForm(form)) {
        return;
    }
    
    const formData = new FormData(form);
    
    // Check password confirmation
    if (formData.get('password') !== formData.get('password_confirmation')) {
        AdminUtils.createNotification('error', 'Passwords do not match');
        return;
    }
    
    AdminUtils.showLoadingState(submitBtn, 'Changing...');
    
    try {
        const response = await fetch('/api/admin/profile/password', {
            method: 'PUT',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(Object.fromEntries(formData))
        });
        
        const result = await response.json();
        
        if (result.success) {
            AdminUtils.createNotification('success', result.message);
            form.reset();
        } else {
            AdminUtils.createNotification('error', result.message || 'Failed to change password');
        }
    } catch (error) {
        AdminUtils.createNotification('error', 'An error occurred while changing password');
    } finally {
        AdminUtils.hideLoadingState(submitBtn);
    }
}

function togglePassword(button) {
    const input = button.parentElement.querySelector('input');
    const icon = button.querySelector('i');
    
    if (input.type === 'password') {
        input.type = 'text';
        icon.classList.remove('fa-eye');
        icon.classList.add('fa-eye-slash');
    } else {
        input.type = 'password';
        icon.classList.remove('fa-eye-slash');
        icon.classList.add('fa-eye');
    }
}

// Check password strength
document.addEventListener('DOMContentLoaded', function() {
    const passwordInput = document.querySelector('input[name="password"]');
    if (passwordInput) {
        passwordInput.addEventListener('input', function() {
            checkPasswordStrength(this.value);
        });
    }
});

function checkPasswordStrength(password) {
    const strengthIndicator = document.getElementById('passwordStrength');
    if (!strengthIndicator) return;
    
    let score = 0;
    let feedback = [];
    
    if (password.length >= 8) score++;
    else feedback.push('At least 8 characters');
    
    if (/[a-z]/.test(password)) score++;
    else feedback.push('Lowercase letter');
    
    if (/[A-Z]/.test(password)) score++;
    else feedback.push('Uppercase letter');
    
    if (/[0-9]/.test(password)) score++;
    else feedback.push('Number');
    
    if (/[^A-Za-z0-9]/.test(password)) score++;
    else feedback.push('Special character');
    
    let strength, className;
    if (score < 3) {
        strength = 'Weak';
        className = 'strength-weak';
    } else if (score < 5) {
        strength = 'Medium';
        className = 'strength-medium';
    } else {
        strength = 'Strong';
        className = 'strength-strong';
    }
    
    strengthIndicator.className = `password-strength ${className}`;
    strengthIndicator.textContent = `Password strength: ${strength}`;
    
    if (feedback.length > 0 && score < 5) {
        strengthIndicator.textContent += ` (Missing: ${feedback.join(', ')})`;
    }
}

// Two-factor authentication
async function toggleTwoFactor(event) {
    event.preventDefault();
    
    const form = event.target;
    const submitBtn = form.querySelector('button[type="submit"]');
    const currentlyEnabled = submitBtn.textContent.includes('Disable');
    
    if (!AdminUtils.validateForm(form)) {
        return;
    }
    
    AdminUtils.showLoadingState(submitBtn, currentlyEnabled ? 'Disabling...' : 'Enabling...');
    
    try {
        const formData = new FormData(form);
        const response = await fetch('/api/admin/profile/two-factor', {
            method: 'PUT',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                enabled: !currentlyEnabled,
                password: formData.get('password')
            })
        });
        
        const result = await response.json();
        
        if (result.success) {
            AdminUtils.createNotification('success', result.message);
            setTimeout(() => location.reload(), 1500);
        } else {
            AdminUtils.createNotification('error', result.message || 'Failed to update two-factor authentication');
        }
    } catch (error) {
        AdminUtils.createNotification('error', 'An error occurred while updating two-factor authentication');
    } finally {
        AdminUtils.hideLoadingState(submitBtn);
    }
}

// Notifications
async function updateNotifications(event) {
    event.preventDefault();
    
    const form = event.target;
    const submitBtn = form.querySelector('button[type="submit"]');
    
    AdminUtils.showLoadingState(submitBtn, 'Saving...');
    
    try {
        const formData = new FormData(form);
        const data = {
            email_notifications: formData.has('email_notifications'),
            push_notifications: formData.has('push_notifications'),
            sms_notifications: formData.has('sms_notifications')
        };
        
        const response = await fetch('/api/admin/profile/notifications', {
            method: 'PUT',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        });
        
        const result = await response.json();
        
        if (result.success) {
            AdminUtils.createNotification('success', result.message);
        } else {
            AdminUtils.createNotification('error', result.message || 'Failed to update notifications');
        }
    } catch (error) {
        AdminUtils.createNotification('error', 'An error occurred while updating notifications');
    } finally {
        AdminUtils.hideLoadingState(submitBtn);
    }
}

// Preferences
async function updatePreferences(event) {
    event.preventDefault();
    
    const form = event.target;
    const submitBtn = form.querySelector('button[type="submit"]');
    
    if (!AdminUtils.validateForm(form)) {
        return;
    }
    
    AdminUtils.showLoadingState(submitBtn, 'Saving...');
    
    try {
        const formData = new FormData(form);
        const response = await fetch('/api/admin/profile', {
            method: 'PUT',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(Object.fromEntries(formData))
        });
        
        const result = await response.json();
        
        if (result.success) {
            AdminUtils.createNotification('success', result.message);
        } else {
            AdminUtils.createNotification('error', result.message || 'Failed to update preferences');
        }
    } catch (error) {
        AdminUtils.createNotification('error', 'An error occurred while updating preferences');
    } finally {
        AdminUtils.hideLoadingState(submitBtn);
    }
}

// Session management
async function loadSessions() {
    try {
        const response = await fetch('/api/admin/profile/sessions', {
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            }
        });
        
        const result = await response.json();
        
        if (result.success) {
            renderSessions(result.data);
        }
    } catch (error) {
        AdminUtils.createNotification('error', 'Failed to load sessions');
    }
}

function renderSessions(sessions) {
    const container = document.getElementById('sessionsList');
    
    if (sessions.length === 0) {
        container.innerHTML = '<div class="empty-state">No active sessions found</div>';
        return;
    }
    
    container.innerHTML = sessions.map(session => `
        <div class="session-item ${session.is_current ? 'current-session' : ''}">
            <div class="session-info">
                <div class="session-title">
                    ${session.location} ${session.is_current ? '(Current)' : ''}
                </div>
                <div class="session-details">
                    ${session.ip_address} • ${session.user_agent} • Last active: ${new Date(session.last_activity).toLocaleDateString()}
                </div>
            </div>
            ${!session.is_current ? `
                <button class="btn btn-danger btn-sm" onclick="revokeSession('${session.id}')">
                    <i class="fas fa-times"></i>
                    Revoke
                </button>
            ` : ''}
        </div>
    `).join('');
}

async function revokeSession(sessionId) {
    if (!confirm('Are you sure you want to revoke this session?')) {
        return;
    }
    
    try {
        const response = await fetch(`/api/admin/profile/sessions/${sessionId}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            }
        });
        
        const result = await response.json();
        
        if (result.success) {
            AdminUtils.createNotification('success', result.message);
            loadSessions();
        } else {
            AdminUtils.createNotification('error', result.message || 'Failed to revoke session');
        }
    } catch (error) {
        AdminUtils.createNotification('error', 'An error occurred while revoking session');
    }
}

function revokeAllSessions() {
    AdminUtils.openModal('revokeSessionsModal');
}

async function confirmRevokeAllSessions(event) {
    event.preventDefault();
    
    const form = event.target;
    const submitBtn = form.querySelector('button[type="submit"]');
    
    if (!AdminUtils.validateForm(form)) {
        return;
    }
    
    AdminUtils.showLoadingState(submitBtn, 'Revoking...');
    
    try {
        const formData = new FormData(form);
        const response = await fetch('/api/admin/profile/sessions', {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                password: formData.get('password')
            })
        });
        
        const result = await response.json();
        
        if (result.success) {
            AdminUtils.createNotification('success', result.message);
            AdminUtils.closeModal('revokeSessionsModal');
            loadSessions();
        } else {
            AdminUtils.createNotification('error', result.message || 'Failed to revoke sessions');
        }
    } catch (error) {
        AdminUtils.createNotification('error', 'An error occurred while revoking sessions');
    } finally {
        AdminUtils.hideLoadingState(submitBtn);
    }
}

// Utility functions
function resetForm(formId) {
    document.getElementById(formId).reset();
}

function resetToDefaults() {
    if (confirm('Reset all settings to defaults? This cannot be undone.')) {
        AdminUtils.createNotification('info', 'Reset functionality will be implemented soon');
    }
}

function saveAllChanges() {
    AdminUtils.createNotification('info', 'Bulk save functionality will be implemented soon');
}

function confirmLogout() {
    // Logout functionality
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = '/logout';
    
    const token = document.createElement('input');
    token.type = 'hidden';
    token.name = '_token';
    token.value = document.querySelector('meta[name="csrf-token"]').content;
    
    form.appendChild(token);
    document.body.appendChild(form);
    form.submit();
}

// Auto-save draft changes
let autoSaveTimeout;
document.querySelectorAll('input, select, textarea').forEach(input => {
    input.addEventListener('input', function() {
        clearTimeout(autoSaveTimeout);
        autoSaveTimeout = setTimeout(() => {
            // Auto-save logic would go here
            console.log('Auto-saving changes...');
        }, 5000);
    });
});
</script>
@endpush