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

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

{% block extra_css %}
<style>
    .recommendation-dashboard {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
        padding: 20px;
    }
    
    .dashboard-header {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 20px;
        padding: 30px;
        margin-bottom: 30px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(10px);
    }
    
    .dashboard-title {
        color: #4a5568;
        font-size: 2.5rem;
        font-weight: bold;
        margin-bottom: 10px;
        text-align: center;
    }
    
    .dashboard-subtitle {
        color: #718096;
        text-align: center;
        font-size: 1.1rem;
    }
    
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
    }
    
    .stat-card {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 15px;
        padding: 25px;
        text-align: center;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
    }
    
    .stat-card:hover {
        transform: translateY(-5px);
    }
    
    .stat-number {
        font-size: 2.5rem;
        font-weight: bold;
        color: #667eea;
        margin-bottom: 10px;
    }
    
    .stat-label {
        color: #4a5568;
        font-size: 1rem;
        font-weight: 500;
    }
    
    .content-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 30px;
    }
    
    .main-content {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 20px;
        padding: 30px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }
    
    .sidebar {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 20px;
        padding: 25px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        height: fit-content;
    }
    
    .section-title {
        color: #4a5568;
        font-size: 1.5rem;
        font-weight: bold;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 3px solid #667eea;
    }
    
    .behavior-list {
        max-height: 400px;
        overflow-y: auto;
    }
    
    .behavior-item {
        background: #f7fafc;
        border-radius: 10px;
        padding: 15px;
        margin-bottom: 10px;
        border-left: 4px solid #667eea;
    }
    
    .behavior-user {
        font-weight: bold;
        color: #4a5568;
    }
    
    .behavior-type {
        color: #667eea;
        font-size: 0.9rem;
    }
    
    .behavior-time {
        color: #718096;
        font-size: 0.8rem;
    }
    
    .model-card {
        background: #f7fafc;
        border-radius: 10px;
        padding: 15px;
        margin-bottom: 15px;
        border: 2px solid #e2e8f0;
    }
    
    .model-name {
        font-weight: bold;
        color: #4a5568;
        margin-bottom: 5px;
    }
    
    .model-accuracy {
        color: #667eea;
        font-size: 0.9rem;
    }
    
    .test-card {
        background: #f7fafc;
        border-radius: 10px;
        padding: 15px;
        margin-bottom: 15px;
        border: 2px solid #e2e8f0;
    }
    
    .test-name {
        font-weight: bold;
        color: #4a5568;
        margin-bottom: 5px;
    }
    
    .test-status {
        color: #667eea;
        font-size: 0.9rem;
    }
    
    .furry-decoration {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 3rem;
        opacity: 0.1;
    }
    
    @media (max-width: 768px) {
        .content-grid {
            grid-template-columns: 1fr;
        }
        
        .stats-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="recommendation-dashboard">
    <div class="furry-decoration">🦊</div>
    
    <div class="dashboard-header">
        <h1 class="dashboard-title">Recommendation Dashboard</h1>
        <p class="dashboard-subtitle">ML-basierte Empfehlungen & Analytics</p>
    </div>
    
    <!-- Stats Grid -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-number">{{ today_analytics.total_recommendations }}</div>
            <div class="stat-label">Empfehlungen heute</div>
        </div>
        
        <div class="stat-card">
            <div class="stat-number">{{ today_analytics.total_clicks }}</div>
            <div class="stat-label">Klicks heute</div>
        </div>
        
        <div class="stat-card">
            <div class="stat-number">{{ today_analytics.total_purchases }}</div>
            <div class="stat-label">Käufe heute</div>
        </div>
        
        <div class="stat-card">
            <div class="stat-number">{{ today_analytics.click_through_rate|floatformat:1 }}%</div>
            <div class="stat-label">Click-Through Rate</div>
        </div>
        
        <div class="stat-card">
            <div class="stat-number">{{ today_analytics.conversion_rate|floatformat:1 }}%</div>
            <div class="stat-label">Conversion Rate</div>
        </div>
        
        <div class="stat-card">
            <div class="stat-number">€{{ today_analytics.revenue_from_recommendations|floatformat:2 }}</div>
            <div class="stat-label">Umsatz aus Empfehlungen</div>
        </div>
    </div>
    
    <!-- Content Grid -->
    <div class="content-grid">
        <div class="main-content">
            <h2 class="section-title">📊 Aktuelle Aktivitäten</h2>
            
            <div class="behavior-list">
                {% for behavior in recent_behaviors %}
                <div class="behavior-item">
                    <div class="behavior-user">{{ behavior.user.username }}</div>
                    <div class="behavior-type">{{ behavior.get_behavior_type_display }}</div>
                    {% if behavior.product %}
                    <div class="behavior-product">Produkt: {{ behavior.product.name }}</div>
                    {% endif %}
                    <div class="behavior-time">{{ behavior.created_at|timesince }} ago</div>
                </div>
                {% empty %}
                <p style="color: #718096; text-align: center; padding: 20px;">
                    Noch keine Aktivitäten heute
                </p>
                {% endfor %}
            </div>
        </div>
        
        <div class="sidebar">
            <h2 class="section-title">🤖 ML Models</h2>
            
            {% for model in active_models %}
            <div class="model-card">
                <div class="model-name">{{ model.model_name }}</div>
                <div class="model-accuracy">Accuracy: {{ model.accuracy_score|floatformat:2 }}</div>
                <div class="model-accuracy">Type: {{ model.get_model_type_display }}</div>
            </div>
            {% empty %}
            <p style="color: #718096; text-align: center; padding: 20px;">
                Keine aktiven Models
            </p>
            {% endfor %}
            
            <h2 class="section-title" style="margin-top: 30px;">🧪 A/B Tests</h2>
            
            {% for test in active_tests %}
            <div class="test-card">
                <div class="test-name">{{ test.test_name }}</div>
                <div class="test-status">Status: {{ test.get_status_display }}</div>
                <div class="test-status">Traffic: {{ test.traffic_split|floatformat:0 }}%</div>
            </div>
            {% empty %}
            <p style="color: #718096; text-align: center; padding: 20px;">
                Keine aktiven Tests
            </p>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Auto-refresh dashboard every 30 seconds
setInterval(function() {
    location.reload();
}, 30000);

// Add some interactive elements
document.addEventListener('DOMContentLoaded', function() {
    // Add hover effects to stat cards
    const statCards = document.querySelectorAll('.stat-card');
    statCards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-5px) scale(1.02)';
        });
        
        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0) scale(1)';
        });
    });
});
</script>
{% endblock %}