{% extends "admin/base_site.html" %}
{% load static %}

{% block title %}Dashboard - Kasico Administration{% endblock %}

{% block extrastyle %}
<style>
    .dashboard-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
        margin-bottom: 2rem;
    }
    
    .stat-card {
        background: white;
        border-radius: 8px;
        padding: 1.5rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        border-left: 4px solid #8B5CF6;
    }
    
    .stat-card h3 {
        margin: 0 0 0.5rem 0;
        color: #374151;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    
    .stat-card .stat-value {
        font-size: 2rem;
        font-weight: bold;
        color: #8B5CF6;
        margin: 0;
    }
    
    .stat-card .stat-change {
        font-size: 0.875rem;
        color: #6B7280;
        margin-top: 0.5rem;
    }
    
    .dashboard-section {
        background: white;
        border-radius: 8px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .dashboard-section h2 {
        margin: 0 0 1rem 0;
        color: #374151;
        font-size: 1.25rem;
    }
    
    .recent-item {
        padding: 0.75rem;
        border-bottom: 1px solid #E5E7EB;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .recent-item:last-child {
        border-bottom: none;
    }
    
    .status-badge {
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-size: 0.75rem;
        font-weight: 500;
    }
    
    .status-new { background: #DBEAFE; color: #1E40AF; }
    .status-pending { background: #FEF3C7; color: #92400E; }
    .status-paid { background: #D1FAE5; color: #065F46; }
    .status-shipped { background: #E0E7FF; color: #3730A3; }
    
    .quick-actions {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        margin-top: 1rem;
    }
    
    .quick-action {
        background: #F3F4F6;
        border-radius: 6px;
        padding: 1rem;
        text-align: center;
        text-decoration: none;
        color: #374151;
        transition: all 0.2s;
    }
    
    .quick-action:hover {
        background: #E5E7EB;
        transform: translateY(-1px);
    }
    
    .quick-action-icon {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="dashboard">
    <h1 style="margin-bottom: 2rem; color: #374151;">🐾 Kasico Dashboard</h1>
    
    <!-- Statistiken -->
    <div class="dashboard-stats">
        <div class="stat-card">
            <h3>Gesamtbestellungen</h3>
            <div class="stat-value">{{ total_orders }}</div>
            <div class="stat-change">+12% diese Woche</div>
        </div>
        
        <div class="stat-card">
            <h3>Produkte</h3>
            <div class="stat-value">{{ total_products }}</div>
            <div class="stat-change">{{ low_stock_products.count }} niedriger Lagerbestand</div>
        </div>
        
        <div class="stat-card">
            <h3>Kunden</h3>
            <div class="stat-value">{{ total_users }}</div>
            <div class="stat-change">+5% diesen Monat</div>
        </div>
        
        <div class="stat-card">
            <h3>Offene Anfragen</h3>
            <div class="stat-value">{{ pending_contacts.count }}</div>
            <div class="stat-change">Neue Nachrichten</div>
        </div>
    </div>
    
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;">
        <!-- Letzte Bestellungen -->
        <div class="dashboard-section">
            <h2>📦 Letzte Bestellungen</h2>
            {% for order in recent_orders %}
            <div class="recent-item">
                <div>
                    <strong>#{{ order.id }}</strong> - {{ order.full_name }}
                    <br>
                    <small>{{ order.created|date:"d.m.Y H:i" }}</small>
                </div>
                <div>
                    <span class="status-badge status-{{ order.payment_status }}">
                        {{ order.get_payment_status_display }}
                    </span>
                    <br>
                    <small>{{ order.total_amount }}€</small>
                </div>
            </div>
            {% empty %}
            <p style="color: #6B7280; text-align: center; padding: 2rem;">Keine Bestellungen vorhanden</p>
            {% endfor %}
        </div>
        
        <!-- Niedriger Lagerbestand -->
        <div class="dashboard-section">
            <h2>⚠️ Niedriger Lagerbestand</h2>
            {% for product in low_stock_products %}
            <div class="recent-item">
                <div>
                    <strong>{{ product.name }}</strong>
                    <br>
                    <small>{{ product.get_fursuit_type_display }} • {{ product.get_style_display }}</small>
                </div>
                <div>
                    <span class="status-badge status-pending">
                        {{ product.stock }} Stück
                    </span>
                </div>
            </div>
            {% empty %}
            <p style="color: #6B7280; text-align: center; padding: 2rem;">Alle Produkte verfügbar</p>
            {% endfor %}
        </div>
    </div>
    
    <!-- Schnellaktionen -->
    <div class="dashboard-section">
        <h2>⚡ Schnellaktionen</h2>
        <div class="quick-actions">
            <a href="{% url 'admin:products_product_add' %}" class="quick-action">
                <div class="quick-action-icon">➕</div>
                <div>Neues Produkt</div>
            </a>
            <a href="{% url 'admin:products_order_changelist' %}" class="quick-action">
                <div class="quick-action-icon">📦</div>
                <div>Bestellungen</div>
            </a>
            <a href="{% url 'admin:products_contactmessage_changelist' %}" class="quick-action">
                <div class="quick-action-icon">💬</div>
                <div>Nachrichten</div>
            </a>
            <a href="{% url 'admin:products_customorder_changelist' %}" class="quick-action">
                <div class="quick-action-icon">🎨</div>
                <div>Custom Orders</div>
            </a>
            <a href="{% url 'admin:chat_chatroom_changelist' %}" class="quick-action">
                <div class="quick-action-icon">💬</div>
                <div>Chat Support</div>
            </a>
            <a href="{% url 'admin:recommendations_recommendationmodel_changelist' %}" class="quick-action">
                <div class="quick-action-icon">🤖</div>
                <div>ML Models</div>
            </a>
        </div>
    </div>
</div>
{% endblock %}