dev1/src/components/PremiumOnboarding/CareerOnboarding.js

// CareerOnboarding.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Input } from '../ui/input.js'; // Ensure path matches your structure
import authFetch from '../../utils/authFetch.js';

// 1) Import your CareerSearch component
import CareerSearch from '../CareerSearch.js'; // adjust path as necessary

const apiURL = process.env.REACT_APP_API_URL;

const CareerOnboarding = ({ nextStep, prevStep, data, setData }) => {
  // We store local state for “are you working,” “selectedCareer,” etc.
  const [currentlyWorking, setCurrentlyWorking] = useState('');
  const [selectedCareer, setSelectedCareer] = useState('');
  const [collegeEnrollmentStatus, setCollegeEnrollmentStatus] = useState('');

  // On mount, if data already has these fields, set them
  useEffect(() => {
    if (data.currently_working) setCurrentlyWorking(data.currently_working);
    if (data.career_name) setSelectedCareer(data.career_name);
    if (data.college_enrollment_status) setCollegeEnrollmentStatus(data.college_enrollment_status);
  }, [data]);

  // Called whenever other <inputs> change
  const handleChange = (e) => {
    setData(prev => ({ ...prev, [e.target.name]: e.target.value }));
  };

  // Called when user picks a career from CareerSearch and confirms it
  const handleCareerSelected = (careerObj) => {
    // e.g. { title, soc_code, cip_code, ... }
    setSelectedCareer(careerObj.title);
    setData(prev => ({
      ...prev,
      career_name: careerObj.title,
      soc_code: careerObj.soc_code || '' // store SOC if needed
    }));
  };

  const handleSubmit = () => {
    if (!selectedCareer || !currentlyWorking || !collegeEnrollmentStatus) {
      alert('Please complete all required fields before continuing.');
      return;
    }
    const isInCollege =
      collegeEnrollmentStatus === 'currently_enrolled' ||
      collegeEnrollmentStatus === 'prospective_student';

    // Merge local state into parent data
    setData(prevData => ({
      ...prevData,
      career_name: selectedCareer,
      college_enrollment_status: collegeEnrollmentStatus,
      currently_working: currentlyWorking,
      inCollege: isInCollege,
      // fallback defaults, or use user-provided
      status: prevData.status || 'planned',
      start_date: prevData.start_date || new Date().toISOString().slice(0, 10).slice(0, 10),
      projected_end_date: prevData.projected_end_date || null
    }));

    nextStep();
  };

  return (
    <div className="max-w-md mx-auto p-6 space-y-4">
      <h2 className="text-2xl font-semibold">Career Details</h2>

      <div className="space-y-2">
        <label className="block font-medium">
          Are you currently working or earning any income (even part-time)?
        </label>
        <select
          value={currentlyWorking}
          onChange={(e) => {
            setCurrentlyWorking(e.target.value);
            setData(prev => ({ ...prev, currently_working: e.target.value }));
          }}
          className="w-full border rounded p-2"
        >
          <option value="">Select one</option>
          <option value="yes">Yes</option>
          <option value="no">No</option>
        </select>
      </div>

      {/* 2) Replace old local “Search for Career” with <CareerSearch/> */}
      <div className="space-y-2">
        <h3 className="font-medium">Search for Career</h3>
        <CareerSearch onCareerSelected={handleCareerSelected} />
      </div>

      {selectedCareer && (
        <p className="text-gray-700">
          Selected Career: <strong>{selectedCareer}</strong>
        </p>
      )}

      <div className="space-y-2">
        <label className="block font-medium">Status:</label>
        <select
          name="status"
          onChange={handleChange}
          value={data.status || ''}
          className="w-full border rounded p-2"
        >
          <option value="">Select Status</option>
          <option value="planned">Planned</option>
          <option value="current">Current</option>
          <option value="exploring">Exploring</option>
        </select>
      </div>

      <div className="space-y-2">
        <label className="block font-medium">Career Start Date:</label>
        <input
          name="start_date"
          type="date"
          onChange={handleChange}
          value={data.start_date || ''}
          className="w-full border rounded p-2"
        />
      </div>

      <div className="space-y-2">
        <label className="block font-medium">Projected End Date (optional):</label>
        <input
          name="projected_end_date"
          type="date"
          onChange={handleChange}
          value={data.projected_end_date || ''}
          className="w-full border rounded p-2"
        />
      </div>

      <div className="space-y-2">
        <label className="block font-medium">
          Are you currently enrolled in college or planning to enroll?
        </label>
        <select
          value={collegeEnrollmentStatus}
          onChange={(e) => {
            setCollegeEnrollmentStatus(e.target.value);
            setData(prev => ({ ...prev, college_enrollment_status: e.target.value }));
          }}
          className="w-full border rounded p-2"
        >
          <option value="">Select one</option>
          <option value="not_enrolled">Not Enrolled / Not Planning</option>
          <option value="currently_enrolled">Currently Enrolled</option>
          <option value="prospective_student">Planning to Enroll (Prospective)</option>
        </select>
      </div>
        <div className="space-y-2">
            <label className="block font-medium">Career Goals</label>
            <textarea
              name="career_goals"
              value={data.career_goals || ''}
              onChange={handleChange}
              className="w-full border rounded p-2"
              placeholder="Tell us about your goals, aspirations, or next steps..."
            />
          </div>
      <div className="flex justify-between pt-4">
        <button
          onClick={prevStep}
          className="bg-gray-200 hover:bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded"
        >
          Back
        </button>
        <button
          onClick={handleSubmit}
          className="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded"
        >
          Financial →
        </button>
      </div>
    </div>
  );
};

export default CareerOnboarding;