"use client";

import { useState } from "react";
import Image from "next/image";
import { FaArrowLeftLong, FaArrowRightLong, FaCheck } from "react-icons/fa6";
import { RxCross2 } from "react-icons/rx";
import { FaChevronRight } from "react-icons/fa";

const ServiceSelection = ({
  step,
  prevStep,
  nextStep,
  Selectedservices = [],
  ServiceData = [],
  ServiceCard,
}) => {
  const [SelectedService, setSelectedService] = useState(false);
  const [ShowSelected, setShowSelected] = useState(false);
  const [selectedMainServices, setSelectedMainServices] = useState([]);
  const [showSubcategories, setShowSubcategories] = useState(false);
  const [activeMainService, setActiveMainService] = useState(null);
  const [selectedSubcategories, setSelectedSubcategories] = useState({});
  const [subPrices, setSubPrices] = useState({});

  const handleServicePopUp = (item) => {
    setActiveMainService(item.name);
    setShowSubcategories(true);
  };

  const handleNextToSix = () => {
    nextStep();
  };

  const toggleSubService = (mainService, subServiceName) => {
    setSelectedSubcategories((prev) => {
      const prevSelected = prev[mainService] || [];
      const isAlreadySelected = prevSelected.includes(subServiceName);

      const updatedSubServices = isAlreadySelected
        ? prevSelected.filter((name) => name !== subServiceName)
        : [...prevSelected, subServiceName];

      return {
        ...prev,
        [mainService]: updatedSubServices,
      };
    });
  };

  const handlePriceChange = (serviceName, value) => {
    setSubPrices((prev) => ({
      ...prev,
      [serviceName]: value,
    }));
  };

  if (step !== 5) return null;

  return (
    <>
      {/* Service Overview */}
      {!SelectedService && (
        <>
          <div className="my-4 text-center">
            <h2 className="text-xl font-semibold">My Services</h2>
            <p className="body-text">Select the services you can provide</p>
          </div>

          {ShowSelected ? (
            <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 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="service"
                className="mx-auto py-4"
              />
              <p className="mb-2">Let’s get started</p>
              <p className="body-text">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 mt-4">
            <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>
        </>
      )}

      {/* Main Service Selection */}
      {SelectedService && !showSubcategories && (
        <>
          <div className="my-4">
            <h2 className="text-xl font-semibold">Select Services</h2>
            <p className="body-text">Choose your service category</p>
          </div>

          <div className="overflow-y-auto max-h-[550px]">
            <div className="main-services grid grid-cols-3 gap-3 mb-6 px-3">
              {ServiceData.map((item, index) => {
                const isSelected = selectedMainServices.includes(item.name);

                return (
                  <div key={index} 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}
                        width={200}
                        height={200}
                        alt={item.name}
                      />
                    </button>
                    <p className="my-0 py-1 text-center">{item.name}</p>
                  </div>
                );
              })}
            </div>
          </div>

          <div className="py-3">
            <button
              onClick={handleNextToSix}
              disabled={selectedMainServices.length === 0}
              className="btn-blue w-full px-8 py-3 text-white"
            >
              Save
            </button>
          </div>
        </>
      )}

      {/* Subcategory Selection */}
      {SelectedService && 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 px-3">
              {ServiceData.map((item, index) => {
                const isSelected =
                  selectedSubcategories[activeMainService]?.includes(
                    item.name
                  ) || false;

                return (
                  <div key={index} className="Service-card relative">
                    <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}
                        width={200}
                        height={200}
                        alt={item.name}
                        className="rounded-md"
                      />
                    </button>
                    <p className="my-0 py-1 text-center">{item.name}</p>

                    <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 mt-2"
                    />
                  </div>
                );
              })}
            </div>
          </div>

          <div className="py-3">
            <button
              onClick={() => {
                if (!selectedMainServices.includes(activeMainService)) {
                  setSelectedMainServices((prev) => [
                    ...prev,
                    activeMainService,
                  ]);
                }
                setShowSubcategories(false);
                setActiveMainService(null);
              }}
              className="btn-blue w-full px-8 py-3 text-white"
            >
              Next
            </button>
          </div>
        </>
      )}
    </>
  );
};

export default ServiceSelection;