{% extends 'base.html' %}
{% load static %}

{% block title %}Dashboard - Kasico Fursuit Shop{% endblock %}

{% block content %}
<div class="dashboard-container">
    <!-- Hero-Header -->
    <div class="dashboard-hero furry-card text-center mb-5">
        <div class="dashboard-hero-content">
            <h1 class="dashboard-title">🎛️ Mein Dashboard</h1>
            <p class="dashboard-subtitle">Willkommen zurück, {{ user.username }}! 🐺</p>
            <div class="dashboard-stats">
                <span class="stat-item">📅 {{ user.date_joined|date:"d.m.Y" }}</span>
                <span class="stat-item">⭐ Mitglied seit {{ user.date_joined|timesince }}</span>
            </div>
        </div>
    </div>

    <!-- Quick Stats -->
    <div class="stats-section furry-card mb-5">
        <h2 class="section-title">📊 Übersicht</h2>
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-icon">📦</div>
                <div class="stat-content">
                    <div class="stat-number">{{ total_orders }}</div>
                    <div class="stat-label">Bestellungen</div>
                </div>
            </div>
            
            <div class="stat-card">
                <div class="stat-icon">💳</div>
                <div class="stat-content">
                    <div class="stat-number">{{ total_spent }}€</div>
                    <div class="stat-label">Ausgegeben</div>
                </div>
            </div>
            
            <div class="stat-card">
                <div class="stat-icon">❤️</div>
                <div class="stat-content">
                    <div class="stat-number">{{ wishlist_count }}</div>
                    <div class="stat-label">Wunschliste</div>
                </div>
            </div>
            
            <div class="stat-card">
                <div class="stat-icon">⭐</div>
                <div class="stat-content">
                    <div class="stat-number">{{ reviews_count }}</div>
                    <div class="stat-label">Bewertungen</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="actions-section furry-card mb-5">
        <h2 class="section-title">⚡ Schnelle Aktionen</h2>
        <div class="actions-grid">
            <a href="{% url 'products:product_list' %}" class="action-card">
                <div class="action-icon">🛍️</div>
                <div class="action-content">
                    <h4>Shop durchsuchen</h4>
                    <p>Entdecke neue Fursuits</p>
                </div>
            </a>
            
            <a href="{% url 'products:wishlist' %}" class="action-card">
                <div class="action-icon">❤️</div>
                <div class="action-content">
                    <h4>Wunschliste</h4>
                    <p>Deine Favoriten</p>
                </div>
            </a>
            
            <a href="{% url 'products:custom_order' %}" class="action-card">
                <div class="action-icon">🎨</div>
                <div class="action-content">
                    <h4>Custom Order</h4>
                    <p>Individueller Fursuit</p>
                </div>
            </a>
            
            <a href="{% url 'products:contact' %}" class="action-card">
                <div class="action-icon">📞</div>
                <div class="action-content">
                    <h4>Support</h4>
                    <p>Hilfe & Kontakt</p>
                </div>
            </a>
        </div>
    </div>

    <!-- Recent Orders -->
    {% if recent_orders %}
    <div class="orders-section furry-card mb-5">
        <div class="section-header">
            <h2 class="section-title">📦 Letzte Bestellungen</h2>
            <a href="{% url 'products:order_history' %}" class="btn furry-btn-outline">
                Alle anzeigen
            </a>
        </div>
        
        <div class="orders-grid">
            {% for order in recent_orders %}
            <div class="order-card">
                <div class="order-header">
                    <h4 class="order-title">Bestellung #{{ order.id }}</h4>
                    <span class="order-status status-{{ order.status }}">
                        {{ order.get_status_display }}
                    </span>
                </div>
                <div class="order-details">
                    <p class="order-date">{{ order.created_at|date:"d.m.Y H:i" }}</p>
                    <p class="order-amount">{{ order.total_amount }}€</p>
                </div>
                <div class="order-actions">
                    <a href="{% url 'products:order_detail' order.id %}" class="btn furry-btn-sm">
                        👁️ Details
                    </a>
                    {% if order.status == 'pending' %}
                    <button class="btn furry-btn-secondary furry-btn-sm">
                        💳 Bezahlen
                    </button>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Custom Orders -->
    {% if custom_orders %}
    <div class="custom-orders-section furry-card mb-5">
        <div class="section-header">
            <h2 class="section-title">🎨 Custom Orders</h2>
            <a href="{% url 'products:custom_order_list' %}" class="btn furry-btn-outline">
                Alle anzeigen
            </a>
        </div>
        
        <div class="custom-orders-grid">
            {% for order in custom_orders %}
            <div class="custom-order-card">
                <div class="custom-order-header">
                    <h4 class="custom-order-title">Custom Order #{{ order.id }}</h4>
                    <span class="custom-order-status status-{{ order.status }}">
                        {{ order.get_status_display }}
                    </span>
                </div>
                <div class="custom-order-details">
                    <p class="custom-order-date">{{ order.created_at|date:"d.m.Y" }}</p>
                    <p class="custom-order-description">{{ order.description|truncatewords:10 }}</p>
                </div>
                <div class="custom-order-actions">
                    <a href="{% url 'products:custom_order_detail' order.id %}" class="btn furry-btn-sm">
                        👁️ Details
                    </a>
                    {% if order.status == 'in_progress' %}
                    <button class="btn furry-btn-secondary furry-btn-sm">
                        📊 Fortschritt
                    </button>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Profile Section -->
    <div class="profile-section furry-card mb-5">
        <div class="section-header">
            <h2 class="section-title">👤 Mein Profil</h2>
            <a href="{% url 'products:profile' %}" class="btn furry-btn-outline">
                Bearbeiten
            </a>
        </div>
        
        <div class="profile-grid">
            <div class="profile-info-card">
                <h4 class="profile-subtitle">📝 Persönliche Daten</h4>
                <div class="profile-details">
                    <div class="profile-item">
                        <span class="profile-label">Name:</span>
                        <span class="profile-value">{{ user.first_name }} {{ user.last_name }}</span>
                    </div>
                    <div class="profile-item">
                        <span class="profile-label">E-Mail:</span>
                        <span class="profile-value">{{ user.email }}</span>
                    </div>
                    <div class="profile-item">
                        <span class="profile-label">Mitglied seit:</span>
                        <span class="profile-value">{{ user.date_joined|date:"d.m.Y" }}</span>
                    </div>
                </div>
            </div>
            
            <div class="profile-info-card">
                <h4 class="profile-subtitle">📍 Adressen</h4>
                <div class="profile-details">
                    {% if shipping_addresses %}
                    <div class="profile-item">
                        <span class="profile-label">Versandadressen:</span>
                        <span class="profile-value">{{ shipping_addresses.count }}</span>
                    </div>
                    {% else %}
                    <div class="profile-item">
                        <span class="profile-label">Versandadressen:</span>
                        <span class="profile-value">Keine gespeichert</span>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Notifications -->
    {% if notifications %}
    <div class="notifications-section furry-card mb-5">
        <div class="section-header">
            <h2 class="section-title">🔔 Benachrichtigungen</h2>
        </div>
        
        <div class="notifications-grid">
            {% for notification in notifications %}
            <div class="notification-card notification-{{ notification.type }}">
                <div class="notification-icon">
                    {% if notification.type == 'success' %}✅
                    {% elif notification.type == 'error' %}❌
                    {% elif notification.type == 'warning' %}⚠️
                    {% else %}ℹ️{% endif %}
                </div>
                <div class="notification-content">
                    <h4 class="notification-title">{{ notification.title }}</h4>
                    <p class="notification-message">{{ notification.message }}</p>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Support Section -->
    <div class="support-section furry-card">
        <div class="section-header">
            <h2 class="section-title">🆘 Brauchst du Hilfe?</h2>
        </div>
        
        <div class="support-grid">
            <div class="support-card">
                <div class="support-icon">📞</div>
                <h4 class="support-title">Kontakt</h4>
                <p class="support-description">Hast du Fragen? Wir helfen dir gerne weiter!</p>
                <a href="{% url 'products:contact' %}" class="btn furry-btn">
                    Kontakt aufnehmen
                </a>
            </div>
            
            <div class="support-card">
                <div class="support-icon">❓</div>
                <h4 class="support-title">FAQ</h4>
                <p class="support-description">Häufig gestellte Fragen und Antworten</p>
                <a href="{% url 'products:faq' %}" class="btn furry-btn-secondary">
                    FAQ durchsuchen
                </a>
            </div>
            
            <div class="support-card">
                <div class="support-icon">📋</div>
                <h4 class="support-title">Bestellungen</h4>
                <p class="support-description">Verfolge deine Bestellungen und Custom Orders</p>
                <a href="{% url 'products:order_history' %}" class="btn furry-btn-outline">
                    Bestellungen anzeigen
                </a>
            </div>
        </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;
}

