import React, { useEffect, useState } from 'react';
import { Input } from './ui/input.js';

const CareerSearch = ({ setPendingCareerForModal }) => {
  const [careers, setCareers] = useState([]);
  const [searchInput, setSearchInput] = useState('');

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

        const careerTitlesSet = new Set();

        // Iterate using Object.keys at every level (no .forEach or .map)
        const clusters = Object.keys(data);
        for (let i = 0; i < clusters.length; i++) {
          const cluster = clusters[i];
          const subdivisions = Object.keys(data[cluster]);

          for (let j = 0; j < subdivisions.length; j++) {
            const subdivision = subdivisions[j];
            const careersArray = data[cluster][subdivision];

            for (let k = 0; k < careersArray.length; k++) {
              const careerObj = careersArray[k];
              if (careerObj.title) {
                careerTitlesSet.add(careerObj.title);
              }
            }
          }
        }

        setCareers([...careerTitlesSet]);

      } catch (error) {
        console.error("Error fetching or processing career_clusters.json:", error);
      }
    };

    fetchCareerTitles();
  }, []);

  const handleConfirmCareer = () => {
    if (careers.includes(searchInput)) {
      setPendingCareerForModal(searchInput);
    } else {
      alert("Please select a valid career from the suggestions.");
    }
  };

  return (
    <div>
      <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">
        {careers.map((career, index) => (
          <option key={index} value={career} />
        ))}
      </datalist>

      <button onClick={handleConfirmCareer}>
        Confirm New Career
      </button>
    </div>
  );
};

export default CareerSearch;