{% extends 'shop/base.html' %}
{% load i18n %}
{% load static %}

{% block title %}{% trans "Set New Password" %} - Kasico Art & Design{% endblock %}

{% block content %}
<div class="password-reset-container">
    <div class="password-reset-hero furry-card text-center mb-5">
        <div class="hero-content">
            <div class="hero-icon">🔑</div>
            <h1 class="hero-title">{% trans "Neues Passwort setzen" %}</h1>
            <p class="hero-subtitle">{% trans "Wähle ein sicheres neues Passwort für dein Konto." %}</p>
        </div>
    </div>

    <div class="password-reset-form-container">
        <div class="form-card furry-card">
            {% if validlink %}
            <!-- Header -->
            <div class="form-header text-center mb-4">
                <div class="form-icon">✨</div>
                <h2 class="form-title">{% trans "Sicheres Passwort erstellen" %}</h2>
                <p class="form-description">
                    {% trans "Dein neues Passwort sollte mindestens 8 Zeichen lang sein und Buchstaben, Zahlen und Sonderzeichen enthalten." %}
                </p>
            </div>

            <form method="post" class="password-reset-form" novalidate>
                {% csrf_token %}
                
                {% if form.errors %}
                <div class="error-message furry-card">
                    <div class="error-icon">⚠️</div>
                    <div class="error-content">
                        <h4 class="error-title">{% trans "Fehler aufgetreten" %}</h4>
                        {% for field in form %}
                            {% for error in field.errors %}
                                <p class="error-text">{{ error }}</p>
                            {% endfor %}
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                <div class="form-group">
                    <label for="{{ form.new_password1.id_for_label }}" class="form-label">
                        🔒 {% trans "Neues Passwort" %}
                    </label>
                    <div class="input-wrapper">
                        {{ form.new_password1 }}
                        <div class="input-icon">🔒</div>
                        <button type="button" class="password-toggle" data-target="id_new_password1">
                            👁️
                        </button>
                    </div>
                    <div class="password-strength" id="passwordStrength">
                        <div class="strength-bar">
                            <div class="strength-fill" id="strengthFill"></div>
                        </div>
                        <div class="strength-text" id="strengthText">Passwort-Stärke</div>
                    </div>
                    {% if form.new_password1.help_text %}
                    <div class="form-help">{{ form.new_password1.help_text }}</div>
                    {% endif %}
                </div>

                <div class="form-group">
                    <label for="{{ form.new_password2.id_for_label }}" class="form-label">
                        🔐 {% trans "Passwort bestätigen" %}
                    </label>
                    <div class="input-wrapper">
                        {{ form.new_password2 }}
                        <div class="input-icon">🔐</div>
                        <button type="button" class="password-toggle" data-target="id_new_password2">
                            👁️
                        </button>
                    </div>
                    <div class="password-match" id="passwordMatch">
                        <span class="match-icon">⏳</span>
                        <span class="match-text">Passwörter werden verglichen...</span>
                    </div>
                    {% if form.new_password2.help_text %}
                    <div class="form-help">{{ form.new_password2.help_text }}</div>
                    {% endif %}
                </div>

                <div class="form-actions">
                    <button type="submit" class="btn furry-btn-primary">
                        <span class="btn-icon">🚀</span>
                        <span class="btn-text">{% trans "Passwort ändern" %}</span>
                    </button>
                </div>
            </form>
            
            {% else %}
            <!-- Invalid Link -->
            <div class="invalid-link furry-card text-center">
                <div class="invalid-icon">❌</div>
                <h3 class="invalid-title">{% trans "Ungültiger Link" %}</h3>
                <p class="invalid-description">
                    {% trans "Der Passwort-Reset-Link ist ungültig oder wurde bereits verwendet. Bitte fordere einen neuen Link an." %}
                </p>
                <div class="invalid-actions">
                    <a href="{% url 'password_reset' %}" class="btn furry-btn-primary">
                        <span class="btn-icon">🔄</span>
                        <span class="btn-text">{% trans "Neuen Link anfordern" %}</span>
                    </a>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<style>
:root {
    --primary-color: #8B5CF6;
    --secondary-color: #EC4899;
    --accent-color: #F59E0B;
    --dark-color: #1F2937;
    --light-color: #F3E8FF;
    --white-color: #FFFFFF;
    --gradient-start: #8B5CF6;
    --gradient-middle: #EC4899;
    --success-color: #10B981;
    --warning-color: #F59E0B;
    --error-color: #EF4444;
}

