// EconomicProjections (in EconomicProjections.js)
import React, { useEffect, useState } from 'react';
import * as XLSX from 'xlsx';

function EconomicProjections({ socCode }) {
  const [projections, setProjections] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (socCode) {
      const cleanedSocCode = socCode.split('.')[0]; // Clean the SOC code
      console.log(`Fetching economic projections for cleaned SOC code: ${cleanedSocCode}`);

      const fetchProjections = async () => {
        try {
          // Load the Excel file from public folder
          const response = await fetch('/public/ltprojections.xlsx');
          const arrayBuffer = await response.arrayBuffer();
          const workbook = XLSX.read(arrayBuffer, { type: 'array' });

          // Assuming data is in the first sheet
          const sheetName = workbook.SheetNames[0];
          const sheet = workbook.Sheets[sheetName];
          const data = XLSX.utils.sheet_to_json(sheet);

          // Find the projections matching the SOC code
          const filteredProjections = data.find(
            (row) => row['SOC Code'] === cleanedSocCode
          );

          if (filteredProjections) {
            setProjections(filteredProjections);
          } else {
            throw new Error('No data found for the given SOC code.');
          }
        } catch (err) {
          setError('Error loading economic projections.');
          console.error('Projections Fetch Error:', err.message);
        } finally {
          setLoading(false);
        }
      };

      fetchProjections();
    }
  }, [socCode]);

  if (error) {
    return <div className="error">{error}</div>;
  }

  if (loading) {
    return <div className="loading-spinner">Loading...</div>;
  }

  return (
    <div className="economic-projections">
      <h3>Economic Projections for {projections['Occupation Title'] || 'Unknown Occupation'}</h3>
      <ul>
        <li>2022 Employment: {projections['2022 Employment']}</li>
        <li>2032 Employment: {projections['2032 Employment']}</li>
        <li>Total Change: {projections['Total Change']}</li>
        <li>Annual Openings: {projections['Annual Openings']}</li>
        <li>Labor Force Exits: {projections['Labor Force Exits']}</li>
        <li>Projected Growth: {projections['Projected Growth']}</li>
      </ul>
    </div>
  );
}

export default EconomicProjections;