<div class="max-w-md w-full space-y-8">
    <div>
        <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white"><%= t('admin.forgot.title') %></h2>
        <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
            <%= t('admin.forgot.subtitle') %>
        </p>
    </div>

    <!-- Step 1: Get Email -->
    <form id="step-1-form" class="mt-8 space-y-6">
        <div class="rounded-md shadow-sm -space-y-px">
            <div>
                <label for="email" class="sr-only"><%= t('admin.forgot.emailPlaceholder') %></label>
                <input id="email" name="email" type="email" required class="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" placeholder="<%= t('admin.forgot.emailPlaceholder') %>">
            </div>
        </div>
        <div>
            <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                <%= t('admin.forgot.continue') %>
            </button>
        </div>
    </form>

    <!-- Step 2: Answer Question -->
    <form id="step-2-form" class="mt-8 space-y-6 hidden">
        <input type="hidden" id="reset-email" name="email">
        <div class="rounded-md shadow-sm -space-y-px">
            <div class="mb-4">
                <p class="text-sm font-medium text-gray-700 dark:text-gray-300" id="security-question-text"></p>
            </div>
            <div>
                <label for="answer" class="sr-only"><%= t('admin.forgot.answerPlaceholder') %></label>
                <input id="answer" name="answer" type="text" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" placeholder="<%= t('admin.forgot.answerPlaceholder') %>">
            </div>
            <div>
                <label for="newPassword" class="sr-only"><%= t('admin.forgot.newPasswordPlaceholder') %></label>
                <input id="newPassword" name="newPassword" type="password" required minlength="6" class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" placeholder="<%= t('admin.forgot.newPasswordPlaceholder') %>">
            </div>
        </div>
        <div>
            <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                <%= t('admin.forgot.reset') %>
            </button>
        </div>
    </form>

    <p id="error-msg" class="text-red-500 text-center mt-4 hidden"></p>
    <p id="success-msg" class="text-green-500 text-center mt-4 hidden"></p>
    
    <div class="text-center mt-4">
        <a href="/admin/login" class="font-medium text-indigo-600 hover:text-indigo-500"> <%= t('admin.forgot.backLogin') %> </a>
    </div>
</div>

<script>
    const forgotMessages = {
        securityPrefix: "<%= t('admin.forgot.securityQuestionPrefix') %>",
        errorNoUser: "<%= t('admin.forgot.errorNoUser') %>",
        errorUnexpected: "<%= t('admin.forgot.errorUnexpected') %>",
        success: "<%= t('admin.forgot.success') %>",
        errorResetFailed: "<%= t('admin.forgot.errorResetFailed') %>"
    };

    const step1Form = document.getElementById('step-1-form');
    const step2Form = document.getElementById('step-2-form');
    const errorMsg = document.getElementById('error-msg');
    const successMsg = document.getElementById('success-msg');

    step1Form.addEventListener('submit', async (e) => {
        e.preventDefault();
        errorMsg.classList.add('hidden');
        successMsg.classList.add('hidden');
        
        const email = document.getElementById('email').value;
        
        try {
            const res = await fetch(`/api/auth/security-question?email=${encodeURIComponent(email)}`);
            const result = await res.json();

            if (res.ok) {
                document.getElementById('security-question-text').textContent = forgotMessages.securityPrefix + result.question;
                document.getElementById('reset-email').value = email;
                
                step1Form.classList.add('hidden');
                step2Form.classList.remove('hidden');
            } else {
                errorMsg.textContent = result.error || forgotMessages.errorNoUser;
                errorMsg.classList.remove('hidden');
            }
        } catch (err) {
            errorMsg.textContent = forgotMessages.errorUnexpected;
            errorMsg.classList.remove('hidden');
        }
    });

    step2Form.addEventListener('submit', async (e) => {
        e.preventDefault();
        errorMsg.classList.add('hidden');
        successMsg.classList.add('hidden');
        
        const formData = new FormData(e.target);
        const data = Object.fromEntries(formData.entries());

        try {
            const res = await fetch('/api/auth/forgot-password', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(data)
            });
            const result = await res.json();

            if (res.ok) {
                successMsg.textContent = forgotMessages.success;
                successMsg.classList.remove('hidden');
                step2Form.reset();
                step2Form.querySelectorAll('input, button').forEach(el => el.disabled = true);
                
                setTimeout(() => {
                    window.location.href = '/admin/login';
                }, 2000);
            } else {
                errorMsg.textContent = result.error || forgotMessages.errorResetFailed;
                errorMsg.classList.remove('hidden');
            }
        } catch (err) {
            errorMsg.textContent = forgotMessages.errorUnexpected;
            errorMsg.classList.remove('hidden');
        }
    });
</script>
