<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<style>
  * {
    left: 0;
    right: 0;
  }

  .market-indicators-row {
    display: flex;
    gap: 20px;
    justify-content: space-between;
  }

  .market-card {
    margin-top: 30px;
    background: #fff;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 0 10px #eee;
    flex: 1;
  }

  .market-card-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-weight: 600;
  }

  .market-list {
    margin-top: 10px;
  }

  .market-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
  }

  .market-symbol {
    width: 80px;
    font-weight: 500;
  }

  .market-bar {
    display: flex;
    height: 22px;
    border-radius: 3px;
    overflow: hidden;
    flex-grow: 1;
    background: #eee;
  }

  .bar-long {
    background: #b82535;
    /* red */
    color: #fff;
    text-align: right;
    padding-right: 5px;
    line-height: 22px;
    font-size: 12px;
  }

  .bar-short {
    background: #3b7a70;
    /* green */
    color: #fff;
    text-align: left;
    padding-left: 5px;
    line-height: 22px;
    font-size: 12px;
  }

  .market-legend span {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 6px;
    border-radius: 3px;
    vertical-align: middle;
  }

  .legend-long {
    background: #b82535;
    margin-right: 10px;
  }

  .legend-short {
    background: #3b7a70;
  }

  .legend-loss {
    background: #b82535;
    width: 12px;
    height: 12px;
    display: inline-block;
    margin-right: 4px;
    border-radius: 2px;
  }

  .legend-profit {
    background: #3b7a70;
    width: 12px;
    height: 12px;
    display: inline-block;
    margin-left: 10px;
    border-radius: 2px;
  }

  #pair-select {
    margin-right: 15px;
    padding: 3px 8px;
  }

  #position-chart {
    width: 100% !important;
    height: 350px !important;
    max-width: 100%;
    display: block;
  }

  /* ===== TABLET BREAKPOINT (max-width: 1100px) ===== */
  @media (max-width: 1100px) {
    .market-indicators-row {
      gap: 16px;
    }

    .market-card {
      margin-top: 24px;
      padding: 16px;
    }

    .market-card-header {
      font-size: 15px;
      margin-bottom: 8px;
    }

    .market-symbol {
      width: 70px;
      font-size: 14px;
    }

    .market-bar {
      height: 20px;
    }

    .bar-long,
    .bar-short {
      font-size: 11px;
      line-height: 20px;
    }

    .market-legend {
      font-size: 13px;
    }

    .legend-long,
    .legend-short {
      width: 12px;
      height: 12px;
      margin-right: 4px;
    }

    #pair-select {
      margin-right: 10px;
      padding: 2px 6px;
      font-size: 12px;
    }

    #position-chart {
      height: 280px !important;
    }
  }

  /* ===== MOBILE BREAKPOINT (max-width: 768px) ===== */
  @media (max-width: 768px) {
    .market-indicators-row {
      flex-direction: column;
      gap: 12px;
    }

    .market-card {
      margin-top: 16px;
      padding: 12px;
      flex: 1;
      width: 100%;
    }

    .market-card-header {
      font-size: 14px;
      margin-bottom: 6px;
      flex-wrap: wrap;
      gap: 8px;
    }

    .market-card-header a {
      font-size: 12px;
    }

    .market-list {
      margin-top: 8px;
    }

    .market-row {
      margin-bottom: 6px;
      gap: 8px;
    }

    .market-symbol {
      width: 60px;
      font-size: 12px;
      min-width: 60px;
    }

    .market-bar {
      height: 18px;
    }

    .bar-long,
    .bar-short {
      font-size: 10px;
      line-height: 18px;
      padding-right: 3px;
      padding-left: 3px;
    }

    .market-legend {
      font-size: 12px;
      margin-bottom: 8px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .legend-long,
    .legend-short {
      width: 10px;
      height: 10px;
      margin-right: 2px;
    }

    .legend-loss,
    .legend-profit {
      width: 10px;
      height: 10px;
      margin-right: 2px;
      margin-left: 2px;
    }

    #pair-select {
      margin-right: 6px;
      padding: 2px 4px;
      font-size: 11px;
    }

    #position-chart {
      height: 220px !important;
    }
  }

  /* ===== SMALL MOBILE BREAKPOINT (max-width: 480px) ===== */
  @media (max-width: 480px) {
    .market-indicators {
      padding: 8px 0;
    }

    .market-indicators .container {
      padding: 0 8px;
    }

    .market-indicators-row {
      flex-direction: column;
      gap: 8px;
    }

    .market-card {
      margin-top: 8px;
      padding: 8px;
      width: 100%;
      box-shadow: 0 0 8px #f0f0f0;
    }

    .market-card-header {
      font-size: 12px;
      margin-bottom: 4px;
      flex-wrap: wrap;
      gap: 4px;
    }

    .market-card-header a {
      font-size: 10px;
    }

    .market-list {
      margin-top: 6px;
    }

    .market-row {
      margin-bottom: 4px;
      gap: 4px;
      align-items: center;
    }

    .market-symbol {
      width: 50px;
      font-size: 11px;
      min-width: 50px;
      word-break: break-word;
    }

    .market-bar {
      height: 16px;
    }

    .bar-long,
    .bar-short {
      font-size: 9px;
      line-height: 16px;
      padding-right: 2px;
      padding-left: 2px;
    }

    .market-legend {
      font-size: 11px;
      margin-bottom: 6px;
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      align-items: center;
    }

    .legend-long,
    .legend-short {
      width: 8px;
      height: 8px;
      margin-right: 2px;
    }

    .legend-loss,
    .legend-profit {
      width: 8px;
      height: 8px;
      margin-right: 2px;
      margin-left: 2px;
    }

    #pair-select {
      margin-right: 4px;
      padding: 1px 3px;
      font-size: 10px;
      min-width: auto;
    }

    #position-chart {
      height: 180px !important;
      max-width: calc(100vw - 20px);
    }
  }