.dashboard-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

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

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

.dashboard-subtitle {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 2rem;
}

.dashboard-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.stat-item {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
}

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

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.stats-section {
    padding: 2rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.stat-card {
    background: white;
    padding: 1.5rem;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.1);
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.15);
}

.stat-icon {
    font-size: 2rem;
    min-width: 3rem;
}

.stat-content {
    flex: 1;
}

.stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.25rem;
}

.stat-label {
    color: var(--dark-color);
    opacity: 0.7;
    font-size: 0.9rem;
}

.actions-section {
    padding: 2rem;
}

.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.action-card {
    background: white;
    padding: 1.5rem;
    border-radius: 15px;
    text-decoration: none;
    color: var(--dark-color);
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.1);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.action-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.15);
    text-decoration: none;
    color: var(--dark-color);
}

.action-icon {
    font-size: 2rem;
    min-width: 3rem;
}

.action-content h4 {
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.action-content p {
    margin: 0;
    opacity: 0.7;
    font-size: 0.9rem;
}

.orders-section, .custom-orders-section {
    padding: 2rem;
}

.orders-grid, .custom-orders-grid {
    display: grid;
    gap: 1rem;
}

.order-card, .custom-order-card {
    background: white;
    padding: 1.5rem;
    border-radius: 15px;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.1);
    transition: transform 0.3s ease;
}

