<?php $pageTitle = t('my_profile'); ?>
<div class="page-header">
    <div class="page-header-left">
        <a href="/dashboard" class="btn btn-ghost btn-sm">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
            <?= t('dashboard') ?>
        </a>
        <h1 class="page-title"><?= t('my_profile') ?></h1>
    </div>
</div>

<?php if (!empty($success)): ?>
<div class="alert alert-success"><?= Helper::e($success) ?></div>
<?php endif; ?>
<?php if (!empty($errors)): ?>
<div class="alert alert-error"><?php foreach ($errors as $e): ?><div><?= Helper::e($e) ?></div><?php endforeach; ?></div>
<?php endif; ?>

<div style="display:flex;flex-direction:column;gap:16px">
    <!-- Profile Info -->
    <div class="card" id="profileInfoCard">
        <div class="card-header"><h2 class="card-title"><?= t('my_profile') ?></h2></div>
        <div class="card-body">
            <!-- Avatar -->
            <div class="avatar-section">
                <?= Helper::avatar($user, 80) ?>
                <form method="POST" enctype="multipart/form-data" class="avatar-form">
                    <?= Helper::csrf() ?>
                    <input type="hidden" name="action" value="upload_avatar">
                    <label class="btn btn-ghost btn-sm btn-file">
                        <?= t('edit') ?> Avatar
                        <input type="file" name="avatar" accept="image/*" style="display:none" data-auto-submit>
                    </label>
                </form>
            </div>

            <form method="POST">
                <?= Helper::csrf() ?>
                <input type="hidden" name="action" value="update_profile">
                <div class="form-group">
                    <label class="form-label"><?= t('username') ?></label>
                    <input type="text" name="username" class="form-input" required value="<?= Helper::e($user['username']) ?>">
                </div>
                <div class="form-group">
                    <label class="form-label"><?= t('email') ?></label>
                    <input type="email" name="email" class="form-input" required value="<?= Helper::e($user['email']) ?>">
                    <?php if (!empty($user['pending_email'])): ?>
                        <span class="form-hint" style="color:var(--color-warn,#d97706)">
                            <?= t('email_change_pending_hint', ['email' => Helper::e($user['pending_email'])]) ?>
                        </span>
                    <?php endif; ?>
                </div>
                <div class="form-row">
                    <div class="form-group flex-1">
                        <label class="form-label"><?= t('language') ?></label>
                        <select name="language" class="form-select">
                            <?php foreach (Lang::SUPPORTED as $_code): ?>
                            <option value="<?= $_code ?>" <?= $user['language'] === $_code ? 'selected' : '' ?>><?= Lang::NAMES[$_code] ?? $_code ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="form-group flex-1">
                        <label class="form-label"><?= t('timezone_label') ?></label>
                        <select name="timezone" class="form-select">
                            <option value=""><?= t('timezone_inherit_default') ?></option>
                            <?php foreach (\DateTimeZone::listIdentifiers() as $_tz): ?>
                            <option value="<?= Helper::e($_tz) ?>" <?= ($user['timezone'] ?? '') === $_tz ? 'selected' : '' ?>><?= Helper::e($_tz) ?></option>
                            <?php endforeach; ?>
                        </select>
                        <span class="form-hint"><?= t('timezone_user_hint') ?></span>
                    </div>
                    <div class="form-group flex-1">
                        <label class="form-label"><?= t('theme') ?></label>
                        <select name="theme" class="form-select">
                            <option value="light"    <?= $user['theme'] === 'light'    ? 'selected' : '' ?>><?= t('theme_light') ?></option>
                            <option value="sepia"    <?= $user['theme'] === 'sepia'    ? 'selected' : '' ?>><?= t('theme_sepia') ?></option>
                            <option value="forest"   <?= $user['theme'] === 'forest'   ? 'selected' : '' ?>><?= t('theme_forest') ?></option>
                            <option value="crimson"  <?= $user['theme'] === 'crimson'  ? 'selected' : '' ?>><?= t('theme_crimson') ?></option>
                            <option value="slate"    <?= $user['theme'] === 'slate'    ? 'selected' : '' ?>><?= t('theme_slate') ?></option>
                            <option value="dark"     <?= $user['theme'] === 'dark'     ? 'selected' : '' ?>><?= t('theme_dark') ?></option>
                            <option value="midnight" <?= $user['theme'] === 'midnight' ? 'selected' : '' ?>><?= t('theme_midnight') ?></option>
                            <option value="ocean"    <?= $user['theme'] === 'ocean'    ? 'selected' : '' ?>><?= t('theme_ocean') ?></option>
                            <option value="matrix"     <?= $user['theme'] === 'matrix'     ? 'selected' : '' ?>><?= t('theme_matrix') ?></option>
                            <option value="bluescreen" <?= $user['theme'] === 'bluescreen' ? 'selected' : '' ?>><?= t('theme_bluescreen') ?></option>
                        </select>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary"><?= t('save') ?></button>
            </form>
        </div>
    </div>

    <!-- Change Password -->
    <div class="card" id="changePasswordCard">
        <div class="card-header"><h2 class="card-title"><?= t('change_password') ?></h2></div>
        <div class="card-body">
            <form method="POST">
                <?= Helper::csrf() ?>
                <input type="hidden" name="action" value="change_password">
                <div class="form-group">
                    <label class="form-label"><?= t('current_password') ?></label>
                    <input type="password" name="current_password" class="form-input" required autocomplete="current-password">
                </div>
                <div class="form-group">
                    <label class="form-label"><?= t('new_password') ?></label>
                    <input type="password" id="prof-pw" name="new_password" class="form-input" required minlength="8" autocomplete="new-password"
                           data-input="pwStrengthInput" data-bar-id="prof-bar" data-label-id="prof-lbl">
                    <div class="pw-strength-wrap"><div class="pw-strength-bar" id="prof-bar"></div></div>
                    <div class="pw-strength-lbl" id="prof-lbl"></div>
                </div>
                <div class="form-group">
                    <label class="form-label"><?= t('password_confirm') ?></label>
                    <input type="password" name="password_confirm" class="form-input" required autocomplete="new-password">
                </div>
                <button type="submit" class="btn btn-primary"><?= t('change_password') ?></button>
            </form>
        </div>
    </div>

    <!-- Two-Factor Authentication -->
    <div class="card" id="twoFactorCard">
        <div class="card-header">
            <h2 class="card-title"><?= t('totp_settings') ?></h2>
            <?php if (!empty($user['totp_enabled'])): ?>
            <span class="badge badge-success"><?= t('totp_active') ?></span>
            <?php else: ?>
            <span class="badge badge-neutral"><?= t('totp_inactive') ?></span>
            <?php endif; ?>
        </div>
        <div class="card-body">
            <p class="text-muted" style="margin-bottom:1rem">
                <?php if (!empty($user['totp_enabled'])): ?>
                <?= t('totp_active_desc') ?>
                <?php else: ?>
                <?= t('totp_setup_desc') ?>
                <?php endif; ?>
            </p>
            <a href="/settings/totp" class="btn btn-secondary btn-sm"><?= t('totp_settings') ?></a>
        </div>
    </div>

    <?php PluginManager::fire('settings_profile_extra', ['user' => $user]); ?>

    <?php if ($user['role'] !== 'admin'): ?>
    <div class="card card-danger" id="deleteAccountCard">
        <div class="card-header"><h2 class="card-title"><?= t('delete_account') ?></h2></div>
        <div class="card-body">
            <p class="text-muted" style="margin-bottom:12px"><?= t('delete_account_hint') ?></p>
            <form method="POST" data-confirm="<?= Helper::e(t('delete_account_confirm')) ?>">
                <?= Helper::csrf() ?>
                <input type="hidden" name="action" value="delete_account">
                <div class="form-group">
                    <label class="form-label"><?= t('current_password') ?></label>
                    <input type="password" name="confirm_password" class="form-input" required autocomplete="current-password">
                </div>
                <button type="submit" class="btn btn-danger"><?= t('delete_account') ?></button>
            </form>
        </div>
    </div>
    <?php endif; ?>