</style>

<section class="market-indicators">
  <div class="container">
    <div class="market-indicators-row">

      <div class="market-card">
        <div class="market-card-header">
          <span>Sentiment indicators</span>
          <a href="#">More ></a>
        </div>
        <div class="market-legend">
          <span class="legend-long"></span> Long Position
          <span class="legend-short"></span> Short Position
        </div>
        <div class="market-list" id="sentiment-list"></div>
      </div>

      <div class="market-card">
        <div class="market-card-header">
          <span>Long/short ratio in volume</span>
          <a href="#">More ></a>
        </div>
        <div class="market-legend">
          <span class="legend-long"></span> Long Position
          <span class="legend-short"></span> Short Position
        </div>
        <div class="market-list" id="volume-list"></div>
      </div>

      <div class="market-card">
        <div class="market-card-header">
          <span>Position distribution</span>
          <a href="#">More ></a>
        </div>
        <div class="market-legend">
          <select id="pair-select">
            <option>EUR/USD</option>
            <option>GBP/USD</option>
            <option>AUD/USD</option>
            <option>NZD/USD</option>
            <option>USD/JPY</option>
          </select>
          <span class="legend-loss"></span> Loss
          <span class="legend-profit"></span> Profit
        </div>
        <canvas id="position-chart" width="400" height="350"></canvas>
      </div>

    </div>
  </div>