.password-reset-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.password-reset-hero {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-middle));
    color: white;
    padding: 3rem 2rem;
    border-radius: 20px;
    margin-bottom: 2rem;
}

.hero-content {
    text-align: center;
}

.hero-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.hero-subtitle {
    font-size: 1.2rem;
    opacity: 0.9;
    line-height: 1.6;
}

.password-reset-form-container {
    display: flex;
    justify-content: center;
}

.form-card {
    background: white;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.1);
    width: 100%;
    max-width: 500px;
}

.form-header {
    margin-bottom: 2rem;
}

.form-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.form-title {
    color: var(--dark-color);
    font-weight: 700;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.form-description {
    color: var(--dark-color);
    opacity: 0.8;
    line-height: 1.6;
    margin: 0;
}

.error-message {
    background: linear-gradient(135deg, #FEF2F2, #FEE2E2);
    border: 1px solid var(--error-color);
    border-radius: 15px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.error-icon {
    font-size: 1.5rem;
    min-width: 2rem;
}

.error-content {
    flex: 1;
}

.error-title {
    color: var(--error-color);
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.error-text {
    color: var(--error-color);
    margin: 0;
    font-size: 0.9rem;
}

.form-group {
    margin-bottom: 2rem;
}

.form-label {
    display: block;
    color: var(--dark-color);
    font-weight: 600;
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

.input-wrapper {
    position: relative;
}

#id_new_password1, #id_new_password2 {
    width: 100%;
    padding: 1rem 3rem 1rem 3rem;
    border-radius: 15px;
    border: 2px solid var(--light-color);
    font-size: 1rem;
    transition: all 0.3s ease;
    background: white;
}

#id_new_password1:focus, #id_new_password2:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
    outline: none;
    transform: translateY(-2px);
}

.input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: var(--dark-color);
    opacity: 0.6;
}

.password-toggle {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--dark-color);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.password-toggle:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

.password-strength {
    margin-top: 1rem;
}

.strength-bar {
    width: 100%;
    height: 8px;
    background: var(--light-color);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.strength-fill {
    height: 100%;
    width: 0%;
    transition: all 0.3s ease;
    border-radius: 4px;
}

.strength-fill.weak {
    background: var(--error-color);
    width: 25%;
}

.strength-fill.fair {
    background: var(--warning-color);
    width: 50%;
}

.strength-fill.good {
    background: var(--accent-color);
    width: 75%;
}

.strength-fill.strong {
    background: var(--success-color);
    width: 100%;
}

.strength-text {
    font-size: 0.875rem;
    color: var(--dark-color);
    opacity: 0.7;
}

.password-match {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.match-icon {
    font-size: 1rem;
}

.match-text {
    color: var(--dark-color);
    opacity: 0.7;
}

.password-match.matching {
    color: var(--success-color);
}

.password-match.not-matching {
    color: var(--error-color);
}

.form-help {
    color: var(--dark-color);
    opacity: 0.7;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    line-height: 1.4;
}

.form-actions {
    margin-bottom: 2rem;
}

.furry-btn-primary {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-middle));
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 25px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    cursor: pointer;
}

.furry-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3);
    color: white;
    text-decoration: none;
}

.furry-btn-primary:active {
    transform: translateY(-1px);
}

.btn-icon {
    font-size: 1.2rem;
}

.btn-text {
    font-weight: 600;
}

.invalid-link {
    text-align: center;
    padding: 3rem 2rem;
}

.invalid-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
}

