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

const subTaskSchema = z.object({
  activityId: z.string().min(1, "Activity is required"),
  workCategoryId: z.string().min(1, "Category is required"),
  plannedWork: z.number().min(1, "Planned work is required"),
  completedWork: z.number().min(0, "Completed work cannot be negative"),
  comment: z.string().min(1, "Comment is required"),
});

const SubTask = ({ activity, onClose }) => {
  const [selectedCategory, setSelectedCategory] = useState(null);
  const [categoryData, setCategoryData] = useState([]);
  const { activities, loading } = useActivitiesMaster();
  const { categories, categoryLoading } = useWorkCategoriesMaster();
  const { Task, loading: TaskLoading } = useTaskById(activity?.id);
  const {
    register,
    handleSubmit,
    formState: { errors },
    reset,
    setValue,
    watch,
  } = useForm({
    resolver: zodResolver(subTaskSchema),
  });
  const selectedActivityId = watch("activityId");
  const selectedActivity = activities?.find((a) => a.id === selectedActivityId);
  const { mutate: createSubTask, isPending } = useManageTask({
    onSuccessCallback: () => {
      showToast("Sub Task Created Successfully", "success");
      reset();
      onClose();
    },
  });

  useEffect(() => {
    setCategoryData(categories);
  }, [categories]);

  useEffect(() => {
    if (!TaskLoading && (Task?.workItem || activity)) {
      reset({
        workCategoryId: Task?.workItem?.workCategoryId || "",
        activityId:
          Task?.workItem?.activityId || activity?.workItem?.activityId,
        plannedWork: Number(
          Task?.notApprovedTask || Task?.workItem?.plannedWork || 0
        ),
        completedWork: 0,
        comment: "",
      });
    }
  }, [TaskLoading, Task, activity, reset, loading]);

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

  const onSubmitForm = async (formData) => {
    let data = {
      workAreaID: Task.workItem.workAreaId,
      workCategoryId: formData.workCategoryId,
      activityID: formData.activityId,
      plannedWork: formData.plannedWork,
      completedWork: formData.completedWork,
      parentTaskId: activity?.id,
      comment: formData.comment,
    };

    const payload = [data];
    let buildingId = activity.workItem.workArea.floor.building.id;
    let floorId = activity.workItem.workArea.floor.id;
    let workAreaId = activity.workItem.workArea.id;
    createSubTask({
      payload: payload,
      buildingId: buildingId,
      floorId: floorId,
      workAreaId: workAreaId,
      PreviousPlannedWork:0,
      previousCompletedWork:0
    });
  };
  return (
    <div className="container-xxl my-1">
      <p className="fw-semibold">Create Sub Task</p>
      <form className="row g-2" onSubmit={handleSubmit(onSubmitForm)}>
        <div className="col-6">
          <label className="form-label">Building</label>
          <input
            type="text"
            className="form-control form-control-sm"
            value={activity?.workItem?.workArea?.floor?.building?.name || ""}
            disabled
          />
        </div>

        <div className="col-6">
          <label className="form-label">Floor</label>
          <input
            type="text"
            className="form-control form-control-sm"
            value={activity?.workItem?.workArea?.floor?.floorName || ""}
            disabled
          />
        </div>

        <div className="col-12">
          <label className="form-label">Work Area</label>
          <input
            type="text"
            className="form-control form-control-sm"
            value={activity?.workItem?.workArea?.areaName || ""}
            disabled
          />
        </div>

        <div className="col-12">
          <label className="form-label">Work Category</label>
          <select
            className="form-select form-select-sm"
            {...register("workCategoryId")}
            onChange={handleCategoryChange}
          >
            <option value="">
              {categoryLoading ? "Loading..." : "-- Select Category --"}
            </option>
            {categoryData.map((category) => (
              <option key={category.id} value={category.id}>
                {category.name}
              </option>
            ))}
          </select>
          {errors.workCategoryId && (
            <div className="danger-text">{errors.workCategoryId.message}</div>
          )}
        </div>
        <div className="col-12">
          <label className="form-label">Select Activity</label>
          <select
            className="form-select form-select-sm"
            {...register("activityId")}
            disabled
          >
            <option value="">
              {loading ? "Loading..." : "-- Select Activity --"}
            </option>

            {!loading &&
              activities?.map((activity) => (
                <option key={activity.id} value={activity.id}>
                  {activity.activityName}
                </option>
              ))}
          </select>
          {errors.activityId && (
            <div className="danger-text">{errors.activityId.message}</div>
          )}
        </div>

        <div className="col-4">
          <label className="form-label">Planned Work</label>
          <input
            type="number"
            className="form-control form-control-sm"
            {...register("plannedWork", { valueAsNumber: true })}
          />
          {errors.plannedWork && (
            <div className="danger-text">{errors.plannedWork.message}</div>
          )}
        </div>

        <div className="col-4">
          <label className="form-label">Completed Work</label>
          <input
            type="number"
            className="form-control form-control-sm"
            {...register("completedWork")}
            disabled
          />
          {errors.completedWork && (
            <div className="danger-text">{errors.completedWork.message}</div>
          )}
        </div>

        <div className="col-4">
          <label className="form-label">Unit</label>
          <input
            type="text"
            className="form-control form-control-sm"
            value={selectedActivity?.unitOfMeasurement || ""}
            disabled
          />
        </div>

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

        <div className="col-12 text-center">
          <button
            type="submit"
            className="btn btn-sm btn-primary me-2"
            disabled={isPending}
          >
            {isPending ? "Please wait..." : "Submit"}
          </button>
          <button
            type="button"
            className="btn btn-sm btn-secondary"
            onClick={() => onClose()}
            disabled={isPending}
          >
            Cancel
          </button>
        </div>
      </form>
    </div>
  );
};

export default SubTask;