</section>
<script>
  // --- 1. Base Data ---
  const sentimentData = [{
      pair: 'EUR/USD',
      long: 43.48,
      short: 56.52
    },
    {
      pair: 'GBP/USD',
      long: 40.17,
      short: 59.83
    },
    {
      pair: 'AUD/USD',
      long: 50.87,
      short: 49.13
    },
    {
      pair: 'USD/JPY',
      long: 58.02,
      short: 41.98
    },
    {
      pair: 'USD/CAD',
      long: 51.02,
      short: 48.98
    },
  ];

  const volumeData = [{
      pair: 'EUR/USD',
      long: 32.6,
      short: 67.4
    },
    {
      pair: 'GBP/USD',
      long: 33.42,
      short: 66.58
    },
    {
      pair: 'AUD/USD',
      long: 55.73,
      short: 44.27
    },
    {
      pair: 'USD/JPY',
      long: 52.96,
      short: 47.04
    },
    {
      pair: 'USD/CAD',
      long: 51.63,
      short: 48.37
    },
  ];

  // --- 2. Render Functions ---
  function renderBars(containerId, data) {
    const container = document.getElementById(containerId);
    container.innerHTML = '';

    data.forEach(({
      pair,
      long,
      short
    }) => {
      const row = document.createElement('div');
      row.className = 'market-row';

      const symbol = document.createElement('span');
      symbol.className = 'market-symbol';
      symbol.textContent = pair;

      const bar = document.createElement('div');
      bar.className = 'market-bar';

      const barLong = document.createElement('span');
      barLong.className = 'bar-long';
      barLong.style.width = long + '%';
      barLong.textContent = long.toFixed(2) + '%';

      const barShort = document.createElement('span');
      barShort.className = 'bar-short';
      barShort.style.width = short + '%';
      barShort.textContent = short.toFixed(2) + '%';

      bar.appendChild(barLong);
      bar.appendChild(barShort);
      row.appendChild(symbol);
      row.appendChild(bar);

      container.appendChild(row);
    });
  }

  // Render on page load
  renderBars('sentiment-list', sentimentData);
  renderBars('volume-list', volumeData);

  // --- 3. Random Data Generators ---
  function getRandomPercentage() {
    // Generate a random percentage for long and short that sums up to 100%
    const long = Math.random() * 100;
    const short = 100 - long;
    return {
      long,
      short
    };
  }

  function generateRandomSentimentData() {
    return sentimentData.map(({
      pair
    }) => {
      const {
        long,
        short
      } = getRandomPercentage();
      return {
        pair,
        long,
        short
      };
    });
  }

  function generateRandomVolumeData() {
    return volumeData.map(({
      pair
    }) => {
      const {
        long,
        short
      } = getRandomPercentage();
      return {
        pair,
        long,
        short
      };
    });
  }

  function getRandomData(length, min, max) {
    const arr = [];
    for (let i = 0; i < length; i++) {
      arr.push(Math.floor(Math.random() * (max - min + 1)) + min);
    }
    return arr;
  }

  // --- 4. Chart.js Initialization ---
  const ctx = document.getElementById('position-chart').getContext('2d');

  // Example dataset for EUR/USD — you need to replace with real data
  const data = {
    labels: ['1.04405', '1.04645', '1.04885', '1.05125', '1.05365', '1.05605', '1.05845', '1.06085', '1.06325', '1.06565', '1.06805'],
    datasets: [{
        label: 'Loss',
        backgroundColor: '#b82535',
        data: [-10, -5, -15, -8, 0, 0, 0, 0, 0, 0, 0],
        barPercentage: 0.5,
      },
      {
        label: 'Profit',
        backgroundColor: '#3b7a70',
        data: [0, 0, 0, 0, 8, 10, 12, 15, 10, 8, 5],
        barPercentage: 0.5,
      },
    ]
  };

  const config = {
    type: 'bar',
    data: data,
    options: {
      indexAxis: 'y',
      scales: {
        x: {
          stacked: true,
          min: -20,
          max: 20,
          ticks: {
            callback: function(value) {
              return Math.abs(value);
            }
          }
        },
        y: {
          stacked: true,
        }
      },
      plugins: {
        legend: {
          display: false
        }
      }
    }
  };

  const positionChart = new Chart(ctx, config);

  // --- 5. Update Handlers & Intervals ---
  // Function to update chart data dynamically
  function updateChartData(chart) {
    const labelsLength = chart.data.labels.length;

    // Generate new random Loss data (-20 to 0)
    const newLossData = getRandomData(labelsLength, -20, 0);
    // Generate new random Profit data (0 to 20)
    const newProfitData = getRandomData(labelsLength, 0, 20);

    // Update datasets data
    chart.data.datasets[0].data = newLossData;
    chart.data.datasets[1].data = newProfitData;

    chart.update();
  }

  function updateAll() {
    const newSentiment = generateRandomSentimentData();
    const newVolume = generateRandomVolumeData();

    renderBars('sentiment-list', newSentiment);
    renderBars('volume-list', newVolume);

    updateChartData(positionChart); // from previous code to update chart
  }

  // Update everything every 3 seconds
  setInterval(updateAll, 3000);

  // Retained from original code - update every 3 seconds (3000 ms)
  setInterval(() => {
    updateChartData(positionChart);
  }, 3000);

  // TODO: add event listener on dropdown to update data dynamically
</script>