data = transpose(wealthData)
minYear = d3.min(data, d => d.year)
maxYear = d3.max(data, d => d.year)
currentData = data.find(d => d.year === currentYear)

viewof currentYear = Inputs.range([minYear, maxYear], {value: minYear, step: 1, label: "Year"})
viewof isPlaying = Inputs.toggle({label: "Auto-play", value: false})

chartWidth = Math.max(640, Math.min(900, width))

chart = {
  const width = chartWidth;
  const height = 600;

  // The scene is laid out in a fixed 640-900 px space and scaled to the
  // container through the viewBox, so it also fits phone screens.
  const svg = d3.create("svg")
      .attr("viewBox", [0, 0, width, height])
      .style("width", "100%")
      .style("max-width", `${width}px`)
      .style("height", "auto")
      .style("background", "#1a1a2e")
      .style("border-radius", "8px")
      .style("box-shadow", "0 4px 12px rgba(0,0,0,0.5)");

  // The four bins (the floor sits at 65% of the height to leave room for the figures)
  const floorY = height * 0.65;
  const targets = [
    { name: "Bottom 50%", id: "Bottom 50%", x: width * 0.15, y: floorY, color: "#e94560", iconCount: 50, cols: 10 },
    { name: "Middle 40%", id: "Middle 40%", x: width * 0.40, y: floorY, color: "#f9a03f", iconCount: 40, cols: 8 },
    { name: "Top 9%",     id: "Top 9%",     x: width * 0.65, y: floorY, color: "#f2dc5d", iconCount: 9,  cols: 3 },
    { name: "Top 1%",     id: "Top 1%",     x: width * 0.85, y: floorY, color: "#00bbf9", iconCount: 1,  cols: 1 }
  ];

  // Big year in the background
  const yearText = svg.append("text")
    .attr("x", width / 2)
    .attr("y", 140)
    .attr("text-anchor", "middle")
    .attr("fill", "rgba(255, 255, 255, 0.08)")
    .attr("font-family", "sans-serif")
    .attr("font-size", "140px")
    .attr("font-weight", "bold");

  // Gini index, from a muted red to a vivid red (never green: it is never a good situation)
  const giniColor = d3.scaleLinear()
    .domain([d3.min(data, d => d.gini), d3.max(data, d => d.gini)])
    .range(["#ffb3b3", "#ff0000"]);

  const giniText = svg.append("text")
    .attr("x", width / 2)
    .attr("y", 200)
    .attr("text-anchor", "middle")
    .attr("font-family", "sans-serif")
    .attr("font-size", "22px")
    .attr("font-weight", "bold");

  // "xx% of wealth" above each bin
  const valueLabels = svg.selectAll("text.value-label")
    .data(targets)
    .join("text")
    .attr("class", "value-label")
    .attr("x", d => d.x)
    .attr("y", d => d.y + 25)
    .attr("text-anchor", "middle")
    .attr("fill", "white")
    .attr("font-family", "sans-serif")
    .attr("font-size", "15px")
    .attr("font-weight", "bold");

  // Bin names
  svg.selectAll("text.name-label")
    .data(targets)
    .join("text")
    .attr("class", "name-label")
    .attr("x", d => d.x)
    .attr("y", d => d.y + 45)
    .attr("text-anchor", "middle")
    .attr("fill", "lightgray")
    .attr("font-family", "sans-serif")
    .attr("font-size", "13px")
    .text(d => d.name);

  // The grid of little figures (Material "person" icon)
  const svgPathPerson = "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z";

  const peopleGroups = svg.selectAll("g.people")
    .data(targets)
    .join("g")
    .attr("class", "people")
    .attr("transform", d => `translate(${d.x}, ${d.y + 60})`);

  peopleGroups.selectAll("path")
    .data(d => Array.from({length: d.iconCount}).map((_, i) => ({...d, i})))
    .join("path")
    .attr("d", svgPathPerson)
    .attr("fill", d => d.color)
    .attr("opacity", 0.8)
    .attr("transform", function(d) {
        const spacingX = 14, spacingY = 14;
        const col = d.i % d.cols;
        const row = Math.floor(d.i / d.cols);
        const gridWidth = d.cols * spacingX;
        const offsetX = - gridWidth / 2 + col * spacingX;
        const offsetY = row * spacingY;
        // scale 0.55 makes the 24px icon about 14px wide; -4 centres the path
        return `translate(${offsetX - 4}, ${offsetY}) scale(0.55)`;
    });

  // Floor line of each bin
  svg.selectAll("line")
    .data(targets)
    .join("line")
    .attr("x1", d => d.x - 45)
    .attr("x2", d => d.x + 45)
    .attr("y1", d => d.y + 10)
    .attr("y2", d => d.y + 10)
    .attr("stroke", d => d.color)
    .attr("stroke-width", 2)
    .attr("stroke-linecap", "round");

  // --- Physics engine: 300 grains of sand ---
  const numParticles = 300;
  const particles = Array.from({ length: numParticles }, (_, i) => ({
    id: i,
    x: width / 2 + (Math.random() - 0.5) * width,
    y: Math.random() * -100 - 50,          // start above the scene
    radius: 4 + Math.random() * 2,
    targetForceX: width / 2,
    targetForceY: height + 100,            // fall straight down until assigned to a bin
    color: "#ffffff"
  }));

  const node = svg.append("g")
    .selectAll("circle")
    .data(particles)
    .join("circle")
    .attr("r", d => d.radius)
    .attr("fill", d => d.color)
    .attr("opacity", 0.9);

  const simulation = d3.forceSimulation(particles)
    .force("charge", d3.forceManyBody().strength(-0.5))
    .force("collide", d3.forceCollide().radius(d => d.radius + 1).iterations(2))
    .on("tick", () => {
      node
        .attr("cx", d => {
            d.x = Math.max(d.radius, Math.min(width - d.radius, d.x));   // stay inside the scene
            return d.x;
        })
        .attr("cy", d => {
            const trueFloor = Math.min(height, d.targetForceY);           // never fall below the bin floor
            d.y = Math.min(trueFloor - d.radius, d.y);
            return d.y;
        });
    });

  invalidation.then(() => simulation.stop());

  const chartElement = svg.node();

  // Feed a new year into the scene without rebuilding it: only the net flow of
  // grains between bins moves, so the piles drift rather than restart.
  chartElement.updateSimulation = function(newData) {
    if (!newData) return;
    const bounciness = 0.3;

    yearText.text(newData.year);
    giniText
       .text(`Gini index: ${newData.gini.toFixed(3)}`)
       .attr("fill", giniColor(newData.gini));
    valueLabels.text(d => `${newData[d.id] || 0}% of wealth`);

    // 1. Target number of grains per bin (exactly 300 in total)
    const targetCounts = {};
    let totalAssigned = 0;
    targets.forEach((t, i) => {
      const val = Math.max(0, newData[t.id] || 0);
      let count = Math.round((val / 100) * numParticles);
      if (i === targets.length - 1) count = numParticles - totalAssigned;
      totalAssigned += count;
      targetCounts[t.id] = count;
    });

    // 2. Current grains per bin
    const groups = { "Bottom 50%": [], "Middle 40%": [], "Top 9%": [], "Top 1%": [], "Unassigned": [] };
    particles.forEach(p => {
       (p.categoryId && groups[p.categoryId] ? groups[p.categoryId] : groups["Unassigned"]).push(p);
    });

    // 3. Bins with too many grains give their surplus away
    const surplus = [];
    targets.forEach(t => {
       const extra = groups[t.id].length - targetCounts[t.id];
       if (extra > 0) surplus.push(...groups[t.id].splice(0, extra));
    });
    surplus.push(...groups["Unassigned"]);

    // 4. Bins with too few grains take from the surplus
    targets.forEach(t => {
       const needed = targetCounts[t.id] - groups[t.id].length;
       if (needed > 0) {
           surplus.splice(0, needed).forEach(p => {
               p.categoryId = t.id;
               p.color = t.color;
               p.targetForceX = t.x;
               p.targetForceY = t.y;
           });
       }
    });

    node.transition().duration(800).attr("fill", d => d.color);

    simulation
      .force("x", d3.forceX(d => d.targetForceX).strength(0.08))
      .force("y", d3.forceY(d => d.targetForceY).strength(0.02 + bounciness * 0.1))
      .alpha(0.8)
      .restart();
  };

  return chartElement;
}

