"use client";

import { useEffect, useState } from "react";
import StepLine from "./StepLine";

import Link from "next/link";
import OtpInput from "react-otp-input";
import { FaArrowRightLong } from "react-icons/fa6";
import { FaArrowLeftLong } from "react-icons/fa6";
import { FaChevronRight } from "react-icons/fa";
import { RxCross2 } from "react-icons/rx";

import Image from "next/image";
import { FaCheck } from "react-icons/fa6";
import ServiceCard from "../register/ServiceCard";
import MembershipCard from "../register/MembershipCard";
import PaymentMethodCard from "../register/PaymentMethodCard";
import { Route } from "lucide-react";
import { useRouter } from "next/navigation";
import RegisterStepOne from "../register/RegisterStepOne";
import RegisterStepFor from "../register/RegisterStepFor";
import RegisterStepThree from "../register/RegisterStepThree";

export default function RegistrationForm() {
  const [step, setStep] = useState(1);

  const [otp, setOtp] = useState("");
  const [SelectedService, setSelectedService] = useState(false);

  const [timer, setTimer] = useState(60);
  const [ShowService, setShowService] = useState(null);

  const [showPopup, setShowPopup] = useState(false);
  const [showSubcategories, setShowSubcategories] = useState(false);
  const [activeMainService, setActiveMainService] = useState(null);
  const [selectedMainServices, setSelectedMainServices] = useState([]);
  const [selectedSubcategories, setSelectedSubcategories] = useState({});
  const [subPrices, setSubPrices] = useState({});
  const [ServiceOkk, setServiceOkk] = useState(false);
  const [pendingServiceData, setPendingServiceData] = useState(null);

  const [ShowSelected, setShowSelected] = useState(false);
  const router = useRouter();

  useEffect(() => {
    if (timer > 0) {
      const interval = setInterval(() => setTimer((prev) => prev - 1), 1000);
      return () => clearInterval(interval);
    }
  }, [timer]);

  const handleResendOtp = () => {
    setTimer(60);
    setOtp();
    console.log("OTP resent!");
  };

  const handleFocus = (e) => {
    e.target.style.backgroundColor = "#d3d3d3"; // Dark background on focus
    e.target.style.color = "#000"; // Optional: change text color to white for contrast
    e.target.style.border = "none";
  };

  const handleBlur = (e) => {
    e.target.style.backgroundColor = ""; // Reset background color when focus is lost
    e.target.style.color = ""; // Optional: reset text color
    e.target.style.border = "1px solid #ccc";
  };

  const toggleSubService = (mainService, subName) => {
    setSelectedSubcategories((prev) => {
      const current = prev[mainService] || [];
      if (current.includes(subName)) {
        return { ...prev, [mainService]: current.filter((n) => n !== subName) };
      } else {
        return { ...prev, [mainService]: [...current, subName] };
      }
    });
  };

  // Handle price change
  const handlePriceChange = (subName, value) => {
    setSubPrices((prev) => ({
      ...prev,
      [subName]: value,
    }));
  };

  const ServiceData = [
    {
      name: "Appliances",
      path: "/Services/Appliances 1.png",
    },
    {
      name: "Assembly",
      path: "/Services/Assembly.png",
    },
    {
      name: "Cleaning",
      path: "/Services/Cleaning.png",
    },
    {
      name: "Electricity",
      path: "/Services/Electricity.png",
    },
    {
      name: "Fitting and fixing",
      path: "/Services/Fitting and fixing.png",
    },
    {
      name: "Plumbing",
      path: "/Services/Changing a siphon.png",
    },
    {
      name: "Installation",
      path: "/Services/Installation.png",
    },
    {
      name: "Interior design",
      path: "/Services/Interior design.png",
    },
    {
      name: "Lighting",
      path: "/Services/Lighting.png",
    },
    {
      name: "Appliances",
      path: "/Services/Appliances 1.png",
    },
    {
      name: "Assembly",
      path: "/Services/Assembly.png",
    },
    {
      name: "Cleaning",
      path: "/Services/Cleaning.png",
    },
    {
      name: "Electricity",
      path: "/Services/Electricity.png",
    },
    {
      name: "Fitting and fixing",
      path: "/Services/Fitting and fixing.png",
    },
    {
      name: "Plumbing",
      path: "/Services/Changing a siphon.png",
    },
    {
      name: "Installation",
      path: "/Services/Installation.png",
    },
    {
      name: "Interior design",
      path: "/Services/Interior design.png",
    },
    {
      name: "Lighting",
      path: "/Services/Lighting.png",
    },
  ];

  const Selectedservices = [
    {
      title: "Assembly",
      subtitle: "Bed",
      price: 20,
      image: "/images/bed.png",
    },
    {
      title: "Assembly",
      subtitle: "Cabinets",
      price: 20,
      image: "/images/cabinets.png",
    },
    {
      title: "Assembly",
      subtitle: "Dressing room",
      price: 20,
      image: "/images/dressing-room.png",
    },
    {
      title: "Assembly",
      subtitle: "Cabinets",
      price: 20,
      image: "/images/cabinets.png",
    },
    {
      title: "Assembly",
      subtitle: "Dressing room",
      price: 20,
      image: "/images/dressing-room.png",
    },
    {
      title: "Assembly",
      subtitle: "Cabinets",
      price: 20,
      image: "/images/cabinets.png",
    },
    {
      title: "Assembly",
      subtitle: "Dressing room",
      price: 20,
      image: "/images/dressing-room.png",
    },
  ];

  const handleServicePopUp = (data) => {
    if (data) {
      console.log(data, "item");
      setPendingServiceData(data);
    }

    if (showPopup) {
      setShowPopup(true);
      if (ServiceOkk && pendingServiceData) {
        setActiveMainService(pendingServiceData.name);
        setShowSubcategories(true);
        setShowPopup(false);
        setServiceOkk(false);
      }
    } else {
      setShowPopup(true);
      setServiceOkk(true);
    }
  };

  const handleNextToSix = () => {
    setShowSelected(true);
    setSelectedService(false);
  };

  const nextStep = () => {
    router.push("#top");
    setStep((prev) => prev + 1);
  };

  const prevStep = () => setStep((prev) => prev - 1);

  return (
    <div className="min-h-screen py-4 flex justify-center items-center bg-gray-100 px-4">
      <div className="bg-white w-full max-w-xl p-6 rounded-2xl shadow-xl">
        <div id="top"></div>
        {/* Step 1: Personal Info */}
        {step === 1 && (
          <>
            {step <= 6 && <StepLine currentStep={step} totalSteps={6} />}
            <RegisterStepOne setStep={setStep} />
          </>
        )}

        {/* Step 2: Verification Code */}
        {step === 2 && (
          <>
            <div className="my-4">
              <h2 className="text-xl font-semibold text-center">
                Verification Code
              </h2>
              <p className="body-text text-center">
                {" "}
                We have sent a code to your email.
              </p>
            </div>
            <div className="flex gap-2 justify-center mb-4">
              <OtpInput
                value={otp}
                onChange={setOtp}
                numInputs={4}
                isInputNum={true}
                inputStyle={{
                  width: "3rem",
                  height: "3rem",
                  margin: "0 0.5rem",
                  fontSize: "1.5rem",
                  borderRadius: "4px",
                  border: "1px solid #ccc",
                  textAlign: "center",
                }}
                renderSeparator={<span></span>}
                renderInput={(props) => (
                  <input {...props} onFocus={handleFocus} onBlur={handleBlur} />
                )}
              />
            </div>
            <div>
              <p className="text-xs text-gray-500 mt-2 text-center">
                Didnt receive the code? {Math.floor(timer / 60)}:
                {(timer % 60).toString().padStart(2, "0")}
              </p>

              {timer === 0 ? (
                <p
                  className="text-blue-500 underline cursor-pointer mt-1 text-center"
                  onClick={handleResendOtp}
                >
                  Resend OTP
                </p>
              ) : (
                <p className="text-gray-400 mt-1 text-center">Resend OTP</p>
              )}
            </div>
            <div className="flex justify-between">
              <button
                onClick={prevStep}
                className="btn-white flex gap-2 items-center !px-8 py-3 !bg-[#F7F8FA]"
              >
                <FaArrowLeftLong /> <span>Back</span>
              </button>
              <button
                onClick={nextStep}
                className="btn-blue !px-8 !py-3  text-white flex gap-2 items-center"
              >
                <span>Continue</span> <FaArrowRightLong />
              </button>
            </div>
          </>
        )}

        {/* Step 3: Address */}
        {step === 3 && (
          <>
            <RegisterStepThree setStep={setStep} prevStep={prevStep} />
          </>
        )}

        {/* Step 4: Upload Documents */}
        {step === 4 && <RegisterStepFor setStep={setStep} />}

        {/* Step 5: My Services */}
        {step === 5 && !SelectedService && (
          <>
            <div className="my-4">
              <h2 className="text-xl font-semibold text-center">My services</h2>
              <p className="body-text text-center">
                Select the services you can provide
              </p>
            </div>
            {ShowSelected === true ? (
              <div>
                <div className="overflow-y-auto max-h-[550px]">
                  {Selectedservices.map((service, idx) => (
                    <ServiceCard key={idx} {...service} />
                  ))}
                </div>
                <div className="flex justify-center items-center my-2">
                  <button
                    className="mt-6 px-4 mx-auto bg-[#D7E2FF]  text-blue-600 py-3 !rounded-full text-lg font-semibold"
                    onClick={() => setSelectedService(true)}
                  >
                    + ADD NEW SERVICE
                  </button>
                </div>
              </div>
            ) : (
              <div className="text-center mb-6">
                <Image
                  src="/common/service.png"
                  width={100}
                  height={100}
                  alt="hbhbh"
                  className="mx-auto py-4"
                />
                <p className="mb-2">Let’s get started</p>
                <p className="body-text text-center">
                  Add the services you can provide
                </p>
                <button
                  className="bg-[#D7E2FF] text-blue-600 py-3 px-4 !rounded-full"
                  onClick={() => setSelectedService(true)}
                >
                  + Add New Service
                </button>
              </div>
            )}

            <div className="flex justify-between">
              <button
                onClick={prevStep}
                className="btn-white flex gap-2 items-center !px-8 py-3 !bg-[#F7F8FA]"
              >
                <FaArrowLeftLong /> <span>Back</span>
              </button>
              <button
                onClick={nextStep}
                className="btn-blue !px-8 !py-3  text-white flex gap-2 items-center"
              >
                <span>Continue</span> <FaArrowRightLong />
              </button>
            </div>
          </>
        )}

        {/* Step 6: Select Services */}
        {step === 6 && (
          <>
            <div className="my-4">
              <h2 className="text-xl font-semibold text-center">
                Choose Your Membership
              </h2>
              <p className="body-text text-center">
                Select a plan that fits your business needs
              </p>
            </div>
            <MembershipCard />

            <div className="flex justify-between">
              <button
                onClick={prevStep}
                className="btn-white flex gap-2 items-center !px-8 py-3 !bg-[#F7F8FA]"
              >
                <FaArrowLeftLong /> <span>Back</span>
              </button>
              <button
                onClick={nextStep}
                className="btn-blue !px-8 !py-3  text-white flex gap-2 items-center"
              >
                <span>Continue</span> <FaArrowRightLong />
              </button>
            </div>
          </>
        )}

        {step === 7 && (
          <>
            <PaymentMethodCard />

            <div className="flex justify-between">
              <button
                onClick={prevStep}
                className="btn-white flex gap-2 items-center !px-8 py-3 !bg-[#F7F8FA]"
              >
                <FaArrowLeftLong /> <span>Back</span>
              </button>
              <button
                onClick={nextStep}
                className="btn-blue !px-8 !py-3  text-white flex gap-2 items-center"
              >
                <span>Continue</span> <FaArrowRightLong />
              </button>
            </div>
          </>
        )}

        {step === 8 && (
          <>
            <Image
              src="/Common/logo.svg"
              height={100}
              width={100}
              alt="logo"
              className="mx-auto"
            />
            <p className="text-center">
              Your application is under review wait while your employer is
              accepting you
            </p>

            <div className="flex justify-center">
              <Link href="/">
                <button className="btn-blue !px-8 !py-3  text-white flex gap-2 items-center">
                  <span>Back To Home</span>
                </button>
              </Link>
            </div>
          </>
        )}

        {/* Main Service Selection */}
        {step === 5 && !showSubcategories && SelectedService && (
          <>
            <div className="my-4">
              <h2 className="text-xl font-semibold">Select services</h2>
              <p className="body-text">
                Choose your service category which you provide
              </p>
            </div>
            <div className="overflow-y-auto max-h-[550px]">
              <div className="main-services grid grid-cols-3 gap-3 mb-6 !mix-w-[300px]">
                {ServiceData.map((item, index) => {
                  const isSelected = selectedMainServices.includes(item.name);

                  return (
                    <div key={index}>
                      <div className="Service-card relative">
                        <button
                          onClick={() => {
                            handleServicePopUp(item);
                          }}
                          className="relative"
                        >
                          {isSelected && (
                            <>
                              <div className="absolute inset-0 bg-blue-500 opacity-50 rounded-md z-10" />
                              <div className="absolute inset-0 flex items-center justify-center z-20">
                                <FaCheck className="text-blue-600 bg-white px-2 text-3xl rounded-full" />
                              </div>
                            </>
                          )}
                          <Image
                            src={item.path}
                            height={200}
                            width={200}
                            alt={item.name}
                          />
                        </button>
                        <p className="my-0 py-1">{item.name}</p>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
            <div className="py-3">
              <button
                onClick={() => {
                  handleNextToSix();
                }}
                className="btn-blue w-full !px-8 !py-3 text-white"
                disabled={selectedMainServices.length === 0}
              >
                <span>Save</span>
              </button>
            </div>
          </>
        )}

        {/* Subcategory Selection */}
        {step === 5 && showSubcategories && activeMainService && (
          <>
            <div className="my-4 flex justify-between items-center">
              <button
                className="font-semibold flex gap-2 items-center"
                onClick={() => {
                  setShowSubcategories(false);
                  setSelectedMainServices((prev) =>
                    prev.filter((name) => name !== activeMainService)
                  );
                  setActiveMainService(null);
                }}
              >
                <FaArrowLeftLong /> <span>{activeMainService}</span>
              </button>
              <button className="font-semibold flex gap-2 items-center">
                <span>Unselect Job</span> <FaChevronRight />
              </button>
            </div>
            <div className="overflow-y-auto max-h-[550px]">
              <div className="main-services grid grid-cols-3 gap-3 mb-6 !mix-w-[300px] px-3">
                {ServiceData.map((item, index) => {
                  const isSelected =
                    selectedSubcategories[activeMainService]?.includes(
                      item.name
                    ) || false;

                  return (
                    <div key={index}>
                      <div className="Service-card">
                        <button
                          onClick={() =>
                            toggleSubService(activeMainService, item.name)
                          }
                          className="relative p-1 rounded-md group"
                        >
                          {isSelected && (
                            <>
                              <div className="absolute inset-0 bg-blue-500 opacity-70 rounded-md z-10" />
                              <div className="absolute inset-0 flex items-center justify-center z-20">
                                <RxCross2 className="text-blue-600 bg-white px-2 text-3xl rounded-full" />
                              </div>
                            </>
                          )}

                          <Image
                            src={item.path}
                            height={200}
                            width={200}
                            alt={item.name}
                            className="rounded-md z-0"
                          />
                        </button>
                        <p className="my-0 py-1">{item.name}</p>
                        <div className="flex-1">
                          <input
                            type="text"
                            placeholder="Price"
                            value={subPrices[item.name] || ""}
                            onChange={(e) =>
                              handlePriceChange(item.name, e.target.value)
                            }
                            className="w-full px-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-register-img"
                          />
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
            <div className="py-3">
              <button
                onClick={() => {
                  // Add main service to selected list if not already
                  if (!selectedMainServices.includes(activeMainService)) {
                    setSelectedMainServices([
                      ...selectedMainServices,
                      activeMainService,
                    ]);
                  }
                  setShowSubcategories(false);
                  setActiveMainService(null);
                }}
                className="btn-blue !px-8 !py-3 text-white w-full"
              >
                <span>Next</span>
              </button>
            </div>
          </>
        )}

        {showPopup && (
          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div className="bg-white rounded-lg shadow-lg p-6 max-w-sm w-full">
              <Image
                src="/icons/price-tag.svg"
                height={100}
                width={100}
                alt="price tag"
                className="mx-auto py-4"
              />
              <p className="mb-6 text-center">
                Insert prices now to simplify <br /> quote creation
              </p>
              <div className="flex justify-end space-x-4">
                <button
                  onClick={() => {
                    handleServicePopUp();
                  }}
                  className="mx-auto px-10 py-2 bg-blue-600 text-white !rounded-full hover:bg-blue-700"
                >
                  Ok
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}