{% extends "base.html" %}
{% load i18n static %}
{% block title %}{% translate "Disk Usage Details" %} - Eenos{% endblock %}
{% block extra_css %}
    <style>
      .disk-usage-chart { position: relative; height: 320px; }
      .disk-usage-chart-empty { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; color: var(--eenos-text-muted); font-size: 12px; }
    </style>
{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap">
        <div>
            <h1 class="eenos-page-title">{% translate "Disk Usage Details" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Analyze current and historical storage consumption for this hosting account." %}</div>
        </div>
        <div class="d-grid col-12 col-sm-auto">
            <a href="{% url 'disk_usage' %}"
               class="btn btn-outline-secondary btn-sm text-nowrap"><i data-lucide="arrow-left"></i>{% translate "All Accounts" %}</a>
        </div>
    </div>
    <nav class="eenos-breadcrumb" aria-label="{% translate 'Breadcrumb' %}">
        <a href="{% url 'dashboard' %}">{% translate "Dashboard" %}</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span>{% translate "Resources" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span>{% translate "Disk Quota Usage" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <a href="{% url 'disk_usage' %}">{% translate "Disk Usage" %}</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span class="eenos-breadcrumb-current" aria-current="page">{{ userdata.user }}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <div class="row g-4 mb-4">
        <div class="col-12 col-lg-4">
            <div class="eenos-card h-100">
                <div class="d-flex align-items-center gap-3 mb-4">
                    <div class="eenos-modal-info-icon flex-shrink-0">
                        <i data-lucide="hard-drive"></i>
                    </div>
                    <div class="min-w-0">
                        <div class="eenos-panel-title fs-5">{{ userdata.user }}</div>
                        <a href="https://{{ userdata.domain }}"
                           target="_blank"
                           rel="noopener noreferrer"
                           class="small text-break">{{ userdata.domain }}<i data-lucide="external-link" class="ms-1"></i></a>
                    </div>
                </div>
                <div class="border-top pt-3">
                    <div class="d-flex justify-content-between align-items-center gap-3 py-2">
                        <span class="text-muted small">{% translate "Owner" %}</span><span class="fw-semibold text-end">{{ userdata.owner }}</span>
                    </div>
                    <div class="d-flex justify-content-between align-items-center gap-3 py-2">
                        <span class="text-muted small">{% translate "Hosting Package" %}</span><span class="badge eenos-badge-neutral">{{ userdata.package }}</span>
                    </div>
                    <div class="d-flex justify-content-between align-items-center gap-3 py-2">
                        <span class="text-muted small">{% translate "Status" %}</span>
                        {% if status == "Active" %}
                            <span class="eenos-status text-success d-inline-flex align-items-center gap-1"><i data-lucide="circle-check"></i><span>{% translate "Active" %}</span></span>
                        {% else %}
                            <span class="eenos-status text-warning d-inline-flex align-items-center gap-1"><i data-lucide="pause-circle"></i><span>{% translate "Suspended" %}</span></span>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-8">
            <div class="eenos-card h-100">
                <div class="d-flex align-items-start justify-content-between flex-wrap gap-3 mb-4">
                    <div>
                        <div class="eenos-panel-title">{% translate "Storage Consumption" %}</div>
                        <div class="eenos-panel-subtitle">{% blocktranslate %}Disk space used during {{ month }} {{ year }}.{% endblocktranslate %}</div>
                    </div>
                    {% if quota_unlimited %}
                        <span class="badge eenos-badge-primary d-inline-flex align-items-center gap-1"><i data-lucide="infinity" style="width:12px;height:12px"></i><span>{% translate "Unlimited Quota" %}</span></span>
                    {% elif utilization > 100 %}
                        <span class="badge text-bg-danger">{% translate "Quota Exceeded" %}</span>
                    {% endif %}
                </div>
                <div class="row g-3 mb-4">
                    <div class="col-12 col-sm-4">
                        <div class="eenos-metric-label">{% translate "STORAGE USED" %}</div>
                        <div class="eenos-metric-value">{{ usage|default:"0 MB" }}</div>
                    </div>
                    <div class="col-12 col-sm-4">
                        <div class="eenos-metric-label">{% translate "DISK QUOTA" %}</div>
                        <div class="eenos-metric-value">{{ quota|default:"—" }}</div>
                    </div>
                    <div class="col-12 col-sm-4">
                        <div class="eenos-metric-label">{% translate "UTILIZATION" %}</div>
                        <div class="eenos-metric-value">
                            {% if quota_unlimited %}<span class="text-muted">—</span>{% else %}{{ utilization }}%{% endif %}
                        </div>
                    </div>
                </div>
                {% if quota_unlimited %}
                    <div class="eenos-notice eenos-notice-info">
                        <div class="eenos-notice-icon">
                            <i data-lucide="infinity"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-title">{% translate "No storage quota" %}</div>
                            <div class="eenos-notice-text">{% translate "Disk usage is monitored, but this account has no configured storage limit." %}</div>
                        </div>
                    </div>
                {% else %}
                    <div class="d-flex justify-content-between gap-3 small mb-1">
                        <span class="text-muted">{% translate "Disk quota used" %}</span><span class="fw-semibold">{{ utilization }}%</span>
                    </div>
                    <div class="progress"
                         role="progressbar"
                         aria-valuenow="{{ utilization_bar }}"
                         aria-valuemin="0"
                         aria-valuemax="100">
                        <div class="progress-bar{% if utilization > 100 %} bg-danger{% elif utilization >= 80 %} bg-warning{% endif %}"
                             style="width: {{ utilization_bar }}%"></div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
    <div class="row g-4 mb-4">
        <div class="col-12 col-xl-7">
            <div class="eenos-card h-100">
                <div class="d-flex align-items-start justify-content-between flex-wrap gap-3 mb-3">
                    <div>
                        <div class="eenos-panel-title">{% blocktranslate %}Daily Disk Usage — {{ month }} {{ year }}{% endblocktranslate %}</div>
                        <div class="eenos-panel-subtitle">{% translate "Daily storage consumption during the selected month." %}</div>
                    </div>
                    <form method="get" class="d-flex align-items-center gap-2">
                        <input type="hidden" name="showuser" value="{{ userdata.user }}">
                        <input type="hidden" name="summary_year" value="{{ summary_year }}">
                        <label for="dailyDiskPeriod" class="visually-hidden">{% translate "Select usage month" %}</label>
                        <select id="dailyDiskPeriod"
                                name="period"
                                class="form-select form-select-sm"
                                aria-label="{% translate 'Select usage month' %}"
                                onchange="this.form.submit()">
                            {% for period in period_options %}
                                <option value="{{ period.value }}"
                                        {% if period.value == selected_period %}selected{% endif %}>{{ period.label }}</option>
                            {% endfor %}
                        </select>
                        <noscript>
                            <button type="submit" class="btn btn-primary btn-sm">{% translate "View" %}</button>
                        </noscript>
                    </form>
                </div>
                <div class="disk-usage-chart">
                    <canvas id="diskDailyChart"
                            role="img"
                            aria-label="{% translate 'Daily disk usage chart' %}"></canvas>
                    <div id="diskDailyEmpty" class="disk-usage-chart-empty">{% translate "No daily disk usage was recorded for the selected month." %}</div>
                </div>
            </div>
        </div>
        <div class="col-12 col-xl-5">
            <div class="eenos-card h-100">
                <div class="d-flex align-items-start justify-content-between flex-wrap gap-3 mb-3">
                    <div>
                        <div class="eenos-panel-title">{% blocktranslate %}Monthly Summary — {{ summary_year }}{% endblocktranslate %}</div>
                        <div class="eenos-panel-subtitle">{% translate "A month-by-month disk usage comparison for the selected year." %}</div>
                    </div>
                    <form method="get" class="d-flex align-items-center gap-2">
                        <input type="hidden" name="showuser" value="{{ userdata.user }}">
                        <input type="hidden" name="period" value="{{ selected_period }}">
                        <label for="diskSummaryYear" class="visually-hidden">{% translate "Select summary year" %}</label>
                        <select id="diskSummaryYear"
                                name="summary_year"
                                class="form-select form-select-sm"
                                aria-label="{% translate 'Select summary year' %}"
                                onchange="this.form.submit()">
                            {% for option_year in year_options %}
                                <option value="{{ option_year }}"
                                        {% if option_year == summary_year %}selected{% endif %}>{{ option_year }}</option>
                            {% endfor %}
                        </select>
                        <noscript>
                            <button type="submit" class="btn btn-primary btn-sm">{% translate "View" %}</button>
                        </noscript>
                    </form>
                </div>
                <div class="disk-usage-chart">
                    <canvas id="diskYearlyChart"
                            role="img"
                            aria-label="{% translate 'Monthly disk usage chart' %}"></canvas>
                    <div id="diskYearlyEmpty" class="disk-usage-chart-empty">{% translate "No monthly disk usage was recorded for the selected year." %}</div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-xl-8">
            <div class="eenos-card">
                <div class="mb-4">
                    <div class="eenos-panel-title">{% translate "Disk Usage History" %}</div>
                    <div class="eenos-panel-subtitle">{% translate "Recorded monthly storage consumption for this account." %}</div>
                </div>
                <table id="diskHistoryTable"
                       class="table table-hover align-middle w-100 mb-0">
                    <thead>
                        <tr>
                            <th class="text-start">{% translate "Year" %}</th>
                            <th class="text-start">{% translate "Month" %}</th>
                            <th class="text-start">{% translate "Disk Usage" %}</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    {{ daily_chart_labels|json_script:"disk-daily-labels" }}
    {{ daily_chart_data|json_script:"disk-daily-data" }}
    {{ yearly_chart_data|json_script:"disk-yearly-data" }}
{% endblock %}
{% block extra_js %}
    <script src="{% get_static_prefix %}{{ theme }}/js/chart.umd.min.js"></script>
    <script>
      $(function () {
        const escapeHtml = value => $("<div>").text(value == null ? "" : value).html();
        const formatUsage = value => { const amount = Number(value) || 0; if (amount >= 1000000) return (amount / 1000000).toFixed(2).replace(/\.00$/, "") + " TB"; if (amount >= 1000) return (amount / 1000).toFixed(2).replace(/\.00$/, "") + " GB"; return amount.toLocaleString() + " MB"; };
        const dailyLabels = JSON.parse(document.getElementById("disk-daily-labels").textContent);
        const dailyData = JSON.parse(document.getElementById("disk-daily-data").textContent).map(value => Number(value) || 0);
        const yearlyData = JSON.parse(document.getElementById("disk-yearly-data").textContent).map(value => Number(value) || 0);
        const monthLabels = ["{% translate 'January' %}", "{% translate 'February' %}", "{% translate 'March' %}", "{% translate 'April' %}", "{% translate 'May' %}", "{% translate 'June' %}", "{% translate 'July' %}", "{% translate 'August' %}", "{% translate 'September' %}", "{% translate 'October' %}", "{% translate 'November' %}", "{% translate 'December' %}"];
        const chartColors = () => { const styles = getComputedStyle(document.body); return { primary: styles.getPropertyValue("--eenos-primary").trim() || "#ff8b00", text: styles.getPropertyValue("--eenos-text-muted").trim() || "#6c757d", border: styles.getPropertyValue("--eenos-border").trim() || "#dee2e6" }; };
        const rgba = (color, alpha) => { if (!color.startsWith("#")) return color; let hex = color.slice(1); if (hex.length === 3) hex = hex.split("").map(char => char + char).join(""); const number = parseInt(hex, 16); return `rgba(${(number >> 16) & 255}, ${(number >> 8) & 255}, ${number & 255}, ${alpha})`; };
        const commonOptions = () => { const colors = chartColors(); return { responsive: true, maintainAspectRatio: false, interaction: { mode: "index", intersect: false }, plugins: { legend: { display: false }, tooltip: { callbacks: { label: context => " " + formatUsage(context.parsed.y) } } }, scales: { x: { grid: { display: false }, ticks: { color: colors.text, maxRotation: 0 } }, y: { beginAtZero: true, grid: { color: colors.border }, ticks: { color: colors.text, callback: value => formatUsage(value) } } } }; };
        const colors = chartColors();
        $("#diskDailyEmpty").css("display", dailyData.some(value => value > 0) ? "none" : "flex");
        $("#diskYearlyEmpty").css("display", yearlyData.some(value => value > 0) ? "none" : "flex");
        const dailyChart = new Chart(document.getElementById("diskDailyChart"), { type: "line", data: { labels: dailyLabels, datasets: [{ data: dailyData, borderColor: colors.primary, backgroundColor: rgba(colors.primary, 0.14), fill: true, borderWidth: 2, pointRadius: 2, pointHoverRadius: 5, tension: 0.35 }] }, options: commonOptions() });
        const yearlyChart = new Chart(document.getElementById("diskYearlyChart"), { type: "bar", data: { labels: monthLabels, datasets: [{ data: yearlyData, backgroundColor: rgba(colors.primary, 0.78), borderColor: colors.primary, borderWidth: 1, borderRadius: 5, maxBarThickness: 34 }] }, options: commonOptions() });
        new MutationObserver(function (mutations) { if (!mutations.some(mutation => mutation.attributeName === "data-theme")) return; const updated = chartColors(); [dailyChart, yearlyChart].forEach(chart => { chart.options.scales.x.ticks.color = updated.text; chart.options.scales.y.ticks.color = updated.text; chart.options.scales.y.grid.color = updated.border; }); dailyChart.data.datasets[0].borderColor = updated.primary; dailyChart.data.datasets[0].backgroundColor = rgba(updated.primary, 0.14); yearlyChart.data.datasets[0].borderColor = updated.primary; yearlyChart.data.datasets[0].backgroundColor = rgba(updated.primary, 0.78); dailyChart.update(); yearlyChart.update(); }).observe(document.body, { attributes: true });
        const historyTable = $("#diskHistoryTable").DataTable({
          responsive: { details: { renderer: DataTable.Responsive.renderer.listHiddenNodes() } }, processing: true, pageLength: 15,
          lengthMenu: [[15, 25, 50, -1], [15, 25, 50, "{% translate 'All' %}"]],
          ajax: { url: "{% url 'disk_usage_user_data' %}", type: "GET", data: { user: "{{ userdata.user|escapejs }}" }, dataSrc: "data" }, order: [[0, "desc"], [1, "desc"]],
          columns: [
            { data: "year", width: "130px", className: "text-start text-nowrap", responsivePriority: 1 },
            { data: "month_name", width: "180px", className: "text-start text-nowrap", responsivePriority: 2, render: (data, type, row) => type === "sort" ? row.month : escapeHtml(data || "-") },
            { data: "disk_usage", className: "text-start text-nowrap", responsivePriority: 1, render: (data, type) => type === "display" ? '<span class="fw-semibold">' + escapeHtml(formatUsage(data)) + '</span>' : (Number(data) || 0) }
          ],
          language: { processing: '{% translate "Loading..." %}', emptyTable: "{% translate 'No disk usage history is available.' %}", zeroRecords: "{% translate 'No matching usage records found.' %}", search: "{% translate 'Search:' %}", lengthMenu: "{% translate 'Show' %} _MENU_", info: "{% translate 'Showing _START_ to _END_ of _TOTAL_ records' %}" }
        });
        historyTable.on("responsive-display", function () { if (typeof lucide !== "undefined") lucide.createIcons(); });
      });
    </script>
{% endblock %}