<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.setup.title') %></h2>
        <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
            <%= t('admin.setup.subtitle') %>
        </p>
    </div>
    <form id="setup-form" class="mt-8 space-y-6">
        <div class="rounded-md shadow-sm -space-y-px">
            <div>
                <label for="username" class="sr-only"><%= t('admin.setup.username') %></label>
                <input id="username" name="username" 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.setup.username') %>">
            </div>
            <div>
                <label for="email-address" class="sr-only"><%= t('admin.setup.email') %></label>
                <input id="email-address" name="email" type="email" autocomplete="email" required class="appearance-none rounded-none 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.setup.email') %>">
            </div>
            <div>
                <label for="password" class="sr-only"><%= t('admin.setup.password') %></label>
                <input id="password" name="password" type="password" autocomplete="new-password" required class="appearance-none rounded-none 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.setup.password') %>">
            </div>
            <div>
                <label for="security_question" class="sr-only"><%= t('admin.setup.securityQuestion') %></label>
                <input id="security_question" name="security_question" 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 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" placeholder="<%= t('admin.setup.securityQuestion') %>">
            </div>
            <div>
                <label for="security_answer" class="sr-only"><%= t('admin.setup.securityAnswer') %></label>
                <input id="security_answer" name="security_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-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" placeholder="<%= t('admin.setup.securityAnswer') %>">
            </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.setup.complete') %>
            </button>
        </div>
    </form>
    <p id="error-msg" class="text-red-500 text-center mt-4 hidden"></p>
</div>

<script>
    const setupMessages = {
        failed: "<%= t('admin.setup.errorFailed') %>",
        unexpected: "<%= t('admin.setup.errorUnexpected') %>"
    };

    document.getElementById('setup-form').addEventListener('submit', async (e) => {
        e.preventDefault();
        const formData = new FormData(e.target);
        const data = Object.fromEntries(formData.entries());
        const errorMsg = document.getElementById('error-msg');

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

            if (res.ok) {
                window.location.href = '/admin/login';
            } else {
                errorMsg.textContent = result.error || setupMessages.failed;
                errorMsg.classList.remove('hidden');
            }
        } catch (err) {
            errorMsg.textContent = setupMessages.unexpected;
            errorMsg.classList.remove('hidden');
        }
    });
</script>
