@{
    ViewData["Title"] = "Ventas Últimos 30 Días";
    Layout = "_Layout";
}

<div class="container my-4">
    <div class="card p-4" style="background-color: rgba(255,255,255,0.8); border-radius: 10px;">
        <h2 class="text-center mb-4">@ViewData["Title"]</h2>

        <div id="last30TableContainer" class="table-responsive mb-4"></div>

        <div class="row mb-4">
            <div class="col-md-6">
                <label for="last30ProductSelect" class="form-label">Productos</label>
                <select id="last30ProductSelect" class="form-select" multiple size="5"></select>
                <small class="form-text text-muted">
                    Mantén Ctrl para seleccionar varios productos.
                </small>
            </div>
        </div>

        <div id="last30Legend" class="mb-4"></div>

        <div id="last30Chart" style="position: relative;"></div>
    </div>
</div>

@section Scripts {
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script>
        d3.json('@Url.Action("GetLast30DaysData", "Sales")').then(rawData => {
            console.log("RAW DATA:", rawData);
            const salesData = d3.group(rawData, d => d.productName);
            const margin = { top: 30, right: 20, bottom: 60, left: 60 },
                width = 800 - margin.left - margin.right,
                height = 450 - margin.top - margin.bottom;

            const svg = d3.select("#last30Chart")
                .append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
                .append("g")
                .attr("transform", `translate(${margin.left},${margin.top})`);

            const x0 = d3.scaleBand().range([0, width]).padding(0.2),
                x1 = d3.scaleBand().padding(0.05),
                y = d3.scaleLinear().range([height, 0]);

            const xAxisG = svg.append("g").attr("transform", `translate(0,${height})`);
            const yAxisG = svg.append("g");

            const allProducts = Array.from(salesData.keys());
            const color = d3.scaleOrdinal()
                .domain(allProducts)
                .range(d3.schemeCategory10);

            const productSelect = d3.select("#last30ProductSelect");
            productSelect.selectAll("option")
                .data(allProducts)
                .join("option")
                .attr("value", d => d)
                .text(d => d);

            const tooltip = d3.select("body")
                .append("div")
                .attr("id", "tooltip")
                .style("position", "absolute")
                .style("padding", "6px 10px")
                .style("background", "rgba(0,0,0,0.7)")
                .style("color", "#fff")
                .style("border-radius", "4px")
                .style("pointer-events", "none")
                .style("opacity", 0)
                .style("z-index", 10000)
                .style("font-size", "0.9rem");

            function updateTable(selected, dates) {
                const container = d3.select("#last30TableContainer");
                container.selectAll("*").remove();
                if (!selected.length) return;

                const table = container.append("table").attr("class", "table table-bordered");
                const thead = table.append("thead"), tbody = table.append("tbody");
                const header = thead.append("tr");
                header.append("th").text("Producto");
                dates.forEach(d => header.append("th").text(d));

                selected.forEach(prod => {
                    const row = tbody.append("tr");
                    row.append("td").text(prod);
                    dates.forEach(d => {
                        const rec = salesData.get(prod).find(x => x.date === d);
                        row.append("td").text(rec ? rec.units : 0);
                    });
                });
            }

            function updateChart(selected) {
                d3.select("#last30Legend").selectAll("*").remove();
                if (!selected.length) {
                    svg.selectAll(".barGroup").remove();
                    xAxisG.call(d3.axisBottom(x0));
                    yAxisG.call(d3.axisLeft(y));
                    d3.select("#last30TableContainer").selectAll("*").remove();
                    return;
                }

                selected.forEach(key => {
                    const item = d3.select("#last30Legend")
                        .append("div")
                        .style("display", "flex")
                        .style("align-items", "center")
                        .style("margin-right", "1rem");
                    item.append("div")
                        .style("width", "16px").style("height", "16px")
                        .style("background", color(key))
                        .style("margin-right", "6px");
                    item.append("span").text(key);
                });

                const dates = Array.from(new Set(
                    selected.flatMap(p => salesData.get(p).map(d => d.date))
                )).sort();

                updateTable(selected, dates);

                const data = dates.map(date => {
                    const obj = { date };
                    selected.forEach(p => {
                        const rec = salesData.get(p).find(x => x.date === date);
                        obj[p] = rec ? rec.units : 0;
                    });
                    return obj;
                });

                x0.domain(dates);
                x1.domain(selected).range([0, x0.bandwidth()]);
                y.domain([0, d3.max(data, d => d3.max(selected, p => d[p])) * 1.1]);

                xAxisG.call(d3.axisBottom(x0))
                    .selectAll("text")
                    .attr("transform", "rotate(-40)")
                    .style("text-anchor", "end");
                yAxisG.call(d3.axisLeft(y));

                const groups = svg.selectAll(".barGroup")
                    .data(data, d => d.date);

                const ge = groups.join(
                    enter => enter.append("g")
                        .attr("class", "barGroup")
                        .attr("transform", d => `translate(${x0(d.date)},0)`),
                    update => update, exit => exit.remove()
                );

                ge.selectAll("rect")
                    .data(d => selected.map(p => ({ key: p, value: d[p], date: d.date })))
                    .join(
                        enter => enter.append("rect")
                            .attr("x", d => x1(d.key))
                            .attr("y", height)
                            .attr("width", x1.bandwidth())
                            .attr("height", 0)
                            .attr("fill", d => color(d.key))
                            .on("mouseover", (e, d) => {
                                tooltip.html(`<strong>${d.key}</strong><br>${d.date}: ${d.value}`)
                                    .style("opacity", 1);
                            })
                            .on("mousemove", e => {
                                tooltip.style("left", (e.pageX + 10) + "px")
                                    .style("top", (e.pageY - 28) + "px");
                            })
                            .on("mouseout", () => tooltip.style("opacity", 0))
                            .call(g => g.transition().duration(600)
                                .attr("y", d => y(d.value))
                                .attr("height", d => height - y(d.value))
                            ),
                        update => update.call(u => u.transition().duration(600)
                            .attr("x", d => x1(d.key))
                            .attr("y", d => y(d.value))
                            .attr("width", x1.bandwidth())
                            .attr("height", d => height - y(d.value))
                            .attr("fill", d => color(d.key))
                        ),
                        exit => exit.call(e => e.transition().duration(300)
                            .attr("y", height).attr("height", 0).remove()
                        )
                    );
            }

            productSelect.on("change", function () {
                const sel = Array.from(this.selectedOptions).map(o => o.value);
                updateChart(sel);
            });

            productSelect.selectAll("option").property("selected", true);
            updateChart(allProducts);

        }).catch(err => console.error(err));
    </script>
}