{% extends "sidebar.html" %}

{% block title %}AstraOS — Dashboard{% endblock %}

{% block head %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<style>
.glow-card {
    transition: 0.2s ease;
}
.glow-card:hover {
    box-shadow: 0 0 20px rgba(192,132,252,0.3);
    transform: translateY(-4px);
}
.quick-link {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    transition: all 0.2s ease;
    text-decoration: none;
    color: #e6e6e6;
}
.quick-link:hover {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.6);
}
</style>
{% endblock %}

{% block content %}
<header class="flex justify-between items-center mb-6 opacity-0">
    <h2 class="text-4xl font-bold tracking-wide {% if maintenance_active %}text-yellow-300{% else %}text-purple-300{% endif %}">Dashboard</h2>
</header>

<div class="grid grid-cols-1 gap-8">
    <div class="glow-card opacity-0 translate-y-8 lg:col-span-2 bg-black/40 p-6 rounded-xl backdrop-blur
                {% if maintenance_active %}border border-yellow-500/30{% else %}border border-purple-500/20{% endif %}">
        <h3 class="text-2xl font-semibold mb-4">🚀 Willkommen bei AstraOS</h3>
        <p class="text-gray-300">
            Schön, dass du da bist. Deine Systeme sind einsatzbereit.
        </p>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
    <div id="server-load-card" class="glow-card opacity-0 translate-y-8 bg-black/40 border border-red-500/40 rounded-xl p-6 backdrop-blur">
        <h3 class="text-xl font-semibold mb-2 {% if maintenance_active %}text-yellow-300{% else %}text-purple-300{% endif %}">Server-Auslastung</h3>
        <p class="text-4xl font-bold" id="server-load">{{ stats.server_load.percent }}%</p>
        <p class="text-red-400 text-sm mt-1" id="server-load-status">{{ stats.server_load.status }}</p>
    </div>

    <div class="glow-card opacity-0 translate-y-8 bg-black/40 rounded-xl p-6 backdrop-blur
                {% if maintenance_active %}border border-yellow-500/30{% else %}border border-purple-500/20{% endif %}">
        <h3 class="text-xl font-semibold mb-2 {% if maintenance_active %}text-yellow-300{% else %}text-purple-300{% endif %}">Aktive Benutzer</h3>
        <p class="text-4xl font-bold" id="active-users">{{ stats.active_users.value }}</p>
        <p class="text-green-400 text-sm mt-1">
            {% set pct = stats.active_users.percent %}
            {% if pct is not none %}
                {{ '+' if pct>=0 else '' }}{{ pct }}% vs. letzte Woche
            {% else %}
                -
            {% endif %}
        </p>
    </div>

    <div class="glow-card opacity-0 translate-y-8 bg-black/40 rounded-xl p-6 backdrop-blur
                {% if maintenance_active %}border border-yellow-500/30{% else %}border border-purple-500/20{% endif %}">
        <h3 class="text-xl font-semibold mb-2 {% if maintenance_active %}text-yellow-300{% else %}text-purple-300{% endif %}">Geplante Wartung</h3>
        {% set maint = stats.scheduled_maintenance %}
        {% if maint and maint.enabled %}
            <p class="text-2xl font-bold text-yellow-400">Aktiv</p>
            <p class="text-yellow-400 text-sm mt-1">{{ maint.status if maint.status else 'Wartungsarbeiten laufen' }}</p>
        {% elif maint and maint.time_str %}
            <p class="text-2xl font-bold">{{ maint.time_str }}</p>
            <p class="text-yellow-400 text-sm mt-1">{{ maint.status if maint and maint.status else 'Geplant' }} {% if maint and maint.duration_minutes %}— {{ maint.duration_minutes }} Min.{% endif %}</p>
        {% else %}
            <p class="text-2xl font-bold">Keine geplant</p>
            <p class="text-gray-400 text-sm mt-1">Alles läuft normal.</p>
        {% endif %}
    </div>
</div>

<div class="grid grid-cols-1 gap-8 mt-8">
    <div class="glow-card opacity-0 translate-y-8 bg-black/40 rounded-xl p-6 backdrop-blur
                {% if maintenance_active %}border border-yellow-500/30{% else %}border border-purple-500/20{% endif %}">
        <h3 class="text-xl font-semibold mb-4 {% if maintenance_active %}text-yellow-300{% else %}text-purple-300{% endif %}">⚡ Quick Access</h3>
        <div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
            {% for tool in available_tools %}
            <a href="{{ url_for(tool.url) }}" class="quick-link text-center">
                <div class="text-sm font-medium">{{ tool.label }}</div>
            </a>
            {% endfor %}
        </div>
        {% if not available_tools %}
        <div class="text-gray-500 text-sm italic">Keine verfügbaren Tools für dich.</div>
        {% endif %}
    </div>
</div>

<script>
gsap.registerPlugin(ScrollTrigger);

setTimeout(() => {
    const tl = gsap.timeline({ defaults: { duration: 0.4, ease: "power3.out" } });

    tl.to("header", { opacity: 1, y: 0 });

    tl.to(".glow-card", { opacity: 1, y: 0, stagger: 0.08 });

    gsap.to("header", {
        y: 8,
        ease: "none",
        scrollTrigger: {
            trigger: "header",
            start: "top top",
            scrub: true
        }
    });
}, 800);

document.querySelectorAll(".glow-card").forEach(card => {
    card.addEventListener("mouseenter", () => {
        gsap.to(card, { boxShadow: "0 0 30px rgba(192,132,252,0.4)", duration: 0.2 });
    });
    card.addEventListener("mouseleave", () => {
        gsap.to(card, { boxShadow: "0 0 0 rgba(0,0,0,0)", duration: 0.2 });
    });
});

function updateServerLoad() {
    fetch('/api/server_load')
        .then(res => res.json())
        .then(data => {
            const loadCard = document.getElementById('server-load-card');
            const loadStatus = document.getElementById('server-load-status');

            document.getElementById('server-load').textContent = data.percent + '%';
            loadStatus.textContent = data.status;

            loadCard.classList.remove('border-red-500/40', 'border-green-500/40', 'border-yellow-500/40');
            loadStatus.classList.remove('text-red-400', 'text-green-400', 'text-yellow-400');

            if (data.status === 'Online') {
                if (data.percent > 75) {
                    loadCard.classList.add('border-yellow-500/40');
                    loadStatus.classList.add('text-yellow-400');
                } else {
                    loadCard.classList.add('border-green-500/40');
                    loadStatus.classList.add('text-green-400');
                }
            } else {
                loadCard.classList.add('border-red-500/40');
                loadStatus.classList.add('text-red-400');
            }
        });
}
setInterval(updateServerLoad, 5000);
updateServerLoad();
</script>
{% endblock %}