// Common Part
let matrix = generateRandomMatrix();
const n = matrix.length;
const m = matrix[0].length;

let colorScaleMin = 0;
let colorScaleMax = 100;
let cellSize;
let width;

// Initial Setup for Line Chart (Example 2)
const lineChartWidth = 400;
const lineChartHeight = 200;

const svg = d3.select("#heatmap")
  .append("svg")
  .attr("height", n * cellSize)
  .append("g");

const legendSvg = d3.select("#legend")
  .append("svg")
  .attr("height", n * cellSize);

// Functions for Heatmap
function generateRandomMatrix() {
  return Array.from({ length: 50 }, () =>
    Array.from({ length: 60 }, () => Math.random() * 100));
}

function calculateCellSize() {
  return Math.floor($("#heatmap").width() / m);
}

function updateHeatmap() {
  colorScaleMin = +$("#minInput").val();
  colorScaleMax = +$("#maxInput").val();

  colorScale.domain([colorScaleMin, colorScaleMax]);

  svg.selectAll("rect")
    .data(matrix.flat())
    .attr("fill", d => colorScale(d));

  legendSvg.selectAll("rect")
    .data(d3.range(colorScale.domain()[0], colorScale.domain()[1], 1))
    .attr("fill", d => colorScale(d));
}

// Functions for Line Chart (Example 2)
let data = [[], []];

const lineChartSvg = d3.select("#line-chart")
  .append("svg")
  .attr("width", lineChartWidth)
  .attr("height", lineChartHeight)
  .append("g");

function generateRandomData() {
  return Math.random() * 10;
}

function updateLineChart() {
  data[0].push(data[0].length + 1);
  data[1].push(generateRandomData());

  if (data[0].length > 10) {
    data[0].shift();
    data[1].shift();
  }

  xScale.domain(d3.extent(data[0]));
  yScale.domain([0, d3.max(data[1])]);

  lineChartSvg.select(".line")
    .attr("d", line(data));

  lineChartSvg.select(".x-axis")
    .call(d3.axisBottom(xScale));

  lineChartSvg.select(".y-axis")
    .call(d3.axisLeft(yScale));
}

// Initial Setup for Heatmap
cellSize = calculateCellSize();
width = $("#heatmap").width();

svg.attr("width", width);

const colorScale = d3.scaleSequential(d3.interpolateCividis)
  .domain([colorScaleMin, colorScaleMax]);

svg.selectAll()
  .data(matrix.flat())
  .enter()
  .append("rect")
  .attr("x", (d, i) => (i % m) * cellSize)
  .attr("y", (d, i) => Math.floor(i / m) * cellSize)
  .attr("width", cellSize)
  .attr("height", cellSize)
  .attr("fill", d => colorScale(d));

const legendWidth = $("#legend").width();
const legendHeight = n * cellSize;
const legendScale = d3.scaleLinear()
  .domain(colorScale.domain())
  .range([0, legendHeight]);

legendSvg.selectAll()
  .data(d3.range(colorScale.domain()[0], colorScale.domain()[1], 1))
  .enter()
  .append("rect")
  .attr("x", 0)
  .attr("y", d => legendScale(d))
  .attr("width", legendWidth)
  .attr("height", legendHeight / colorScale.domain().length)
  .attr("fill", d => colorScale(d));

legendSvg.append("g")
  .attr("transform", "translate(" + legendWidth + ",0)")
  .call(d3.axisRight(legendScale)
    .ticks(5)
    .tickFormat(d3.format(".1f"))
    .tickSize(legendWidth));

$("#minInput, #maxInput").on("input", updateHeatmap);

$(window).resize(function() {
  width = $("#heatmap").width();
  cellSize = calculateCellSize();
  svg.attr("width", width);
  svg.selectAll("rect")
    .attr("width", cellSize)
    .attr("height", cellSize);
  legendSvg.attr("width", $("#legend").width());
  legendSvg.selectAll("rect")
    .attr("width", $("#legend").width());
  updateHeatmap();
});

const xScale = d3.scaleLinear()
  .range([0, lineChartWidth]);

const yScale = d3.scaleLinear()
  .range([lineChartHeight, 0]);

const line = d3.line()
  .x(d => xScale(d[0]))
  .y(d => yScale(d[1]));

lineChartSvg.append("g")
  .attr("class", "x-axis")
  .attr("transform", "translate(0," + lineChartHeight + ")")
  .call(d3.axisBottom(xScale));

lineChartSvg.append("g")
  .attr("class", "y-axis")
  .call(d3.axisLeft(yScale));

lineChartSvg.append("path")
  .datum(data)
  .attr("class", "line")
  .attr("fill", "none")
  .attr("stroke", "green");

// Update Line Chart (Example 2)
setInterval(function() {
  updateLineChart();
}, 1000);
