"use client";

import { useState, useEffect } from "react";
import ClickablePaginationStepper from "@/src/components/admin/ClickablePaginationStepper";
import TabWiseComponent from "./TabWiseComponent";
 
import { getHIPApplicationDetails } from "@/src/services/admin/services";

// Import step components
import LoadingSpinner from "../_common/components/LoadingSpinner";
import ErrorMessage from "../_common/components/ErrorMessage";
import ApplicantInformationStep from "../_common/components/steps/ApplicantInformationStep";
import HouseholdInformationStep from "../_common/components/steps/HouseholdInformationStep";
import RenovationDetailsStep from "../_common/components/steps/RenovationDetailsStep";
import LiabilitiesStep from "../_common/components/steps/LiabilitiesStep";
import CertificationStep from "../_common/components/steps/CertificationStep";
import DocumentsStep from "../_common/components/steps/DocumentsStep";
import { ProgramDetails } from "@/src/types/admin/types";

interface Props {
  data: ProgramDetails;
}

export default function HomeImprovementProgramDetailList({ data }: Props) {
  const [activeStep, setActiveStep] = useState(1);
  const steps = [
    { id: 1, title: "Applicant Information", subtitle: "Personal details and employment information" },
      { id: 2, title: "Household Information", subtitle: "Family members and income details" },
      { id: 3, title: "Renovation Details", subtitle: "Improvement requests and maintenance needs" },
      { id: 4, title: "Liabilities", subtitle: "Mortgage and monthly financial obligations" },
      { id: 5, title: "Certifications", subtitle: "Legal signature and application certification" },
      { id: 6, title: "Documents", subtitle: "Required supporting documentation upload" },
      ];

  const renderStepContent = () => {
    switch (activeStep) {
      case 1:
        return (
          <ApplicantInformationStep
            applicantInfo={data.applicantInfo}
            propertyStatus={data.propertyStatus}
            employmentDetails={data.employmentDetails}
            isCurrentlyEmployed={data.employmentDetails.isCurrentlyEmployed}
          />
        );
      case 2:
        return <HouseholdInformationStep householdInfo={data.householdInfo} />;
      case 3:
        return <RenovationDetailsStep renovationDetails={data.renovationDetails} />;
      case 4:
        return <LiabilitiesStep liabilities={data.liabilities} />;
      case 5:
        return <CertificationStep certification={data.certification} />;
      case 6:
        return <DocumentsStep documents={data.documents} />;
      default:
        return null;
    }
  };


  if (!data) {
    return <LoadingSpinner message="Loading program details..." />;
  }



  return (
    <div className="space-y-6 min-w-0 overflow-hidden">
      <ClickablePaginationStepper
        steps={steps}
        activeStep={activeStep}
        onStepClick={(id) => setActiveStep(id)}
      />

      <div className="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
        {renderStepContent()}
      </div>

      
    </div>
  );
}