import React, { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import {
  useActivitiesMaster,
  useWorkCategoriesMaster,
} from "../../../hooks/masterHook/useMaster";
import { useManageTask } from "../../../hooks/useProjects";
import showToast from "../../../services/toastService";

const taskSchema = z.object({
  buildingID: z.string().min(1, "Building is required"),
  floorId: z.string().min(1, "Floor is required"),
  workAreaId: z.string().min(1, "Work Area is required"),
  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 0 or more"),
  comment: z.string(),
});

const defaultModel = {
  id: null,
  buildingID: "",
  floorId: "",
  workAreaId: "",
  activityID: "",
  workCategoryId: "",
  plannedWork: 0,
  completedWork: 0,
  comment: "",
};

const TaskModel = ({ project, onSubmit, onClose }) => {
  const { activities, loading: activityLoading } = useActivitiesMaster();
  const { categories, categoryLoading } = useWorkCategoriesMaster();

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

  const [isSubmitting, setIsSubmitting] = useState(false);
  const [activityData, setActivityData] = useState([]);
  const [categoryData, setCategoryData] = useState([]);

  const watchBuildingId = watch("buildingID");
  const watchFloorId = watch("floorId");
  const watchWorkAreaId = watch("workAreaId");
  const watchActivityId = watch("activityID");
  const watchCategoryId = watch("workCategoryId");

  const selectedBuilding = project?.find((b) => b.id === watchBuildingId);
  const selectedFloor = selectedBuilding?.floors?.find(
    (f) => f.id === watchFloorId
  );
  const selectedWorkArea = selectedFloor?.workAreas?.find(
    (w) => w.id === watchWorkAreaId
  );
  const selectedActivity = activityData?.find((a) => a.id === watchActivityId);
  const selectedCategory = categoryData?.find((c) => c.id === watchCategoryId);

  const { mutate: CreateTask, isPending } = useManageTask({
    onSuccessCallback: (response) => {
      showToast(response?.message, "success");
      onClose?.();
    },
  });
  useEffect(() => {
    reset(defaultModel);
  }, []);

  useEffect(() => {
    if (Array.isArray(activities) && activities.length > 0) {
      setActivityData(activities);
    }
  }, [activities]);

  useEffect(() => {
    if (Array.isArray(categories) && categories.length > 0) {
      const sorted = [...categories].sort((a, b) =>
        (a?.name || "").localeCompare(b?.name || "")
      );
      setCategoryData(sorted);
      setValue("workCategoryId", sorted?.[0]?.id?.toString() ?? "");
    }
  }, [categories]);

  const onSubmitForm = async (data) => {
       const payload = [data];
      CreateTask({payload:payload,buildingId: data.buildingID,
      floorId: data.floorId,
      workAreaId: data.workAreaId, PreviousPlannedWork:0,previousCompletedWork:0});
  };

  return (
    <form className="row g-2" onSubmit={handleSubmit(onSubmitForm)}>
      <div className="text-center mb-1">
        <h5 className="mb-1">Manage Task</h5>
      </div>
      <div className="col-6">
        <label className="form-label">Select Building</label>
        <select
          className="form-select form-select-sm"
          {...register("buildingID")}
        >
          <option value="">Select Building</option>
          {project
            ?.filter((b) => b?.buildingName)
            ?.sort((a, b) => a?.buildingName.localeCompare(b.buildingName))
            ?.map((b) => (
              <option key={b.id} value={b.id}>
                {b.buildingName}
              </option>
            ))}
        </select>
        {errors.buildingID && (
          <p className="danger-text">{errors.buildingID.message}</p>
        )}
      </div>

      {selectedBuilding && (
        <div className="col-6">
          <label className="form-label">Select Floor</label>
          <select
            className="form-select form-select-sm"
            {...register("floorId")}
          >
            <option value="">Select Floor</option>
            {selectedBuilding.floors
              ?.sort((a, b) => a.floorName.localeCompare(b.floorName))
              ?.map((f) => (
                <option key={f.id} value={f.id}>
                  {f.floorName}
                </option>
              ))}
          </select>
          {errors.floorId && (
            <p className="danger-text">{errors.floorId.message}</p>
          )}
        </div>
      )}

      {selectedFloor && (
        <div className="col-12">
          <label className="form-label">Select Work Area</label>
          <select
            className="form-select form-select-sm"
            {...register("workAreaId")}
          >
            <option value="">Select Work Area</option>
            {selectedFloor.workAreas
              ?.sort((a, b) => a.areaName.localeCompare(b.areaName))
              ?.map((w) => (
                <option key={w.id} value={w.id}>
                  {w.areaName}
                </option>
              ))}
          </select>
          {errors.workAreaId && (
            <p className="danger-text">{errors.workAreaId.message}</p>
          )}
        </div>
      )}

      {selectedWorkArea && (
        <div className="col-12">
          <label className="form-label">Select Activity</label>
          <select
            className="form-select form-select-sm"
            {...register("activityID")}
          >
            <option value="">Select Activity</option>
            {activityData.map((a) => (
              <option key={a.id} value={a.id}>
                {a.activityName}
              </option>
            ))}
          </select>
          {errors.activityID && (
            <p className="danger-text">{errors.activityID.message}</p>
          )}
        </div>
      )}

      {selectedWorkArea && (
        <div className="col-12">
          <label className="form-label">Select Work Category</label>
          <select
            className="form-select form-select-sm"
            {...register("workCategoryId")}
          >
            {categoryData.map((c) => (
              <option key={c.id} value={c.id}>
                {c.name}
              </option>
            ))}
          </select>
          {errors.workCategoryId && (
            <p className="danger-text">{errors.workCategoryId.message}</p>
          )}
        </div>
      )}

      {selectedActivity && selectedCategory && (
        <>
          <div className="col-5">
            <label className="form-label">Planned Work</label>
            <input
              type="number"
              className="form-control form-control-sm"
              {...register("plannedWork", { valueAsNumber: true })}
            />
            {errors.plannedWork && (
              <p className="danger-text">{errors.plannedWork.message}</p>
            )}
          </div>
          <div className="col-5">
            <label className="form-label">Completed Work</label>
            <input
              type="number"
              className="form-control form-control-sm"
              {...register("completedWork", { valueAsNumber: true })}
            />
            {errors.completedWork && (
              <p className="danger-text">{errors.completedWork.message}</p>
            )}
          </div>
          <div className="col-2">
            <label className="form-label">Unit</label>
            <input
              type="text"
              className="form-control form-control-sm"
              disabled
              value={selectedActivity?.unitOfMeasurement || ""}
            />
          </div>
        </>
      )}

      {selectedActivity && selectedCategory && (
        <div className="col-12">
          <label className="form-label">Comment</label>
          <textarea
            className="form-control"
            rows="2"
            {...register("comment")}
          />
          {errors.comment && (
            <p className="danger-text">{errors.comment.message}</p>
          )}
        </div>
      )}

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

export default TaskModel;
