import React, { useEffect, useState } from 'react';

const CareerSearch = ({ onCareerSelected }) => {
  const [careerObjects, setCareerObjects] = useState([]);
  const [searchInput, setSearchInput] = useState('');

  useEffect(() => {
    const fetchCareerData = async () => {
      try {
        const response = await fetch('/career_clusters.json');
        const data = await response.json();

        // Create a Map keyed by title, storing one object per unique title
        const uniqueByTitle = new Map();

        const clusters = Object.keys(data);
        for (let i = 0; i < clusters.length; i++) {
          const clusterKey = clusters[i];
          const subdivisions = Object.keys(data[clusterKey]);

          for (let j = 0; j < subdivisions.length; j++) {
            const subKey = subdivisions[j];
            const careersList = data[clusterKey][subKey] || [];

            for (let k = 0; k < careersList.length; k++) {
              const c = careersList[k];
              // If there's a title and soc_code, store the first we encounter for that title.
              if (c.title && c.soc_code && c.cip_code !== undefined) {
                if (!uniqueByTitle.has(c.title)) {
                  // Add it if we haven't seen this exact title yet
                  uniqueByTitle.set(c.title, {
                    title: c.title,
                    soc_code: c.soc_code,
                    cip_code: c.cip_code,
                  });
                }
                // If you truly only want to keep the first occurrence,
                // just do nothing if we see the same title again.
              }
            }
          }
        }

        // Convert Map to array
        const dedupedArr = [...uniqueByTitle.values()];
        setCareerObjects(dedupedArr);

      } catch (error) {
        console.error('Error loading or parsing career_clusters.json:', error);
      }
    };

    fetchCareerData();
  }, []);

  // Called when user clicks "Confirm New Career"
  const handleConfirmCareer = () => {
    // Find the full object by exact title match
    const foundObj = careerObjects.find(
      (obj) => obj.title.toLowerCase() === searchInput.toLowerCase()
    );
    console.log('[CareerSearch] foundObj:', foundObj);

    if (foundObj) {
      onCareerSelected(foundObj);
    } else {
      alert('Please select a valid career from the suggestions.');
    }
  };

  return (
    <div style={{ marginBottom: '1rem' }}>
      <h3>Search for Career</h3>
      <input
        value={searchInput}
        onChange={(e) => setSearchInput(e.target.value)}
        placeholder="Start typing a career..."
        list="career-titles"
      />
      <datalist id="career-titles">
        {careerObjects.map((obj, index) => (
          <option key={index} value={obj.title} />
        ))}
      </datalist>

      <button onClick={handleConfirmCareer} style={{ marginLeft: '8px' }}>
        Confirm
      </button>
    </div>
  );
};

export default CareerSearch;