@model PowderCoating.Web.ViewModels.Reports.PowderUsageViewModel
@{ ViewData["Title"] = "Powder Usage"; }

<partial name="_ReportHeader" model="Model" />

<div class="row g-3 mb-3">
    <div class="col-6 col-md-3">
        <div class="card text-bg-primary">
            <div class="card-body py-2">
                <div class="small">Total Powder Used</div>
                <div class="fs-5 fw-bold">@Model.TotalPowderUsedLbs.ToString("N1") lbs</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card text-bg-success">
            <div class="card-body py-2">
                <div class="small">Total Powder Cost</div>
                <div class="fs-5 fw-bold">@Model.TotalPowderCost.ToString("C")</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card border-secondary">
            <div class="card-body py-2 text-center">
                <div class="small text-muted">Jobs with Usage</div>
                <div class="fs-5 fw-bold">@Model.TotalJobsWithPowderUsage</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card border-secondary">
            <div class="card-body py-2 text-center">
                <div class="small text-muted">Colors Used</div>
                <div class="fs-5 fw-bold">@Model.ColorsUsedCount</div>
            </div>
        </div>
    </div>
</div>

<div class="row g-3 mb-3">
    <div class="col-lg-8">
        <div class="card h-100">
            <div class="card-header fw-semibold">Monthly Powder Usage</div>
            <div class="card-body">
                <canvas id="monthlyChart" height="200"></canvas>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card h-100">
            <div class="card-header fw-semibold">Top Colors by Usage</div>
            <div class="card-body">
                <canvas id="colorChart" height="250"></canvas>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header fw-semibold">Usage by Color</div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-sm table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th>Color</th>
                        <th>SKU</th>
                        <th>Manufacturer</th>
                        <th class="text-end">Total Used (lbs)</th>
                        <th class="text-end">Total Cost</th>
                        <th class="text-end">Jobs</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model.TopColorsByUsage)
                    {
                        <tr>
                            <td>
                                @item.DisplayLabel
                            </td>
                            <td class="text-muted small">@(item.SKU ?? "—")</td>
                            <td class="text-muted small">@(item.Manufacturer ?? "—")</td>
                            <td class="text-end fw-semibold">@item.TotalLbsUsed.ToString("N1")</td>
                            <td class="text-end">@item.TotalCost.ToString("C")</td>
                            <td class="text-end">@item.JobCount</td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </div>
</div>

@section Scripts {
<script src="~/lib/chartjs/chart.umd.min.js"></script>
<script>
(function () {
    const monthLabels = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.MonthLabels));
    const lbsData = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.MonthlyPowderUsageLbs));
    const costData = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.MonthlyPowderUsageCost));

    new Chart(document.getElementById('monthlyChart'), {
        type: 'bar',
        data: {
            labels: monthLabels,
            datasets: [
                { label: 'Lbs Used', data: lbsData, backgroundColor: 'rgba(13,110,253,0.7)', yAxisID: 'y' },
                { label: 'Cost ($)', data: costData, type: 'line', borderColor: 'rgba(220,53,69,0.9)', backgroundColor: 'transparent', yAxisID: 'y2', tension: 0.3 }
            ]
        },
        options: {
            responsive: true,
            plugins: { legend: { position: 'top' } },
            scales: {
                y:  { beginAtZero: true, position: 'left',  title: { display: true, text: 'lbs' } },
                y2: { beginAtZero: true, position: 'right', title: { display: true, text: '$' }, grid: { drawOnChartArea: false } }
            }
        }
    });

    const topColors  = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.TopColorsByUsage.Take(8).Select(c => c.DisplayLabel)));
    const topLbs     = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.TopColorsByUsage.Take(8).Select(c => c.TotalLbsUsed)));
    const palette = ['#0d6efd','#6610f2','#6f42c1','#d63384','#dc3545','#fd7e14','#ffc107','#198754'];

    new Chart(document.getElementById('colorChart'), {
        type: 'doughnut',
        data: { labels: topColors, datasets: [{ data: topLbs, backgroundColor: palette }] },
        options: { responsive: true, plugins: { legend: { position: 'bottom', labels: { font: { size: 11 } } } } }
    });
})();
</script>
}