import React, { useState, useEffect } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";

import { useActivitiesMaster, useWorkCategoriesMaster } from "../../../hooks/masterHook/useMaster";
import { useProjectDetails } from "../../../hooks/useProjects";
import { useDispatch, useSelector } from "react-redux";
import ProjectRepository from "../../../repositories/ProjectRepository";
import {
  cacheData,
  clearCacheKey,
  getCachedData,
} from "../../../slices/apiDataManager";
import { refreshData } from "../../../slices/localVariablesSlice";
import showToast from "../../../services/toastService";

const taskSchema = z
  .object({
    activityID: z.string().min(1, "Activity is required"),
    workCategoryId: z.string().min(1, "Work Category is required"),
    plannedWork: z.number().min(1, "Planned Work must be greater than 0"),
    completedWork: z.number().min(0, "Completed Work must be greater than 0"),
  })
  .refine(
    (data) =>
      data.completedWork === undefined ||
      data.completedWork <= data.plannedWork,
    {
      message: "Completed Work cannot be greater than Planned Work",
      path: ["completedWork"], // error will show next to this field
    }
  );

const EditActivityModal = ({
  workItem,
  workArea,
  building,
  floor,
  onClose,
}) => {
  const selectedProject = useSelector(
    (store) => store.localVariables.projectId
  );
  const defaultModel = {
    activityID: 0,
    workCategoryId: 0,
    plannedWork: 0,
    completedWork: 0,
  };

  const { projects_Details, refetch } = useProjectDetails(selectedProject);
  const [ActivityUnit, setActivityUnit] = useState("");
  const { activities, loading, error } = useActivitiesMaster();
  const { categories, categoryLoading, categoryError } =
    useWorkCategoriesMaster();
  const [formData, setFormData] = useState(defaultModel);
  const [selectedActivity, setSelectedActivity] = useState(null);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [activityData, setActivityData] = useState([]);
  const [categoryData, setCategoryData] = useState([]);
  const dispatch = useDispatch();

  const {
    register,
    handleSubmit,
    formState: { errors },
    reset,
    setValue,
    getValues,
    watch,
  } = useForm({
    resolver: zodResolver(taskSchema),
    defaultValues: defaultModel,
  });

  const handleActivityChange = (e) => {
    const selectedId = String(e.target.value);
    const selected = activityData.find((a) => a.id === selectedId);
    setSelectedActivity(selected || null);
    setValue("activityID", selectedId);
  };

  const handleCategoryChange = (e) => {
    const selectedId = String(e.target.value);
    const category = categoryData.find((b) => b.id === selectedId);
    setSelectedCategory(category || null);
    setValue("workCategoryId", selectedId);
  };

  const onSubmitForm = async ( data ) =>
  {
    setIsSubmitting(true)
    const updatedProject = { ...projects_Details };
    const finalData = {
      ...data,
      id: workItem?.workItem?.id ?? workItem?.id,
      buildingID: building?.id,
      floorId: floor?.id,
      workAreaId: workArea?.id,
    };

    ProjectRepository.manageProjectTasks([finalData])
      .then((response) => {
        if (response?.data[0]) {
          const { workItemId, workItem } = response.data[0];

          let finalUpdatedWorkItem = null;
          const newProject = {
            ...updatedProject,
            buildings: updatedProject.buildings.map((building) =>
              building.id === finalData.buildingID
                ? {
                    ...building,
                    floors: building.floors.map((floor) =>
                      floor.id === finalData.floorId
                        ? {
                            ...floor,
                            workAreas: floor.workAreas.map((workArea) =>
                              workArea.id === workItem?.workAreaId
                                ? {
                                    ...workArea,
                                    workItems: (() => {
                                      const exists = workArea.workItems.some(
                                        (item) =>
                                          String(
                                            item?.workItem?.id ?? item?.id
                                          ) === String(finalData.id)
                                      );

                                      finalUpdatedWorkItem = workItem;

                                      return exists
                                        ? workArea.workItems.map((item) =>
                                            String(
                                              item?.workItem?.id ?? item?.id
                                            ) === String(finalData.id)
                                              ? workItem
                                              : item
                                          )
                                        : [...workArea.workItems, workItem];
                                    })(),
                                  }
                                : workArea
                            ),
                          }
                        : floor
                    ),
                  }
                : building
            ),
          };
          cacheData("projectInfo", {
            projectId: newProject.id,
            data: newProject,
          });
          resetForm();
          dispatch( refreshData( true ) );
          setIsSubmitting(false)
          showToast("Activity Updated Successfully","success")
          onClose();
        }
      })
      .catch( ( error ) =>
      {
        setIsSubmitting(false)
        const message = error.response.data.message || error.message || "Error Occured During Api Call"
        showToast( message, "error" );
        
      });
  };

  const resetForm = () => {
    setFormData(defaultModel);
    setSelectedActivity(null);
    reset(defaultModel);
  };

  useEffect(() => {
    reset({
      activityID: workItem?.workItem?.activityId || workItem?.activityId || 0,
      workCategoryId:
        workItem?.workItem?.workCategoryId || workItem?.workCategoryId || 0,
      plannedWork:
        workItem?.workItem?.plannedWork || workItem?.plannedWork || 0,
      completedWork:
        workItem?.workItem?.completedWork || workItem?.completedWork || 0,
    });
    return () => reset();
  }, [activities, workItem]);

  const ISselectedActivity = watch("activityID");
  useEffect(() => {
    if (ISselectedActivity) {
      const selected = activities.find((a) => a.id === ISselectedActivity);
      setSelectedActivity(selected || null);
      setActivityUnit(selected?.unitOfMeasurement);
    }
  }, [ISselectedActivity, activities]);

  return (
    <div className="modal-dialog modal-lg modal-simple modal-edit-user">
      <div className="modal-content">
        <div className="modal-body">
          <div className="row">
            <button
              type="button"
              className="btn-close"
              aria-label="Close"
              onClick={onClose}
            />
            <div className="text-center mb-1">
              <h5 className="mb-1">Manage Task</h5>
            </div>
            <form className="row g-2" onSubmit={handleSubmit(onSubmitForm)}>
              {/* Select Building */}
              <div className="col-6 col-md-6">
                <label className="form-label" htmlFor="buildingID">
                  Select Building
                </label>
                <input
                  type="text"
                  className="form-control form-control-sm"
                  value={building?.name}
                  disabled
                />
              </div>

              {/* Select Floor */}
              <div className="col-6 col-md-6">
                <label className="form-label" htmlFor="floorId">
                  Select Floor
                </label>

                <input
                  type="text"
                  className="form-control form-control-sm"
                  value={floor?.floorName}
                  disabled
                />
              </div>

              <div className="col-12 col-md-12">
                <label className="form-label" htmlFor="workAreaId">
                  Select Work Area
                </label>

                <input
                  type="text"
                  className="form-control form-control-sm"
                  value={workArea?.areaName}
                  disabled
                />
              </div>

              {/* Select Activity */}
              <div className="col-12 col-md-12">
                <label className="form-label" htmlFor="activityID">
                  Select Activity
                </label>
                <select
                  id="activityID"
                  className="form-select form-select-sm"
                  {...register("activityID")}
                >
                  {loading ? (
                    <option value="">Loading...</option>
                  ) : (
                    <option disabled>Select Activity</option>
                  )}
                  {activities &&
                    activities.length > 0 &&
                    activities
                      .slice()
                      .sort((a, b) =>
                        (a.activityName || "")?.localeCompare(
                          b.activityName || ""
                        )
                      )
                      .map((activity) => (
                        <option key={activity.id} value={activity.id}>
                          {activity.activityName}
                        </option>
                      ))}
                  {!loading && activities.length === 0 && (
                    <option disabled>No activities available</option>
                  )}
                </select>

                {errors.activityID && (
                  <p className="danger-text">{errors.activityID.message}</p>
                )}
              </div>

              {/* Select Category */}
              <div className="col-12 col-md-12">
                <label className="form-label" htmlFor="activityID">
                  Select Work Category
                </label>
                <select
                  id="workCategoryId"
                  className="form-select form-select-sm"
                  {...register("workCategoryId")}
                >
                  {loading ? (
                    <option value="">Loading...</option>
                  ) : (
                    <option disabled>Select Category</option>
                  )}
                  {categories &&
                    categories.length > 0 &&
                    categories
                      .slice()
                      .sort((a, b) =>
                        (a.name || "")?.localeCompare(
                          b.name || ""
                        )
                      )
                      .map((category) => (
                        <option key={category.id} value={category.id}>
                          {category.name}
                        </option>
                      ))}
                  {!loading && categories.length === 0 && (
                    <option disabled>No categories available</option>
                  )}
                </select>

                {errors.workCategoryId && (
                  <p className="danger-text">{errors.workCategoryId.message}</p>
                )}
              </div>

              {/* Planned Work */}
              {/* {ISselectedActivity && ( */}
              <div className="col-5 col-md-5">
                <label className="form-label" htmlFor="plannedWork">
                  Planned Work
                </label>
                <input
                  {...register("plannedWork", { valueAsNumber: true })}
                  type="number"
                  className="form-control form-control-sm me-2"
                  placeholder="Planned Work"
                />

                {errors.plannedWork && (
                  <p className="danger-text">{errors.plannedWork.message}</p>
                )}
              </div>
              {/* )} */}

              {/* Completed Work */}
              {/* {ISselectedActivity && ( */}
              <div className="col-5 col-md-5">
                <label className="form-label" htmlFor="completedWork">
                  Completed Work
                </label>
                <input
                  {...register("completedWork", { valueAsNumber: true })}
                  type="number"
                  className="form-control form-control-sm me-2"
                  placeholder="Completed Work"
                  disabled={getValues("completedWork") > 0}
                />
                {errors.completedWork && (
                  <p className="danger-text">{errors.completedWork.message}</p>
                )}
              </div>
              {/* )} */}

              {/* Unit */}
              {/* {ISselectedActivity && ( */}
              <div className="col-2 col-md-2">
                <label className="form-label" htmlFor="unit">
                  Unit
                </label>
                <input
                  type="text"
                  disabled
                  className="form-control form-control-sm me-2"
                  value={selectedActivity?.unitOfMeasurement || ""}
                />
              </div>
              {/* )} */}

              <div className="col-12 text-center">
                <button type="submit" className="btn btn-sm btn-primary me-3" disabled={activities.length === 0 || isSubmitting}>
                  {isSubmitting ? "Please Wait.." : "Edit Task"}
                </button>
                <button
                  type="button"
                  className="btn btn-sm btn-label-secondary"
                  onClick={onClose}
                >
                  Cancel
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
};

export default EditActivityModal;