data = transpose(energy_data).map(d => ({
  region: d.region,
  energy_source: d.energy_source,
  year: +d.year,              // Forcer en nombre
  consumption: +d.consumption // Forcer en nombre
}))

// 5. Création de l'interface utilisateur interactif
viewof selected_region = Inputs.radio(
  ["World", "Europe", "North America", "Asia", "South America", "Africa"],
  { value: "World", label: "Choose a region: " }
)

// On crée un dataset filtré qui va réagir immédiatement au changement du radio bouton
filtered_data = data.filter(d => d.region === selected_region)

energy_order = ["coal", "oil", "gas", "nuclear", "hydro", "wind", "solar", "other_renewables"]

// On associe chaque source d'énergie à une couleur spécifique
color_scale = d3.scaleOrdinal()
  .domain(energy_order)
  .range([
    "#333333", // coal (dark grey)
    "#664433", // oil (dark brown)
    "#997E65", // gas (light brown/taupe)
    "#AB82C5", // nuclear (distinct purple)
    "#4A90E2", // hydro (steel blue)
    "#50E3C2", // wind (bright teal/cyan)
    "#F5A623", // solar (bright yellow/orange)
    "#7ED321"  // other_renewables (bright green)
  ])

Plot.plot({
  width: width,   // Largeur adaptative (responsive)
  height: 500,    // Hauteur confortable
  marginLeft: 70, // Espace généreux pour les chiffres de l'axe Y
  style: {
    fontSize: "14px",
    fontFamily: "system-ui, sans-serif"
  },
  // Axe Y visible pour lire les valeurs, vu que la base est plate
  y: { 
    grid: true,
    label: "Consumption (TWh)"
  },
  // Axe X pour les années (sans les virgules des milliers via tickFormat)
  x: { 
    tickFormat: d3.format("d"), 
    grid: true 
  },
  // On utilise l'échelle de couleurs qu'on vient de créer pour la légende
  color: {
    domain: color_scale.domain(),
    range: color_scale.range(),
    legend: true
  },
  marks: [
    // Le cœur visuel : Plot.areaY crée les strates
    Plot.areaY(filtered_data, {
      x: "year",
      y: "consumption",
      z: "energy_source",
      fill: d => color_scale(d.energy_source), // Application de notre couleur
      // Base plate (plus de streamgraph 'wiggle')
      order: energy_order,    // Ordonner les couches (fossiles en bas, renouvelables en haut)
      // L'interaction de base
      title: d => `${d.energy_source}\n${d.year}: ${d.consumption.toFixed(0)} TWh`,
      // On rend les zones un peu transparentes
      fillOpacity: 0.9,
      // Ces propriétés activent la douceur et les animations lors du changement de région
      curve: "monotone-x", // Rendre les bords courbes
      tip: true            // Activer un super pop-up d'informations natif au survol !
    })
  ],
  // Ajout de la source de données en bas du graphique
  caption: html`Source: <a href="https://ourworldindata.org/energy" target="_blank">Our World in Data</a>`
})

