{% extends "base.html" %}

{% block body_class %}auth-page{% endblock %}
{% block navbar %}{% endblock %}

{% block content %}
<style>
.auth-card-wrap{max-width:440px;margin:0 auto;}
.auth-logo{max-width:180px;max-height:140px;width:auto;height:auto;object-fit:contain;}
.auth-submit{width:100%;}
@media(max-width:480px){
  .card-body{padding:1.5rem!important;}
  .container{padding-left:.75rem!important;padding-right:.75rem!important;}
  .py-5{padding-top:1.5rem!important;padding-bottom:1.5rem!important;}
}
</style>
<div class="container py-5">
    <div class="auth-card-wrap">
        <div class="card shadow-lg border-0 rounded-4" style="position:relative;overflow:visible">
            <style>
            .demo-sticker{position:absolute;top:-14px;right:-14px;background:linear-gradient(160deg,#f9e08a 0%,#e8b84b 18%,#c8890a 32%,#f5d060 45%,#faeea0 52%,#d4a017 65%,#a07010 80%,#c8a830 92%,#f0d060 100%);color:#1a0800!important;text-decoration:none;padding:16px 28px;border-radius:8px;font-size:1.1rem;font-weight:800;border:1px solid #7a5000;box-shadow:0 2px 0 #faeea0 inset,0 -1px 0 #5a3800 inset,0 4px 14px rgba(160,112,16,.45);transform:rotate(8deg);transition:transform .2s,box-shadow .2s;z-index:10;display:flex;align-items:center;justify-content:center;line-height:1;cursor:pointer;}
            .demo-sticker:hover{transform:rotate(0deg) scale(1.05);box-shadow:0 2px 0 #faeea0 inset,0 -1px 0 #5a3800 inset,0 6px 22px rgba(160,112,16,.6);color:#1a0800!important;}
            .demo-sticker-arrow{display:inline-block;animation:sticker-nudge 1.5s ease-in-out infinite;}
            .demo-sticker-sub{font-size:.62rem;font-weight:600;opacity:.75;letter-spacing:.04em;}
            @keyframes sticker-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
            @media(max-width:480px){.demo-sticker{top:-12px;right:-6px;font-size:1rem;padding:12px 20px;}}
            </style>
            <a href="#" class="demo-sticker" onclick="event.preventDefault();document.getElementById('demoForm').submit();">
              Try Now
            </a>
            <div class="card-body p-5">
                <div class="text-center mb-4">
                    <div class="mb-3">
                        <img src="{{ url_for('static', filename='images/logo.png') }}"
                             alt="KitchenCrate"
                             class="auth-logo mb-2">
                    </div>
                    <h5 class="fw-bold text-success mb-1">Your kitchen, organised.</h5>
                    <p class="text-muted small mb-4" style="line-height:1.6">KitchenCrate brings your recipes, pantry, meal planning, and shopping list together in one place — so you spend less time thinking and more time cooking.</p>

                    <div class="d-flex flex-wrap justify-content-center gap-2 mb-4">
                        <span class="badge rounded-pill px-3 py-2" style="background:#e8f5ee;color:#0f5235;font-size:.72rem;font-weight:500">
                            <i class="fas fa-book-open me-1"></i>Recipe Library
                        </span>
                        <span class="badge rounded-pill px-3 py-2" style="background:#e8f5ee;color:#0f5235;font-size:.72rem;font-weight:500">
                            <i class="fas fa-calendar-alt me-1"></i>Meal Planner
                        </span>
                        <span class="badge rounded-pill px-3 py-2" style="background:#e8f5ee;color:#0f5235;font-size:.72rem;font-weight:500">
                            <i class="fas fa-carrot me-1"></i>Pantry Tracker
                        </span>
                        <span class="badge rounded-pill px-3 py-2" style="background:#e8f5ee;color:#0f5235;font-size:.72rem;font-weight:500">
                            <i class="fas fa-shopping-cart me-1"></i>Smart Shopping
                        </span>

                    </div>
                </div>

                {% with messages = get_flashed_messages(with_categories=true) %}
                    {% if messages %}
                        {% for category, message in messages %}
                        <div class="alert alert-{{ 'danger' if category == 'error' else category }} alert-dismissible fade show" role="alert">
                            {{ message }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                        {% endfor %}
                    {% endif %}
                {% endwith %}

                <form method="POST" action="{{ url_for('register') }}" class="auth-form" id="registerForm" novalidate>
                    <div class="auth-form-inner">
                        <div class="mb-3">
                            <label class="form-label fw-bold small text-muted text-uppercase">Username <span class="text-danger">*</span></label>
                            <input type="text" name="username" class="form-control bg-light border-0 py-3" required autofocus minlength="3">
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-bold small text-muted text-uppercase">Email <span class="text-danger">*</span></label>
                            <input type="email" name="email" class="form-control bg-light border-0 py-3" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-bold small text-muted text-uppercase">Password <span class="text-danger">*</span></label>
                            <input type="password" name="password" class="form-control bg-light border-0 py-3" required minlength="6">
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-bold small text-muted text-uppercase">Confirm Password <span class="text-danger">*</span></label>
                            <input type="password" name="confirm_password" id="confirm_password" class="form-control bg-light border-0 py-3" required minlength="6">
                            <div class="invalid-feedback" id="confirmFeedback">Passwords do not match.</div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label fw-bold small text-muted text-uppercase">Timezone</label>
                            <select name="timezone" class="form-select bg-light border-0 py-3">
                                <option value="America/Los_Angeles">Pacific Time</option>
                                <option value="America/Denver">Mountain Time</option>
                                <option value="America/Chicago">Central Time</option>
                                <option value="America/New_York">Eastern Time</option>
                            </select>
                        </div>

                        <button type="submit" class="btn btn-success py-3 shadow-sm mb-3 auth-submit">
                            <i class="bi bi-person-plus me-2"></i>Create Account
                        </button>

                        <div class="text-center">
                            <p class="text-muted small mb-0">Already have an account? <a href="{{ url_for('login') }}" class="text-success fw-bold text-decoration-none">Sign In</a></p>
                        </div>
                    </div>
                </form>
                <form id="demoForm" method="POST" action="{{ url_for('demo_login') }}" style="display:none"></form>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('registerForm').addEventListener('submit', function(e) {
        var password = document.querySelector('input[name="password"]').value;
        var confirm  = document.querySelector('input[name="confirm_password"]').value;
        var field    = document.getElementById('confirm_password');
        var feedback = document.getElementById('confirmFeedback');

        if (password !== confirm) {
            e.preventDefault();
            field.classList.add('is-invalid');
            feedback.textContent = 'Passwords do not match. Please ensure both fields contain the same value.';
            return false;
        }
        field.classList.remove('is-invalid');
    });

    /* Clear validation on re-type */
    document.getElementById('confirm_password').addEventListener('input', function() {
        this.classList.remove('is-invalid');
    });
});
</script>
{% endblock %}