{% extends 'base.html' %}
{% block title %}Dashboard{% endblock %}
{% block content %}
<h2 class="text-xl font-bold text-cyber-accent mb-4">Dashboard</h2>

<!-- KPIs generaux -->
<div style="display:flex;flex-wrap:nowrap;gap:8px;margin-bottom:16px;">
    <div class="card p-3 text-center" style="flex:1;min-width:0"><div class="text-2xl font-bold text-cyber-accent">{{ stats.total_servers }}</div><div class="text-xs text-gray-500">Serveurs</div></div>
    <div class="card p-3 text-center" style="flex:1;min-width:0"><div class="text-2xl font-bold text-cyber-green">{{ stats.patchable }}</div><div class="text-xs text-gray-500">Patchables SecOps</div></div>
    <div class="card p-3 text-center" style="flex:1;min-width:0"><div class="text-2xl font-bold text-white">{{ stats.linux }} / {{ stats.windows }}</div><div class="text-xs text-gray-500">Linux / Windows</div></div>
    <div class="card p-3 text-center" style="flex:1;min-width:0"><div class="text-2xl font-bold text-cyber-yellow">{{ stats.qualys_tags }}</div><div class="text-xs text-gray-500">Tags Qualys</div></div>
    <div class="card p-3 text-center" style="flex:1;min-width:0"><div class="text-2xl font-bold text-cyber-red">{{ stats.eol }}</div><div class="text-xs text-gray-500">EOL</div></div>
</div>