geoData = FileAttachment("../../data/geojson/switzerland.geojson").json()
csvData = FileAttachment("../../data/swiss_data/swiss_health_premiums.csv").csv({typed: true})


// --- 2. DATA PREPARATION ---
// Group data by year for fast access: Map<Year, Map<Canton, Premium>>
dataByYear = {
  const map = new Map();
  csvData.forEach(d => {
    if (!map.has(d.year)) map.set(d.year, new Map());
    map.get(d.year).set(d.canton, d.premium);
  });
  return map;
}

// Global min/max for color scale
priceExtent = d3.extent(csvData, d => d.premium)


// --- 3. USER INTERFACE ---
html`<div class="card p-3 mb-3 bg-light">
  <div style="display: flex; align-items: center; gap: 20px; flex-wrap: wrap;">
    <div style="flex: 1 1 240px; min-width: 0;">
      ${viewof selectedYear}
    </div>
    <div>
      ${viewof isPlaying}
    </div>
  </div>
</div>`

viewof selectedYear = Inputs.range([2014, 2024], {step: 1, value: 2024, label: "Year", width: Math.min(360, width - 60)})
viewof isPlaying = Inputs.toggle({label: " Auto-Play", value: false})


// --- 4. COLOR LEGEND ---
// Local version of the Observable "@d3/color-legend" Legend (sequential scales only),
// so that nothing is fetched from observablehq.com at run time.
Legend = (color, {title, width = 320, height = 50, marginTop = 18, marginRight = 0,
                  marginBottom = 22, marginLeft = 0, ticks = width / 64, tickSize = 6} = {}) => {
  const svg = d3.create("svg")
      .attr("width", width).attr("height", height)
      .attr("viewBox", [0, 0, width, height])
      .style("overflow", "visible").style("display", "block");
  const ramp = document.createElement("canvas");
  ramp.width = 256; ramp.height = 1;
  const context = ramp.getContext("2d");
  for (let i = 0; i < 256; ++i) {
    context.fillStyle = color.interpolator()(i / 255);
    context.fillRect(i, 0, 1, 1);
  }
  svg.append("image")
      .attr("x", marginLeft).attr("y", marginTop)
      .attr("width", width - marginLeft - marginRight)
      .attr("height", height - marginTop - marginBottom)
      .attr("preserveAspectRatio", "none")
      .attr("xlink:href", ramp.toDataURL());
  const x = color.copy().interpolator(d3.interpolateRound(marginLeft, width - marginRight));
  svg.append("g")
      .attr("transform", `translate(0,${height - marginBottom})`)
      .call(d3.axisBottom(x).ticks(ticks).tickSize(tickSize))
      .call(g => g.selectAll(".tick line").attr("y1", marginTop + marginBottom - height))
      .call(g => g.select(".domain").remove())
      .call(g => g.append("text")
          .attr("x", marginLeft).attr("y", marginTop + marginBottom - height - 6)
          .attr("fill", "currentColor").attr("text-anchor", "start")
          .attr("font-weight", "bold").text(title));
  return svg.node();
}

