import React, { useEffect, useState } from 'react';
import { Button } from './ui/button.js';

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

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

        // Create a Map keyed by career title, so we only keep one object per unique title
        const uniqueByTitle = new Map();

        // data is presumably an array like:
        // [
        //   { soc_code: "15-1241.00", title: "Computer Network Architects", cip_codes: [...], ... },
        //   { soc_code: "15-1299.07", title: "Blockchain Engineers", cip_codes: [...], ... },
        //   ...
        // ]
        for (const c of data) {
          // Make sure we have a valid title, soc_code, and cip_codes
          if (c.title && c.soc_code && c.cip_codes) {
            // Only store the first unique title found
            if (!uniqueByTitle.has(c.title)) {
              uniqueByTitle.set(c.title, {
                title: c.title,
                soc_code: c.soc_code,
                // NOTE: We store the array of CIPs in `cip_code`.
                cip_code: c.cip_codes,
                limited_data: c.limited_data,
                ratings: c.ratings,
              });
            }
          }
        }

        // Convert the map into an array
        const dedupedArr = [...uniqueByTitle.values()];
        setCareerObjects(dedupedArr);
      } catch (error) {
        console.error('Error loading or parsing careers_with_ratings.json:', error);
      }
    };

    fetchCareerData();
  }, []);

  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' }}>
      <h2>Search for Career (select from suggestions)</h2>
        <h3>We have an extensive database with thousands of recognized job titles. If you don’t see your exact title, please choose the closest match—this helps us provide the most accurate guidance.</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;