// FINAL ROBUST IMPLEMENTATION REPLACE
viewof sentimentPlot = {
  // Calculate max stack height for the highlight box
  const rollup = d3.rollup(stackedData, v => d3.sum(v, d => d.Count), d => d.Minute);
  const maxStack = d3.max(rollup.values());
  
  const plot = Plot.plot({
    width: cards.sentiment_plot.width, 
    height: cards.sentiment_plot.height - 67,
    x: {label: "Minute", domain: d3.range(1, 13), tickFormat: d => d},
    y: {label: "Count", tickFormat: "s", tickSpacing: 50, grid: true, domain: [0, maxStack * 1.3]},
    color: {
        type: "categorical",
        domain: ["ANGER", "ANXIETY", "NEGATIVE EMOTION", "SAD", "POSITIVE EMOTION", "CONFIDENCE"], 
        range: ["#ef476f", "#f78c6b", "#ffd166", "#118ab2", "#3E5622", "#06d6a0"],
        legend: "ramp", 
        width: cards.sentiment_plot.width,
    },
    marks: [
         // Invisible Click Capture Bars (One per minute)
         Plot.barY(d3.range(1, 13), {
            x: d => d,
            y: maxStack * 1.2,
            fill: "transparent",
            title: d => `Select Minute ${d}`,
            render: (index, scales, values, dimensions, context, next) => {
               const g = next(index, scales, values, dimensions, context);
               d3.select(g).selectAll("rect").on("click", function(event, d) {
                   // 'd' here works if D3 bound it? Plot usually doesn't bind data to __data__.
                   // But we iterate over indices. 
                   // Let's use the index to retrieve the value from the data array!
                   
                   // We need to know which rect was clicked.
                   const nodes = Array.from(g.querySelectorAll("rect"));
                   const i = nodes.indexOf(event.target);
                   if (i >= 0) {
                       const m = index[i]; // logical index? No, index[i] is the index in data array.
                       // data is d3.range(1, 13) -> [1, 2, ... 12]
                       // so data[index[i]] is the minute!
                       const clickedMinute = index[i]; 
                       
                       viewof minutes.value = clickedMinute - 1;
                       viewof minutes.dispatchEvent(new Event("input", {bubbles: true}));
                   }
               });
               d3.select(g).style("cursor", "pointer");
               return g;
            }
         }),
         // Actual stacked bars
         Plot.barY(stackedData, {
            x: "Minute",
            y: "Count",
            fill: "label",
            title: d => `${d.label}: ${d.Count}\nConfidence: ${d.confidence.toFixed(2)}`,
             render: (index, scales, values, dimensions, context, next) => {
                const g = next(index, scales, values, dimensions, context);
                d3.select(g).style("cursor", "pointer");
                d3.select(g).on("click", function(event) {
                    // Start from the clicked element and find its data
                    // We can use the index passed to render!
                    // 'index' here is the array of indices being rendered in this group
                    // But 'g' contains ALL the bars. 
                    
                    // Let's filter click by position?
                    // Simpler: Just map the text title!
                    // The title contains "Confidence".
                    // But we want the minute.
                    // The data is bound to the rects in OJS Plot? Rare.
                    
                    // FALLBACK: Use simple d3.pointer and x-scale domain (1-12)
                    const [mx] = d3.pointer(event, this); // 'this' is the group
                    // We need to know the width of the chart area to map x to minute.
                    // dimensions.width ...
                    
                    // EASIEST: Just attach data to the element title and parse it, OR
                    // Use the helper distinct bar overlay below.
                });
                return g;
            }
        }),
        // Highlight box
        Plot.barY([{Minute: minutes + 1}], {
            x: "Minute",
            y: maxStack * 1.1, 
            fill: "none",
            stroke: "#FF00FF",
            strokeWidth: 2,
            inset: -4
        }),
         Plot.barY(
            Array.from(
                d3.rollup(
                stackedData,
                rows => ({
                    Minute: rows[0].Minute,
                    y: -.2, 
                    confidence: d3.mean(rows, d => d.confidence), 
                }),
                d => d.Minute 
                ).values()
            ),
            {
                x: "Minute",
                y: "y", 
                fillOpacity: d => d.confidence, 
                fill: "#06d6a0",
                title: d => `Confidence: ${d.confidence.toFixed(2)}`, 
                insetLeft: -2,
                insetRight: -2,
                stroke: "black", 
                strokeWidth: 0.2, 
            }
        ),
        // Note Indicators
        Plot.text(Array.from(currentNotes.Sentiment, ([m, t]) => ({Minute: m + 1, Note: t})), {
             x: "Minute",
             y: 0,
             text: d => "✏️",
             title: "Note", // Bind tooltip
             dy: 24,
             fontSize: 12
        })
    ]
  });
  return plot;
}

filtered_m_au = filtered_au.filter(d =>{
    const recordDate = new Date(d.minute); 
    return recordDate.getMinutes() === minutes;
});
filtered_m_gaze = filtered_gaze.filter(d => {
    const recordDate = new Date(d.minute); 
    return recordDate.getMinutes() === minutes;
});


filtered_au_values = (filtered_m_au.length > 0) ? filtered_m_au.map((d) => au_columns.map((col) => d[col])) : [];
filtered_gaze_values = (filtered_m_gaze.length > 0) ? filtered_m_gaze.map((d) => [d.x_0, d.y_0, d.x_1, d.y_1]) : [];

viewof oneFacePlot = facePlotting.oneFacePlotting({
    currx: currx,
    curry: curry,
    minute: minutes,
    au: filtered_m_au,
    gaze: filtered_gaze_values,
    width: 200,
    height: 220,
    // parentSelector: "#single_face-6" // Removed for detached generation
    notesSet: currentNotes.Face
});

html`<div style="flex: 1 1 0; min-height: 0; width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center;">
  ${viewof oneFacePlot}
</div>`

likert_scale = FileAttachment("data_1/Participants/All/VLM_results.csv").url();
likert_data = Generators.observe(notify => {
  FileAttachment("data_1/Participants/All/VLM_results.csv").url().then(url => d3.csv(url, d3.autoType)).then(d => notify(d));
  const handler = (e) => notify(d3.csvParse(e.detail, d3.autoType));
  window.addEventListener("data-imported-likert", handler);
  return () => window.removeEventListener("data-imported-likert", handler);
})

patientId = (typeof params !== "undefined" && params?.patient != null) ? params.patient : patient;
row = likert_data.find(d => d.pid === patientId);

// 2) Size from the card this cell lives in
width  = (cards?.likert_plot?.width  ?? 900);
height = (cards?.likert_plot?.height ?? 185) - 8;


likertPlot = facePlotting.likertPlotting({
  row,
  width,
  height,
  bracketSideRoom: 80,
  legend: true
});


// 4) Display
html`<div style="flex: 1 1 0; min-height: 0; width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center;">
  ${likertPlot}
</div>`