<!-- ═══════ PATCHING 2026 ═══════ -->
{% if patch_stats %}
<div class="card p-4 mb-4">
    <h3 class="text-sm font-bold text-cyber-accent mb-3">Patching 2026</h3>

    <!-- KPIs patching -->
    <div style="display:flex;flex-wrap:nowrap;gap:6px;margin-bottom:12px;">
        <a href="/audit-full" class="card p-2 text-center hover:bg-cyber-hover" style="flex:1;min-width:0;background:#111827;">
            <div class="text-xl font-bold text-cyber-accent">{{ patch_stats.audited }}</div>
            <div style="font-size:10px;" class="text-gray-500">Audites</div>
        </a>
        <a href="/audit-full?filter=app_patch2026" class="card p-2 text-center hover:bg-cyber-hover" style="flex:1;min-width:0;background:#111827;">
            <div class="text-xl font-bold text-cyber-green">{{ patch_stats.patched_2026 }}</div>
            <div style="font-size:10px;" class="text-gray-500">Patches 2026</div>
        </a>
        <div class="card p-2 text-center" style="flex:1;min-width:0;background:#111827;">
            <div class="text-xl font-bold text-cyber-green">{{ patch_stats.patched_once }}</div>
            <div style="font-size:10px;" class="text-gray-500">1+ fois</div>
        </div>
        <div class="card p-2 text-center" style="flex:1;min-width:0;background:#111827;">
            <div class="text-xl font-bold text-blue-400">{{ patch_stats.patched_twice }}</div>
            <div style="font-size:10px;" class="text-gray-500">2+ fois</div>
        </div>
        <div class="card p-2 text-center" style="flex:1;min-width:0;background:#111827;">
            <div class="text-xl font-bold text-purple-400">{{ patch_stats.patched_thrice }}</div>
            <div style="font-size:10px;" class="text-gray-500">3+ fois</div>
        </div>
        <div class="card p-2 text-center" style="flex:1;min-width:0;background:#111827;">
            <div class="text-xl font-bold text-cyber-yellow">{{ patch_stats.patched_2025_only }}</div>
            <div style="font-size:10px;" class="text-gray-500">2025 seul</div>
        </div>
        <div class="card p-2 text-center" style="flex:1;min-width:0;background:#111827;">
            <div class="text-xl font-bold text-cyber-red">{{ patch_stats.never_patched }}</div>
            <div style="font-size:10px;" class="text-gray-500">Jamais</div>
        </div>
        <div class="card p-2 text-center" style="flex:1;min-width:0;background:#111827;">
            <div class="text-xl font-bold {% if patch_stats.needs_reboot > 0 %}text-cyber-red{% else %}text-cyber-green{% endif %}">{{ patch_stats.needs_reboot }}</div>
            <div style="font-size:10px;" class="text-gray-500">Reboot</div>
        </div>
    </div>

    <!-- Barre de progression globale -->
    {% set pct = (patch_stats.patched_2026 / patch_stats.audited * 100)|int if patch_stats.audited > 0 else 0 %}
    <div class="mb-4">
        <div class="flex justify-between text-xs mb-1">
            <span class="text-gray-400">Couverture patching 2026</span>
            <span class="font-bold {% if pct >= 80 %}text-cyber-green{% elif pct >= 50 %}text-cyber-yellow{% else %}text-cyber-red{% endif %}">{{ pct }}%</span>
        </div>
        <div style="height:8px;background:#1f2937;border-radius:4px;overflow:hidden;">
            <div style="height:100%;width:{{ pct }}%;background:{% if pct >= 80 %}#22c55e{% elif pct >= 50 %}#eab308{% else %}#ef4444{% endif %};border-radius:4px;transition:width 0.5s;"></div>
        </div>
    </div>

    <!-- Graphe frequence par semaine -->
    {% if patch_weekly %}
    <div class="mb-4">
        <div class="text-xs text-gray-500 mb-2">Serveurs patches par semaine</div>
        <div style="display:flex;align-items:flex-end;gap:2px;height:120px;">
            {% set max_cnt = patch_weekly|map(attribute='cnt')|max %}
            {% for w in patch_weekly %}
            <div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;" title="{{ w.week }}: {{ w.cnt }} serveurs">
                <div style="font-size:9px;color:#94a3b8;margin-bottom:2px;">{{ w.cnt }}</div>
                <div style="width:100%;background:#22c55e;border-radius:2px 2px 0 0;min-height:2px;height:{{ (w.cnt / max_cnt * 100)|int }}%;opacity:0.8;"></div>
                <div style="font-size:8px;color:#6b7280;margin-top:2px;transform:rotate(-45deg);white-space:nowrap;">{{ w.week }}</div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Par domaine -->
    <div class="grid grid-cols-2 gap-4">
        <div>
            <div class="text-xs text-gray-500 mb-2">Par domaine</div>
            <table class="w-full table-cyber text-xs">
                <thead><tr><th class="text-left p-1">Domaine</th><th class="p-1">Total</th><th class="p-1">Patche</th><th class="p-1">2x</th><th class="p-1">%</th></tr></thead>
                <tbody>
                {% for d in patch_by_domain %}
                {% set pct_d = (d.patched / d.total * 100)|int if d.total > 0 else 0 %}
                <tr>
                    <td class="p-1">{{ d.domain }}</td>
                    <td class="p-1 text-center">{{ d.total }}</td>
                    <td class="p-1 text-center text-cyber-green">{{ d.patched }}</td>
                    <td class="p-1 text-center text-blue-400">{{ d.patched_twice }}</td>
                    <td class="p-1 text-center">
                        <span class="{% if pct_d >= 80 %}text-cyber-green{% elif pct_d >= 50 %}text-cyber-yellow{% else %}text-cyber-red{% endif %} font-bold">{{ pct_d }}%</span>
                    </td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

        <div>
            <!-- Par environnement -->
            <div class="text-xs text-gray-500 mb-2">Par environnement</div>
            <table class="w-full table-cyber text-xs mb-4">
                <thead><tr><th class="text-left p-1">Env</th><th class="p-1">Total</th><th class="p-1">Patche</th><th class="p-1">%</th></tr></thead>
                <tbody>
                {% for e in patch_by_env %}
                {% set pct_e = (e.patched / e.total * 100)|int if e.total > 0 else 0 %}
                <tr>
                    <td class="p-1">{{ e.env }}</td>
                    <td class="p-1 text-center">{{ e.total }}</td>
                    <td class="p-1 text-center text-cyber-green">{{ e.patched }}</td>
                    <td class="p-1 text-center"><span class="{% if pct_e >= 80 %}text-cyber-green{% elif pct_e >= 50 %}text-cyber-yellow{% else %}text-cyber-red{% endif %} font-bold">{{ pct_e }}%</span></td>
                </tr>
                {% endfor %}
                </tbody>
            </table>

            <!-- Par zone -->
            <div class="text-xs text-gray-500 mb-2">Par zone reseau</div>
            <table class="w-full table-cyber text-xs">
                <thead><tr><th class="text-left p-1">Zone</th><th class="p-1">Total</th><th class="p-1">Patche</th><th class="p-1">Jamais</th><th class="p-1">%</th></tr></thead>
                <tbody>
                {% for z in patch_by_zone %}
                {% set pct_z = (z.patched / z.total * 100)|int if z.total > 0 else 0 %}
                <tr>
                    <td class="p-1">{{ z.zone }}</td>
                    <td class="p-1 text-center">{{ z.total }}</td>
                    <td class="p-1 text-center text-cyber-green">{{ z.patched }}</td>
                    <td class="p-1 text-center text-cyber-red">{{ z.never }}</td>
                    <td class="p-1 text-center"><span class="{% if pct_z >= 80 %}text-cyber-green{% elif pct_z >= 50 %}text-cyber-yellow{% else %}text-cyber-red{% endif %} font-bold">{{ pct_z }}%</span></td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endif %}

