static/script.js

// ======= Tab Switching Logic =======
const tabButtons = document.querySelectorAll('.tab-btn');
const tabContents = document.querySelectorAll('.tab-content');

tabButtons.forEach(button => {
  button.addEventListener('click', () => {
    // Remove active class from all tabs and contents
    tabButtons.forEach(btn => btn.classList.remove('active'));
    tabContents.forEach(content => content.classList.remove('active'));

    // Add active class to clicked tab and corresponding content
    button.classList.add('active');
    const targetId = button.id === 'tab-chat' ? 'chat-section' : 'dashboard-section';
    document.getElementById(targetId).classList.add('active');

    // If dashboard tab is activated, re-render chart & metrics
    if (button.id === 'tab-dashboard') {
      setTimeout(() => {
        const selectedDistrict = dashboardDistrictSelect.value;
        if (selectedDistrict === "All") {
          renderChart(summaryData);
          renderMetrics("All");
        } else {
          const filteredData = summaryData.filter(item => item.district === selectedDistrict);
          renderChart(filteredData);
          renderMetrics(selectedDistrict);
        }
      }, 100);
    }
  });
});

// ======= Chatbot Form Submission =======
const chatForm = document.getElementById('chat-form');
const queryInput = document.getElementById('query-input');
const districtSelect = document.getElementById('district-select');
const answerContainer = document.getElementById('answer-container');
const sourcesContainer = document.getElementById('sources-container');

chatForm.addEventListener('submit', async (event) => {
  event.preventDefault();

  const query = queryInput.value.trim();
  const district = districtSelect.value;

  if (!query) return;

  // Show loading state
  answerContainer.textContent = "Fetching answer...";
  sourcesContainer.textContent = "";

  // Prepare form data
  const formData = new FormData();
  formData.append('query', query);
  formData.append('district', district);

  try {
    const response = await fetch('/api/chat', {
      method: 'POST',
      body: formData,
    });

    const data = await response.json();

    if (response.ok) {
      answerContainer.textContent = data.answer;

      if (data.sources && data.sources.length > 0) {
        sourcesContainer.innerHTML = `<strong>Sources:</strong><br>` +
          data.sources.map(source =>
            `📄 ${source.source_file} — Chunk ${source.chunk_index}`
          ).join('<br>');
      } else {
        sourcesContainer.textContent = "No sources found.";
      }
    } else {
      answerContainer.textContent = `Error: ${data.error || "Unknown error"}`;
    }

  } catch (error) {
    answerContainer.textContent = `Request failed: ${error.message}`;
  }
});

// ======= Dashboard Chart & Metrics =======
// Ensure summaryData is injected into window before this script runs
const summaryData = window.summaryData;

console.log("summaryData loaded:", summaryData);
if (!summaryData || !Array.isArray(summaryData)) {
  console.error("summaryData is missing or invalid. Dashboard won't load.");
}

const dashboardDistrictSelect = document.getElementById('dashboard-district-select');
const metricsContainer = document.getElementById('metrics-container');
const chartCanvas = document.getElementById('summary-chart').getContext('2d');

let summaryChart = null;

// Function to render bar chart
function renderChart(data) {
  if (!data || data.length === 0) {
    console.warn("No data provided to renderChart");
    if (summaryChart) {
      summaryChart.destroy();
      summaryChart = null;
    }
    return;
  }

  const labels = data.map(item => item.district);
  const croppingIntensity = data.map(item => Number(item.cropping_intensity || 0));
  const soilLoss = data.map(item => Number(item.soil_loss || 0));

  if (summaryChart) {
    summaryChart.destroy();
  }

  summaryChart = new Chart(chartCanvas, {
    type: 'bar',
    data: {
      labels,
      datasets: [
        {
          label: 'Cropping Intensity (%)',
          data: croppingIntensity,
          backgroundColor: 'rgba(11, 61, 145, 0.7)'
        },
        {
          label: 'Soil Loss (tons/ha/year)',
          data: soilLoss,
          backgroundColor: 'rgba(204, 0, 0, 0.7)'
        }
      ]
    },
    options: {
      responsive: true,
      scales: {
        y: { beginAtZero: true }
      }
    }
  });
}

// Function to render detailed metrics for a district
function renderMetrics(district) {
  metricsContainer.innerHTML = "";

  if (district === "All") {
    metricsContainer.innerHTML = "<p>Select a specific district to see detailed metrics.</p>";
    return;
  }

  const districtData = summaryData.find(item => item.district === district);
  if (!districtData) {
    metricsContainer.innerHTML = "<p>No data available for the selected district.</p>";
    return;
  }

  Object.entries(districtData).forEach(([key, value]) => {
    if (key === "district") return;

    const metricDiv = document.createElement('div');
    metricDiv.classList.add('metric');
    // Capitalize and replace underscores for better display
    const label = key.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
    metricDiv.textContent = `${label}: ${value}`;
    metricsContainer.appendChild(metricDiv);
  });
}

// Event listener for dashboard district selection
dashboardDistrictSelect.addEventListener('change', () => {
  const selectedDistrict = dashboardDistrictSelect.value;

  if (selectedDistrict === "All") {
    renderChart(summaryData);
    renderMetrics("All");
  } else {
    const filteredData = summaryData.filter(item => item.district === selectedDistrict);
    renderChart(filteredData);
    renderMetrics(selectedDistrict);
  }
});

// Initial render on page load - render chart & metrics for "All"
if (summaryData && Array.isArray(summaryData)) {
  renderChart(summaryData);
  renderMetrics("All");
}