// Using your public CSV link
const DATA_URL = "https://gist.githubusercontent.com/Lohith0529/191bb15c157473980f680c2650cd3b70/raw/6fca032cfa4f9da5d40ed38e141b5adf0cddb0d2/songs_dataset_lohith.csv";

d3.csv(DATA_URL).then(data => {
  if (!data.length) {
    d3.select("#summary").text("No data found — check your CSV URL.");
    return;
  }

  // --- Summary section ---
  const numRows = data.length;
  const columns = Object.keys(data[0]);
  const numericCol = columns.find(c => !isNaN(+data[0][c]));
  const avgValue = numericCol ? d3.mean(data, d => +d[numericCol]) : null;

  d3.select("#summary").html(`
    <h2>Dataset Summary</h2>
    <p><b>Rows:</b> ${numRows}</p>
    <p><b>Columns:</b> ${columns.join(", ")}</p>
    ${avgValue ? `<p><b>Mean of ${numericCol}:</b> ${avgValue.toFixed(2)}</p>` : ""}
  `);

  // --- Preview Table (first 5 rows) ---
  const preview = data.slice(0, 5);
  const table = d3.select("#table-container")
    .append("table")
    .attr("class", "preview-table");
  const thead = table.append("thead").append("tr");
  thead.selectAll("th").data(columns).join("th").text(d => d);
  const tbody = table.append("tbody");
  const rows = tbody.selectAll("tr").data(preview).join("tr");
  rows.selectAll("td").data(row => columns.map(c => row[c])).join("td").text(d => d);

  // --- Gradient SVG Visual ---
  const svg = d3.select("#svgzone").append("svg")
    .attr("width", 480)
    .attr("height", 150);

  const defs = svg.append("defs");
  const grad = defs.append("linearGradient")
    .attr("id", "grad")
    .attr("x1", "0%")
    .attr("x2", "100%");
  grad.append("stop").attr("offset", "0%").attr("stop-color", "#ffb74d");
  grad.append("stop").attr("offset", "100%").attr("stop-color", "#8e44ad");

  svg.append("rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", 480)
    .attr("height", 150)
    .attr("rx", 12)
    .attr("fill", "url(#grad)");

  svg.append("text")
    .attr("x", 240)
    .attr("y", 80)
    .attr("text-anchor", "middle")
    .attr("fill", "white")
    .attr("font-size", "22px")
    .text("Songs Dataset Visualization");

  // --- BAR CHART: Average Popularity by Genre ---
  const genreAvg = Array.from(
    d3.group(data, d => d.genre),
    ([genre, values]) => ({
      genre,
      avgPopularity: d3.mean(values, v => +v.popularity)
    })
  );

  const width = 500;
  const height = 300;
  const margin = { top: 30, right: 20, bottom: 60, left: 60 };

  const chart = d3.select("#chart-area")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

  const x = d3.scaleBand()
    .domain(genreAvg.map(d => d.genre))
    .range([margin.left, width - margin.right])
    .padding(0.2);

  const y = d3.scaleLinear()
    .domain([0, d3.max(genreAvg, d => d.avgPopularity)])
    .nice()
    .range([height - margin.bottom, margin.top]);

  chart.selectAll(".bar")
    .data(genreAvg)
    .join("rect")
    .attr("class", "bar")
    .attr("x", d => x(d.genre))
    .attr("y", d => y(d.avgPopularity))
    .attr("height", d => y(0) - y(d.avgPopularity))
    .attr("width", x.bandwidth());

  chart.append("g")
    .attr("transform", `translate(0,${height - margin.bottom})`)
    .attr("class", "axis")
    .call(d3.axisBottom(x));

  chart.append("g")
    .attr("transform", `translate(${margin.left},0)`)
    .attr("class", "axis")
    .call(d3.axisLeft(y));

  chart.append("text")
    .attr("x", width / 2)
    .attr("y", height - 20)
    .attr("text-anchor", "middle")
    .attr("fill", "#333")
    .text("Genre");

  chart.append("text")
    .attr("x", -height / 2)
    .attr("y", 15)
    .attr("text-anchor", "middle")
    .attr("transform", "rotate(-90)")
    .attr("fill", "#333")
    .text("Average Popularity");
});