.order-card:hover, .custom-order-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.15);
}

.order-header, .custom-order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.order-title, .custom-order-title {
    margin: 0;
    font-weight: 600;
    color: var(--dark-color);
}

.order-status, .custom-order-status {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
}

.status-pending {
    background: var(--warning-color);
    color: white;
}

.status-completed {
    background: var(--success-color);
    color: white;
}

.status-cancelled {
    background: var(--error-color);
    color: white;
}

.order-details, .custom-order-details {
    margin-bottom: 1rem;
}

.order-date, .custom-order-date {
    margin: 0;
    color: var(--dark-color);
    opacity: 0.7;
    font-size: 0.9rem;
}

.order-amount {
    margin: 0.5rem 0 0 0;
    font-weight: 600;
    color: var(--primary-color);
}

.custom-order-description {
    margin: 0.5rem 0 0 0;
    color: var(--dark-color);
    opacity: 0.8;
    font-size: 0.9rem;
}

.order-actions, .custom-order-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.profile-section {
    padding: 2rem;
}

.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.profile-info-card {
    background: white;
    padding: 1.5rem;
    border-radius: 15px;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.1);
}

.profile-subtitle {
    color: var(--dark-color);
    font-weight: 600;
    margin-bottom: 1rem;
}

.profile-details {
    display: grid;
    gap: 0.75rem;
}

.profile-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--light-color);
}

.profile-item:last-child {
    border-bottom: none;
}

.profile-label {
    font-weight: 600;
    color: var(--dark-color);
}

.profile-value {
    color: var(--dark-color);
    opacity: 0.8;
}

.notifications-section {
    padding: 2rem;
}

.notifications-grid {
    display: grid;
    gap: 1rem;
}

.notification-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: 10px;
    background: white;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.1);
}

.notification-success {
    border-left: 4px solid var(--success-color);
}

.notification-error {
    border-left: 4px solid var(--error-color);
}

.notification-warning {
    border-left: 4px solid var(--warning-color);
}

.notification-info {
    border-left: 4px solid var(--primary-color);
}

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

.notification-content {
    flex: 1;
}

.notification-title {
    margin: 0 0 0.5rem 0;
    font-weight: 600;
    color: var(--dark-color);
}

.notification-message {
    margin: 0;
    color: var(--dark-color);
    opacity: 0.8;
    font-size: 0.9rem;
}

.support-section {
    padding: 2rem;
}

.support-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.support-card {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.1);
    transition: transform 0.3s ease;
}

.support-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.15);
}

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

.support-title {
    color: var(--dark-color);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.support-description {
    color: var(--dark-color);
    opacity: 0.7;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.furry-btn {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-middle));
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

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

.furry-btn-secondary {
    background: var(--secondary-color);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.furry-btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.3);
    color: white;
    text-decoration: none;
}

.furry-btn-outline {
    background: white;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.furry-btn-outline:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
    text-decoration: none;
}

.furry-btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
}

@media (max-width: 768px) {
    .dashboard-container {
        padding: 1rem;
    }
    
    .dashboard-title {
        font-size: 2rem;
    }
    
    .dashboard-stats {
        flex-direction: column;
        gap: 1rem;
    }
    
    .stat-item {
        width: 100%;
        text-align: center;
    }
    
    .stats-grid, .actions-grid, .support-grid {
        grid-template-columns: 1fr;
    }
    
    .section-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
}

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

.stat-card, .action-card, .order-card, .custom-order-card, .support-card {
    animation: fadeInUp 0.6s ease-out;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-refresh notifications every 30 seconds
    setInterval(function() {
        fetch('/dashboard/notifications/')
            .then(response => response.json())
            .then(data => {
                if (data.notifications && data.notifications.length > 0) {
                    // Update notifications section
                    const notificationsContainer = document.querySelector('.notifications-grid');
                    if (notificationsContainer) {
                        // Add new notifications
                        data.notifications.forEach(notification => {
                            const alert = document.createElement('div');
                            alert.className = `notification-card notification-${notification.type}`;
                            alert.innerHTML = `
                                <div class="notification-icon">
                                    ${notification.type === 'success' ? '✅' : 
                                      notification.type === 'error' ? '❌' : 
                                      notification.type === 'warning' ? '⚠️' : 'ℹ️'}
                                </div>
                                <div class="notification-content">
                                    <h4 class="notification-title">${notification.title}</h4>
                                    <p class="notification-message">${notification.message}</p>
                                </div>
                            `;
                            notificationsContainer.appendChild(alert);
                            
                            // Add animation
                            alert.style.animation = 'fadeInUp 0.6s ease-out';
                        });
                    }
                }
            })
            .catch(error => console.error('Error fetching notifications:', error));
    }, 30000);
    
    // Add hover effects to action cards
    const actionCards = document.querySelectorAll('.action-card');
    actionCards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-8px) scale(1.02)';
        });
        
        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0) scale(1)';
        });
    });
});
</script>
{% endblock %}