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 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> {formatNum(collegeData.selected_school)}</div>
    <div><strong>Major</strong> {formatNum(collegeData.selected_program)}</div>
    <div><strong>Program Type</strong> {formatNum(collegeData.program_type)}</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>
    <div><strong>Credit Hours Required</strong> {formatNum(collegeData.credit_hours_required)}</div>
    <div><strong>Hours Completed</strong> {formatNum(collegeData.hours_completed)}</div>
    <div><strong>Is In State?</strong> {formatNum(collegeData.is_in_state)}</div>
    <div><strong>Loan Deferral Until Graduation?</strong> {formatNum(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> {formatNum(collegeData.expected_graduation)}</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;