{% extends "base.html" %}
{% block title %}Log In -- {{ PLATFORM_NAME }}{% endblock %}
{% block navbar %}{% endblock %}
{% block footer %}{% endblock %}

{% block content %}
<div style="min-height:100vh; display:flex; align-items:center; justify-content:center; padding:var(--space-4); background:var(--color-bg);">
    <div class="card" style="width:100%; max-width:480px; padding:var(--space-6);">
        <!-- Header -->
        <div style="text-align:center; margin-bottom:var(--space-6);">
            <a href="/" style="font-size:var(--font-size-2xl); font-weight:800; color:var(--color-text); text-decoration:none;">Flash<span style="color:var(--color-primary);">Sale</span></a>
            <p class="text-sm text-secondary mt-2">Log in to your seller dashboard</p>
        </div>

        <!-- Method Selection Cards -->
        <div class="grid grid--2 gap-3 mb-6" style="display:grid; grid-template-columns: 1fr 1fr; gap: 12px;">
            <div id="cardMagic" class="card card--selectable {% if active_method != 'password' %}active{% endif %}" onclick="selectAuthMethod('magic')" style="cursor:pointer; padding:14px; text-align:center; border:2px solid var(--color-border, #E2E8F0); border-radius:var(--radius-md); transition:all 0.2s ease;">
                <div style="display:flex; justify-content:center; margin-bottom:6px; color:var(--color-primary, #0D9488);">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
                </div>
                <div style="font-weight:700; font-size:0.9rem; color:var(--color-text);">Magic Link</div>
                <div style="font-size:0.75rem; color:var(--color-secondary, #64748B); margin-top:2px;">Passwordless email</div>
            </div>
            <div id="cardPassword" class="card card--selectable {% if active_method == 'password' %}active{% endif %}" onclick="selectAuthMethod('password')" style="cursor:pointer; padding:14px; text-align:center; border:2px solid var(--color-border, #E2E8F0); border-radius:var(--radius-md); transition:all 0.2s ease;">
                <div style="display:flex; justify-content:center; margin-bottom:6px; color:var(--color-primary, #0D9488);">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                </div>
                <div style="font-weight:700; font-size:0.9rem; color:var(--color-text);">Password</div>
                <div style="font-size:0.75rem; color:var(--color-secondary, #64748B); margin-top:2px;">Username & pass</div>
            </div>
        </div>

        <!-- Form 1: Magic Link Form -->
        <div id="formMagicContainer" style="display: {% if active_method != 'password' %}block{% else %}none{% endif %};">
            {% if magic_sent %}
                <div class="alert alert--info mb-4" style="background:#F0FDFA; border:1px solid #99F6E4; color:#0F766E; padding:16px; border-radius:var(--radius-md); text-align:center;">
                    <div style="display:flex; justify-content:center; margin-bottom:8px; color:#0D9488;">
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
                    </div>
                    <strong>Check your email!</strong>
                    <p style="font-size:0.875rem; margin-top:6px; color:#115E59;">
                        We've sent a magic login link to <strong>{{ magic_email }}</strong>.<br>
                        Click the link in the email to log in directly.
                    </p>
                </div>
            {% else %}
                {% if magic_error %}
                    <div class="alert alert--error mb-4">{{ magic_error }}</div>
                {% endif %}

                <form method="post" action="{% url 'core_auth:magic_link_send' %}" onsubmit="handleMagicSubmit(this)">
                    {% csrf_token %}
                    <div class="form-group">
                        <label class="form-label">Email Address</label>
                        <input type="email" name="email" class="form-input" required autofocus placeholder="your@email.com">
                    </div>
                    <button type="submit" class="btn btn--primary btn--block btn--lg mt-4">
                        Send Magic Login Link
                    </button>
                </form>
            {% endif %}
        </div>

        <!-- Form 2: Username & Password Form -->
        <div id="formPasswordContainer" style="display: {% if active_method == 'password' %}block{% else %}none{% endif %};">
            {% if login_error %}
                <div class="alert alert--error mb-4">{{ login_error }}</div>
            {% endif %}

            <form method="post" action="{% url 'core_auth:login' %}" onsubmit="handlePassSubmit(this)">
                {% csrf_token %}
                <div class="form-group">
                    <label class="form-label">Username or Email</label>
                    <input type="text" name="username" class="form-input" required placeholder="Username or email address">
                </div>
                <div class="form-group">
                    <label class="form-label">Password</label>
                    <input type="password" name="password" class="form-input" required placeholder="Your password">
                </div>
                <button type="submit" class="btn btn--primary btn--block btn--lg mt-4">
                    Log In
                </button>
            </form>
        </div>

        <p class="text-center text-sm text-muted mt-6" style="margin-top:24px;">
            No account yet? <a href="/#booking" style="color:var(--color-primary); font-weight:600; text-decoration:none;">Book a sale to get started</a>
        </p>
    </div>
</div>

<style>
.card--selectable {
    background: var(--color-surface, #FFFFFF);
    border-color: #E2E8F0 !important;
}
.card--selectable:hover {
    border-color: var(--color-primary-300, #99F6E4) !important;
    transform: translateY(-2px);
}
.card--selectable.active {
    border-color: var(--color-primary, #0D9488) !important;
    background: rgba(13, 148, 136, 0.04) !important;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.1);
}
</style>

<script>
function selectAuthMethod(method) {
    const magicCard = document.getElementById('cardMagic');
    const passwordCard = document.getElementById('cardPassword');
    const magicForm = document.getElementById('formMagicContainer');
    const passwordForm = document.getElementById('formPasswordContainer');

    if (method === 'magic') {
        magicCard.classList.add('active');
        passwordCard.classList.remove('active');
        magicForm.style.display = 'block';
        passwordForm.style.display = 'none';
    } else {
        passwordCard.classList.add('active');
        magicCard.classList.remove('active');
        passwordForm.style.display = 'block';
        magicForm.style.display = 'none';
    }
}

function handleMagicSubmit(form) {
    const btn = form.querySelector('button[type="submit"]');
    if (btn) {
        btn.disabled = true;
        btn.textContent = 'Sending Link...';
    }
}

function handlePassSubmit(form) {
    const btn = form.querySelector('button[type="submit"]');
    if (btn) {
        btn.disabled = true;
        btn.textContent = 'Logging In...';
    }
}
</script>
{% endblock %}