// CareerOnboarding.js
import React, { useState, useEffect } from 'react';
import { useLocation } from 'react-router-dom'; 
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('');
  const [showFinPrompt, setShowFinPrompt] = useState(false);
  const [financialReady, setFinancialReady] = useState(false);   // persisted later if you wish
  const Req = () => <span className="text-red-600 ml-0.5">*</span>;
  const ready =  selectedCareer && currentlyWorking && collegeEnrollmentStatus;


  // 1) Grab the location state values, if any
  const location = useLocation();
  const {
    socCode,
    cipCodes,
    careerTitle,   // <--- we passed this from handleSelectForEducation
    userZip,
    userState,
  } = location.state || {};

  // 2) On mount, see if location.state has a careerTitle and update local states if needed
  useEffect(() => {
    if (careerTitle) {
      setSelectedCareer(careerTitle);
      setData((prev) => ({
        ...prev,
        career_name: careerTitle,
        soc_code: socCode || ''
      }));
    }
  }, [careerTitle, socCode, setData]);

  // 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 earning any income — even part-time or outside your intended career path? <Req />
        </label>
        <p className="text-sm text-gray-600">
          (We ask this to understand your financial picture. This won’t affect how we track your progress toward your target career.)
        </p>
        <select
          value={currentlyWorking}
          onChange={(e) => {
            setCurrentlyWorking(e.target.value);
            setData(prev => ({ ...prev, currently_working: e.target.value }));
          }}
          required
          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">
            What career are you planning to pursue? <Req />
          </h3>
          <p className="text-sm text-gray-600">
            This should be your <strong>target career path</strong> — whether it’s a new goal or the one you're already in.
          </p>

        <CareerSearch onCareerSelected={handleCareerSelected} required />
      </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? <Req />
        </label>
        <select
          value={collegeEnrollmentStatus}
          onChange={(e) => {
            setCollegeEnrollmentStatus(e.target.value);
            setData(prev => ({ ...prev, college_enrollment_status: e.target.value }));
            const needsPrompt = ['currently_enrolled', 'prospective_student'].includes(e.target.value);
              setShowFinPrompt(needsPrompt);
          }}
          required
          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>

        {showFinPrompt && !financialReady && (
            <div className="mt-4 p-4 rounded border border-blue-300 bg-blue-50">
              <p className="text-sm mb-3">
                We can give you step-by-step milestones right away. <br />
                If you’d also like a personal cash-flow &amp; tuition projection,<br />
                add a few financial details now—or skip and do it later.
              </p>

              <button
                className="bg-blue-500 hover:bg-blue-600 text-white py-1 px-3 rounded mr-2"
                onClick={() => {
                  /* open your ScenarioEditModal or a mini financial modal */
                  setShowFinPrompt(false);
                  /* maybe set a flag so CareerRoadmap opens the modal */
                }}
              >
                Add Financial Details
              </button>

              <button
                className="bg-gray-200 hover:bg-gray-300 text-gray-800 py-1 px-3 rounded"
                onClick={() => {
                  setFinancialReady(false);          // they chose to skip
                  setShowFinPrompt(false);
                  nextStep();                        // continue onboarding
                }}
              >
                Skip for Now
              </button>
            </div>
          )}

      </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}
          disabled={!ready}
          className={`py-2 px-4 rounded font-semibold
            ${selectedCareer && currentlyWorking && collegeEnrollmentStatus
                ? 'bg-blue-500 hover:bg-blue-600 text-white'
                : 'bg-gray-300 text-gray-500 cursor-not-allowed'}`}
        >
          Financial →
        </button>
      </div>
    </div>
  );
};

export default CareerOnboarding;