{% extends "base.html" %}

{% block title %}Login - Banko AI Assistant{% endblock %}

{% block content %}
<div class="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-md w-full space-y-8">
        <div>
            <div class="mx-auto h-12 w-12 flex items-center justify-center">
                <img src="{{ url_for('static', filename='roach-logo.svg') }}" alt="CockroachDB" class="h-12 w-12">
            </div>
            <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
                Who's banking today?
            </h2>
            <p class="mt-2 text-center text-sm text-gray-600">
                {% if show_signup %}
                    New user detected. Choose your spending style to get started.
                {% else %}
                    Enter your username to continue.
                {% endif %}
            </p>
        </div>

        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                <div class="space-y-2">
                {% for category, message in messages %}
                    <div class="bg-red-50 border border-red-400 text-red-700 px-4 py-3 rounded">
                        {{ message }}
                    </div>
                {% endfor %}
                </div>
            {% endif %}
        {% endwith %}

        <form id="login-form" class="mt-8 space-y-6" method="POST" action="{% if show_signup %}/signup{% else %}/login{% endif %}">
            <div class="space-y-4">
                <div>
                    <label for="username" class="sr-only">Username</label>
                    <input id="username" name="username" type="text" required
                           value="{{ username or '' }}"
                           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="Username">
                </div>

                <div id="signup-section" class="space-y-4 {% if not show_signup %}hidden{% endif %}">
                    <div>
                        <p class="text-sm font-medium text-gray-700 mb-2">Spending style</p>
                        <div class="space-y-2">
                            <label class="flex items-center gap-3 p-3 border border-gray-300 rounded-md bg-white hover:border-indigo-500 hover:bg-indigo-50 cursor-pointer">
                                <input type="radio" name="spending_style" value="diner"
                                       {% if show_signup %}required{% endif %}
                                       class="h-4 w-4 text-indigo-600 focus:ring-indigo-500">
                                <span class="text-sm">
                                    <span class="font-medium text-gray-900">Diner</span>
                                    <span class="block text-xs text-gray-500">Frequent restaurant visits</span>
                                </span>
                            </label>
                            <label class="flex items-center gap-3 p-3 border border-gray-300 rounded-md bg-white hover:border-indigo-500 hover:bg-indigo-50 cursor-pointer">
                                <input type="radio" name="spending_style" value="subscriber"
                                       {% if show_signup %}required{% endif %}
                                       class="h-4 w-4 text-indigo-600 focus:ring-indigo-500">
                                <span class="text-sm">
                                    <span class="font-medium text-gray-900">Subscriber</span>
                                    <span class="block text-xs text-gray-500">Multiple subscriptions</span>
                                </span>
                            </label>
                            <label class="flex items-center gap-3 p-3 border border-gray-300 rounded-md bg-white hover:border-indigo-500 hover:bg-indigo-50 cursor-pointer">
                                <input type="radio" name="spending_style" value="saver"
                                       {% if show_signup %}required{% endif %}
                                       class="h-4 w-4 text-indigo-600 focus:ring-indigo-500">
                                <span class="text-sm">
                                    <span class="font-medium text-gray-900">Saver</span>
                                    <span class="block text-xs text-gray-500">Budget-conscious</span>
                                </span>
                            </label>
                            <label class="flex items-center gap-3 p-3 border border-gray-300 rounded-md bg-white hover:border-indigo-500 hover:bg-indigo-50 cursor-pointer">
                                <input type="radio" name="spending_style" value="balanced"
                                       {% if show_signup %}required{% endif %}
                                       class="h-4 w-4 text-indigo-600 focus:ring-indigo-500">
                                <span class="text-sm">
                                    <span class="font-medium text-gray-900">Balanced</span>
                                    <span class="block text-xs text-gray-500">Mixed spending patterns</span>
                                </span>
                            </label>
                        </div>
                    </div>

                    {% if regions %}
                    <div>
                        <p class="text-sm font-medium text-gray-700 mb-2">Home region</p>
                        <div class="space-y-2">
                            {% for region in regions %}
                            <label class="flex items-center gap-3 p-2 border border-gray-300 rounded-md bg-white hover:border-indigo-500 hover:bg-indigo-50 cursor-pointer">
                                <input type="radio" name="home_region" value="{{ region }}"
                                       class="h-4 w-4 text-indigo-600 focus:ring-indigo-500">
                                <span class="text-sm font-medium text-gray-900">{{ region }}</span>
                            </label>
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>

            <div>
                <button id="submit-btn" 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">
                    <span id="btn-text">{% if show_signup %}Create account{% else %}Continue{% endif %}</span>
                    <span id="btn-spinner" class="hidden ml-2">
                        <svg class="animate-spin h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                    </span>
                </button>
            </div>
        </form>
    </div>
</div>

<script>
document.getElementById('login-form').addEventListener('submit', function() {
    var btn = document.getElementById('submit-btn');
    var btnText = document.getElementById('btn-text');
    var btnSpinner = document.getElementById('btn-spinner');
    var isSignup = document.getElementById('login-form').action.endsWith('/signup');

    btn.disabled = true;
    btnText.textContent = isSignup ? 'Setting up your account' : 'Signing in';
    btnSpinner.classList.remove('hidden');
});
</script>
{% endblock %}