import React, { useState, useEffect } from "react";
import { ChevronLeft } from "lucide-react";
import { useDispatch, useSelector } from "react-redux";
import {
  updatePersonalDetails,
  updateEducationalDetails,
  updateFamilyDetails,
  updateLifestyleDetails,
  updatePartnerPreferences,
  submitForm,
} from "../redux/registrationFormSlice";
import PersonalDetailsForm from "./PersonalDetailsForm";
import EducationalDetailsForm from "./EducationalDetailsForm";
import FamilyDetailsForm from "./FamilyDetailsForm";
import LifestyleDetailsForm from "./LifestyleDetailsForm";
import PartnerPreferencesForm from "./PartnerPreferencesForm";
import PreviewScreen from "./PreviewScreen";
import { useLocation } from "react-router-dom";
import {
  useRegisterStep1,
  useRegisterStep2,
  useRegisterStep3,
  useRegisterStep4,
  useRegisterStep5,
} from "../hooks/useRegister";
import { setAccessToken } from "../api/axiosInstance";
import toast from "react-hot-toast";

const STEP_FIELD_ORDER = {
  1: [
    "name",
    "gender",
    "mobileNumber",
    "dob",
    "height",
    "weight",
    "maritalStatus",
    "religion",
    "profileFor",
    "caste",
    "subCaste",
    "gothram",
    "raasi",
    "star",
    "email",
    "password",
    "confirmPassword",
    "state",
    "city",
    "pincode",
    "profiles",
  ],
  2: [
    "fieldOfStudy",
    "qualification",
    "collegeName",
    "occupation",
    "organization",
    "employeeType",
    "income",
    "workLocation",
  ],
  3: [
    "fatherName",
    "fatherOccupation",
    "motherName",
    "motherOccupation",
    "brotherCount",
    "sisterCount",
    "familyStatus",
    "nativePlace",
  ],
  4: ["diets", "hobbies", "dob", "tob", "placeOfBirth"],
  5: [
    "ageRange",
    "castes",
    "subCastes",
    "occupations",
    "educations",
    "hobbies",
    "annualIncome",
    "states",
    "districts",
  ],
};

