dev1/src/components/ScenarioEditWizard.js

// ScenarioEditWizard.js
import React, { useState, useEffect } from 'react';
import CareerOnboarding from './PremiumOnboarding/CareerOnboarding.js';
import FinancialOnboarding from './PremiumOnboarding/FinancialOnboarding.js';
import CollegeOnboarding from './PremiumOnboarding/CollegeOnboarding.js';
import ReviewPage from './PremiumOnboarding/ReviewPage.js';
import authFetch from '../utils/authFetch.js';
import { simulateFinancialProjection } from '../utils/FinancialProjectionService.js';

export default function ScenarioEditWizard({
  show,
  onClose,
  scenarioId // or scenario object
}) {
  const [step, setStep] = useState(0);
  const [careerData, setCareerData] = useState({});
  const [financialData, setFinancialData] = useState({});
  const [collegeData, setCollegeData] = useState({});

  // You might also store scenario + college IDs
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!show || !scenarioId) return;
    // 1) fetch scenario => careerData
    // 2) fetch financial => financialData
    // 3) fetch college => collegeData
    // Pre-fill the same states your Onboarding steps expect.
    async function fetchExisting() {
      setLoading(true);
      try {
        const [scenRes, finRes, colRes] = await Promise.all([
          authFetch(`/api/premium/career-profile/${scenarioId}`),
          authFetch(`/api/premium/financial-profile`),
          authFetch(`/api/premium/college-profile?careerProfileId=${scenarioId}`)
        ]);
        if (!scenRes.ok || !finRes.ok || !colRes.ok) {
          throw new Error('Failed fetching existing scenario or financial or college.');
        }
        const [scenData, finData, colDataRaw] = await Promise.all([
          scenRes.json(),
          finRes.json(),
          colRes.json()
        ]);
        let colData = Array.isArray(colDataRaw) ? colDataRaw[0] : colDataRaw;

        // Now put them into the same shape as your Onboarding step states:
        setCareerData({
          career_name: scenData.career_name,
          college_enrollment_status: scenData.college_enrollment_status,
          currently_working: scenData.currently_working,
          status: scenData.status,
          start_date: scenData.start_date,
          projected_end_date: scenData.projected_end_date,
          planned_monthly_expenses: scenData.planned_monthly_expenses,
          planned_monthly_debt_payments: scenData.planned_monthly_debt_payments,
          planned_monthly_retirement_contribution: scenData.planned_monthly_retirement_contribution,
          planned_monthly_emergency_contribution: scenData.planned_monthly_emergency_contribution,
          planned_surplus_emergency_pct: scenData.planned_surplus_emergency_pct,
          planned_surplus_retirement_pct: scenData.planned_surplus_retirement_pct,
          planned_additional_income: scenData.planned_additional_income,
          id: scenData.id,
          // etc...
        });

        setFinancialData({
          // your financial table fields
          current_salary: finData.current_salary,
          additional_income: finData.additional_income,
          monthly_expenses: finData.monthly_expenses,
          monthly_debt_payments: finData.monthly_debt_payments,
          retirement_savings: finData.retirement_savings,
          emergency_fund: finData.emergency_fund,
          retirement_contribution: finData.retirement_contribution,
          emergency_contribution: finData.emergency_contribution,
          extra_cash_emergency_pct: finData.extra_cash_emergency_pct,
          extra_cash_retirement_pct: finData.extra_cash_retirement_pct
        });

        setCollegeData({
          // from colData
          selected_school: colData.selected_school,
          selected_program: colData.selected_program,
          program_type: colData.program_type,
          academic_calendar: colData.academic_calendar,
          is_in_state: colData.is_in_state,
          is_in_district: colData.is_in_district,
          is_online: colData.is_online,
          college_enrollment_status: colData.college_enrollment_status,
          annual_financial_aid: colData.annual_financial_aid,
          existing_college_debt: colData.existing_college_debt,
          tuition: colData.tuition,
          tuition_paid: colData.tuition_paid,
          loan_deferral_until_graduation: colData.loan_deferral_until_graduation,
          loan_term: colData.loan_term,
          interest_rate: colData.interest_rate,
          extra_payment: colData.extra_payment,
          credit_hours_per_year: colData.credit_hours_per_year,
          hours_completed: colData.hours_completed,
          program_length: colData.program_length,
          credit_hours_required: colData.credit_hours_required,
          expected_graduation: colData.expected_graduation,
          expected_salary: colData.expected_salary
        });
      } catch (err) {
        console.error(err);
      } finally {
        setLoading(false);
      }
    }
    fetchExisting();
  }, [show, scenarioId]);

  const nextStep = () => setStep(s => s + 1);
  const prevStep = () => setStep(s => s - 1);

  if (!show) return null;
  if (loading) return <div className="modal">Loading existing scenario...</div>;

  const steps = [
    <CareerOnboarding 
      data={careerData}
      setData={setCareerData}
      nextStep={nextStep}
    />,
    <FinancialOnboarding
      data={{
        ...financialData,
        currently_working: careerData.currently_working // pass along
      }}
      setData={setFinancialData}
      nextStep={nextStep}
      prevStep={prevStep}
      isEditMode={true}
    />,
    <CollegeOnboarding
      data={{
        ...collegeData,
        college_enrollment_status: careerData.college_enrollment_status
      }}
      setData={setCollegeData}
      nextStep={nextStep}
      prevStep={prevStep}
    />,
    <ReviewPage
      careerData={careerData}
      financialData={financialData}
      collegeData={collegeData}
      onSubmit={async () => {
        // same final logic from Onboarding: upsert scenario, financial, college
        // Then close
        onClose();
      }}
      onBack={prevStep}
    />
  ];

  return (
    <div className="modal-backdrop">
      <div className="modal-content" style={{ padding:'1rem' }}>
        {steps[step]}
      </div>
    </div>
  );
}