<?php
$user = $user ?? null;
$roles = $user && !empty($user['roles']) ? $user['roles'] : [];
$roleLabels = array_map(function ($r) { return $r['role_name'] ?? $r['role_code'] ?? ''; }, $roles);
?>
<div class="space-y-6">
    <div>
        <h1 class="text-xl font-semibold">Profil Akun</h1>
        <p class="text-gray-600 dark:text-gray-400 mt-1">Informasi akun dan pengaturan ganti password.</p>
    </div>

    <!-- Info Akun -->
    <div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm p-6">
        <h2 class="text-base font-semibold text-gray-900 dark:text-gray-100 mb-4">Informasi Akun</h2>
        <dl class="space-y-3">
            <div>
                <dt class="text-sm text-gray-500 dark:text-gray-400">Nama</dt>
                <dd class="text-gray-900 dark:text-gray-100 font-medium"><?= esc($user['name'] ?? '-') ?></dd>
            </div>
            <div>
                <dt class="text-sm text-gray-500 dark:text-gray-400">Email</dt>
                <dd class="text-gray-900 dark:text-gray-100"><?= esc($user['email'] ?? '-') ?></dd>
            </div>
            <div>
                <dt class="text-sm text-gray-500 dark:text-gray-400">Role</dt>
                <dd class="text-gray-900 dark:text-gray-100"><?= esc(implode(', ', $roleLabels) ?: '-') ?></dd>
            </div>
        </dl>
    </div>

    <!-- Form Ganti Password -->
    <div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm p-6">
        <h2 class="text-base font-semibold text-gray-900 dark:text-gray-100 mb-4">Ganti Password</h2>
        <form id="form-change-password" class="space-y-4 max-w-md">
            <div>
                <label for="current-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password Saat Ini <span class="text-red-500">*</span></label>
                <input type="password" id="current-password" name="current_password" required autocomplete="current-password"
                    class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary focus:border-transparent"
                    placeholder="Masukkan password saat ini">
            </div>
            <div>
                <label for="new-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password Baru <span class="text-red-500">*</span></label>
                <input type="password" id="new-password" name="new_password" required minlength="6" autocomplete="new-password"
                    class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary focus:border-transparent"
                    placeholder="Minimal 6 karakter">
            </div>
            <div>
                <label for="new-password-confirm" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Konfirmasi Password Baru <span class="text-red-500">*</span></label>
                <input type="password" id="new-password-confirm" name="new_password_confirm" required minlength="6" autocomplete="new-password"
                    class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary focus:border-transparent"
                    placeholder="Ulangi password baru">
                <p id="password-match-error" class="mt-1 text-sm text-red-600 dark:text-red-400 hidden">Password baru dan konfirmasi tidak sama.</p>
            </div>
            <button type="submit" id="btn-submit" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-primary text-white font-medium hover:bg-primary-hover transition-colors">
                <i class="bx bx-lock-alt"></i>
                Ganti Password
            </button>
        </form>
    </div>
</div>

<div id="toast-container" class="fixed bottom-6 right-6 z-[60] flex flex-col gap-2 pointer-events-none"></div>

<script>
(function() {
    var baseUrl = '<?= base_url() ?>'.replace(/\/$/, '');
    var apiChangePassword = baseUrl + '/api/auth/change-password';

    var form = document.getElementById('form-change-password');
    var btnSubmit = document.getElementById('btn-submit');
    var currentPassword = document.getElementById('current-password');
    var newPassword = document.getElementById('new-password');
    var newPasswordConfirm = document.getElementById('new-password-confirm');
    var passwordMatchError = document.getElementById('password-match-error');
    var toastContainer = document.getElementById('toast-container');

    function showToast(message, type) {
        type = type || 'success';
        var el = document.createElement('div');
        el.className = 'pointer-events-auto px-4 py-3 rounded-lg shadow-lg text-sm font-medium ' + (type === 'success' ? 'bg-green-600 text-white' : 'bg-red-600 text-white');
        el.textContent = message;
        toastContainer.appendChild(el);
        setTimeout(function() { if (el.parentNode) el.parentNode.removeChild(el); }, 3000);
    }

    function postOpts(body) {
        return {
            method: 'POST',
            credentials: 'same-origin',
            headers: { 'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json' },
            body: JSON.stringify(body)
        };
    }

    form.addEventListener('submit', function(e) {
        e.preventDefault();
        passwordMatchError.classList.add('hidden');

        if (newPassword.value !== newPasswordConfirm.value) {
            passwordMatchError.classList.remove('hidden');
            return;
        }

        if (newPassword.value.length < 6) {
            showToast('Password baru minimal 6 karakter', 'error');
            return;
        }

        btnSubmit.disabled = true;
        fetch(apiChangePassword, postOpts({
            current_password: currentPassword.value,
            new_password: newPassword.value
        }))
            .then(function(res) { return res.json().then(function(j) { return { ok: res.ok, data: j }; }); })
            .then(function(r) {
                btnSubmit.disabled = false;
                if (!r.ok) {
                    showToast(r.data && r.data.message ? r.data.message : 'Gagal mengganti password', 'error');
                    return;
                }
                showToast('Password berhasil diubah');
                form.reset();
            })
            .catch(function() {
                btnSubmit.disabled = false;
                showToast('Gagal mengganti password', 'error');
            });
    });
})();
</script>
