{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% block title %}{% translate "Bandwidth Usage Details" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap">
        <div>
            <h1 class="eenos-page-title">{% translate "Bandwidth Usage Details" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Analyze current and historical data transfer for this hosting account." %}</div>
        </div>
        <div class="d-grid col-12 col-sm-auto">
            <a href="{% url 'bandwidth_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 "Bandwidth Manager" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <a href="{% url 'bandwidth_usage' %}">{% translate "Bandwidth 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="user-round"></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 "Monthly Consumption" %}</div>
                        <div class="eenos-panel-subtitle">{% blocktranslate %}Bandwidth used during {{ month }} {{ year }}.{% endblocktranslate %}</div>
                    </div>
                    {% if bandwidth_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 Plan" %}</span></span>
                    {% elif utilization > 100 %}
                        <span class="badge text-bg-danger">{% translate "Limit Exceeded" %}</span>
                    {% endif %}
                </div>
                <div class="row g-3 mb-4">
                    <div class="col-12 col-sm-4">
                        <div class="eenos-metric-label">{% translate "USED THIS MONTH" %}</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 "MONTHLY LIMIT" %}</div>
                        <div class="eenos-metric-value">{{ bandwidth|default:"—" }}</div>
                    </div>
                    <div class="col-12 col-sm-4">
                        <div class="eenos-metric-label">{% translate "UTILIZATION" %}</div>
                        <div class="eenos-metric-value">
                            {% if bandwidth_unlimited %}
                                <span class="text-muted">—</span>
                            {% else %}
                                {{ utilization }}%
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% if bandwidth_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 monthly transfer limit" %}</div>
                            <div class="eenos-notice-text">{% translate "Usage is monitored, but this account has no configured bandwidth cap." %}</div>
                        </div>
                    </div>
                {% else %}
                    <div class="d-flex justify-content-between gap-3 small mb-1">
                        <span class="text-muted">{% translate "Monthly allowance 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 Usage — {{ month }} {{ year }}{% endblocktranslate %}</div>
                        <div class="eenos-panel-subtitle">{% translate "Daily bandwidth consumed 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="dailyUsagePeriod" class="visually-hidden">{% translate "Select usage month" %}</label>
                        <select id="dailyUsagePeriod"
                                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="bandwidth-chart">
                    <canvas id="bandwidthDailyChart"
                            role="img"
                            aria-label="{% translate 'Daily bandwidth usage chart' %}"></canvas>
                    <div id="bandwidthDailyEmpty" class="bandwidth-chart-empty">{% translate "No daily 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 bandwidth 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="monthlySummaryYear" class="visually-hidden">{% translate "Select summary year" %}</label>
                        <select id="monthlySummaryYear"
                                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="bandwidth-chart">
                    <canvas id="bandwidthYearlyChart"
                            role="img"
                            aria-label="{% translate 'Monthly bandwidth usage chart' %}"></canvas>
                    <div id="bandwidthYearlyEmpty" class="bandwidth-chart-empty">{% translate "No monthly 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 "Usage History" %}</div>
                    <div class="eenos-panel-subtitle">{% translate "Recorded monthly bandwidth consumption for this account." %}</div>
                </div>
                <table id="bandwidthHistoryTable"
                       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 "Bandwidth Usage" %}</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    {{ daily_chart_labels|json_script:"bandwidth-daily-labels" }}
    {{ daily_chart_data|json_script:"bandwidth-daily-data" }}
    {{ yearly_chart_data|json_script:"bandwidth-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 formatBandwidth = 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("bandwidth-daily-labels").textContent);
        const dailyData = JSON.parse(document.getElementById("bandwidth-daily-data").textContent).map(value => Number(value) || 0);
        const yearlyData = JSON.parse(document.getElementById("bandwidth-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 => " " + formatBandwidth(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 => formatBandwidth(value) } }
            }
          };
        };
        const colors = chartColors();
        const dailyHasData = dailyData.some(value => value > 0);
        const yearlyHasData = yearlyData.some(value => value > 0);
        $("#bandwidthDailyEmpty").css("display", dailyHasData ? "none" : "flex");
        $("#bandwidthYearlyEmpty").css("display", yearlyHasData ? "none" : "flex");

        const dailyChart = new Chart(document.getElementById("bandwidthDailyChart"), {
          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("bandwidthYearlyChart"), {
          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 = $("#bandwidthHistoryTable").DataTable({
          responsive: { details: { renderer: DataTable.Responsive.renderer.listHiddenNodes() } },
          processing: true,
          pageLength: 25,
          lengthMenu: [[25, 50, 100, -1], [25, 50, 100, "{% translate 'All' %}"]],
          ajax: { url: "{% url 'bandwidth_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: "bandwidth_usage", className: "text-start text-nowrap", responsivePriority: 1, render: (data, type) => type === "display" ? '<span class="fw-semibold">' + escapeHtml(formatBandwidth(data)) + '</span>' : (Number(data) || 0) }
          ],
          language: { processing: '{% translate "Loading..." %}', emptyTable: "{% translate 'No bandwidth 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 %}