.invalid-title {
    color: var(--error-color);
    font-weight: 700;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.invalid-description {
    color: var(--dark-color);
    opacity: 0.8;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.invalid-actions {
    display: flex;
    justify-content: center;
}

@media (max-width: 768px) {
    .password-reset-container {
        padding: 1rem;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .form-card {
        padding: 2rem;
    }
    
    .hero-icon {
        font-size: 3rem;
    }
}

/* Animation für Form Elements */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-card {
    animation: fadeInUp 0.6s ease-out;
}

/* Loading Animation für Button */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.furry-btn-primary.loading {
    pointer-events: none;
}

.furry-btn-primary.loading .btn-icon {
    animation: spin 1s linear infinite;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('.password-reset-form');
    const submitBtn = document.querySelector('.furry-btn-primary');
    const password1Input = document.getElementById('id_new_password1');
    const password2Input = document.getElementById('id_new_password2');
    const passwordToggles = document.querySelectorAll('.password-toggle');
    const strengthFill = document.getElementById('strengthFill');
    const strengthText = document.getElementById('strengthText');
    const passwordMatch = document.getElementById('passwordMatch');
    
    // Password toggle functionality
    passwordToggles.forEach(toggle => {
        toggle.addEventListener('click', function() {
            const targetId = this.dataset.target;
            const targetInput = document.getElementById(targetId);
            
            if (targetInput.type === 'password') {
                targetInput.type = 'text';
                this.textContent = '🙈';
            } else {
                targetInput.type = 'password';
                this.textContent = '👁️';
            }
        });
    });
    
    // Password strength checker
    function checkPasswordStrength(password) {
        let score = 0;
        let feedback = [];
        
        if (password.length >= 8) score += 1;
        else feedback.push('Mindestens 8 Zeichen');
        
        if (/[a-z]/.test(password)) score += 1;
        else feedback.push('Kleinbuchstaben');
        
        if (/[A-Z]/.test(password)) score += 1;
        else feedback.push('Großbuchstaben');
        
        if (/[0-9]/.test(password)) score += 1;
        else feedback.push('Zahlen');
        
        if (/[^A-Za-z0-9]/.test(password)) score += 1;
        else feedback.push('Sonderzeichen');
        
        return { score, feedback };
    }
    
    // Update password strength
    password1Input.addEventListener('input', function() {
        const password = this.value;
        const { score, feedback } = checkPasswordStrength(password);
        
        // Remove existing classes
        strengthFill.classList.remove('weak', 'fair', 'good', 'strong');
        
        if (password.length === 0) {
            strengthFill.style.width = '0%';
            strengthText.textContent = 'Passwort-Stärke';
        } else if (score <= 2) {
            strengthFill.classList.add('weak');
            strengthText.textContent = 'Schwach - ' + feedback.join(', ');
        } else if (score <= 3) {
            strengthFill.classList.add('fair');
            strengthText.textContent = 'Mittel - ' + feedback.join(', ');
        } else if (score <= 4) {
            strengthFill.classList.add('good');
            strengthText.textContent = 'Gut - ' + feedback.join(', ');
        } else {
            strengthFill.classList.add('strong');
            strengthText.textContent = 'Stark - Sicheres Passwort!';
        }
        
        // Check password match
        checkPasswordMatch();
    });
    
    // Check password match
    password2Input.addEventListener('input', checkPasswordMatch);
    
    function checkPasswordMatch() {
        const password1 = password1Input.value;
        const password2 = password2Input.value;
        
        if (password2.length === 0) {
            passwordMatch.innerHTML = '<span class="match-icon">⏳</span><span class="match-text">Passwörter werden verglichen...</span>';
            passwordMatch.className = 'password-match';
        } else if (password1 === password2) {
            passwordMatch.innerHTML = '<span class="match-icon">✅</span><span class="match-text">Passwörter stimmen überein</span>';
            passwordMatch.className = 'password-match matching';
        } else {
            passwordMatch.innerHTML = '<span class="match-icon">❌</span><span class="match-text">Passwörter stimmen nicht überein</span>';
            passwordMatch.className = 'password-match not-matching';
        }
    }
    
    // Form submission with validation
    if (form) {
        form.addEventListener('submit', function(e) {
            const password1 = password1Input.value;
            const password2 = password2Input.value;
            
            if (password1.length < 8) {
                e.preventDefault();
                showError('Das Passwort muss mindestens 8 Zeichen lang sein.');
                return;
            }
            
            if (password1 !== password2) {
                e.preventDefault();
                showError('Die Passwörter stimmen nicht überein.');
                return;
            }
            
            // Show loading state
            submitBtn.classList.add('loading');
            submitBtn.innerHTML = '<span class="btn-icon">🔄</span><span class="btn-text">Passwort wird geändert...</span>';
        });
    }
    
    // Focus effects
    [password1Input, password2Input].forEach(input => {
        input.addEventListener('focus', function() {
            this.parentElement.style.transform = 'scale(1.02)';
        });
        
        input.addEventListener('blur', function() {
            this.parentElement.style.transform = 'scale(1)';
        });
    });
    
    function showError(message) {
        // Remove existing error messages
        const existingError = document.querySelector('.error-message');
        if (existingError) {
            existingError.remove();
        }
        
        // Create new error message
        const errorDiv = document.createElement('div');
        errorDiv.className = 'error-message furry-card';
        errorDiv.innerHTML = `
            <div class="error-icon">⚠️</div>
            <div class="error-content">
                <h4 class="error-title">Fehler</h4>
                <p class="error-text">${message}</p>
            </div>
        `;
        
        form.insertBefore(errorDiv, form.firstChild);
        
        // Scroll to error
        errorDiv.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
});
</script>
{% endblock %}