const STEP1_SERVER_FIELD_MAP = {
  name: "name",
  mobile: "mobileNumber",
  mobile_number: "mobileNumber",
  mobileNumber: "mobileNumber",
  phone: "mobileNumber",
  email: "email",
  gender: "gender",
  dob: "dob",
  height: "height",
  weight: "weight",
  marital_status: "maritalStatus",
  maritalStatus: "maritalStatus",
  religion: "religion",
  profile_for: "profileFor",
  profileFor: "profileFor",
  caste: "caste",
  sub_caste: "subCaste",
  subCaste: "subCaste",
  gothram: "gothram",
  raasi: "raasi",
  star: "star",
  state: "state",
  district: "city",
  city: "city",
  pincode: "pincode",
  password: "password",
  confirm_password: "confirmPassword",
  confirmPassword: "confirmPassword",
  profiles: "profiles",
};
const Stepper = ({ currentStep, onStepClick }) => {
  

  const steps = [
    { num: 1, label: "Personal" },
    { num: 2, label: "Educational" },
    { num: 3, label: "Family" },
    { num: 4, label: "Lifestyle" },
    { num: 5, label: "Partner" },
    { num: 6, label: "Preview" },
  ];

  return (
    <div className="flex items-center justify-between px-4 py-6">
      {steps.map((step, index) => (
        <React.Fragment key={step.num}>
          <div
            className="flex flex-col items-center cursor-pointer"
            onClick={() => onStepClick(step.num)}
          >
            <div
              className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold ${
                currentStep >= step.num
                  ? "bg-red-600 text-white"
                  : "bg-gray-300 text-gray-600"
              }`}
            >
              {step.num}
            </div>
          </div>
          {index < steps.length - 1 && (
            <div
              className={`flex-1 h-0.5 mx-1 ${
                currentStep > step.num ? "bg-red-600" : "bg-gray-300"
              }`}
            />
          )}
        </React.Fragment>
      ))}
    </div>
  );
};

const StepperForm = () => {
  const dispatch = useDispatch();
 const location = useLocation();

  const personalDetails = useSelector(
    (state) => state.registerform.personalDetails
  );
  const educationalDetails = useSelector(
    (state) => state.registerform.educationalDetails
  );
  const familyDetails = useSelector((state) => state.registerform.familyDetails);
  const lifestyleDetails = useSelector(
    (state) => state.registerform.lifestyleDetails
  );
  const partnerPreferences = useSelector(
    (state) => state.registerform.partnerPreferences
  );

  const initialStep = location.state?.step || 1;

  const [currentStep, setCurrentStep] = useState(initialStep);
  const [errors, setErrors] = useState({});

  const registerStep1 = useRegisterStep1();
  const registerStep2 = useRegisterStep2();
  const registerStep3 = useRegisterStep3();
  const registerStep4 = useRegisterStep4();
  const registerStep5 = useRegisterStep5();

  const normalizeStep1Field = (key) => {
    if (!key) return key;
    const trimmed = String(key).trim();
    if (!trimmed) return trimmed;
    return (
      STEP1_SERVER_FIELD_MAP[trimmed] ||
      STEP1_SERVER_FIELD_MAP[trimmed.toLowerCase()] ||
      trimmed
    );
  };

  const coerceErrorMessage = (value) => {
    if (Array.isArray(value)) {
      return value.filter(Boolean).join(" ");
    }
    if (typeof value === "string") return value;
    if (value && typeof value === "object") {
      return (
        value.message ||
        value.msg ||
        value.error ||
        value.detail ||
        ""
      );
    }
    if (value === null || value === undefined) return "";
    return String(value);
  };

  const mapServerErrors = (error) => {
    const data = error?.response?.data ?? error?.data ?? error;
    if (!data) return {};
    const payload = data.errors ?? data.error ?? data.data ?? data;

    if (typeof payload === "string") {
      return { _form: payload };
    }

    if (Array.isArray(payload)) {
      const out = {};
      payload.forEach((item) => {
        if (!item) return;
        if (typeof item === "string") {
          out._form = out._form ? `${out._form} ${item}` : item;
          return;
        }
        const key = item.field || item.name || item.param || item.key;
        const message =
          item.message || item.msg || item.error || item.detail || "";
        if (key) {
          out[normalizeStep1Field(key)] =
            String(message || "Invalid value");
        }
      });
      return out;
    }

    if (typeof payload === "object") {
      const out = {};
      Object.entries(payload).forEach(([key, value]) => {
        if (
          (key === "message" || key === "error" || key === "detail") &&
          typeof value === "string"
        ) {
          out._form = out._form ? `${out._form} ${value}` : value;
          return;
        }
        const normalizedKey = normalizeStep1Field(key);
        const message = coerceErrorMessage(value);
        if (!normalizedKey) return;
        out[normalizedKey] = message || "Invalid value";
      });
      return out;
    }

    return {};
  };

  const focusFirstError = (errorMap, fieldOrder = []) => {
    if (!errorMap || Object.keys(errorMap).length === 0) return;
    const order = fieldOrder.filter((key) => errorMap[key]);
    const firstKey =
      order[0] ||
      Object.keys(errorMap).find((key) => key !== "_form");
    if (!firstKey) return;
    setTimeout(() => {
      const byAria = document.querySelector(
        `[aria-labelledby~="${firstKey}-label"]`
      );
      if (byAria && typeof byAria.focus === "function") {
        byAria.focus();
        return;
      }
      const byName = document.querySelector(`[name="${firstKey}"]`);
      if (byName && typeof byName.focus === "function") {
        byName.focus();
        return;
      }
      const byId = document.getElementById(firstKey);
      if (byId && typeof byId.focus === "function") {
        byId.focus();
      }
    }, 0);
  };

  const clearFieldErrors = (fields) => {
    if (!fields) return;
    const list = Array.isArray(fields) ? fields : [fields];
    setErrors((prev) => {
      if (!prev || Object.keys(prev).length === 0) return prev;
      let changed = false;
      const next = { ...prev };
      list.forEach((field) => {
        if (field in next) {
          delete next[field];
          changed = true;
        }
      });
      if (next._form) {
        delete next._form;
        changed = true;
      }
      return changed ? next : prev;
    });
  };


   useEffect(() => {
    // in case user comes again with a different step
    if (location.state?.step) {
      setCurrentStep(location.state.step);
      window.scrollTo(0, 0);
    }
  }, [location.state?.step]);




  const validateStep = (step) => {
    const newErrors = {};

    if (step === 1) {
      const required = [
        "name",
        "mobileNumber",
        "gender",
        "dob",
        "maritalStatus",
        "profileFor",
        "caste",
        "email",
        "password",
        "confirmPassword",
        "state",
        "city",
        "pincode",
      ];

      required.forEach((field) => {
        if (!personalDetails[field]) {
          newErrors[field] = "This field is required";
        }
      });

      if (
        personalDetails.email &&
        !/\S+@\S+\.\S+/.test(personalDetails.email)
      ) {
        newErrors.email = "Invalid email format";
      }
      if (
        personalDetails.mobileNumber &&
        personalDetails.mobileNumber.length !== 10
      ) {
        newErrors.mobileNumber = "Mobile number must be 10 digits";
      }
      if (personalDetails.height && Number(personalDetails.height) > 10) {
        newErrors.height = "Height must be 10 or less";
      }
      if (personalDetails.weight && Number(personalDetails.weight) > 300) {
        newErrors.weight = "Weight must be 300 or less";
      }
      if (
        personalDetails.password &&
        personalDetails.confirmPassword &&
        personalDetails.password !== personalDetails.confirmPassword
      ) {
        newErrors.confirmPassword = "Passwords do not match";
      }
    } else if (step === 2) {
      const required = [
        "qualification",
        "fieldOfStudy",
        "occupation",
        "organization",
        "employeeType",
        "income",
      ];
      required.forEach((field) => {
        if (!educationalDetails[field]) {
          newErrors[field] = "This field is required";
        }
      });
    } else if (step === 3) {
      const required = [
        "fatherName",
        "motherName",
        "familyStatus",
      ];
      required.forEach((field) => {
        if (!familyDetails[field]) {
          newErrors[field] = "This field is required";
        }
      });
    } else if (step === 4) {
      const required = ["diets", "hobbies", "dob", "tob"];
      required.forEach((field) => {
        const value = lifestyleDetails[field];
        if (Array.isArray(value)) {
          if (value.length === 0) newErrors[field] = "This field is required";
        } else if (!value) {
          newErrors[field] = "This field is required";
        }
      });
    } else if (step === 5) {
      const required = [
        "ageRange",
        "castes",
        "subCastes",
        "occupations",
        "educations",
        "hobbies",
        "annualIncome",
        "states",
        "districts",
      ];
      required.forEach((field) => {
        const value = partnerPreferences[field];
        if (Array.isArray(value)) {
          if (value.length === 0) {
            newErrors[field] = "This field is required";
          }
          return;
        }
        if (!value) {
          newErrors[field] = "This field is required";
        }
      });
    }

    setErrors(newErrors);

    if (Object.keys(newErrors).length > 0) {
      focusFirstError(newErrors, STEP_FIELD_ORDER[step] || []);
    }

    return Object.keys(newErrors).length === 0;
  };

  const buildRegisterStep1Payload = () => ({
    name: personalDetails.name,
    mobile: personalDetails.mobileNumber,
    email: personalDetails.email,
    pincode: personalDetails.pincode,
    gender: personalDetails.gender,
    dob: personalDetails.dob,
    height: personalDetails.height || "",
    weight: personalDetails.weight || "",
    marital_status: personalDetails.maritalStatus,
    religion: personalDetails.religion,
    profile_for: personalDetails.profileFor || "",
    caste: personalDetails.caste,
    sub_caste: personalDetails.subCaste || "",
    gothram: personalDetails.gothram || "",
    raasi: personalDetails.raasi || "",
    star: personalDetails.star || "",
    state: personalDetails.state,
    district: personalDetails.city,
    password: personalDetails.password || "",
    fcm_token: localStorage.getItem("fcm_token") || "",
  });

  const buildRegisterStep2Payload = () => ({
    college_name: educationalDetails.collegeName || "",
    study_field: educationalDetails.fieldOfStudy,
    education: educationalDetails.qualification,
    occupation: educationalDetails.occupation,
    company_name: educationalDetails.organization || "",
    employee_type: educationalDetails.employeeType,
    annual_income: educationalDetails.income,
    work_location: educationalDetails.workLocation || "",
  });

  const buildRegisterStep3Payload = () => {
    const payload = {
      father_name: familyDetails.fatherName,
      father_occupation: familyDetails.fatherOccupation || "",
      mother_name: familyDetails.motherName,
      mother_occupation: familyDetails.motherOccupation || "",
      family_status: familyDetails.familyStatus,
      native_place: familyDetails.nativePlace || "",
      brother_count: familyDetails.brotherCount || 0,
      sister_count: familyDetails.sisterCount || 0,
    };

    (familyDetails.brothers || []).forEach((brother, index) => {
      payload[`brothers[${index}][name]`] = brother?.name || "";
      payload[`brothers[${index}][occupation]`] = brother?.occupation || "";
      payload[`brothers[${index}][marital_status]`] =
        brother?.maritalStatus || "";
      payload[`brothers[${index}][have_childrens]`] =
        brother?.haveChildrens ?? "";
    });

    (familyDetails.sisters || []).forEach((sister, index) => {
      payload[`sisters[${index}][name]`] = sister?.name || "";
      payload[`sisters[${index}][occupation]`] = sister?.occupation || "";
      payload[`sisters[${index}][marital_status]`] =
        sister?.maritalStatus || "";
      payload[`sisters[${index}][have_childrens]`] =
        sister?.haveChildrens ?? "";
    });

    return payload;
  };

  const buildRegisterStep4Payload = () => {
    const payload = {
      dob: lifestyleDetails.dob,
      tob: lifestyleDetails.tob,
    };

    (lifestyleDetails.diets || []).forEach((id, index) => {
      payload[`diets[${index}]`] = id;
    });

    (lifestyleDetails.hobbies || []).forEach((id, index) => {
      payload[`hobbies[${index}]`] = id;
    });

    const graha = lifestyleDetails.graha || {};
    Object.keys(graha).forEach((house) => {
      const values = graha[house] || [];
      values.forEach((value, index) => {
        payload[`graha_${house}[${index}]`] = value;
      });
    });

    const amsam = lifestyleDetails.amsam || {};
    Object.keys(amsam).forEach((house) => {
      const values = amsam[house] || [];
      values.forEach((value, index) => {
        payload[`amsam_${house}[${index}]`] = value;
      });
    });

    return payload;
  };

  const buildRegisterStep5Payload = () => {
    const payload = {
      age_range: partnerPreferences.ageRange,
      annual_income: partnerPreferences.annualIncome,
    };

    (partnerPreferences.castes || []).forEach((id, index) => {
      payload[`castes[${index}]`] = id;
    });

    (partnerPreferences.subCastes || []).forEach((id, index) => {
      payload[`sub_castes[${index}]`] = id;
    });

    (partnerPreferences.occupations || []).forEach((id, index) => {
      payload[`occupations[${index}]`] = id;
    });

    (partnerPreferences.educations || []).forEach((id, index) => {
      payload[`educations[${index}]`] = id;
    });

    (partnerPreferences.hobbies || []).forEach((id, index) => {
      payload[`hobbies[${index}]`] = id;
    });

    (partnerPreferences.states || []).forEach((id, index) => {
      payload[`states[${index}]`] = id;
    });

    (partnerPreferences.districts || []).forEach((id, index) => {
      payload[`districts[${index}]`] = id;
    });

    return payload;
  };

  const extractAccessToken = (res) =>
    res?.access_token ||
    res?.accessToken ||
    res?.token ||
    res?.data?.access_token ||
    res?.data?.accessToken ||
    res?.data?.token ||
    res?.result?.access_token ||
    res?.result?.accessToken ||
    res?.result?.token ||
    null;

  const handleStepSubmit = async () => {
    const isValid = validateStep(currentStep);
    if (!isValid) return;

    try {
      if (currentStep === 1) {
        const payload = buildRegisterStep1Payload();
        const res = await registerStep1.mutateAsync(payload);
        const token = extractAccessToken(res);
        if (token) {
          setAccessToken(token);
        }
      } else if (currentStep === 2) {
        const payload = buildRegisterStep2Payload();
        await registerStep2.mutateAsync(payload);
      } else if (currentStep === 3) {
        const payload = buildRegisterStep3Payload();
        await registerStep3.mutateAsync(payload);
      } else if (currentStep === 4) {
        const payload = buildRegisterStep4Payload();
        await registerStep4.mutateAsync(payload);
      } else if (currentStep === 5) {
        const payload = buildRegisterStep5Payload();
        await registerStep5.mutateAsync(payload);
      }
      setErrors({});
      setCurrentStep((prev) => Math.min(prev + 1, 6));
      window.scrollTo(0, 0);
    } catch (e) {
      if (currentStep === 1) {
        const serverErrors = mapServerErrors(e);
        if (Object.keys(serverErrors).length > 0) {
          const hasFieldErrors = Object.keys(serverErrors).some(
            (key) => key !== "_form"
          );
          if (hasFieldErrors) {
            setErrors(serverErrors);
            focusFirstError(serverErrors, STEP_FIELD_ORDER[1]);
            return;
          }
          if (serverErrors._form) {
            toast.error(serverErrors._form, { position: "top-right" });
            return;
          }
        }
      }
      alert("Failed to submit step. Please try again.");
    }
  };

  const handleSkip = () => {
    setErrors({});
    setCurrentStep((prev) => Math.min(prev + 1, 6));
    window.scrollTo(0, 0);
  };

  const handleStepClick = (step) => {
    setCurrentStep(step);
    setErrors({});
    window.scrollTo(0, 0);
  };

  const handleEdit = (step) => {
    setCurrentStep(step);
    setErrors({});
    window.scrollTo(0, 0);
  };

  const handleFinalSubmit = async () => {
    for (let i = 1; i <= 5; i++) {
      const ok = validateStep(i);
      if (!ok) {
        setCurrentStep(i);
        return;
      }
    }

    try {
      // final combined API call - replace with your final API
      await new Promise((resolve) => setTimeout(resolve, 500));
      alert("Form submitted successfully!");
    } catch (e) {
      alert("Failed to submit form.");
    }
  };

  const renderStepContent = () => {
    switch (currentStep) {
      case 1:
        return (
          <PersonalDetailsForm
            onSubmitStep={handleStepSubmit}
            errors={errors}
            onFieldChange={clearFieldErrors}
          />
        );
      case 2:
        return (
          <EducationalDetailsForm
            onSubmitStep={handleStepSubmit}
            onSkipStep={handleSkip}
            errors={errors}
            onFieldChange={clearFieldErrors}
          />
        );
      case 3:
        return (
          <FamilyDetailsForm
            onSubmitStep={handleStepSubmit}
            onSkipStep={handleSkip}
            errors={errors}
            onFieldChange={clearFieldErrors}
          />
        );
      case 4:
        return (
          <LifestyleDetailsForm
            onSubmitStep={handleStepSubmit}
            onSkipStep={handleSkip}
            errors={errors}
            onFieldChange={clearFieldErrors}
          />
        );
      case 5:
        return (
          <PartnerPreferencesForm
            onSubmitStep={handleStepSubmit}
            onSkipStep={handleSkip}
            errors={errors}
            onFieldChange={clearFieldErrors}
          />
        );
      case 6:
        return <PreviewScreen onEdit={handleEdit} onSubmit={handleFinalSubmit} />;
      default:
        return null;
    }
  };

  const getTitle = () => {
    const titles = {
      1: "Personal Details",
      2: "Educational & Professional Details",
      3: "Family Details",
      4: "Lifestyle & Habits",
      5: "Partner Preferences",
      6: "Details Preview",
    };
    return titles[currentStep] || "";
  };

  return (
    <div className="">
      <div className="max-w-[1400px] mx-auto bg-white  ">
        {/* Header */}
        <div className="my-4 rounded-[10px] py-4  bg-[#e3ffed]  w-full max-w-[1200px] mx-auto">

            <Stepper currentStep={currentStep} onStepClick={handleStepClick} />
          <div className="flex items-center p-4 justify-center">
            {currentStep > 1 && currentStep < 6 && (
              <button
                onClick={() => setCurrentStep((prev) => prev - 1)}
                className="mr-3"
              >
                <ChevronLeft size={24} />
              </button>
            )}
            <h1 className="text-[24px] font-semibold text-center uppercase bg-[#fff2f2] py-2 px-3 rounded-5">{getTitle()}</h1>
          </div>
        
        </div>

        {/* Content */}
        <div className="pb-6">{renderStepContent()}</div>
      </div>
    </div>
  );
};

export default StepperForm;
