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";

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 greater than 0"),
});

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

const TaskModel = ({
  project,
  onSubmit,
  clearTrigger,
  onClearComplete,
  onClose,
}) => {
  const [formData, setFormData] = useState(defaultModel);
  const [selectedBuilding, setSelectedBuilding] = useState(null);
  const [selectedFloor, setSelectedFloor] = useState(null);
  const [selectedWorkArea, setSelectedWorkArea] = useState(null);
  const [selectedActivity, setSelectedActivity] = useState(null);
  const [selectedCategory, setSelectedCategory] = useState(null);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [activityData, setActivityData] = useState([]);
  const [categoryData, setCategoryData] = useState([]);
  const { activities, loading, error } = useActivitiesMaster();
  const { categories, categoryLoading, categoryError } =
    useWorkCategoriesMaster();

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

  useEffect(() => {
    resetForm();
  }, []);

  const handleBuildingChange = (e) => {
    const { value } = e.target;
    const building = project.buildings.find((b) => b.id === String(value));
    setSelectedBuilding(building);
    setSelectedFloor(null);
    setSelectedWorkArea(null);
    setSelectedActivity(null);
    reset({
      ...defaultModel,
      buildingID: value,
    });
  };

  const handleFloorChange = (e) => {
    const { value } = e.target;
    const floor = selectedBuilding.floors.find((b) => b.id === String(value));
    setSelectedFloor(floor);
    setSelectedWorkArea(null);
    setSelectedActivity(null);
    reset((prev) => ({
      ...prev,
      floorId: value,
      workAreaId: 0,
      activityID: "",
      workCategoryId: categoryData?.[0]?.id?.toString() ?? "",
    }));
  };

  const handleWorkAreaChange = (e) => {
    const { value } = e.target;
    const workArea = selectedFloor.workAreas.find(
      (b) => b.id === String(value)
    );
    setSelectedWorkArea(workArea);
    reset((prev) => ({
      ...prev,
      workAreaId: String(value),
    }));
  };

  const handleActivityChange = (e) => {
    const { value } = e.target;
    const activity = activityData.find((b) => b.id === String(value));
    setSelectedActivity(activity);
    reset((prev) => ({
      ...prev,
      activityID: String(value),
    }));
  };

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

  const onSubmitForm = async (data) => {
    console.log(data);
    setIsSubmitting(true);
    await onSubmit(data);
    setValue("plannedWork", 0);
    setValue("completedWork", 0);
    setValue("activityID", 0);
    setValue("workCategoryId", categoryData?.[0]?.id?.toString() ?? "");
    setIsSubmitting(false);
  };

  const resetForm = () => {
    setFormData(defaultModel);
    setSelectedBuilding(null); // not "0"
    setSelectedFloor(null);
    setSelectedWorkArea(null);
    setSelectedActivity(null);
    setSelectedCategory(categoryData?.[0]?.id?.toString() ?? "");
    reset(defaultModel);
  };

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

  useEffect(() => {
    if (
      !categoryLoading &&
      Array.isArray(categories) &&
      categories.length > 0
    ) {
      const newCategories = categories?.slice()?.sort((a, b) => {
        const nameA = a?.name || "";
        const nameB = b?.name || "";
        return nameA.localeCompare(nameB);
      });
      setCategoryData(newCategories);
      setSelectedCategory(newCategories[0])
    }
  }, [categories, categoryLoading]);

  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>
                <select
                  id="buildingID"
                  className="form-select form-select-sm"
                  {...register("buildingID")}
                  onChange={handleBuildingChange}
                >
                  <option value="0">Select Building</option>
                  {project.buildings
                    ?.filter((building) => building?.name) // Ensure valid name
                    ?.sort((a, b) => a.name?.localeCompare(b.name))
                    ?.map((building) => (
                      <option key={building.id} value={building.id}>
                        {building.name}
                      </option>
                    ))}

                  {project.buildings?.filter((building) => building?.name)
                    .length === 0 && (
                    <option disabled>No buildings found</option>
                  )}
                </select>
                {errors.buildingID && (
                  <p className="danger-text">{errors.buildingID.message}</p>
                )}
              </div>

              {/* Select Floor */}
              {selectedBuilding && (
                <div className="col-6 col-md-6">
                  <label className="form-label" htmlFor="floorId">
                    Select Floor
                  </label>
                  <select
                    id="floorId"
                    className="form-select form-select-sm"
                    {...register("floorId")}
                    onChange={handleFloorChange}
                  >
                    <option value="0">Select Floor</option>
                    {selectedBuilding.floors
                      ?.filter(
                        (floor) =>
                          floor?.floorName && Array.isArray(floor.workAreas)
                      )
                      ?.sort((a, b) => a.floorName.localeCompare(b.floorName))
                      ?.map((floor) => (
                        <option key={floor.id} value={floor.id}>
                          {floor.floorName} - ({floor.workAreas.length} Work
                          Areas)
                        </option>
                      ))}

                    {selectedBuilding.floors?.filter(
                      (floor) =>
                        floor?.floorName && Array.isArray(floor.workAreas)
                    ).length === 0 && <option disabled>No floors found</option>}
                  </select>
                  {errors.floorId && (
                    <p className="danger-text">{errors.floorId.message}</p>
                  )}
                </div>
              )}

              {selectedFloor && (
                <div className="col-12 col-md-12">
                  <label className="form-label" htmlFor="workAreaId">
                    Select Work Area
                  </label>
                  <select
                    id="workAreaId"
                    className="form-select form-select-sm"
                    {...register("workAreaId")}
                    onChange={handleWorkAreaChange}
                  >
                    <option value="0">Select Work Area</option>
                    {selectedFloor.workAreas
                      ?.filter((workArea) => workArea?.areaName)
                      ?.sort((a, b) => a.areaName.localeCompare(b.areaName))
                      ?.map((workArea) => (
                        <option key={workArea.id} value={workArea.id}>
                          {workArea.areaName}
                        </option>
                      ))}

                    {selectedFloor.workAreas?.filter(
                      (workArea) => workArea?.areaName
                    ).length === 0 && (
                      <option disabled>No work areas found</option>
                    )}
                  </select>
                  {errors.workAreaId && (
                    <p className="danger-text">{errors.workAreaId.message}</p>
                  )}
                </div>
              )}

              {selectedWorkArea && (
                <div className="col-12 col-md-12">
                  <label className="form-label">Select Activity</label>
                  <select
                    id="activityID"
                    className="form-select form-select-sm"
                    {...register("activityID")}
                    onChange={handleActivityChange}
                  >
                    <option value="">Select Activity</option>
                    {activityData &&
                      activityData.length > 0 &&
                      activityData
                        ?.slice()
                        ?.sort((a, b) => {
                          const nameA = a?.activityName || "";
                          const nameB = b?.activityName || "";
                          return nameA.localeCompare(nameB);
                        })
                        ?.map((activity) => (
                          <option key={activity.id} value={activity.id}>
                            {activity.activityName ||
                              `Unnamed (id: ${activity.id})`}
                          </option>
                        ))}
                    {!loading && activities.length === 0 && (
                      <option disabled>No activities available</option>
                    )}
                    {loading && <option disabled>Loading...</option>}
                  </select>

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

              {selectedWorkArea && (
                <div className="col-12 col-md-12">
                  <label className="form-label">Select Work Category</label>
                  <select
                    id="workCategoryId"
                    className="form-select form-select-sm"
                    {...register("workCategoryId")}
                    onChange={handleCategoryChange}
                  >
                    {categoryData &&
                      categoryData.length > 0 &&
                      categoryData
                        ?.map((category) => (
                          <option key={category.id} value={category.id}>
                            {category.name || `Unnamed (id: ${category.id})`}
                          </option>
                        ))}
                    {!categoryLoading && categories.length === 0 && (
                      <option disabled>No activities available</option>
                    )}
                    {categoryLoading && <option disabled>Loading...</option>}
                  </select>

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

              {selectedActivity && selectedCategory && (
                <div className="col-5 col-md-5">
                  <label className="form-label" htmlFor="plannedWork">
                    {formData.id !== "0" ? "Modify " : "Enter "} 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>
              )}

              {selectedActivity && selectedCategory && (
                <div className="col-5 col-md-5">
                  <label className="form-label" htmlFor="completedWork">
                    {formData.id !== "0" ? "Modify " : "Enter "} Completed Work
                  </label>
                  <input
                    {...register("completedWork", { valueAsNumber: true })}
                    type="number"
                    className="form-control form-control-sm me-2"
                    placeholder="Completed Work"
                  />
                  {errors.completedWork && (
                    <p className="danger-text">
                      {errors.completedWork.message}
                    </p>
                  )}
                </div>
              )}

              {/* Unit */}
              {selectedActivity && selectedCategory && (
                <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">
                  {isSubmitting ? "Please Wait.." : "Add Task"}
                </button>
                <button
                  type="button"
                  className="btn btn-sm btn-label-secondary"
                  onClick={onClose}
                >
                  Cancel
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
};

export default TaskModel;