"use client";
import { useState, useEffect, useCallback } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { useSearchParams, useRouter } from "next/navigation";
import Image from "next/image";
import Link from "next/link";

import { homeImprovementSchema, HomeImprovementFormData } from "./schema";
import { cityOptions, steps } from "./constants";
import Step1 from "./steps/Step1";
import Step2 from "./steps/Step2";
import Step3 from "./steps/Step3";
import Step4 from "./steps/Step4";
import Step5 from "./steps/Step5";
import Step6 from "./steps/Step6";
import PaginationStepper from "@/src/components/admin/PaginationStepper";
import { useCustomToast } from "@/src/hooks/web/useCustomToast";
import {
  saveHIPApplication,
  getHIPApplicationById,
  submitHIPApplication,
  getAllCountries,
  getAllStatesByCountry,
  getAllCitiesByState,
  uploadHIPDocument,
  getHIPApplicationDocuments,
} from "@/src/services/web/services";
import UnauthorizedAccess from "@/src/components/web/UnauthorizedAccess";

import Button from "@/src/components/web/ui/Button";

export default function HomeImprovementForm() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const isReadOnly = searchParams.get("mode") === "view";
  const applicationIdParam = searchParams.get("id");

  const [activeStep, setActiveStep] = useState(1);
  const [applicationId, setApplicationId] = useState<number | null>(
    applicationIdParam ? parseInt(applicationIdParam) : null,
  );
  const [loading, setLoading] = useState(false);
  const [loadError, setLoadError] = useState<string | null>(null);

  const [countryOptions, setCountryOptions] = useState<
    { label: string; value: string }[]
  >([]);
  const { showToast } = useCustomToast();
  const [step6ValidateFn, setStep6ValidateFn] = useState<
    (() => boolean) | null
  >(null);

  const handleStep6Validate = useCallback((fn: () => boolean) => {
    setStep6ValidateFn(() => fn);
  }, []);

  useEffect(() => {
    getAllCountries()
      .then((res) => {
        const countries = res.data.data.map((country: any) => ({
          label: country.name,
          value: country.id.toString(),
        }));
        setCountryOptions(countries);
      })
      .catch((err) => console.error(err));
  }, []);

  const {
    control,
    handleSubmit,
    setValue,
    watch,
    trigger,
    setError,
    clearErrors,
    formState: { errors },
  } = useForm<HomeImprovementFormData>({
    resolver: zodResolver(homeImprovementSchema),
    mode: "onChange",
    defaultValues: {
      applicantName: "",
      applicantProperty: "",
      email: "",
      phoneCell: "",
      phoneWork: "",
      phoneHome: "",
      address: "",
      country: "",
      state: "",
      city: "",
      householdMembers: [
        {
          name: "",
          age: "0",
          hasIncome: "no",
          relationWithApplicant: "",
          incomes: [],
        },
      ],
      resideAddress: "no",
      propertyOwnedDuration: "",
      taxesPaid: "no",
      isCurrentlyEmployed: "no",
      applicantEmployerName: "",
      applicantEmployerAddress: "",
      coApplicantEmployerName: "",
      coApplicantEmployerAddress: "",
      renovationDetails: "",
      maintenanceHeatingCooling: false,
      maintenancePlumbing: false,
      maintenanceElectrical: false,
      maintenanceAppliances: false,
      maintenanceDoorsWindows: false,
      maintenanceFlooringWalls: false,
      maintenancePest: false,
      maintenanceSafety: false,
      maintenanceOtherText: "",
      maintenanceHeatingCoolingText: "",
      maintenancePlumbingText: "",
      maintenanceElectricalText: "",
      maintenanceAppliancesText: "",
      maintenanceDoorsWindowsText: "",
      maintenanceFlooringWallsText: "",
      maintenancePestText: "",
      maintenanceSafetyText: "",
      grossAnnualIncome: "",
      totalPersons: "",
      childrenUnder18: "",
      hasMortgage: "no",
      mortgageAmount: "",
      mortgageBalance: "",
      paymentStatus: "",
      mortgagee: "",
      monthlyLiabilities: [{ payee: "", amount: "" }],
      certificationSignature: "",
      certificationSignerName: "",
      certificationDateTime: "",
      certificationCoApplicantSignature: "",
      certificationCoApplicantSignerName: "",
      certificationCoApplicantDateTime: "",
      employmentAuthSignature: "",
      employmentAuthSignerName: "",
      employmentAuthDateTime: "",
      employmentAuthCoApplicantSignature: "",
      employmentAuthCoApplicantSignerName: "",
      employmentAuthCoApplicantDateTime: "",
      inspectionAuthSignature: "",
      inspectionAuthSignerName: "",
      inspectionAuthDateTime: "",
      inspectionAuthCoApplicantSignature: "",
      inspectionAuthCoApplicantSignerName: "",
      inspectionAuthCoApplicantDateTime: "",
      bidResponsibilitySignature: "",
      bidResponsibilitySignerName: "",
      bidResponsibilityDateTime: "",
      subordinationSignature: "",
      subordinationSignerName: "",
      subordinationDateTime: "",
      // Co-Applicant Subordination Fields
      subordinationCoApplicantSignature: "",
      subordinationCoApplicantSignerName: "",
      subordinationCoApplicantDateTime: "",
      notaryDay: "",
      notaryMonth: "",
      notaryYear: "",
      notaryAppearedName: "",
      numberOfUnits: "1",
      documents: {},
    },
  });

  const watchCountry = watch("country");
  const watchState = watch("state");

  const [stateOptions, setStateOptions] = useState<
    { label: string; value: string }[]
  >([]);
  const [cityOptions, setCityOptions] = useState<
    { label: string; value: string }[]
  >([]);

  useEffect(() => {
    if (watchCountry) {
      getAllStatesByCountry(parseInt(watchCountry))
        .then((res) => {
          const states = res.data.data.map((state: any) => ({
            label: state.name,
            value: state.id.toString(),
          }));
          setStateOptions(states);
        })
        .catch((err) => console.error(err));
    } else {
      setStateOptions([]);
      setCityOptions([]);
    }
  }, [watchCountry]);

  useEffect(() => {
    if (watchState) {
      getAllCitiesByState(parseInt(watchState))
        .then((res) => {
          const cities = res.data.data.map((city: any) => ({
            label: city.name,
            value: city.id.toString(),
          }));
          setCityOptions(cities);
        })
        .catch((err) => console.error(err));
    } else {
      setCityOptions([]);
    }
  }, [watchState]);

  useEffect(() => {
    if (applicationId) {
      loadApplication();
    }
  }, []);

  const loadApplication = async () => {
    try {
      setLoading(true);
      setLoadError(null);
      const response = await getHIPApplicationById(applicationId!);
      const data = response.data.data;
      const hipData = data.hipApplication;

      if (hipData) {
        setValue("applicantName", data.applicant_name);
        setValue("email", data.applicant_email);
        setValue("phoneCell", data.applicant_cellphone);
        setValue("phoneWork", data.applicant_workphone);
        setValue("phoneHome", data.applicant_homephone);
        setValue("applicantProperty", data.applicant_address);
        setValue("country", data.applicant_country?.toString());
        setValue("state", data.applicant_state?.toString());
        setValue("city", data.applicant_city?.toString());
        setValue("resideAddress", hipData.reside_address);
        setValue("propertyOwnedDuration", hipData.property_owned_duration);
        setValue("taxesPaid", hipData.taxes_paid);
        setValue("isCurrentlyEmployed", hipData.is_currently_employed || "no");
        setValue("applicantEmployerName", hipData.applicant_employer_name);
        setValue(
          "applicantEmployerAddress",
          hipData.applicant_employer_address,
        );
        setValue("coApplicantEmployerName", hipData.coapplicant_employer_name);
        setValue(
          "coApplicantEmployerAddress",
          hipData.coapplicant_employer_address,
        );
        setValue("householdMembers", hipData.household_members || []);
        setValue("grossAnnualIncome", hipData.gross_annual_income);
        setValue("totalPersons", hipData.total_persons);
        setValue("childrenUnder18", hipData.children_under_18);
        setValue("renovationDetails", hipData.renovation_details);
        setValue(
          "maintenanceHeatingCooling",
          hipData.maintenance_heating_cooling || false,
        );
        setValue("maintenancePlumbing", hipData.maintenance_plumbing || false);
        setValue(
          "maintenanceElectrical",
          hipData.maintenance_electrical || false,
        );
        setValue(
          "maintenanceAppliances",
          hipData.maintenance_appliances || false,
        );
        setValue(
          "maintenanceDoorsWindows",
          hipData.maintenance_doors_windows || false,
        );
        setValue(
          "maintenanceFlooringWalls",
          hipData.maintenance_flooring_walls || false,
        );
        setValue("maintenancePest", hipData.maintenance_pest || false);
        setValue("maintenanceSafety", hipData.maintenance_safety || false);
        setValue(
          "maintenanceHeatingCoolingText",
          hipData.maintenance_heating_cooling_text || "",
        );
        setValue(
          "maintenancePlumbingText",
          hipData.maintenance_plumbing_text || "",
        );
        setValue(
          "maintenanceElectricalText",
          hipData.maintenance_electrical_text || "",
        );
        setValue(
          "maintenanceAppliancesText",
          hipData.maintenance_appliances_text || "",
        );
        setValue(
          "maintenanceDoorsWindowsText",
          hipData.maintenance_doors_windows_text || "",
        );
        setValue(
          "maintenanceFlooringWallsText",
          hipData.maintenance_flooring_walls_text || "",
        );
        setValue("maintenancePestText", hipData.maintenance_pest_text || "");
        setValue(
          "maintenanceSafetyText",
          hipData.maintenance_safety_text || "",
        );
        setValue("maintenanceOtherText", hipData.maintenance_other_text || "");
        setValue("hasMortgage", hipData.has_mortgage || "no");
        setValue("mortgageAmount", hipData.mortgage_amount || "");
        setValue("mortgageBalance", hipData.mortgage_balance || "");
        setValue("paymentStatus", hipData.payment_status || "");
        setValue("mortgagee", hipData.mortgagee || "");
        setValue("monthlyLiabilities", hipData.monthly_liabilities || []);
        setValue(
          "certificationSignature",
          hipData.certification_signature || "",
        );
        setValue(
          "certificationSignerName",
          hipData.certification_signer_name || "",
        );
        setValue(
          "certificationDateTime",
          hipData.certification_datetime
            ? new Date(hipData.certification_datetime).toISOString()
            : "",
        );
        setValue(
          "certificationCoApplicantSignature",
          hipData.certification_coapplicant_signature || "",
        );
        setValue(
          "certificationCoApplicantSignerName",
          hipData.certification_coapplicant_signer_name || "",
        );
        setValue(
          "certificationCoApplicantDateTime",
          hipData.certification_coapplicant_datetime
            ? new Date(hipData.certification_coapplicant_datetime).toISOString()
            : "",
        );
        setValue(
          "employmentAuthSignature",
          hipData.employment_auth_signature || "",
        );
        setValue(
          "employmentAuthSignerName",
          hipData.employment_auth_signer_name || "",
        );
        setValue(
          "employmentAuthDateTime",
          hipData.employment_auth_datetime
            ? new Date(hipData.employment_auth_datetime).toISOString()
            : "",
        );
        setValue(
          "employmentAuthCoApplicantSignature",
          hipData.employment_auth_coapplicant_signature || "",
        );
        setValue(
          "employmentAuthCoApplicantSignerName",
          hipData.employment_auth_coapplicant_signer_name || "",
        );
        setValue(
          "employmentAuthCoApplicantDateTime",
          hipData.employment_auth_coapplicant_datetime
            ? new Date(
                hipData.employment_auth_coapplicant_datetime,
              ).toISOString()
            : "",
        );
        setValue(
          "inspectionAuthSignature",
          hipData.inspection_auth_signature || "",
        );
        setValue(
          "inspectionAuthSignerName",
          hipData.inspection_auth_signer_name || "",
        );
        setValue(
          "inspectionAuthDateTime",
          hipData.inspection_auth_datetime
            ? new Date(hipData.inspection_auth_datetime).toISOString()
            : "",
        );
        setValue(
          "inspectionAuthCoApplicantSignature",
          hipData.inspection_auth_coapplicant_signature || "",
        );
        setValue(
          "inspectionAuthCoApplicantSignerName",
          hipData.inspection_auth_coapplicant_signer_name || "",
        );
        setValue(
          "inspectionAuthCoApplicantDateTime",
          hipData.inspection_auth_coapplicant_datetime
            ? new Date(
                hipData.inspection_auth_coapplicant_datetime,
              ).toISOString()
            : "",
        );
        setValue(
          "bidResponsibilitySignature",
          hipData.bid_responsibility_signature || "",
        );
        setValue(
          "bidResponsibilitySignerName",
          hipData.bid_responsibility_signer_name || "",
        );
        setValue(
          "bidResponsibilityDateTime",
          hipData.bid_responsibility_datetime
            ? new Date(hipData.bid_responsibility_datetime).toISOString()
            : "",
        );
        setValue(
          "subordinationSignature",
          hipData.subordination_signature || "",
        );
        setValue(
          "subordinationSignerName",
          hipData.subordination_signer_name || "",
        );
        setValue(
          "subordinationDateTime",
          hipData.subordination_datetime
            ? new Date(hipData.subordination_datetime).toISOString()
            : "",
        );

        // Co-Applicant Subordination Mapping
        setValue(
          "subordinationCoApplicantSignature",
          hipData.subordination_coapplicant_signature || "",
        );
        setValue(
          "subordinationCoApplicantSignerName",
          hipData.subordination_coapplicant_signer_name || "",
        );
        setValue(
          "subordinationCoApplicantDateTime",
          hipData.subordination_coapplicant_datetime
            ? new Date(hipData.subordination_coapplicant_datetime).toISOString()
            : "",
        );
        setValue("notaryDay", hipData.notary_day || "");
        setValue("notaryMonth", hipData.notary_month || "");
        setValue("notaryYear", hipData.notary_year || "");
        setValue("notaryAppearedName", hipData.notary_appeared_name || "");
        setActiveStep(data.active_step);
      }
    } catch (error: any) {
      console.error("Error loading application:", error);

      if (error?.response?.status === 403) {
        setLoadError("Access denied. You can only view your own applications.");
      } else if (error?.response?.status === 401) {
        setLoadError("Unauthorized. Please log in again.");
        setTimeout(() => router.push("/web-auth"), 2000);
      } else if (error?.response?.status === 404) {
        setLoadError("Application not found.");
      } else {
        setLoadError(
          error?.response?.data?.message || "Failed to load application.",
        );
      }

      showToast({
        title: "Error",
        description:
          error?.response?.data?.message || "Failed to load application.",
        type: "error",
      });
    } finally {
      setLoading(false);
    }
  };

  const handleSave = async () => {
    if (isReadOnly) {
      return;
    }

    try {
      setLoading(true);
      const formData = watch();

      const payload = {
        applicationId,
        activeStep,
        applicant_name: formData.applicantName,
        applicant_email: formData.email,
        phone_cell: formData.phoneCell,
        phone_work: formData.phoneWork,
        phone_home: formData.phoneHome,
        applicant_property: formData.applicantProperty,
        country: formData.country,
        state: formData.state,
        city: formData.city,
        reside_address: formData.resideAddress,
        property_owned_duration: formData.propertyOwnedDuration,
        taxes_paid: formData.taxesPaid,
        is_currently_employed: formData.isCurrentlyEmployed,
        applicant_employer_name: formData.applicantEmployerName,
        applicant_employer_address: formData.applicantEmployerAddress,
        coapplicant_employer_name: formData.coApplicantEmployerName,
        coapplicant_employer_address: formData.coApplicantEmployerAddress,
        household_members: formData.householdMembers,
        gross_annual_income: formData.grossAnnualIncome,
        total_persons: formData.totalPersons,
        children_under_18: formData.childrenUnder18,
        renovation_details: formData.renovationDetails,
        maintenance_heating_cooling: formData.maintenanceHeatingCooling,
        maintenance_plumbing: formData.maintenancePlumbing,
        maintenance_electrical: formData.maintenanceElectrical,
        maintenance_appliances: formData.maintenanceAppliances,
        maintenance_doors_windows: formData.maintenanceDoorsWindows,
        maintenance_flooring_walls: formData.maintenanceFlooringWalls,
        maintenance_pest: formData.maintenancePest,
        maintenance_safety: formData.maintenanceSafety,
        maintenance_heating_cooling_text:
          formData.maintenanceHeatingCoolingText,
        maintenance_plumbing_text: formData.maintenancePlumbingText,
        maintenance_electrical_text: formData.maintenanceElectricalText,
        maintenance_appliances_text: formData.maintenanceAppliancesText,
        maintenance_doors_windows_text: formData.maintenanceDoorsWindowsText,
        maintenance_flooring_walls_text: formData.maintenanceFlooringWallsText,
        maintenance_pest_text: formData.maintenancePestText,
        maintenance_safety_text: formData.maintenanceSafetyText,
        maintenance_other_text: formData.maintenanceOtherText,
        has_mortgage: formData.hasMortgage,
        mortgage_amount: formData.mortgageAmount,
        mortgage_balance: formData.mortgageBalance,
        payment_status: formData.paymentStatus,
        mortgagee: formData.mortgagee,
        monthly_liabilities: formData.monthlyLiabilities,
        certification_signature: formData.certificationSignature,
        certification_signer_name: formData.certificationSignerName,
        certification_datetime:
          formData.certificationDateTime || new Date().toISOString(),
        certification_coapplicant_signature:
          formData.certificationCoApplicantSignature,
        certification_coapplicant_signer_name:
          formData.certificationCoApplicantSignerName,
        certification_coapplicant_datetime:
          formData.certificationCoApplicantDateTime || null,
        employment_auth_signature: formData.employmentAuthSignature,
        employment_auth_signer_name: formData.employmentAuthSignerName,
        employment_auth_datetime: formData.employmentAuthDateTime || null,
        employment_auth_coapplicant_signature:
          formData.employmentAuthCoApplicantSignature,
        employment_auth_coapplicant_signer_name:
          formData.employmentAuthCoApplicantSignerName,
        employment_auth_coapplicant_datetime:
          formData.employmentAuthCoApplicantDateTime || null,
        inspection_auth_signature: formData.inspectionAuthSignature,
        inspection_auth_signer_name: formData.inspectionAuthSignerName,
        inspection_auth_datetime: formData.inspectionAuthDateTime || null,
        inspection_auth_coapplicant_signature:
          formData.inspectionAuthCoApplicantSignature,
        inspection_auth_coapplicant_signer_name:
          formData.inspectionAuthCoApplicantSignerName,
        inspection_auth_coapplicant_datetime:
          formData.inspectionAuthCoApplicantDateTime || null,
        bid_responsibility_signature: formData.bidResponsibilitySignature,
        bid_responsibility_signer_name: formData.bidResponsibilitySignerName,
        bid_responsibility_datetime: formData.bidResponsibilityDateTime || null,
        subordination_signature: formData.subordinationSignature,
        subordination_signer_name: formData.subordinationSignerName,
        subordination_datetime: formData.subordinationDateTime || null,

        // Co-Applicant Subordination API Payload Mapping
        subordination_coapplicant_signature:
          formData.subordinationCoApplicantSignature || "",
        subordination_coapplicant_signer_name:
          formData.subordinationCoApplicantSignerName || "",
        subordination_coapplicant_datetime:
          formData.subordinationCoApplicantDateTime || null,
        notary_day: formData.notaryDay,
        notary_month: formData.notaryMonth,
        notary_year: formData.notaryYear,
        notary_appeared_name: formData.notaryAppearedName,
      };

      const response = await saveHIPApplication(payload);

      if (!applicationId) {
        setApplicationId(response.data.data.applicationId);
      }

      showToast({
        title: "Success!",
        description: "Application saved successfully.",
        type: "success",
      });
    } catch (error) {
      console.error("Error saving application:", error);
      showToast({
        title: "Error",
        description: "Failed to save application. Please try again.",
        type: "error",
      });
    } finally {
      setLoading(false);
    }
  };

  const validateDocuments = async () => {
    if (!applicationId) {
      showToast({
        title: "Warning",
        description: "Please save the application first before submitting.",
        type: "warning",
      });
      return false;
    }

    try {
      // Get required documents from document master
      const { getDocumentsByService } =
        await import("@/src/services/web/services");
      const docMasterResponse = await getDocumentsByService(
        "Home Improvement Program",
      );
      const requiredDocs = docMasterResponse.data.data
        .filter((doc: any) => doc.is_required === 1)
        .map((doc: any) => doc.document_name);

      // Get uploaded documents
      const response = await getHIPApplicationDocuments(applicationId);
      const uploadedDocs = response.data.data;
      const uploadedDocTypes = uploadedDocs.map(
        (doc: any) => doc.document_type,
      );

      // Check for missing documents
      const missingDocs = requiredDocs.filter(
        (doc: string) => !uploadedDocTypes.includes(doc),
      );

      console.log("Missing documents:", missingDocs);

      if (missingDocs.length > 0) {
        showToast({
          title: "Missing Required Documents",
          description: `Please upload: ${missingDocs.join(", ")}`,
          type: "error",
          duration: 8000,
        });
        return false;
      }

      return true;
    } catch (error) {
      console.error("Error validating documents:", error);
      showToast({
        title: "Error",
        description: "Failed to validate documents. Please try again.",
        type: "error",
      });
      return false;
    }
  };

  const handleNext = async () => {
    if (isReadOnly) {
      setActiveStep((prev) => Math.min(prev + 1, 6));
      return;
    }

    const stepFields: Record<number, (keyof HomeImprovementFormData)[]> = {
      1: [
        "applicantName",
        "applicantProperty",
        "email",
        "phoneCell",
        "country",
        "state",
        "city",
        "resideAddress",
        "propertyOwnedDuration",
        "taxesPaid",
        "isCurrentlyEmployed",
        "applicantEmployerName",
        "applicantEmployerAddress",
      ],
      2: [
        "householdMembers",
        "grossAnnualIncome",
        "totalPersons",
        "childrenUnder18",
      ],
      3: ["renovationDetails"],
      4: ["hasMortgage", "monthlyLiabilities"],
      5: [
        "certificationSignature",
        "certificationSignerName",
        "employmentAuthSignature",
        "employmentAuthSignerName",
        "inspectionAuthSignature",
        "inspectionAuthSignerName",
        "bidResponsibilitySignature",
        "bidResponsibilitySignerName",
       "subordinationSignature",
"subordinationSignerName",

// Co-Applicant Subordination Field Triggers
"subordinationCoApplicantSignature",
"subordinationCoApplicantSignerName",
        "notaryDay",
        "notaryMonth",
        "notaryYear",
        "notaryAppearedName",
      ],
      6: ["documents"],
    };

    if (activeStep === 6) {
      const isValid = await trigger(stepFields[activeStep]);
      if (!isValid) {
        return;
      }

      // Trigger Step6 validation
      if (step6ValidateFn) {
        const step6Valid = step6ValidateFn();
        if (!step6Valid) {
          return;
        }
      }

      const documentsValid = await validateDocuments();
      if (!documentsValid) {
        return;
      }

      try {
        setLoading(true);
        await handleSave();
        if (applicationId) {
          const submitResponse = await submitHIPApplication(applicationId);

          showToast({
            title: "Success!",
            description: "Application submitted successfully.",
            type: "success",
          });
          setTimeout(() => router.push("/thank-you"), 1500);
        } else {
          showToast({
            title: "Error",
            description:
              "No application ID found. Please save the application first.",
            type: "error",
          });
        }
      } catch (error: any) {
        console.error("Error submitting application:", error);
        console.error("Error response:", error?.response?.data);
        showToast({
          title: "Submission Failed",
          description:
            error?.response?.data?.message ||
            "Failed to submit application. Please try again.",
          type: "error",
        });
      } finally {
        setLoading(false);
      }
    } else {
      const isValid = await trigger(stepFields[activeStep]);

      const unvalidFields = Object.keys(errors).filter((field) =>
        stepFields[activeStep].includes(field as keyof HomeImprovementFormData),
      );

      if (isValid) {
        await handleSave();
        setActiveStep((prev) => Math.min(prev + 1, 6));
      }
    }
  };

  const handlePrevious = () => {
    setActiveStep((prev) => Math.max(prev - 1, 1));
  };

  if (loading && applicationId) {
    return (
      <div className="flex justify-center items-center min-h-screen bg-gray-50">
        <div className="text-center">
          <div className="animate-spin rounded-full h-16 w-16 border-b-4 border-teal-600 mx-auto mb-4"></div>
          <p className="text-gray-600 text-lg">Loading application...</p>
        </div>
      </div>
    );
  }

  if (loadError) {
    return <UnauthorizedAccess error={loadError} />;
  }

  return (
    <>
      <section
        className="relative w-full bg-cover bg-center bg-no-repeat py-6 md:py-10 px-5 lg:px-20 rounded-lg overflow-hidden mt-5"
        style={{ backgroundImage: "url('about/about-bg.png')" }}
      >
        <div className="absolute inset-0 bg-black/40"></div>
        <div className="relative z-10 max-w-7xl mx-auto">
          <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
            <div>
              <nav className="inline-flex items-center gap-4 px-8 py-2 rounded-full bg-teal-transperent backdrop-blur-sm mb-6">
                <Link
                  href="/"
                  className="text-[15px] md:text-[17px] text-white font-medium hover:underline"
                >
                  Home
                </Link>
                <span className="text-white text-2xl leading-none">›</span>
                <Link
                  href="/home-improvement-program"
                  className="text-[15px] md:text-[17px] text-white font-medium hover:underline"
                >
                  Home Improvement Program
                </Link>
                <span className="text-white text-2xl leading-none">›</span>
                <span className="text-[15px] md:text-[17px] text-white font-medium">
                  Application form
                </span>
              </nav>
              <h1 className="text-[20px] lg:text-[35px] font-semibold text-white leading-tight md:leading-snug">
                <span className="inline-flex items-center gap-3 relative pr-[25px]">
                  Home Improvement Program
                  <Image
                    src="/icons/top-arrow.svg"
                    alt="Top Arrow"
                    width={36}
                    height={36}
                    className="absolute right-[0px] md:right-[-25px] lg:right-[-50px] top-[-15px]"
                  />
                </span>
              </h1>
            </div>
          </div>
        </div>
      </section>

      <section className="my-10 max-w-7xl mx-auto">
        {isReadOnly && (
          <div className="mb-4 p-3 bg-blue-50 border border-blue-200 text-blue-700 rounded-lg text-sm font-medium">
            Note: You are viewing a submitted maintenance request. Fields are
            read-only.
          </div>
        )}
        <div className="bg-white rounded-xl shadow-sm border mb-8 px-4 py-4">
          <PaginationStepper steps={steps} activeStep={activeStep} />
        </div>

        <div className="bg-white rounded-xl shadow-md p-6 md:p-8">
          {activeStep === 1 && (
            <Step1
              control={control}
              errors={errors}
              isReadOnly={isReadOnly}
              watch={watch}
              countryOptions={countryOptions}
              stateOptions={stateOptions}
              cityOptions={cityOptions}
              onCountryChange={(value) => {
                setValue("state", "");
                setValue("city", "");
              }}
              onStateChange={(value) => {
                setValue("city", "");
              }}
            />
          )}

          {activeStep === 2 && (
            <Step2
              control={control}
              errors={errors}
              isReadOnly={isReadOnly}
              watch={watch}
            />
          )}

          {activeStep === 3 && (
            <Step3
              control={control}
              errors={errors}
              isReadOnly={isReadOnly}
              watch={watch}
            />
          )}

          {activeStep === 4 && (
            <Step4
              control={control}
              errors={errors}
              isReadOnly={isReadOnly}
              watch={watch}
            />
          )}

          {activeStep === 5 && (
            <Step5
              control={control}
              errors={errors}
              isReadOnly={isReadOnly}
              setValue={setValue}
            />
          )}

          {activeStep === 6 && (
            <Step6
              control={control}
              applicationId={applicationId}
              errors={errors}
              isReadOnly={isReadOnly}
              watch={watch}
              setValue={setValue}
              setError={setError}
              clearErrors={clearErrors}
              trigger={trigger}
              onValidate={handleStep6Validate}
            />
          )}

          <div className="flex justify-between items-center mt-10 pt-6 border-t border-gray-100">
            {activeStep > 1 && (
              <Button
                onClick={handlePrevious}
                disabled={loading}
                variant="secondary"
              >
                ← Previous Step
              </Button>
            )}
            <div className="flex justify-end gap-4 ml-auto">
              {!isReadOnly && (
                <>
                  <Button
                    onClick={handleSave}
                    disabled={loading}
                    variant="dark"
                  >
                    {loading ? "Saving..." : "Save"}
                  </Button>
                  <Button
                    onClick={handleNext}
                    disabled={loading}
                    variant="primary"
                  >
                    {loading
                      ? "Processing..."
                      : activeStep === 6
                        ? "Submit"
                        : "Next"}
                  </Button>
                </>
              )}
              {isReadOnly && activeStep !== 6 && (
                <Button
                  onClick={handleNext}
                  disabled={loading}
                  variant="primary"
                >
                  Next
                </Button>
              )}
            </div>
          </div>
        </div>
      </section>
    </>
  );
}