</div>
<style>
.pw-strength-wrap{height:4px;background:var(--border-color);border-radius:2px;margin-top:6px;overflow:hidden}
.pw-strength-bar{height:100%;width:0;border-radius:2px;transition:width .2s,background .2s}
.pw-strength-lbl{font-size:.73rem;margin-top:3px;min-height:1rem;font-weight:500}
</style>
<script nonce="<?= csp_nonce() ?>">
function pwStrengthInput(el) {
    const pw  = el.value;
    const bar = document.getElementById(el.dataset.barId);
    const lbl = document.getElementById(el.dataset.labelId);
    if (!pw) { bar.style.width = '0'; lbl.textContent = ''; return; }
    let s = 0;
    if (pw.length >= 8)  s++;
    if (pw.length >= 12) s++;
    if (/[A-Z]/.test(pw) && /[a-z]/.test(pw)) s++;
    if (/[0-9]/.test(pw)) s++;
    if (/[^A-Za-z0-9]/.test(pw)) s++;
    s = Math.min(4, Math.max(1, s));
    const colors = ['#ef4444','#f97316','#eab308','#22c55e'];
    const labels = ['Sehr schwach','Schwach','Mittel','Stark'];
    bar.style.width = (s * 25) + '%';
    bar.style.background = colors[s-1];
    lbl.textContent = labels[s-1];
    lbl.style.color = colors[s-1];
}
</script>
