"use client";

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

// Import common components
import DocumentsStep from "../_common/components/steps/DocumentsStep";
import LiabilitiesStep from "../_common/components/steps/LiabilitiesStep";
import LoadingSpinner from "../_common/components/LoadingSpinner";
import ErrorMessage from "../_common/components/ErrorMessage";

// Import form-specific components
import { 
  FTHBApplicantInformationStep, 
  EmploymentDetailsStep, 
  FTHBCertificationStep 
} from "./form-specific-component";

// Import service
import { getFTHBApplicationById } from "@/src/services/admin/services";
import PayeeStep from "../_common/components/steps/PayeeStep";

interface Props {
  applicationId: string;
}

export default function FirstTimeHomeBuyerAssistanceDetailList({ applicationId }: Props) {
  const [activeStep, setActiveStep] = useState(1);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [data, setData] = useState<any>(null);

  const steps = [
    {
      id: 1,
      title: "Applicant Information",
      subtitle: "Personal and contact details",
    },
    {
      id: 2,
      title: "Employment & Income",
      subtitle: "Employment and income information",
    },
    {
      id: 3,
      title: "Liabilities",
      subtitle: "Monthly liabilities and expenses",
    },
    {
      id: 4,
      title: "Certifications & Authorizations",
      subtitle: "Required signatures and certifications",
    },
    {
      id: 5,
      title: "Document Upload",
      subtitle: "Required documentation",
    },
    ];

  useEffect(() => {
    async function loadData() {
      try {
        setLoading(true);
        const response = await getFTHBApplicationById(Number(applicationId));
        const applicationData = response.data?.data || response.data;
        setData(applicationData);
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Failed to load data');
      } finally {
        setLoading(false);
      }
    }
    if (applicationId) {
      loadData();
    }
  }, [applicationId]);

  if (loading) {
    return <LoadingSpinner message="Loading application details..." />;
  }

  if (error || !data) {
    return <ErrorMessage error={error || 'No data available'} applicationId={applicationId} />;
  }

  // Transform data for components
  const applicantData = {
    applicantName: data.applicantInfo?.name || "",
    coApplicantName: data.applicantInfo?.coApplicantName || "",
    email: data.applicantInfo?.email || "",
    country: data.applicantInfo?.country || "",
    state: data.applicantInfo?.state || "",
    city: data.applicantInfo?.city || "",
    area: data.applicantInfo?.area || "",
    phoneCell: data.applicantInfo?.phoneCell || "",
    phoneWork: data.applicantInfo?.phoneWork || "",
    phoneHome: data.applicantInfo?.phoneHome || "",
  };

  const employmentData = [
    {
      label: "Applicant Section",
      employer: data.employmentDetails?.applicant?.employerName || "",
      hasIncome: data.employmentDetails?.applicant?.hasIncome || "no",
      incomeDetails: data.employmentDetails?.applicant?.incomes || []
    },
    {
      label: "Co-Applicant Section",
      employer: data.employmentDetails?.coApplicant?.employerName || "",
      address: data.employmentDetails?.coApplicant?.employerAddress || "",
      hasIncome: data.employmentDetails?.coApplicant?.hasIncome || "no",
      incomeDetails: data.employmentDetails?.coApplicant?.incomes || []
    }
  ];

  const PayeesData = data.payeeDetails?.payees || [];

  const certifications = [
    {
      title: "Home Improvement Program – Required Certification",
      signer: data.certifications?.certification?.signerName || "",
      date: data.certifications?.certification?.dateTime || "",
      signatureUrl: data.certifications?.certification?.signatureUrl || "",
    },
    {
      title: "Authorization to Receive & Verify Employment Information",
      signer: data.certifications?.authorization?.signerName || "",
      date: data.certifications?.authorization?.dateTime || "",
      signatureUrl: data.certifications?.authorization?.signatureUrl || "",
    },
    {
      title: "Inspection Authorization",
      signer: data.certifications?.inspection?.signerName || "",
      date: data.certifications?.inspection?.dateTime || "",
      signatureUrl: data.certifications?.inspection?.signatureUrl || "",
    },
  ].filter(cert => cert.signer); // Only show certifications that have data

  const bidResponsibility = (data.certifications?.bidApplicant?.signerName || data.certifications?.bidCoApplicant?.signerName) ? {
    applicant: {
      signer: data.certifications?.bidApplicant?.signerName || "",
      date: data.certifications?.bidApplicant?.dateTime || "",
      signatureUrl: data.certifications?.bidApplicant?.signatureUrl || "",
    },
    coApplicant: {
      signer: data.certifications?.bidCoApplicant?.signerName || "",
      date: data.certifications?.bidCoApplicant?.dateTime || "",
      signatureUrl: data.certifications?.bidCoApplicant?.signatureUrl || "",
    },
  } : undefined;

  const documents = data.documents || [];

  const renderStepContent = () => {
    switch (activeStep) {
      case 1:
        return <FTHBApplicantInformationStep applicantData={applicantData} />;
      case 2:
        return <EmploymentDetailsStep employmentData={employmentData} isCurrentlyEmployed={data.employmentDetails.isCurrentlyEmployed} />;
      case 3:
        return <PayeeStep payees={PayeesData} />;
      case 4:
        return (
          <FTHBCertificationStep 
            certifications={certifications} 
            bidResponsibility={bidResponsibility} 
          />
        );
      case 5:
        return <DocumentsStep documents={documents} />;
      default:
        return null;
    }
  };

  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>
  );
}