<?php
$pageTitle = 'My Profile';
$breadcrumb = [['label' => 'My Profile', 'url' => null]];
ob_start();
?>
<div class="max-w-4xl mx-auto">
    <h1 class="text-2xl font-bold text-gray-800 mb-6"><?= $pageTitle ?></h1>

    <!-- Personal Info Card -->
    <div class="bg-white rounded-lg shadow mb-6">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-medium text-gray-900">Personal Information</h2>
        </div>
        <div class="p-6">
            <form action="<?= APP_URL ?>/profile" method="POST" enctype="multipart/form-data">
                <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION[CSRF_TOKEN_NAME] ?? '') ?>">

                <div class="flex items-center space-x-6 mb-6">
                    <div class="h-20 w-20 rounded-full bg-[#0A3A6B] text-white flex items-center justify-center font-bold text-2xl shadow overflow-hidden">
                        <?php if (!empty($user['avatar'])): ?>
                            <img src="<?= APP_URL ?>/uploads/<?= htmlspecialchars($user['avatar']) ?>" alt="Avatar" class="h-full w-full object-cover">
                        <?php else: ?>
                            <?= strtoupper(substr($user['first_name'] ?? 'U', 0, 1) . substr($user['last_name'] ?? '', 0, 1)) ?>
                        <?php endif; ?>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Change Avatar</label>
                        <input type="file" name="avatar" accept="image/*" class="text-sm">
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700">First Name</label>
                        <input type="text" name="first_name" required value="<?= htmlspecialchars($user['first_name'] ?? '') ?>" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#0A3A6B] focus:ring-[#0A3A6B] sm:text-sm border p-2">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Last Name</label>
                        <input type="text" name="last_name" required value="<?= htmlspecialchars($user['last_name'] ?? '') ?>" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#0A3A6B] focus:ring-[#0A3A6B] sm:text-sm border p-2">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Email Address (Read-only)</label>
                        <input type="email" value="<?= htmlspecialchars($user['email'] ?? '') ?>" readonly class="mt-1 block w-full rounded-md border-gray-200 bg-gray-50 shadow-sm sm:text-sm border p-2 text-gray-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Phone</label>
                        <input type="text" name="phone" value="<?= htmlspecialchars($user['phone'] ?? '') ?>" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#0A3A6B] focus:ring-[#0A3A6B] sm:text-sm border p-2">
                    </div>
                </div>
                
                <div class="mt-6 flex justify-end">
                    <button type="submit" class="bg-[#0A3A6B] hover:bg-blue-700 text-white font-bold py-2 px-6 rounded shadow text-sm">Save Information</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Preferences Card -->
    <div class="bg-white rounded-lg shadow mb-6">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-medium text-gray-900">Preferences</h2>
        </div>
        <div class="p-6">
            <form action="<?= APP_URL ?>/profile" method="POST">
                <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION[CSRF_TOKEN_NAME] ?? '') ?>">

                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Language / Locale</label>
                        <select name="locale" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#0A3A6B] focus:ring-[#0A3A6B] sm:text-sm border p-2">
                            <option value="en_US" <?= ($user['locale'] ?? '') === 'en_US' ? 'selected' : '' ?>>English (US)</option>
                            <option value="en_GB" <?= ($user['locale'] ?? '') === 'en_GB' ? 'selected' : '' ?>>English (UK)</option>
                            <option value="fr_FR" <?= ($user['locale'] ?? '') === 'fr_FR' ? 'selected' : '' ?>>French</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Timezone</label>
                        <select name="timezone" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#0A3A6B] focus:ring-[#0A3A6B] sm:text-sm border p-2">
                            <option value="UTC" <?= ($user['timezone'] ?? '') === 'UTC' ? 'selected' : '' ?>>UTC</option>
                            <option value="Africa/Lagos" <?= ($user['timezone'] ?? '') === 'Africa/Lagos' ? 'selected' : '' ?>>West Africa Time (Lagos)</option>
                            <option value="America/New_York" <?= ($user['timezone'] ?? '') === 'America/New_York' ? 'selected' : '' ?>>Eastern Time (US)</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Currency</label>
                        <select name="currency" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#0A3A6B] focus:ring-[#0A3A6B] sm:text-sm border p-2">
                            <option value="USD" <?= ($user['currency'] ?? '') === 'USD' ? 'selected' : '' ?>>USD ($)</option>
                            <option value="NGN" <?= ($user['currency'] ?? '') === 'NGN' ? 'selected' : '' ?>>NGN (₦)</option>
                            <option value="EUR" <?= ($user['currency'] ?? '') === 'EUR' ? 'selected' : '' ?>>EUR (€)</option>
                        </select>
                    </div>
                </div>
                
                <div class="mt-6 flex justify-end">
                    <button type="submit" class="bg-[#0A3A6B] hover:bg-blue-700 text-white font-bold py-2 px-6 rounded shadow text-sm">Save Preferences</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Security Card -->
    <div class="bg-white rounded-lg shadow mb-6">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-medium text-gray-900">Security</h2>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
                <!-- Password Change -->
                <div>
                    <h3 class="text-md font-medium text-gray-900 mb-4">Change Password</h3>
                    <form action="<?= APP_URL ?>/profile/change-password" method="POST">
                        <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION[CSRF_TOKEN_NAME] ?? '') ?>">

                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700">Current Password</label>
                                <input type="password" name="current_password" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#0A3A6B] focus:ring-[#0A3A6B] sm:text-sm border p-2">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700">New Password</label>
                                <input type="password" name="new_password" id="new_password" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#0A3A6B] focus:ring-[#0A3A6B] sm:text-sm border p-2">
                                <div class="w-full bg-gray-200 rounded-full h-1.5 mt-2 hidden" id="pwd_strength_bar">
                                    <div class="bg-red-600 h-1.5 rounded-full" style="width: 25%"></div>
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700">Confirm New Password</label>
                                <input type="password" name="confirm_password" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#0A3A6B] focus:ring-[#0A3A6B] sm:text-sm border p-2">
                            </div>
                            <div>
                                <button type="submit" class="bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-6 rounded shadow text-sm">Update Password</button>
                            </div>
                        </div>
                    </form>
                </div>
                
                <!-- 2FA -->
                <div>
                    <h3 class="text-md font-medium text-gray-900 mb-4">Two-Factor Authentication (2FA)</h3>
                    <div class="border rounded p-4 <?= !empty($user['2fa_enabled']) ? 'bg-green-50 border-green-200' : 'bg-gray-50 border-gray-200' ?>">
                        <div class="flex items-center mb-2">
                            <?php if (!empty($user['2fa_enabled'])): ?>
                                <svg class="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                                <span class="font-medium text-green-800">2FA is Enabled</span>
                            <?php else: ?>
                                <svg class="h-5 w-5 text-gray-400 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>
                                <span class="font-medium text-gray-700">2FA is Disabled</span>
                            <?php endif; ?>
                        </div>
                        <p class="text-sm text-gray-600 mb-4">Add an extra layer of security to your account. When enabled, you'll need to enter a code from your authenticator app when logging in.</p>
                        
                        <?php if (!empty($user['2fa_enabled'])): ?>
                            <a href="<?= APP_URL ?>/settings/security" class="inline-block bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 font-bold py-2 px-4 rounded shadow-sm text-sm">Manage 2FA</a>
                        <?php else: ?>
                            <a href="<?= APP_URL ?>/otp/setup" class="inline-block bg-[#0A3A6B] hover:bg-blue-700 text-white font-bold py-2 px-4 rounded shadow text-sm">Setup 2FA</a>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const pwd = document.getElementById('new_password');
    const bar = document.getElementById('pwd_strength_bar');
    if (pwd && bar) {
        pwd.addEventListener('input', function() {
            if (pwd.value.length > 0) {
                bar.classList.remove('hidden');
                let strength = 0;
                if (pwd.value.length >= 8) strength++;
                if (pwd.value.match(/[A-Z]/)) strength++;
                if (pwd.value.match(/[0-9]/)) strength++;
                if (pwd.value.match(/[^a-zA-Z0-9]/)) strength++;
                
                const inner = bar.firstElementChild;
                if (strength === 0) { inner.style.width = '25%'; inner.className = 'h-1.5 rounded-full bg-red-600'; }
                else if (strength === 1 || strength === 2) { inner.style.width = '50%'; inner.className = 'h-1.5 rounded-full bg-yellow-400'; }
                else if (strength === 3) { inner.style.width = '75%'; inner.className = 'h-1.5 rounded-full bg-blue-500'; }
                else if (strength >= 4) { inner.style.width = '100%'; inner.className = 'h-1.5 rounded-full bg-green-500'; }
            } else {
                bar.classList.add('hidden');
            }
        });
    }
});
</script>
<?php
$content = ob_get_clean();
require ROOT_PATH . '/modules/shared/views/layouts/main.php';
?>