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

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

{% block extra_css %}
<style>
    .analytics-page {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
        padding: 20px;
    }
    
    .analytics-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);
    }
    
    .analytics-title {
        color: #4a5568;
        font-size: 2.5rem;
        font-weight: bold;
        margin-bottom: 10px;
        text-align: center;
    }
    
    .analytics-subtitle {
        color: #718096;
        text-align: center;
        font-size: 1.1rem;
    }
    
    .totals-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
    }
    
    .total-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;
    }
    
    .total-card:hover {
        transform: translateY(-5px);
    }
    
    .total-number {
        font-size: 2rem;
        font-weight: bold;
        color: #667eea;
        margin-bottom: 10px;
    }
    
    .total-label {
        color: #4a5568;
        font-size: 0.9rem;
        font-weight: 500;
    }
    
    .analytics-content {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 20px;
        padding: 30px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }
    
    .section-title {
        color: #4a5568;
        font-size: 1.5rem;
        font-weight: bold;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 3px solid #667eea;
    }
    
    .analytics-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }
    
    .analytics-table th,
    .analytics-table td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #e2e8f0;
    }
    
    .analytics-table th {
        background: #f7fafc;
        color: #4a5568;
        font-weight: bold;
    }
    
    .analytics-table tr:hover {
        background: #f7fafc;
    }
    
    .metric-cell {
        font-weight: bold;
        color: #667eea;
    }
    
    .percentage-cell {
        color: #38a169;
        font-weight: bold;
    }
    
    .revenue-cell {
        color: #d69e2e;
        font-weight: bold;
    }
    
    .chart-container {
        margin-top: 30px;
        padding: 20px;
        background: #f7fafc;
        border-radius: 15px;
    }
    
    .chart-placeholder {
        height: 300px;
        background: linear-gradient(45deg, #e2e8f0 25%, transparent 25%), 
                    linear-gradient(-45deg, #e2e8f0 25%, transparent 25%), 
                    linear-gradient(45deg, transparent 75%, #e2e8f0 75%), 
                    linear-gradient(-45deg, transparent 75%, #e2e8f0 75%);
        background-size: 20px 20px;
        background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #718096;
        font-size: 1.2rem;
    }
    
    .furry-decoration {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 3rem;
        opacity: 0.1;
    }
    
    .date-filter {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 15px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
    
    .filter-form {
        display: flex;
        gap: 15px;
        align-items: center;
        flex-wrap: wrap;
    }
    
    .filter-input {
        padding: 10px 15px;
        border: 2px solid #e2e8f0;
        border-radius: 10px;
        background: white;
        color: #4a5568;
    }
    
    .filter-button {
        padding: 10px 20px;
        background: #667eea;
        color: white;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        transition: background 0.3s ease;
    }
    
    .filter-button:hover {
        background: #5a67d8;
    }
    
    @media (max-width: 768px) {
        .totals-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        
        .filter-form {
            flex-direction: column;
            align-items: stretch;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="analytics-page">
    <div class="furry-decoration">📊</div>
    
    <div class="analytics-header">
        <h1 class="analytics-title">Recommendation Analytics</h1>
        <p class="analytics-subtitle">Detaillierte Einblicke in Empfehlungs-Performance</p>
    </div>
    
    <!-- Date Filter -->
    <div class="date-filter">
        <form class="filter-form" method="get">
            <input type="date" name="start_date" class="filter-input" placeholder="Start Date">
            <input type="date" name="end_date" class="filter-input" placeholder="End Date">
            <button type="submit" class="filter-button">Filter anwenden</button>
        </form>
    </div>
    
    <!-- Totals Grid -->
    <div class="totals-grid">
        <div class="total-card">
            <div class="total-number">{{ totals.recommendations|floatformat:0 }}</div>
            <div class="total-label">Gesamt Empfehlungen</div>
        </div>
        
        <div class="total-card">
            <div class="total-number">{{ totals.clicks|floatformat:0 }}</div>
            <div class="total-label">Gesamt Klicks</div>
        </div>
        
        <div class="total-card">
            <div class="total-number">{{ totals.purchases|floatformat:0 }}</div>
            <div class="total-label">Gesamt Käufe</div>
        </div>
        
        <div class="total-card">
            <div class="total-number">{{ totals.ctr|floatformat:1 }}%</div>
            <div class="total-label">Durchschnitt CTR</div>
        </div>
        
        <div class="total-card">
            <div class="total-number">{{ totals.conversion_rate|floatformat:1 }}%</div>
            <div class="total-label">Durchschnitt Conversion</div>
        </div>
        
        <div class="total-card">
            <div class="total-number">€{{ totals.revenue|floatformat:2 }}</div>
            <div class="total-label">Gesamt Umsatz</div>
        </div>
    </div>
    
    <!-- Analytics Content -->
    <div class="analytics-content">
        <h2 class="section-title">📈 Tägliche Analytics</h2>
        
        <table class="analytics-table">
            <thead>
                <tr>
                    <th>Datum</th>
                    <th>Empfehlungen</th>
                    <th>Klicks</th>
                    <th>Käufe</th>
                    <th>CTR</th>
                    <th>Conversion</th>
                    <th>Umsatz</th>
                    <th>Durchschnitt Score</th>
                </tr>
            </thead>
            <tbody>
                {% for analytic in analytics %}
                <tr>
                    <td>{{ analytic.date|date:"d.m.Y" }}</td>
                    <td class="metric-cell">{{ analytic.total_recommendations }}</td>
                    <td class="metric-cell">{{ analytic.total_clicks }}</td>
                    <td class="metric-cell">{{ analytic.total_purchases }}</td>
                    <td class="percentage-cell">{{ analytic.click_through_rate|floatformat:1 }}%</td>
                    <td class="percentage-cell">{{ analytic.conversion_rate|floatformat:1 }}%</td>
                    <td class="revenue-cell">€{{ analytic.revenue_from_recommendations|floatformat:2 }}</td>
                    <td class="metric-cell">{{ analytic.avg_recommendation_score|floatformat:2 }}</td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="8" style="text-align: center; color: #718096; padding: 20px;">
                        Keine Analytics-Daten verfügbar
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        
        <!-- Chart Placeholder -->
        <div class="chart-container">
            <h3 style="color: #4a5568; margin-bottom: 15px;">📊 Performance Trends</h3>
            <div class="chart-placeholder">
                Chart wird hier angezeigt (Chart.js Integration geplant)
            </div>
        </div>
        
        <!-- Recommendation Type Breakdown -->
        <h2 class="section-title" style="margin-top: 40px;">🎯 Empfehlungs-Typen</h2>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 20px;">
            <div class="total-card">
                <div class="total-number">{{ totals.collaborative|default:0 }}</div>
                <div class="total-label">Collaborative</div>
            </div>
            
            <div class="total-card">
                <div class="total-number">{{ totals.content_based|default:0 }}</div>
                <div class="total-label">Content-based</div>
            </div>
            
            <div class="total-card">
                <div class="total-number">{{ totals.popular|default:0 }}</div>
                <div class="total-label">Popular</div>
            </div>
            
            <div class="total-card">
                <div class="total-number">{{ totals.personalized|default:0 }}</div>
                <div class="total-label">Personalized</div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Add interactive features
document.addEventListener('DOMContentLoaded', function() {
    // Add hover effects to total cards
    const totalCards = document.querySelectorAll('.total-card');
    totalCards.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)';
        });
    });
    
    // Add row hover effects
    const tableRows = document.querySelectorAll('.analytics-table tbody tr');
    tableRows.forEach(row => {
        row.addEventListener('mouseenter', function() {
            this.style.backgroundColor = '#edf2f7';
        });
        
        row.addEventListener('mouseleave', function() {
            this.style.backgroundColor = '';
        });
    });
    
    // Auto-refresh every 5 minutes
    setInterval(function() {
        location.reload();
    }, 300000);
});
</script>
{% endblock %}