{% extends "base.html" %}

{% block title %}Dashboard{% endblock %}

{% block header_title %}Dashboard{% endblock %}

{% block header_description %}
Willkommen {{ user.username }}
{% endblock %}

{% block content %}

{# Navigation #}
<div class="grid grid-cols-2 md:grid-cols-4 gap-2 mb-6">
    <a href="{% url 'invoices:overview' %}" class="group p-4 rounded-xl bg-white dark:bg-slate-800 border border-slate-100 dark:border-slate-700 hover:border-[var(--company-color)]/40 hover:shadow-sm transition-all duration-200">
        <p class="text-[11px] text-slate-400 mb-0.5">Modul</p>
        <p class="text-sm font-semibold text-slate-800 dark:text-white">Rechnungswesen</p>
    </a>
    <a href="{% url 'inventory_global:overview' %}" class="group p-4 rounded-xl bg-white dark:bg-slate-800 border border-slate-100 dark:border-slate-700 hover:border-[var(--company-color)]/40 hover:shadow-sm transition-all duration-200">
        <p class="text-[11px] text-slate-400 mb-0.5">Modul</p>
        <p class="text-sm font-semibold text-slate-800 dark:text-white">Inventar</p>
    </a>
    <a href="{% url 'accounts:overview' %}" class="group p-4 rounded-xl bg-white dark:bg-slate-800 border border-slate-100 dark:border-slate-700 hover:border-[var(--company-color)]/40 hover:shadow-sm transition-all duration-200">
        <p class="text-[11px] text-slate-400 mb-0.5">Modul</p>
        <p class="text-sm font-semibold text-slate-800 dark:text-white">Mitarbeiter</p>
    </a>
    <a href="{% url 'masterdata:overview' %}" class="group p-4 rounded-xl bg-white dark:bg-slate-800 border border-slate-100 dark:border-slate-700 hover:border-[var(--company-color)]/40 hover:shadow-sm transition-all duration-200">
        <p class="text-[11px] text-slate-400 mb-0.5">Modul</p>
        <p class="text-sm font-semibold text-slate-800 dark:text-white">Einstellungen</p>
    </a>
</div>

{# Haupt-Dashboard #}
<div class="bg-white dark:bg-slate-800 rounded-2xl border border-slate-100 dark:border-slate-700 overflow-hidden mb-6">

    {# KPIs #}
    <div class="px-5 pt-5 pb-4 border-b border-slate-100 dark:border-slate-700">
        <p class="text-[11px] font-semibold uppercase tracking-widest text-slate-400 mb-3">Handlungsbedarf</p>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-2" id="kpiMetrics">
            <div class="rounded-xl bg-slate-100 dark:bg-slate-700 p-4 animate-pulse h-16"></div>
            <div class="rounded-xl bg-slate-100 dark:bg-slate-700 p-4 animate-pulse h-16"></div>
            <div class="rounded-xl bg-slate-100 dark:bg-slate-700 p-4 animate-pulse h-16"></div>
            <div class="rounded-xl bg-slate-100 dark:bg-slate-700 p-4 animate-pulse h-16"></div>
        </div>
    </div>

    {# Charts #}
    <div class="px-5 py-4 border-b border-slate-100 dark:border-slate-700">
        <p class="text-[11px] font-semibold uppercase tracking-widest text-slate-400 mb-3">Aktueller Monat</p>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-2">

            <div class="rounded-xl bg-slate-100 dark:bg-slate-700 p-4">
                <div class="flex items-center justify-between mb-3">
                    <p class="text-xs font-semibold text-slate-600 dark:text-slate-300">Rechnungen</p>
                    <a href="{% url 'invoices:invoices_invoices_overview' %}" class="text-[11px] text-[var(--company-color)] hover:underline">Alle →</a>
                </div>
                <div style="position:relative;height:120px;">
                    <canvas id="invoiceChart" role="img" aria-label="Rechnungen nach Status"></canvas>
                </div>
                <div id="invoiceLegend" class="flex flex-wrap gap-x-2 gap-y-1 mt-3"></div>
            </div>

            <div class="rounded-xl bg-slate-100 dark:bg-slate-700 p-4">
                <div class="flex items-center justify-between mb-3">
                    <p class="text-xs font-semibold text-slate-600 dark:text-slate-300">Angebote</p>
                    <a href="{% url 'invoices:invoices_offers_overview' %}" class="text-[11px] text-[var(--company-color)] hover:underline">Alle →</a>
                </div>
                <div style="position:relative;height:120px;">
                    <canvas id="offerChart" role="img" aria-label="Angebote nach Status"></canvas>
                </div>
                <div id="offerLegend" class="flex flex-wrap gap-x-2 gap-y-1 mt-3"></div>
            </div>

            <div class="rounded-xl bg-slate-100 dark:bg-slate-700 p-4">
                <div class="flex items-center justify-between mb-3">
                    <p class="text-xs font-semibold text-slate-600 dark:text-slate-300">Mahnungen</p>
                    <a href="{% url 'invoices:invoices_reminders_overview' %}" class="text-[11px] text-[var(--company-color)] hover:underline">Alle →</a>
                </div>
                <div style="position:relative;height:120px;">
                    <canvas id="reminderChart" role="img" aria-label="Mahnungen nach Status"></canvas>
                </div>
                <div id="reminderLegend" class="flex flex-wrap gap-x-2 gap-y-1 mt-3"></div>
            </div>

        </div>
    </div>

    {# Kunden #}
    <div class="px-5 py-4">
        <p class="text-[11px] font-semibold uppercase tracking-widest text-slate-400 mb-3">Kunden</p>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-2" id="customerMetrics">
            <div class="rounded-xl bg-slate-100 dark:bg-slate-700 p-4 animate-pulse h-16"></div>
            <div class="rounded-xl bg-slate-100 dark:bg-slate-700 p-4 animate-pulse h-16"></div>
            <div class="rounded-xl bg-slate-100 dark:bg-slate-700 p-4 animate-pulse h-16"></div>
            <div class="rounded-xl bg-slate-100 dark:bg-slate-700 p-4 animate-pulse h-16"></div>
        </div>
    </div>

</div>
<script>
window.URLS = {
    invoiceInfo:  "{% url 'invoices:ajax_invoice_info' %}",
    offerInfo:    "{% url 'invoices:ajax_offer_info' %}",
    reminderInfo: "{% url 'invoices:ajax_reminder_info' %}",
    customerInfo: "{% url 'invoices:ajax_customer_info' %}",
    kpiInfo:      "{% url 'invoices:ajax_kpi_info' %}",
};
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
<script>
const STATUS_META = {
    draft:    { label: "Entwurf",          color: "#94a3b8" },
    sent:     { label: "Versendet",        color: "#2a78d6" },
    paid:     { label: "Bezahlt",          color: "#1baf7a" },
    overdue:  { label: "Überfällig",       color: "#e34948" },
    canceled: { label: "Storniert",        color: "#eb6834" },
    accepted: { label: "Akzeptiert",       color: "#1baf7a" },
    rejected: { label: "Abgelehnt",        color: "#e34948" },
    expired:  { label: "Frist abgelaufen", color: "#eda100" },
};

function buildDonut(canvasId, legendId, data) {
    const entries = Object.entries(data).filter(([, v]) => v > 0);
    if (!entries.length) {
        document.getElementById(canvasId).parentElement.innerHTML =
            '<p class="text-[11px] text-slate-400 text-center py-8">Keine Einträge diesen Monat</p>';
        return;
    }
    const keys   = entries.map(([k]) => k);
    const values = entries.map(([, v]) => v);
    const colors = keys.map(k => (STATUS_META[k] || { color: "#888" }).color);
    const labels = keys.map(k => (STATUS_META[k] || { label: k }).label);
    const total  = values.reduce((a, b) => a + b, 0);

    new Chart(document.getElementById(canvasId), {
        type: 'doughnut',
        data: {
            labels,
            datasets: [{
                data: values,
                backgroundColor: colors,
                borderWidth: 0,
                hoverOffset: 3,
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            cutout: '72%',
            plugins: {
                legend: { display: false },
                tooltip: {
                    callbacks: {
                        label: ctx => ` ${ctx.label}: ${ctx.parsed} (${Math.round(ctx.parsed / total * 100)}%)`
                    }
                }
            }
        }
    });

    const legend = document.getElementById(legendId);
    keys.forEach((k, i) => {
        const item = document.createElement('span');
        item.className = 'flex items-center gap-1 text-[11px] text-slate-400 dark:text-slate-400';
        item.innerHTML = `
            <span style="width:6px;height:6px;border-radius:50%;background:${colors[i]};display:inline-block;flex-shrink:0;"></span>
            ${labels[i]}: <span class="font-medium text-slate-700 dark:text-slate-200">${values[i]}</span>
        `;
        legend.appendChild(item);
    });
}

async function fetchAndRender(url, canvasId, legendId) {
    try {
        const r = await fetch(url);
        if (!r.ok) throw new Error();
        buildDonut(canvasId, legendId, await r.json());
    } catch {
        document.getElementById(canvasId).parentElement.innerHTML =
            '<p class="text-[11px] text-slate-400 text-center py-8">Keine Daten</p>';
    }
}

async function fetchKpis(url) {
    try {
        const r = await fetch(url);
        if (!r.ok) throw new Error();
        const d = await r.json();
        document.getElementById('kpiMetrics').innerHTML = `
            <a href="{% url 'invoices:invoices_invoices_overview' %}?status=overdue"
               class="rounded-xl bg-slate-100 dark:bg-slate-700 p-4  transition-colors block">
                <p class="text-[11px] text-slate-400 mb-1">Überfällige Rechnungen</p>
                <p class="text-2xl font-semibold ${d.overdue_invoices > 0 ? 'text-red-500' : 'text-slate-800 dark:text-white'}">${d.overdue_invoices}</p>
            </a>
            <a href="{% url 'invoices:invoices_invoices_overview' %}?status=sent"
               class="rounded-xl bg-slate-100 dark:bg-slate-700 p-4  transition-colors block">
                <p class="text-[11px] text-slate-400 mb-1">Offene Rechnungen</p>
                <p class="text-2xl font-semibold text-slate-800 dark:text-white">${d.open_invoices}</p>
            </a>
            <a href="{% url 'invoices:invoices_offers_overview' %}?status=sent"
               class="rounded-xl bg-slate-100 dark:bg-slate-700 p-4  transition-colors block">
                <p class="text-[11px] text-slate-400 mb-1">Offene Angebote</p>
                <p class="text-2xl font-semibold text-slate-800 dark:text-white">${d.open_offers}</p>
            </a>
            <a href="{% url 'invoices:invoices_reminders_overview' %}?status=sent"
               class="rounded-xl bg-slate-100 dark:bg-slate-700 p-4  transition-colors block">
                <p class="text-[11px] text-slate-400 mb-1">Offene Mahnungen</p>
                <p class="text-2xl font-semibold ${d.open_reminders > 0 ? 'text-amber-500' : 'text-slate-800 dark:text-white'}">${d.open_reminders}</p>
            </a>
        `;
    } catch {
        document.getElementById('kpiMetrics').innerHTML =
            '<p class="text-[11px] text-slate-400">Keine Daten</p>';
    }
}

async function fetchCustomers(url) {
    try {
        const r = await fetch(url);
        if (!r.ok) throw new Error();
        const d = await r.json();
        document.getElementById('customerMetrics').innerHTML = `
            <div class="rounded-xl bg-slate-100 dark:bg-slate-700 p-4">
                <p class="text-[11px] text-slate-400 mb-1">Gesamt</p>
                <p class="text-2xl font-semibold text-slate-800 dark:text-white">${d.total}</p>
            </div>
            <div class="rounded-xl bg-slate-100 dark:bg-slate-700 p-4">
                <p class="text-[11px] text-slate-400 mb-1">Neue diese Woche</p>
                <p class="text-2xl font-semibold text-slate-800 dark:text-white">${d.new_this_week}</p>
            </div>
            <div class="rounded-xl bg-slate-100 dark:bg-slate-700 p-4">
                <p class="text-[11px] text-slate-400 mb-1">Privatkunden</p>
                <p class="text-2xl font-semibold text-slate-800 dark:text-white">${d.private}</p>
            </div>
            <div class="rounded-xl bg-slate-100 dark:bg-slate-700 p-4">
                <p class="text-[11px] text-slate-400 mb-1">Unternehmen</p>
                <p class="text-2xl font-semibold text-slate-800 dark:text-white">${d.companies}</p>
            </div>
        `;
    } catch {
        document.getElementById('customerMetrics').innerHTML =
            '<p class="text-[11px] text-slate-400">Keine Daten</p>';
    }
}

fetchKpis(window.URLS.kpiInfo);
fetchAndRender(window.URLS.invoiceInfo,  'invoiceChart',  'invoiceLegend');
fetchAndRender(window.URLS.offerInfo,    'offerChart',    'offerLegend');
fetchAndRender(window.URLS.reminderInfo, 'reminderChart', 'reminderLegend');
fetchCustomers(window.URLS.customerInfo);
</script>

{% endblock %}