{% extends "base.html" %}

{% block title %}Accept Invite - Dango{% endblock %}

{% block header %}{% endblock %}
{% block nav %}{% endblock %}
{% block footer %}{% endblock %}

{% block content %}
<main class="min-h-screen flex items-center justify-center bg-gray-50 px-4">
    <div class="max-w-md w-full">
        <div class="text-center mb-8">
            <div class="text-5xl mb-3">🍡</div>
            <h1 class="text-2xl font-bold text-gray-900">Welcome to Dango</h1>
            <p class="text-sm text-gray-500 mt-1">Set your password to get started</p>
        </div>

        <div class="bg-white rounded-lg shadow-md p-8">
            {% if invite_error %}
            <!-- Invalid or expired invite -->
            <div class="text-center">
                <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-md">
                    <p class="text-sm text-red-700">{{ invite_error }}</p>
                </div>
                <a href="/login" class="text-sm text-dango-600 hover:text-dango-700">Go to login</a>
            </div>
            {% else %}
            <!-- Valid invite — show password form -->
            <div x-data="inviteForm()">
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                    <input type="email" value="{{ email }}" readonly
                           class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-gray-500">
                </div>

                <form @submit.prevent="submit()">
                    <div class="mb-4">
                        <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
                        <input type="password" id="password" x-model="password" required
                               minlength="8" autocomplete="new-password"
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-dango-500 focus:border-transparent">
                    </div>

                    <div class="mb-6">
                        <label for="confirmPassword" class="block text-sm font-medium text-gray-700 mb-1">Confirm Password</label>
                        <input type="password" id="confirmPassword" x-model="confirmPassword" required
                               minlength="8" autocomplete="new-password"
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-dango-500 focus:border-transparent">
                    </div>

                    <div x-show="error" x-cloak class="mb-4 p-3 bg-red-50 border border-red-200 rounded-md">
                        <p class="text-sm text-red-700" x-text="error"></p>
                    </div>

                    <div x-show="issues.length > 0" x-cloak class="mb-4 p-3 bg-yellow-50 border border-yellow-200 rounded-md">
                        <p class="text-sm text-yellow-700 font-medium mb-1">Password requirements:</p>
                        <ul class="list-disc list-inside text-sm text-yellow-700">
                            <template x-for="issue in issues" :key="issue">
                                <li x-text="issue"></li>
                            </template>
                        </ul>
                    </div>

                    <button type="submit" :disabled="loading"
                            class="w-full py-2 px-4 bg-dango-600 text-white rounded-md hover:bg-dango-700 focus:outline-none focus:ring-2 focus:ring-dango-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
                        <span x-show="!loading">Set Password</span>
                        <span x-show="loading" x-cloak>Setting password...</span>
                    </button>
                </form>
            </div>
            {% endif %}
        </div>

        <p class="text-center text-xs text-gray-400 mt-6">Dango v{{ version }}</p>
    </div>
</main>
{% endblock %}

{% block scripts %}
{% if not invite_error %}
<script>
function inviteForm() {
    return {
        password: '', confirmPassword: '',
        error: '', issues: [], loading: false,
        token: {{ token | tojson }},
        async submit() {
            this.error = '';
            this.issues = [];
            if (this.password !== this.confirmPassword) {
                this.error = 'Passwords do not match';
                return;
            }
            this.loading = true;
            try {
                const res = await fetch('/api/auth/accept-invite', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest'},
                    body: JSON.stringify({token: this.token, password: this.password})
                });
                const data = await res.json();
                if (res.ok) {
                    window.location.href = '/login?message=password-set';
                    return;
                }
                if (data.issues) {
                    this.issues = data.issues;
                } else {
                    this.error = data.message || 'Failed to set password';
                }
            } catch (e) {
                this.error = 'Unable to connect to server';
            }
            this.loading = false;
        }
    }
}
</script>
{% endif %}
{% endblock %}