<!-- Par domaine (inventaire) -->
<div class="card p-4 mb-4">
    <h3 class="text-sm font-bold text-cyber-accent mb-3">Inventaire par domaine</h3>
    <table class="w-full table-cyber text-xs">
        <thead><tr><th class="text-left p-2">Domaine</th><th class="p-2">Total</th><th class="p-2">Actifs</th><th class="p-2">Linux</th><th class="p-2">Windows</th></tr></thead>
        <tbody>
        {% for d in domains %}
        <tr>
            <td class="p-2 font-medium">{{ d.name }}</td>
            <td class="p-2 text-center">{{ d.total }}</td>
            <td class="p-2 text-center text-cyber-green">{{ d.actifs }}</td>
            <td class="p-2 text-center">{{ d.linux }}</td>
            <td class="p-2 text-center">{{ d.windows }}</td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

<!-- Par tier + quick stats -->
<div class="grid grid-cols-2 gap-4">
    <div class="card p-4">
        <h3 class="text-sm font-bold text-cyber-accent mb-3">Par tier</h3>
        <div class="flex gap-3">
        {% for t in tiers %}
            <div class="flex-1 text-center p-3 rounded" style="background: {% if t[0] == 'tier0' %}#ff336622{% elif t[0] == 'tier1' %}#ff880022{% elif t[0] == 'tier2' %}#ffcc0022{% else %}#00ff8822{% endif %}">
                <div class="text-lg font-bold">{{ t[1] }}</div>
                <div class="text-xs text-gray-400">{{ t[0] }}</div>
            </div>
        {% endfor %}
        </div>
    </div>
    <div class="card p-4">
        <h3 class="text-sm font-bold text-cyber-accent mb-3">Quick stats</h3>
        <div class="space-y-2 text-xs">
            <div class="flex justify-between"><span class="text-gray-500">Decommissionnes</span><span class="text-cyber-red font-bold">{{ stats.decom }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">EOL</span><span class="text-cyber-red font-bold">{{ stats.eol }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Assets Qualys</span><span class="text-cyber-accent font-bold">{{ stats.qualys_assets }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Tags Qualys</span><span class="text-cyber-yellow font-bold">{{ stats.qualys_tags }}</span></div>
        </div>
    </div>
</div>
{% endblock %}