// --- 5. D3 CHART ---
chart = {
  const width = 975;
  const height = 600;
  
  // Current data for the selected year
  const currentYearData = dataByYear.get(selectedYear);

  const zoom = d3.zoom()
      .scaleExtent([1, 8])
      .on("zoom", zoomed);

  const root = d3.create("div")
      .attr("class", "root")
      .style("position", "relative")
      .style("width", "100%")
      .style("height", "auto");

  const svg = root.append("svg")
      .attr("viewBox", [0, 0, width, height])
      .attr("style", "max-width: 100%; height: auto;")
      .on("click", reset);

  const g = svg.append("g");
  
  // Fit projection to Switzerland
  const projection = d3.geoMercator()
    .fitSize([width, height], geoData);
    
  const path = d3.geoPath().projection(projection);
  
  // Color scale
  const color = d3.scaleSequential(priceExtent, d3.interpolateReds);
  
  // Legend
  svg.append("g")
      .attr("transform", "translate(20,20)")
      .append(() => Legend(color, {
        title: "Monthly Premium (CHF)",
        width: 260
      }));

  // Tooltip Element
  const tooltip = root
    .append("div")
    .style("position", "absolute")
    .style("display", "none")
    .style("background", "white")
    .style("border", "1px solid #ccc")
    .style("padding", "8px")
    .style("border-radius", "4px")
    .style("pointer-events", "none")
    .style("box-shadow", "0 2px 4px rgba(0,0,0,0.1)")
    .style("font-size", "0.9rem");

  // Render Features
  const features = g.append("g")
      .attr("cursor", "pointer")
    .selectAll("path")
    .data(geoData.features)
    .join("path")
      .attr("fill", d => {
        const val = currentYearData.get(d.properties.name);
        return val ? color(val) : "#ccc";
      })
      .attr("stroke", "white")
      .attr("stroke-width", 0.5)
      .attr("d", path)
      .on("click", clicked)
      .on("mouseover", function(event, d) {
        d3.select(this)
          .attr("stroke", "black")
          .attr("stroke-width", 2)
          .raise();
          
        tooltip.style("display", "block");
        const val = currentYearData.get(d.properties.name);
        tooltip.html(`
          <strong>${d.properties.name}</strong><br>
          ${val ? Math.round(val) + " CHF" : "N/A"}
        `);
      })
      .on("mousemove", function(event) {
        // Position relative to the container
        const [x, y] = d3.pointer(event, root.node());
        tooltip
          .style("top", (y - 10) + "px")
          .style("left", (x + 15) + "px");
      })
      .on("mouseout", function() {
        d3.select(this)
          .attr("stroke", "white")
          .attr("stroke-width", 0.5)
          .lower(); // Lower back so borders don't overlap incorrectly
          
        tooltip.style("display", "none");
      });

  svg.call(zoom);

  function reset() {
    svg.transition().duration(750).call(
      zoom.transform,
      d3.zoomIdentity,
      d3.zoomTransform(svg.node()).invert([width / 2, height / 2])
    );
  }

  function clicked(event, d) {
    const [[x0, y0], [x1, y1]] = path.bounds(d);
    event.stopPropagation();
    svg.transition().duration(750).call(
      zoom.transform,
      d3.zoomIdentity
        .translate(width / 2, height / 2)
        .scale(Math.min(8, 0.9 / Math.max((x1 - x0) / width, (y1 - y0) / height)))
        .translate(-(x0 + x1) / 2, -(y0 + y1) / 2)
    );
  }

  function zoomed(event) {
    const {transform} = event;
    g.attr("transform", transform);
    g.attr("stroke-width", 1 / transform.k);
  }

  return root.node();
}