import React, { useState, useEffect, useRef } from 'react';
import Modal from '../../components/ui/modal.js';
import FinancialAidWizard from '../../components/FinancialAidWizard.js';
import { useLocation } from 'react-router-dom';
import api from '../../auth/apiClient.js';
import { loadDraft, clearDraft, saveDraft } from '../../utils/onboardingDraftApi.js';

const Req = () => <span className="text-red-600 ml-0.5">*</span>;

function CollegeOnboarding({ nextStep, prevStep, data, setData }) {
  const [schoolSuggestions, setSchoolSuggestions] = useState([]);
  const schoolPrevRef = useRef('');
  const [programSuggestions, setProgramSuggestions] = useState([]);
  const [availableProgramTypes, setAvailableProgramTypes] = useState([]);
  const [schoolValid,  setSchoolValid]  = useState(false);
  const [programValid, setProgramValid] = useState(false);
  const [enrollmentDate, setEnrollmentDate] = useState(
  data.enrollment_date || ''     
);
const [selectedUnitId, setSelectedUnitId] = useState(null);
const [expectedGraduation,   setExpectedGraduation]   = useState(data.expected_graduation   || '');
  const [showAidWizard, setShowAidWizard] = useState(false);
  const location          = useLocation();
   const navSelectedSchoolObj =
   location.state?.selectedSchool ??
   location.state?.premiumOnboardingState?.selectedSchool;
 
   const [selectedSchool, setSelectedSchool] = useState(() => {
   if (navSelectedSchoolObj && typeof navSelectedSchoolObj === 'object') {
     return { INSTNM: navSelectedSchoolObj.INSTNM,
              CIPDESC: navSelectedSchoolObj.CIPDESC || '',
              CREDDESC: navSelectedSchoolObj.CREDDESC || '' };
   }
   if (data.selected_school) {
     return { INSTNM: data.selected_school,
              CIPDESC: data.selected_program || '',
              CREDDESC: data.program_type || '' };
   }
   return null;
 });


function toSchoolName(objOrStr) {
  if (!objOrStr)            return '';
  if (typeof objOrStr === 'object') return objOrStr.INSTNM || '';
  return objOrStr;                                    // already a string
}

   const infoIcon = (msg) => (
    <span
      className="ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full bg-blue-500 text-white text-xs cursor-help"
      title={msg}
    >
      i
    </span>
  );

  // Destructure parent data
  const {
    college_enrollment_status = '',
    selected_school = '',
    selected_program = '',
    program_type = '',
    academic_calendar = 'semester',
    annual_financial_aid = '',
    is_online = false,
    existing_college_debt = '',
    enrollment_date = '',
    expected_graduation = '',
    interest_rate = 5.5,
    loan_term = 10,
    extra_payment = '',
    expected_salary = '',
    is_in_state = false,
    is_in_district = false,
    loan_deferral_until_graduation = false,
    credit_hours_per_year = '',
    hours_completed = '',
    credit_hours_required = '',
    tuition_paid = '',
  } = data;

  // Local states for auto/manual logic on tuition & program length
  const [manualTuition, setManualTuition] = useState('');
  const [autoTuition, setAutoTuition] = useState(0);
  const [manualProgramLength, setManualProgramLength] = useState('');
  const [autoProgramLength, setAutoProgramLength] = useState(0);

  const inSchool = ['currently_enrolled','prospective_student']
                  .includes(college_enrollment_status);

 useEffect(() => {
  if (selectedSchool) {
  setData(prev => ({
    ...prev,
   selected_school : selectedSchool.INSTNM,
   selected_program: selectedSchool.CIPDESC || prev.selected_program,
   program_type    : selectedSchool.CREDDESC || prev.program_type
  }));
}
}, [selectedSchool, setData]);

// Backfill from cookie-backed draft if props aren't populated yet
useEffect(() => {
  // if props already have values, do nothing
  if (data?.selected_school || data?.selected_program || data?.program_type) return;

  let cancelled = false;
  (async () => {
    let draft;
    try { draft = await loadDraft(); } catch { draft = null; }
    const cd = draft?.data?.collegeData;
    if (!cd) return;
    if (cancelled) return;

    // 1) write into parent data (so inputs prefill)
    setData(prev => ({
      ...prev,
      selected_school : cd.selected_school ?? prev.selected_school ?? '',
      selected_program: cd.selected_program ?? prev.selected_program ?? '',
      program_type    : cd.program_type    ?? prev.program_type    ?? ''
    }));

    // 2) set local selectedSchool object (triggers your selectedSchool→data effect too)
    setSelectedSchool({
      INSTNM  : cd.selected_school || '',
      CIPDESC : cd.selected_program || '',
      CREDDESC: cd.program_type || ''
    });
  })();

  return () => { cancelled = true; };
  // run once on mount; we don't want to fight subsequent user edits
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

useEffect(() => {
  if (data.expected_graduation && !expectedGraduation)
    setExpectedGraduation(data.expected_graduation);
}, [data.expected_graduation]);

  /**
   * handleParentFieldChange
   * If user leaves numeric fields blank, store '' in local state, not 0.
   * Only parseFloat if there's an actual numeric value.
   */
   const handleParentFieldChange = (e) => {
   const { name: field, value, type, checked } = e.target;
   let val = value;

    if (type === 'checkbox') {
      val = checked; 
      setData(prev => ({ ...prev, [field]: val }));
      return;
    }

    // If the user typed an empty string, store '' so they can see it's blank
    if (val.trim() === '') {
      setData(prev => ({ ...prev, [field]: '' }));
      return;
    }

    // Otherwise, parse it if it's one of the numeric fields
    if (['interest_rate', 'loan_term', 'extra_payment', 'expected_salary'].includes(field)) {
      const parsed = parseFloat(val);
      // If parse fails => store '' (or fallback to old value)
      if (isNaN(parsed)) {
        setData(prev => ({ ...prev, [field]: '' }));
      } else {
        setData(prev => ({ ...prev, [field]: parsed }));
      }
    } else if ([
      'annual_financial_aid','existing_college_debt','credit_hours_per_year',
      'hours_completed','credit_hours_required','tuition_paid'
    ].includes(field)) {
      const parsed = parseFloat(val);
      setData(prev => ({ ...prev, [field]: isNaN(parsed) ? '' : parsed }));
    } else {
      // For non-numeric or strings
      setData(prev => ({ ...prev, [field]: val }));
    }
  };

  const handleManualTuitionChange = (e) => {
    setManualTuition(e.target.value);
  };

  const handleManualProgramLengthChange = (e) => {
    setManualProgramLength(e.target.value);
  };

 useEffect(() => {
  if (college_enrollment_status !== 'prospective_student') return;

  const lenYears = Number(data.program_length || '');
  if (!enrollmentDate || !lenYears) return;

  const start = new Date(enrollmentDate);
  const est   = new Date(start.getFullYear() + lenYears, start.getMonth(), start.getDate());
  const iso   = firstOfNextMonth(est);

  setExpectedGraduation(iso);
  setData(prev => ({ ...prev, expected_graduation: iso }));
}, [college_enrollment_status, enrollmentDate, data.program_length, setData]);

  // School Name
  const handleSchoolChange = async (e) => {
  const value = e.target.value || '';
  setData(prev => ({ ...prev, selected_school: value, selected_program: '', program_type: '', credit_hours_required: '' }));
  if (!value.trim()) { setSchoolSuggestions([]); return; }

 const it = e?.nativeEvent?.inputType;                  // Chromium: 'insertReplacementText' on datalist pick
 const replacement = it === 'insertReplacementText';
 const bigJump = Math.abs(value.length - (schoolPrevRef.current || '').length) > 1;
  try {
   const resp = await api.get('/api/schools/suggest', { params: { query: value, limit: 10 }});
   const opts = Array.isArray(resp.data) ? resp.data : [];
   setSchoolSuggestions(opts);

   // if user actually picked from dropdown → commit now (sets UNITID)
   const exact = opts.find(o => (o.name || '').toLowerCase() === value.toLowerCase());
   if (exact && (replacement || bigJump)) {
     handleSchoolSelect(exact);  // sets selectedUnitId + clears suggestions
   }
  } catch {
    setSchoolSuggestions([]);
  }
  schoolPrevRef.current = value;
};


  const handleSchoolSelect = (schoolObj) => {
   const name = schoolObj?.name || schoolObj || '';
   const uid  = schoolObj?.unitId || null;
   setSelectedUnitId(uid);
   setData(prev => ({ ...prev, selected_school: name, selected_program: '', program_type: '', credit_hours_required: '' }));
   setSchoolSuggestions([]);
   setProgramSuggestions([]);
   setAvailableProgramTypes([]);
   saveDraft({ collegeData: { selected_school: name } }).catch(() => {});
 };

  // Program
  const handleProgramChange = async (e) => {
   const value = e.target.value;
   setData(prev => ({ ...prev, selected_program: value }));
   if (!value || !selected_school) { setProgramSuggestions([]); return; }
   try {
     const { data } = await api.get('/api/programs/suggest', {
       params: { school: selected_school, query: value, limit: 10 }
     });
     setProgramSuggestions(Array.isArray(data) ? data : []); // [{ program }]
   } catch {
     setProgramSuggestions([]);
   }
 };

  const handleProgramSelect = (prog) => {
    setData(prev => ({ ...prev, selected_program: prog }));
    setProgramSuggestions([]);
    saveDraft({ collegeData: { selected_program: prog } }).catch(() => {});
  };

  const handleProgramTypeSelect = (e) => {
    const val = e.target.value;
    setData(prev => ({
      ...prev,
      program_type: val,
      credit_hours_required: '',
    }));
    setManualProgramLength('');
    setAutoProgramLength('0.00');
    saveDraft({ collegeData: { program_type: val } }).catch(() => {});
  };

  // once we have school+program => load possible program types
  useEffect(() => {
   if (!selected_program || !selected_school) { setAvailableProgramTypes([]); return; }
   (async () => {
     try {
       const { data } = await api.get('/api/programs/types', { params: { school: selected_school, program: selected_program }});
       setAvailableProgramTypes(Array.isArray(data?.types) ? data.types : []);
     } catch {
       setAvailableProgramTypes([]);
     }
   })();
 }, [selected_program, selected_school]);

 /*Auto Calc Tuition*/
 useEffect(() => {
   (async () => {
     if (!selectedUnitId || !program_type || !credit_hours_per_year) return;
     try {
       const { data } = await api.get('/api/tuition/estimate', {
         params: {
           unitId: String(selectedUnitId),
           programType: program_type,
           inState: is_in_state ? 1 : 0,
           inDistrict: is_in_district ? 1 : 0,
           creditHoursPerYear: Number(credit_hours_per_year) || 0
         }
       });
       setAutoTuition(Number.isFinite(data?.estimate) ? data.estimate : 0);
     } catch {
       setAutoTuition(0);
     }
   })();
 }, [selectedUnitId, program_type, credit_hours_per_year, is_in_state, is_in_district]);

  // auto-calc program length
 useEffect(() => {
  if (!program_type || !credit_hours_per_year) return;

  const completed = parseInt(hours_completed, 10) || 0;
  const perYear   = parseFloat(credit_hours_per_year) || 1;

  let required = 0;
  switch (program_type) {
    case "Associate's Degree":           required = 60;  break;
    case "Bachelor's Degree":            required = 120; break;
    case "Master's Degree":              required = 180; break;
    case "Doctoral Degree":              required = 240; break;
    case "First Professional Degree":    required = 180; break;
    case "Graduate/Professional Certificate":
      required = parseInt(credit_hours_required, 10) || 0;
      break;
    case "Undergraduate Certificate or Diploma":
      required = parseInt(credit_hours_required, 10) || 30;   // sensible default
      break;
    default:
      required = parseInt(credit_hours_required, 10) || 0;
  }

  /* never negative */
  const remain = Math.max(0, required - completed);
  const yrs    = remain / perYear;

  setAutoProgramLength(parseFloat(yrs.toFixed(2)));
}, [
  program_type,
  hours_completed,
  credit_hours_per_year,
  credit_hours_required,
]);

useEffect(() => {
   const hasSchool = !!data.selected_school;
   const hasAnyProgram = !!data.selected_program || !!data.program_type;
   if (!hasSchool && !hasAnyProgram) return;

   setSelectedSchool(prev => {
     const next = {
       INSTNM  : data.selected_school || '',
       CIPDESC : data.selected_program || '',
       CREDDESC: data.program_type     || ''
     };
    // avoid useless state churn
     if (prev &&
         prev.INSTNM  === next.INSTNM &&
         prev.CIPDESC === next.CIPDESC &&
         prev.CREDDESC=== next.CREDDESC) return prev;
     return next;
   });
 }, [data.selected_school, data.selected_program, data.program_type]);

/* ------------------------------------------------------------------ */
/*  Whenever the user changes enrollmentDate OR programLength          */
/*  (program_length is already in parent data), compute grad date.     */
/* ------------------------------------------------------------------ */
useEffect(() => {
  /* decide which “length” the user is looking at right now */
 const lenRaw =
    manualProgramLength.trim() !== ''
      ? manualProgramLength
      : autoProgramLength;

  const len = parseFloat(lenRaw);          // years (may be fractional)
  const startISO = pickStartDate();        // '' or yyyy‑mm‑dd
  if (!startISO || !len) return;           // nothing to do yet

  const start = new Date(startISO);
  /* naïve add – assuming program_length is years;                    *
   * adjust if you store months instead                               */
   /* 1 year = 12 months ‑‑ preserve fractions (e.g. 1.75 y = 21 m) */
  const monthsToAdd = Math.round(len * 12);

  const estGrad = new Date(start);          // clone
  estGrad.setMonth(estGrad.getMonth() + monthsToAdd);

  const gradISO = firstOfNextMonth(estGrad);

  setExpectedGraduation(gradISO);
  setData(prev => ({ ...prev, expected_graduation: gradISO }));
}, [college_enrollment_status,
    enrollmentDate,
    manualProgramLength,
    autoProgramLength,
    setData]);


  // final handleSubmit => we store chosen tuition + program_length, then move on
  const handleSubmit = () => {
    const chosenTuition = manualTuition.trim() === ''
      ? autoTuition
      : parseFloat(manualTuition);
    const chosenProgramLength = manualProgramLength.trim() === ''
      ? autoProgramLength
      : manualProgramLength;

    setData(prev => ({
      ...prev,
      interest_rate,
      loan_term,
      tuition: chosenTuition,
      program_length: chosenProgramLength
    }));

    nextStep();
  };

  // displayedTuition / displayedProgramLength
  const displayedTuition = (manualTuition.trim() === '' ? autoTuition : manualTuition);
  const displayedProgramLength = (manualProgramLength.trim() === '' ? autoProgramLength : manualProgramLength);

  function pickStartDate() {
  if (college_enrollment_status === 'prospective_student') {
    return enrollmentDate;               // may still be ''
  }
  if (college_enrollment_status === 'currently_enrolled') {
    return firstOfNextMonth(new Date()); // today → 1st next month
  }
  return '';                             // anybody else
}

    function firstOfNextMonth(dateObj) {
  return new Date(dateObj.getFullYear(), dateObj.getMonth() + 1, 1)
           .toISOString()
           .slice(0, 10);           // yyyy‑mm‑dd
            }
    
const ready =
  (!inSchool || expectedGraduation) &&           // grad date iff in school
  selected_school && program_type;

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

      {(college_enrollment_status === 'currently_enrolled' ||
        college_enrollment_status === 'prospective_student') ? (
        <div className="space-y-4">
          {/* In District, In State, Online, etc. */}
          <div className="flex items-center space-x-2">
            <input
              type="checkbox"
              name="is_in_district"
              checked={is_in_district}
              onChange={handleParentFieldChange}
              className="h-4 w-4"
            />
            <label className="font-medium">In District? {infoIcon("Used by Community Colleges usually - local discounts")}</label>
          </div>

          <div className="flex items-center space-x-2">
            <input
              type="checkbox"
              name="is_in_state"
              checked={is_in_state}
              onChange={handleParentFieldChange}
              className="h-4 w-4"
            />
            <label className="font-medium">In State Tuition? {infoIcon("Students can qualify for discounted tuition if they are a resident of the same state as the college - private institutions rarely have this discounts")}</label>
          </div>

          <div className="flex items-center space-x-2">
            <input
              type="checkbox"
              name="is_online"
              checked={is_online}
              onChange={handleParentFieldChange}
              className="h-4 w-4"
            />
            <label className="font-medium">Program is Fully Online {infoIcon("Tuition rates for fully online programs are usually different than traditional")}</label>
          </div>

          <div className="flex items-center space-x-2">
            <input
              type="checkbox"
              name="loan_deferral_until_graduation"
              checked={loan_deferral_until_graduation}
              onChange={handleParentFieldChange}
              className="h-4 w-4"
            />
            <label className="font-medium">Defer Loan Payments until Graduation? {infoIcon("You can delay paying tuition loans while still in college, but they will still accrue interest during this time")}</label>
          </div>

          {/* School */}
          <div className="space-y-1">
            <label className="block font-medium">School Name* (Please select from drop-down after typing){infoIcon("Start typing and click from auto-suggest")}</label>
            <input
              name="selected_school"
              value={selected_school}
              onChange={handleSchoolChange}
             onBlur={() => {
              const exact = schoolSuggestions.find(o => (o.name || '').toLowerCase() === (selected_school || '').toLowerCase());
              if (exact) handleSchoolSelect(exact);   // ensure UNITID is set
              const ok = !!exact || !!selected_school;
              setSchoolValid(ok);
              if (!ok) alert("Please pick a school from the list.");
            }}
              list="school-suggestions"
              className={`w-full border rounded p-2 ${schoolValid ? '' : 'border-red-500'}`}
              placeholder="Start typing and choose…"
            />
            <datalist id="school-suggestions">
             {schoolSuggestions.map((s) => (
              <option
                key={`${s.unitId}:${s.name}`}
                value={s.name}
                onClick={() => handleSchoolSelect(s)}
              />
            ))}
            </datalist>
          </div>

          <div className="space-y-1">
            <label className="block font-medium">Major/Program Name* (Please select from drop-down after typing){infoIcon("Search and click from auto-suggest.  If for some reason your major isn't listed, please send us a note.")}</label>
            <input
              name="selected_program"
              value={selected_program}
              onChange={handleProgramChange}
               onBlur={() => {
                  const ok = !!programSuggestions.find(p => (p.program || '').toLowerCase() === (selected_program || '').toLowerCase());
                  setProgramValid(ok);
                  if (!ok) alert("Please pick a program from the list.");
                }}
              list="program-suggestions"
              className={`w-full border rounded p-2 ${programValid ? '' : 'border-red-500'}`}
              placeholder="Start typing and choose…"
            />
            <datalist id="program-suggestions">
               {programSuggestions.map((p, idx) => (
                <option key={idx} value={p.program} onClick={() => handleProgramSelect(p.program)} />
              ))}
            </datalist>
          </div>

          <div className="space-y-1">
            <label className="block font-medium">Degree Type* {infoIcon("What level of degree are you/will you be persuing?")}</label>
            <select
              name="program_type"
              value={program_type}
              onChange={handleProgramTypeSelect}
              className="w-full border rounded p-2"
            >
              <option value="">Select Program Type</option>
              {availableProgramTypes.map((t, i) => (
                <option key={i} value={t}>{t}</option>
              ))}
            </select>
          </div>

          {/* Academic Calendar */}
          <div className="space-y-1">
            <label className="block font-medium">Academic Calendar {infoIcon("What annual calendar type does the college operate under - pick semester if you are unsure.")}</label>
            <select
              name="academic_calendar"
              value={academic_calendar}
              onChange={handleParentFieldChange}
              className="w-full border rounded p-2"
            >
              <option value="semester">Semester</option>
              <option value="quarter">Quarter</option>
              <option value="trimester">Trimester</option>
              <option value="other">Other</option>
            </select>
          </div>

          {/* If Grad/Professional => credit_hours_required */}
          {(program_type === 'Graduate/Professional Certificate' ||
            program_type === 'First Professional Degree' ||
            program_type === 'Doctoral Degree' ||
            program_type === 'Undergraduate Certificate or Diploma'
          ) && (
            <div className="space-y-1">
              <label className="block font-medium">Credit Hours Required {infoIcon("Some Certificate, Graduate, and Professional Programs differ on number of hours required.")}</label>
              <input
                type="number"
                name="credit_hours_required"
                value={credit_hours_required}
                onChange={handleParentFieldChange}
                placeholder="e.g. 120"
                className="w-full border rounded p-2"
              />
            </div>
          )}

          <div className="space-y-1">
            <label className="block font-medium">Credit Hours Per Year {infoIcon("How many hours do you plan to take each year?  24 is usually considered full-time, but to finish a Bachelor's in 4 you need to take 30.")}</label>
            <input
              type="number"
              name="credit_hours_per_year"
              value={credit_hours_per_year}
              onChange={handleParentFieldChange}
              placeholder="e.g. 24"
              className="w-full border rounded p-2"
            />
          </div>

          {/* Tuition (auto or override) */}
          <div className="space-y-1">
            <label className="block font-medium">Yearly Tuition</label>
            <input
              type="number"
              value={displayedTuition}
              onChange={handleManualTuitionChange}
              placeholder="Leave blank to use auto-calculated, or type an override"
              className="w-full border rounded p-2"
            />
          </div>

          {/* Annual Financial Aid */}
          <div className="space-y-1">
            <label className="block font-medium">(Estimated) Annual Financial Aid {infoIcon("You usually won't know this exact value until right before you start college.  Use estimates in AptivaAI.")}</label>
            <div className="flex space-x-2">
              <input
                type="number"
                name="annual_financial_aid"
                value={annual_financial_aid}
                onChange={handleParentFieldChange}
                placeholder="e.g. 2000"
                className="w-full border rounded p-2"
              />
              <button
                type="button"
                onClick={() => setShowAidWizard(true)}
                className="bg-blue-600 text-center px-3 py-2 rounded text-white"
              >
                Need Help?
              </button>
            </div>
          </div>

          <div className="space-y-1">
            <label className="block font-medium">Existing College Loan Debt {infoIcon("If you have existing student loans, enter the value here.  Estimates are just fine, but detailed forecasts require detailed inputs.")}</label>
            <input
              type="number"
              name="existing_college_debt"
              value={existing_college_debt}
              onChange={handleParentFieldChange}
              placeholder="e.g. 2000"
              className="w-full border rounded p-2"
            />
          </div>

          {/* Show Program Length for both "currently_enrolled" & "prospective_student" */}
          {(college_enrollment_status === 'currently_enrolled' ||
            college_enrollment_status === 'prospective_student') && (
            <div className="space-y-1">
              <label className="block font-medium">Program Length {infoIcon("How many years it will take you to complete the degree/program given the number of hours you plan to take")}</label>
              <input
                type="number"
                value={displayedProgramLength}
                onChange={handleManualProgramLengthChange}
                placeholder="Leave blank to use auto, or type an override"
                className="w-full border rounded p-2"
              />
            </div>
          )}

          {/* If currently_enrolled => hours_completed */}
          {college_enrollment_status === 'currently_enrolled' && (
            <div className="space-y-1">
              <label className="block font-medium">
                Completed Credit Hours (that count towards program completion) {infoIcon("If you have already completed some college credits that apply to the selected Program above, enter them here.  Bachelor's = 120")}
              </label>
              <input
                type="number"
                name="hours_completed"
                value={hours_completed}
                onChange={handleParentFieldChange}
                placeholder="Credit hours done"
                className="w-full border rounded p-2"
              />
            </div>
          )}

        {['currently_enrolled','prospective_student'].includes(college_enrollment_status) && (
              <>
                {/* A) Enrollment date – prospective only */}
                {college_enrollment_status === 'prospective_student' && (
                  <div className="space-y-2">
                    <label className="block font-medium">
                      Anticipated Enrollment Date <Req />
                    </label>
                    <input
                      type="date"
                      value={enrollmentDate}
                      onChange={e => {
                        setEnrollmentDate(e.target.value);
                        setData(p => ({ ...p, enrollment_date: e.target.value }));
                      }}
                      className="w-full border rounded p-2"
                      required
                    />
                  </div>
                )}

                {/* B) Expected graduation – always editable */}
                <div className="space-y-2">
                  <label className="block font-medium">
                    Expected Graduation Date <Req />
                    {college_enrollment_status === 'prospective_student' &&
                    enrollmentDate && data.program_length && (
                      <span
                        className="ml-1 cursor-help text-blue-600"
                        title="Automatically estimated from your enrollment date and program length. Adjust if needed—actual calendars vary by institution."
                      >&#9432;</span>
                    )}
                  </label>

                  <input
                    type="date"
                    value={expectedGraduation}
                    onChange={e => {
                      setExpectedGraduation(e.target.value);
                      setData(p => ({ ...p, expected_graduation: e.target.value }));
                    }}
                    className="w-full border rounded p-2"
                    required
                  />
                </div>
              </>
            )}

          <div className="space-y-1">
            <label className="block font-medium">Loan Interest Rate (%) {infoIcon("These can vary, enter the best blended rate you can approximate if you have multiple.")}</label>
            <input
              type="number"
              name="interest_rate"
              value={interest_rate}
              onChange={handleParentFieldChange}
              placeholder="e.g. 5.5"
              className="w-full border rounded p-2"
            />
          </div>

          <div className="space-y-1">
            <label className="block font-medium">Loan Term (years) {infoIcon("Education loans typically have a 10-year payback period, but can vary.")}</label>
            <input
              type="number"
              name="loan_term"
              value={loan_term}
              onChange={handleParentFieldChange}
              placeholder="e.g. 10"
              className="w-full border rounded p-2"
            />
          </div>

          <div className="space-y-1">
            <label className="block font-medium">Extra Monthly Payment {infoIcon("Extra money you plan to pay towards the loans each month.")}</label>
            <input
              type="number"
              name="extra_payment"
              value={extra_payment}
              onChange={handleParentFieldChange}
              placeholder="Optional"
              className="w-full border rounded p-2"
            />
          </div>

          <div className="space-y-1">
            <label className="block font-medium">Expected Salary After Graduation {infoIcon("If you're just starting out, expect towards the 10th percentile values for your targeted career.  Can be found using Career Explorer if needed or input later.")}</label>
            <input
              type="number"
              name="expected_salary"
              value={expected_salary}
              onChange={handleParentFieldChange}
              placeholder="e.g. 65000"
              className="w-full border rounded p-2"
            />
          </div>
        </div>
      ) : (
        <p>Not currently enrolled or prospective student. Skipping college onboarding.</p>
      )}

      <div className="pt-4">
        <button
          onClick={prevStep}
          style={{ marginRight: '1rem' }}
          className="bg-gray-200 hover:bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded"
        >
          ← Previous
        </button>
        <button
          onClick={handleSubmit}
          disabled={!ready}
          className={`py-2 px-4 rounded font-semibold
            ${ready
                ? 'bg-blue-500 hover:bg-blue-600 text-white'
                : 'bg-gray-300 text-gray-500 cursor-not-allowed'}`}
        >
          Finish Onboarding
        </button>
      </div>

      {showAidWizard && (
        <Modal onClose={() => setShowAidWizard(false)}>
          <FinancialAidWizard
            onAidEstimated={(estimate) => {
              setData(prev => ({
                ...prev,
                annual_financial_aid: estimate
              }));
            }}
            onClose={() => setShowAidWizard(false)}
          />
        </Modal>
      )}
    </div>
  );
}

export default CollegeOnboarding;