import { ApplicantInfo, PropertyStatus, EmploymentDetails } from "@/src/types/admin/types";
import DataTable from "../DataTable";
import SectionHeader from "../SectionHeader";

interface ApplicantInformationStepProps {
  applicantInfo: ApplicantInfo;
  propertyStatus: PropertyStatus;
  employmentDetails: EmploymentDetails;
  isCurrentlyEmployed?: string;
}

export default function ApplicantInformationStep({
  applicantInfo,
  propertyStatus,
  employmentDetails,
  isCurrentlyEmployed,
}: ApplicantInformationStepProps) {
  
  const safeApplicantInfo = applicantInfo || {};
  const safePropertyStatus = propertyStatus || {};
  const safeEmploymentDetails = employmentDetails || { applicant: {}, coApplicant: {} };

  const applicantData = [
    { label: "Applicant's Name", value: safeApplicantInfo.name || "" },
    { label: "Email", value: safeApplicantInfo.email || "" },
    { label: "Country", value: safeApplicantInfo.country || "" },
    { label: "State", value: safeApplicantInfo.state || "" },
    { label: "City", value: safeApplicantInfo.city || "" },
    { label: "Area", value: safeApplicantInfo.area || "" },
    { label: "Phone (Cell)", value: safeApplicantInfo.phoneCell || "" },
    { label: "Phone (Work)", value: safeApplicantInfo.phoneWork || "" },
    { label: "Phone (Home)", value: safeApplicantInfo.phoneHome || "" },
  ];

  const propertyData = [
    { label: "Do you currently reside at this address?", value: safePropertyStatus.currentlyResiding || "" },
    { label: "How long have you owned the property?", value: safePropertyStatus.ownershipDuration || "" },
    { label: "Are Town/County/School Taxes Paid to Date?", value: safePropertyStatus.taxesPaid || "" },
  ];

  return (
    <>
      <div className="p-6 pb-0 min-h-[260px]">
        <SectionHeader title="Applicant Information" />
        <DataTable data={applicantData} />
      </div>

      <div className="p-6 pb-0 min-h-[200px]">
        <SectionHeader title="Property Status" />
        <DataTable data={propertyData} />
      </div>

      <div className="p-6 min-h-[130px]">
        <SectionHeader title="Employment Status" />
        <DataTable data={[
          { label: "Are you currently employed?", value: isCurrentlyEmployed === "yes" ? "Yes" : "No" },
        ]} />
      </div>

      {isCurrentlyEmployed === "yes" && (
        <div className="p-6 min-h-[260px]">
          <SectionHeader title="Employment Details" />
          
          <div className="space-y-6">
            <div>
              <SectionHeader subtitle="Applicant Section" />
              <DataTable data={[
                { label: "Employer Name", value: safeEmploymentDetails.applicant?.employerName || "" },
                { label: "Employer Address", value: safeEmploymentDetails.applicant?.employerAddress || "" },
              ]} />
            </div>

            <div>
              <SectionHeader subtitle="Co-Applicant Section" />
              <DataTable data={[
                { label: "Employer Name", value: safeEmploymentDetails.coApplicant?.employerName || "" },
                { label: "Employer Address", value: safeEmploymentDetails.coApplicant?.employerAddress || "" },
              ]} />
            </div>
          </div>
        </div>
      )}
    </>
  );
}