"use client";
import { useState, useEffect } 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 { rmApplicationSchema, RMApplicationFormData } from "./schema";
import { 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 { useCustomToast } from "@/src/hooks/web/useCustomToast";

import {
  saveTenantMaintenanceForm,
  submitTenantMaintenanceForm,
  getAllCountries,
  getAllStatesByCountry,
  getAllCitiesByState,
  getTenantMaintenanceForm,
  uploadTenantMaintenancePhotos,
} from "@/src/services/web/services";
import PaginationStepper from "@/src/components/admin/PaginationStepper";
import UnauthorizedAccess from "@/src/components/web/UnauthorizedAccess";

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

export default function RMApplicationForm() {
  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 [photoUrls, setPhotoUrls] = useState<string[]>([]);
  const [photoIds, setPhotoIds] = useState<number[]>([]);

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

  useEffect(() => {
    const checkAuth = async () => {
      const res = await fetch('/api/auth/check');
      const data = await res.json();
      if (!data.authenticated) {
        router.replace("/web-auth");
      }
    };
    checkAuth();
  }, [router]);

  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,
    formState: { errors },
  } = useForm<RMApplicationFormData>({
    resolver: zodResolver(rmApplicationSchema),
    mode: "onChange",
    defaultValues: {
      applicantName: "",
      phoneCell: "",
      email: "",
      country: "",
      state: "",
      city: "",
      applicantProperty: "",
      applicantArea: "",
      authorizeMaintenance: false,
      contactToSchedule: false,
      preferredPhone: false,
      preferredText: false,
      preferredEmail: false,
      maintenanceHeatingCooling: false,
      maintenancePlumbing: false,
      maintenanceElectrical: false,
      maintenanceAppliances: false,
      maintenanceDoorsWindows: false,
      maintenanceFlooringWalls: false,
      maintenancePest: false,
      maintenanceSafety: false,
      maintenanceHeatingCoolingText: "",
      maintenancePlumbingText: "",
      maintenanceElectricalText: "",
      maintenanceAppliancesText: "",
      maintenanceDoorsWindowsText: "",
      maintenanceFlooringWallsText: "",
      maintenancePestText: "",
      maintenanceSafetyText: "",
      maintenanceOtherText: "",
      maintenanceDescription: "",
      issueStartTime: "",
      isUrgent: "no",
      photos: [],
      petsInUnit: "no",
      petType: "",
      petSecurityPlan: "",
      tenantSignature: "",
      tenantSignatureDateTime: "",
      signerLegalName: "",
    },
  });

  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 getTenantMaintenanceForm(applicationId!);
      const data = response.data.data;
      const tm = data.tenantMaintenance;

      if (tm?.photos) {
        const urls = tm.photos.map((p: any) => p.file_url);
        const ids = tm.photos.map((p: any) => p.id);
        setPhotoUrls(urls);
        setPhotoIds(ids);
      }

      // Load location data first
      if (data.applicant_country) {
        const countryId = data.applicant_country.toString();
        setValue("country", countryId);

        // Load states for the country
        const statesRes = await getAllStatesByCountry(parseInt(countryId));
        const states = statesRes.data.data.map((state: any) => ({
          label: state.name,
          value: state.id.toString(),
        }));
        setStateOptions(states);
      }

      if (data.applicant_state) {
        const stateId = data.applicant_state.toString();
        setValue("state", stateId);

        // Load cities for the state
        const citiesRes = await getAllCitiesByState(parseInt(stateId));
        const cities = citiesRes.data.data.map((city: any) => ({
          label: city.name,
          value: city.id.toString(),
        }));
        setCityOptions(cities);
      }

      if (data.applicant_city) {
        setValue("city", data.applicant_city.toString());
      }

      // Load basic applicant info
      setValue("applicantName", data.applicant_name || "");
      setValue("phoneCell", data.applicant_cellphone || "");
      setValue("email", data.applicant_email || "");
      setValue("applicantProperty", data.applicant_address || "");
      setValue("applicantArea", data.applicant_area || "");

      // Load authorization fields
      setValue("authorizeMaintenance", tm?.authorize_maintenance === true || tm?.authorize_maintenance === 1);
      setValue("contactToSchedule", tm?.contact_to_schedule === true || tm?.contact_to_schedule === 1);
      setValue("preferredPhone", tm?.preferred_phone === true || tm?.preferred_phone === 1);
      setValue("preferredText", tm?.preferred_text === true || tm?.preferred_text === 1);
      setValue("preferredEmail", tm?.preferred_email === true || tm?.preferred_email === 1);

      // Load maintenance categories
      setValue("maintenanceHeatingCooling", tm?.maintenance_heating_cooling === true || tm?.maintenance_heating_cooling === 1);
      setValue("maintenancePlumbing", tm?.maintenance_plumbing === true || tm?.maintenance_plumbing === 1);
      setValue("maintenanceElectrical", tm?.maintenance_electrical === true || tm?.maintenance_electrical === 1);
      setValue("maintenanceAppliances", tm?.maintenance_appliances === true || tm?.maintenance_appliances === 1);
      setValue("maintenanceDoorsWindows", tm?.maintenance_doors_windows === true || tm?.maintenance_doors_windows === 1);
      setValue("maintenanceFlooringWalls", tm?.maintenance_flooring_walls === true || tm?.maintenance_flooring_walls === 1);
      setValue("maintenancePest", tm?.maintenance_pest === true || tm?.maintenance_pest === 1);
      setValue("maintenanceSafety", tm?.maintenance_safety === true || tm?.maintenance_safety === 1);

      // Load maintenance text fields
      setValue("maintenanceHeatingCoolingText", tm?.maintenance_heating_cooling_text || "");
      setValue("maintenancePlumbingText", tm?.maintenance_plumbing_text || "");
      setValue("maintenanceElectricalText", tm?.maintenance_electrical_text || "");
      setValue("maintenanceAppliancesText", tm?.maintenance_appliances_text || "");
      setValue("maintenanceDoorsWindowsText", tm?.maintenance_doors_windows_text || "");
      setValue("maintenanceFlooringWallsText", tm?.maintenance_flooring_walls_text || "");
      setValue("maintenancePestText", tm?.maintenance_pest_text || "");
      setValue("maintenanceSafetyText", tm?.maintenance_safety_text || "");
      setValue("maintenanceOtherText", tm?.maintenance_other_text || "");
      setValue("maintenanceDescription", tm?.maintenance_description || "");

      // Load issue details
      setValue("issueStartTime", tm?.issue_start_time || "");
      setValue("isUrgent", (tm?.is_urgent === true || tm?.is_urgent === 1) ? "yes" : "no");

      // Load pet information
      setValue("petsInUnit", (tm?.pets_in_unit === true || tm?.pets_in_unit === 1) ? "yes" : "no");
      setValue("petType", tm?.pet_type || "");
      setValue("petSecurityPlan", tm?.pet_security_plan || "");

      // Load signature
      setValue("tenantSignature", tm?.tenant_signature || "");
      setValue("signerLegalName", tm?.signer_legal_name || "");

      setActiveStep(data.active_step || 1);
    } 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,
        applicant_property: formData.applicantProperty,
        applicant_area: formData.applicantArea,
        country: formData.country,
        state: formData.state,
        city: formData.city,
        authorize_maintenance: formData.authorizeMaintenance,
        contact_to_schedule: formData.contactToSchedule,
        preferred_phone: formData.preferredPhone,
        preferred_text: formData.preferredText,
        preferred_email: formData.preferredEmail,
        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,
        maintenance_description: formData.maintenanceDescription,
        issue_start_time: formData.issueStartTime,
        is_urgent: formData.isUrgent,
        pets_in_unit: formData.petsInUnit,
        pet_type: formData.petType,
        pet_security_plan: formData.petSecurityPlan,
        tenant_signature: formData.tenantSignature,
        tenant_signature_datetime: new Date().toISOString(),
        signer_legal_name: formData.signerLegalName,
      };

      const response = await saveTenantMaintenanceForm(payload);

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

      // Upload photos if there are any
      if (formData.photos && formData.photos.length > 0) {
        const photoFormData = new FormData();
        photoFormData.append('applicationId', String(applicationId || response.data.data.applicationId));
        
        formData.photos.forEach((photo: File) => {
          photoFormData.append('photos', photo);
        });

        await uploadTenantMaintenancePhotos(photoFormData);
        
        // Clear photos from form after successful upload to prevent re-uploading
        setValue('photos', []);
      }

      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 handleNext = async () => {
    if (isReadOnly) {
      setActiveStep((prev) => Math.min(prev + 1, 5));
      return;
    }

    const stepFields: Record<number, (keyof RMApplicationFormData)[]> = {
      1: ["applicantName", "phoneCell", "email", "country", "state", "city", "applicantProperty", "applicantArea"],
      2: ["authorizeMaintenance", "contactToSchedule", "petsInUnit"],
      3: ["maintenanceDescription"],
      4: ["issueStartTime", "isUrgent"],
      5: ["tenantSignature", "signerLegalName"],
    };

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

      try {
        setLoading(true);
        await handleSave();
        if (applicationId) {
          await submitTenantMaintenanceForm(applicationId);
          showToast({
            title: "Success!",
            description: "Maintenance request 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);
        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]);
      if (isValid) {
        await handleSave();
        setActiveStep((prev) => Math.min(prev + 1, 5));
      }
    }
  };

  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="/rental-maintenance" className="text-[15px] md:text-[17px] text-white font-medium hover:underline">

                  Tenant Maintenance Requests
                </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]">

                  Tenant Maintenance Requests
                  <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">
        <div className="bg-white rounded-xl shadow-sm border mb-8 px-4 py-4">
          {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>
          )}
          <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}
              countryOptions={countryOptions}
              stateOptions={stateOptions}
              cityOptions={cityOptions}
              onCountryChange={() => {
                setValue("state", "");
                setValue("city", "");
              }}
              onStateChange={() => {
                setValue("city", "");
              }}
            />
          )}

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

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

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

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

          <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 === 5 ? "Submit" : "Next"}
                  </Button>
                </>
              )}
              {isReadOnly && activeStep !== 5 && (
                <Button
                  onClick={handleNext}
                  disabled={loading}
                  variant="primary"
                >
                  Next
                </Button>
              )}
            </div>
          </div>
        </div>
      </section>
    </>
  );
}