static/js/visualizations.js

import { fetchVisualizations } from './api.js';

export async function loadVisualizations() {
  const visDiv = document.getElementById('visualizations');
  if (!visDiv) return;

  visDiv.innerHTML = '<div class="spinner-border text-primary"></div>';

  try {
    const data = await fetchVisualizations();
    visDiv.innerHTML = '';
    renderVisualizations(data);
  } catch (error) {
    console.error('Error loading visualizations:', error);
    visDiv.innerHTML = '<p class="text-danger">Error loading visualizations.</p>';
  }
}

function renderVisualizations(data) {
  const visDiv = document.getElementById('visualizations');
  visDiv.innerHTML = `
    <h5 class="text-center">Data Insights</h5>
    <div class="container">
      <div class="row">
        <div class="col-lg-6 col-md-12 mb-4">
          <canvas id="genreChart"></canvas>
        </div>
        <div class="col-lg-6 col-md-12 mb-4">
          <canvas id="typeChart"></canvas>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-8 col-md-12 mx-auto">
          <canvas id="countryChart"></canvas>
        </div>
      </div>
    </div>
  `;

  // Adjust chart sizes dynamically
  const chartHeight = window.innerWidth < 768 ? 250 : 350;

  createBarChart('genreChart', data.genre_distribution, 'bar', 'Top 10 Most Common Genres', chartHeight);
  createPieChart('typeChart', data.type_distribution, 'Distribution of Movies vs. TV Shows');
  createBarChart('countryChart', data.top_countries, 'horizontalBar', 'Top 5 Countries Producing Content', chartHeight);
}

function createBarChart(elementId, chartData, orientation, title, chartHeight = 350) {
  if (!chartData || !chartData.data || Object.keys(chartData.data).length === 0) {
    console.warn(`Missing or empty data for ${title}`);
    return;
  }

  const ctx = document.getElementById(elementId).getContext('2d');
  new Chart(ctx, {
    type: orientation === 'horizontalBar' ? 'bar' : 'bar',
    data: {
      labels: Object.keys(chartData.data),
      datasets: [{
        label: chartData.y_label || 'Count',
        data: Object.values(chartData.data),
        backgroundColor: orientation === 'horizontalBar' ? 'rgba(255, 159, 64, 0.6)' : 'rgba(75, 192, 192, 0.6)',
        borderWidth: 1
      }]
    },
    options: {
      maintainAspectRatio: false,
      responsive: true,
      indexAxis: orientation === 'horizontalBar' ? 'y' : 'x',
      scales: {
        x: { beginAtZero: true, title: { display: true, text: chartData.x_label || 'Category' } },
        y: { 
          title: { display: true, text: chartData.y_label || 'Count' },
          ticks: { autoSkip: false, maxRotation: 0, minRotation: 0, font: { size: 12 } } // Improves readability
        }
      },
      plugins: {
        title: { display: true, text: title, font: { size: 16 } },
        tooltip: { enabled: true }
      }
    }
  });

  // Adjust canvas height
  document.getElementById(elementId).style.height = `${chartHeight}px`;
}

function createPieChart(elementId, chartData, title) {
  if (!chartData || !chartData.data || Object.keys(chartData.data).length === 0) {
    console.warn(`Missing or empty data for ${title}`);
    return;
  }

  const ctx = document.getElementById(elementId).getContext('2d');
  new Chart(ctx, {
    type: 'pie',
    data: {
      labels: Object.keys(chartData.data),
      datasets: [{
        data: Object.values(chartData.data),
        backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
        borderWidth: 1
      }]
    },
    options: {
      maintainAspectRatio: false,
      responsive: true,
      plugins: {
        title: { display: true, text: title, font: { size: 16 } },
        tooltip: { enabled: true },
        legend: { position: 'top' }
      }
    }
  });

  // Adjust pie chart size for smaller screens
  document.getElementById(elementId).style.height = window.innerWidth < 768 ? '250px' : '350px';
}