dev1/src/components/PremiumOnboarding/ReviewPage.js

import React from 'react';
// Hypothetical Button component from your UI library
import { Button } from '../ui/button.js'; // Adjust path if needed

/**
 * Helper to format numeric fields for display.
 * If val is null/undefined or 0 and you want to hide it,
 * you can adapt the logic below.
 */
function formatNum(val) {
  // If val is null or undefined, show 'N/A'
  if (val == null) return 'N/A';
  // If you'd like to hide zero, you could do:
  // if (val === 0) return 'N/A';
  return val;
}

function formatYesNo(val) {
  if (val == null) return 'N/A';
  return val === true || val === 'yes' ? 'Yes' : 'No';
}

function ReviewPage({ 
  careerData = {}, 
  financialData = {}, 
  collegeData = {}, 
  onSubmit, 
  onBack 
}) {
  // Decide if user is in or planning to be in college
  const inOrPlanningCollege = (
    careerData.college_enrollment_status === 'currently_enrolled'
    || careerData.college_enrollment_status === 'prospective_student'
  );



  return (
    <div className="max-w-xl mx-auto p-6 space-y-6">
      <h2 className="text-2xl font-semibold">Review Your Info</h2>

      {/* --- CAREER SECTION --- */}
      <div className="p-4 border rounded-md space-y-2">
        <h3 className="text-xl font-semibold">Career Info</h3>
        <div><strong>Career Name:</strong> {careerData.career_name || 'N/A'}</div>
        <div><strong>Currently Working:</strong> {careerData.currently_working || 'N/A'}</div>
        <div><strong>College enrollment Status:</strong> {careerData.college_enrollment_status || 'N/A'}</div>
        <div><strong>Status:</strong> {careerData.status || 'N/A'}</div>
        <div><strong>Start Date:</strong> {careerData.start_date || 'N/A'}</div>
        <div><strong>Projected End Date:</strong> {careerData.projected_end_date || 'N/A'}</div>
        <div><strong>Career Goals:</strong> {careerData.career_goals || 'N/A'}</div>
      </div>

      {/* --- FINANCIAL SECTION --- */}
      <div className="p-4 border rounded-md space-y-2">
        <h3 className="text-xl font-semibold">Financial Info</h3>

        {/* Current/Additional Income */}
        {careerData.currently_working === 'yes' ? (
          <div className="space-y-1">
            <div><strong>Current Annual Salary:</strong> {formatNum(financialData.current_salary)}</div>
            <div><strong>Additional Annual Income:</strong> {formatNum(financialData.additional_income)}</div>
          </div>
        ) : (
          <div><strong>Currently Not Working</strong></div>
        )}

        {/* Monthly Expenses / Debt */}
        <div className="mt-2 space-y-1">
          <div><strong>Monthly Expenses:</strong> {formatNum(financialData.monthly_expenses)}</div>
          <div><strong>Monthly Debt Payments:</strong> {formatNum(financialData.monthly_debt_payments)}</div>
        </div>

        {/* Retirement */}
        <div className="mt-2 space-y-1">
          <div><strong>Retirement Savings:</strong> {formatNum(financialData.retirement_savings)}</div>
          <div><strong>Monthly Retirement Contribution:</strong> {formatNum(financialData.retirement_contribution)}</div>
        </div>

        {/* Emergency Fund */}
        <div className="mt-2 space-y-1">
          <div><strong>Emergency Fund Savings:</strong> {formatNum(financialData.emergency_fund)}</div>
          <div><strong>Monthly Emergency Contribution:</strong> {formatNum(financialData.emergency_contribution)}</div>
        </div>

        {/* Extra Monthly Cash Allocation */}
        <div className="mt-2 space-y-1">
          <div><strong>Extra Monthly Cash to Emergency (%):</strong> {formatNum(financialData.extra_cash_emergency_pct)}</div>
          <div><strong>Extra Monthly Cash to Retirement (%):</strong> {formatNum(financialData.extra_cash_retirement_pct)}</div>
        </div>
      </div>

      {/* --- COLLEGE SECTION --- */}
       {inOrPlanningCollege && (
  <div className="p-4 border rounded-md space-y-2">
    <h3 className="text-xl font-semibold">College Info</h3>
    <div><strong>College Name:</strong> {collegeData.selected_school || 'N/A'}</div>
    <div><strong>Major:</strong> {collegeData.selected_program || 'N/A'}</div>
    <div><strong>Program Type:</strong> {collegeData.program_type || 'N/A'}</div>
    <div><strong>Yearly Tuition:</strong> {formatNum(collegeData.tuition)}</div>
    <div><strong>Program Length (years):</strong> {formatNum(collegeData.program_length)}</div>
    <div><strong>Credit Hours Per Year:</strong> {formatNum(collegeData.credit_hours_per_year)}</div>

    {/* 
      Only render "Credit Hours Required" for 
      Doctoral / First Professional / Graduate/Professional Certificate
    */}
    {[
      "Doctoral Degree",
      "First Professional Degree",
      "Graduate/Professional Certificate"
    ].includes(collegeData.program_type) && (
      <div>
        <strong>Credit Hours Required:</strong> {formatNum(collegeData.credit_hours_required)}
      </div>
    )}

    {/* Only render Hours Completed if "currently_enrolled" */}
    {careerData.college_enrollment_status === 'currently_enrolled' && (
      <div>
        <strong>Hours Completed:</strong> {formatNum(collegeData.hours_completed)}
      </div>
    )}

    <div><strong>Is In State?:</strong> {formatYesNo(collegeData.is_in_state)}</div>
    <div><strong>Loan Deferral Until Graduation?:</strong> {formatYesNo(collegeData.loan_deferral_until_graduation)}</div>
    <div><strong>Annual Financial Aid:</strong> {formatNum(collegeData.annual_financial_aid)}</div>
    <div><strong>Existing College Debt:</strong> {formatNum(collegeData.existing_college_debt)}</div>
    <div><strong>Extra Monthly Payment:</strong> {formatNum(collegeData.extra_payment)}</div>
    <div><strong>Expected Graduation:</strong> {collegeData.expected_graduation || 'N/A'}</div>
    <div><strong>Expected Salary:</strong> {formatNum(collegeData.expected_salary)}</div>
  </div>
)}


      {/* --- ACTION BUTTONS --- */}
      <div className="flex justify-between pt-4">
        <Button variant="secondary" onClick={onBack}>
          ← Back
        </Button>
        <Button variant="primary" onClick={onSubmit}>
          Submit All
        </Button>
      </div>
    </div>
  );
}

export default ReviewPage;