import React, { useEffect, useState, useRef } from "react";
import moment from "moment";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { TasksRepository } from "../../repositories/TaskRepository";
import showToast from "../../services/toastService";
import Avatar from "../common/Avatar";
import { getBgClassFromHash } from "../../utils/projectStatus";
import { cacheData, getCachedData } from "../../slices/apiDataManager";
import ImagePreview from "../common/ImagePreview";
import { useAuditStatus, useSubmitTaskComment } from "../../hooks/useTasks";
import Label from "../common/Label";

const ReportTaskComments = ({
  commentsData,
  closeModal,
  actionAllow = false,
  handleCloseAction,
}) => {
  const defaultCompletedTask = Number(commentsData?.completedTask) || 0;
  const schema = actionAllow
    ? z.object({
        comment: z.string().min(1, "Comment cannot be empty"),
        workStatus: z
          .string()
          .nonempty({ message: "Audit status is required" })
          .default(""),
        approvedTask: z.preprocess(
          (val) =>
            val === "" || val === null || Number.isNaN(val)
              ? undefined
              : Number(val),
          z
            .number({
              required_error: "Completed Work must be a number",
              invalid_type_error: "Completed Work must be a number",
            })
            .min(0, "Completed Work must be greater than 0")
            .max(defaultCompletedTask, {
              message: `Completed task cannot exceed: ${defaultCompletedTask}`,
            })
        ),
      })
    : z.object({
        comment: z.string().min(1, "Comment cannot be empty"),
      });

  const [loading, setloading] = useState(false);
  const [comments, setComment] = useState([]);
  const { status, loading: auditStatusLoading } = useAuditStatus();
  const [ IsNeededSubTask, setIsNeededSubTask ] = useState( false );
    const { submitComment, isPending } = useSubmitTaskComment({
    actionAllow,
    onSuccessCallback: (data) => {
      setComment((prev) => [...prev, data]);
      reset();
      if ( actionAllow )
      {
        handleCloseAction(IsNeededSubTask);
      } 
    },
  });

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

  const containerRef = useRef(null);
  const firstRender = useRef(true);
  useEffect(() => {
    const taskList = getCachedData("taskList");
    if (taskList && taskList.data && commentsData?.id) {
      const currentTask = taskList.data.find(
        (task) => task.id === commentsData.id
      );
      if (currentTask && currentTask.comments) {
        setComment(currentTask.comments);
      } else {
        setComment(commentsData?.comments || []);
      }
    } else {
      setComment(commentsData?.comments || []);
    }
    firstRender.current = true;
  }, [commentsData]);

  useEffect(() => {
    if (!firstRender.current && containerRef.current) {
      containerRef.current.scrollTop = containerRef.current.scrollHeight;
    } else {
      firstRender.current = false;
    }
  }, [comments]);

  const onSubmit = (formData) => {
    submitComment({ data: formData, commentsData });
  };
  const selectedAuditStatus = watch("workStatus");

  useEffect(() => {
    reset({
      approvedTask: defaultCompletedTask || 0,
    });
  }, [defaultCompletedTask]);

  const completed_Task = watch("approvedTask")
  return (
    <div className="p-2 p-sm-1">
      <div className="modal-body p-sm-4 p-0">
        <h5 className=" text-center mb-2">Activity Summary</h5>

        <div className="d-flex text-start align-items-start">
          <div className="d-flex me-2">
            <i className="bx bx-map me-2 bx-sm"></i>
            <strong>Location:</strong>
          </div>
          <div>
            {`${commentsData?.workItem?.workArea?.floor?.building?.name}`}{" "}
            <i className="bx bx-chevron-right"></i>{" "}
            {`${commentsData?.workItem?.workArea?.floor?.floorName}`}{" "}
            <i className="bx bx-chevron-right"></i>{" "}
            {`${commentsData?.workItem?.workArea?.areaName}`}{" "}
            <i className="bx bx-chevron-right"></i>{" "}
            {`${commentsData?.workItem?.activityMaster?.activityName}`}
          </div>
        </div>

        <div className="row">
          <div className="col-12 col-sm-6">
            {commentsData?.assignedBy && (
              <div className="fw-bold my-2 text-start d-flex align-items-center">
                <i className="bx bx-user me-2 bx-sm"></i>
                <span className="me-2">Assigned By:</span>
                <span className="fw-normal">
                  {commentsData.assignedBy.firstName}{" "}
                  {commentsData.assignedBy.lastName}
                </span>
              </div>
            )}
          </div>

          <div className="col-12 col-sm-6">
            {commentsData.reportedBy && (
              <div className="fw-bold  text-start d-flex align-items-center">
                <i className="bx bx-user-check bx-lg me-1"></i>
                <span className="me-2">Reported By:</span>
                <div className="d-flex align-items-center fw-normal">
                  <Avatar
                    firstName={commentsData.reportedBy.firstName}
                    lastName={commentsData.reportedBy.lastName}
                    size="xs"
                    className="me-1"
                  />
                  {commentsData.reportedBy.firstName +
                    " " +
                    commentsData.reportedBy.lastName}
                </div>
              </div>
            )}
          </div>
        </div>

        <div className="row">
          <div className="col-12 col-sm-6">
            <div className="fw-bold my-2 text-start d-flex align-items-center">
              <i className="fa fa-tasks fs-6 me-2"></i>
              <span className="me-2">Planned Work:</span>
              <span className="fw-normal">
                {commentsData?.plannedTask}{" "}
                {commentsData?.workItem?.activityMaster?.unitOfMeasurement}
              </span>
            </div>
          </div>

          <div className="col-12 col-sm-6">
            {commentsData?.reportedDate != null && (
              <div className="fw-bold my-2 text-start d-flex align-items-center">
                <i className="bx bx-task me-2"></i>
                <span className="me-2">Completed Work:</span>
                <span className="fw-normal">
                  {commentsData?.completedTask}{" "}
                  {commentsData?.workItem?.activityMaster?.unitOfMeasurement}
                </span>
              </div>
            )}
          </div>
        </div>

        <div className="d-flex align-items-center flex-wrap">
          <p className="fw-bold text-start m-0 me-1">
            <i className="fa-solid me-2  fs-6 fa-users-gear"></i>Team :
          </p>
          <div className="d-flex flex-wrap align-items-center gap-2">
            {commentsData?.teamMembers?.map((member, idx) => (
              <span key={idx} className="d-flex align-items-center">
                <Avatar
                  firstName={member?.firstName}
                  lastName={member?.lastName}
                  size="xs"
                />
                {member?.firstName + " " + member?.lastName}
              </span>
            ))}
          </div>
        </div>

        <div className="fw-bold my-2 text-start d-flex">
          <div className="d-flex ">
            <i className="fa-solid fa-note-sticky me-3 fs-6"></i>Note:
          </div>
          <div className="fw-normal ms-2">{commentsData?.description}</div>
        </div>

        {commentsData?.approvedBy && (
          <>
            <hr className="my-1" />
            <div className="row">
              <div className="col-12 col-sm-6">
                {commentsData.approvedBy && (
                  <div className="fw-bold  text-start d-flex align-items-center">
                    <i className="bx bx-user-check bx-lg me-1"></i>
                    <span className="me-2">Approved By:</span>
                    <div className="d-flex align-items-center fw-normal">
                      <Avatar
                        firstName={commentsData.approvedBy.firstName}
                        lastName={commentsData.approvedBy.lastName}
                        size="xs"
                        className="me-1"
                      />
                      {commentsData.approvedBy.firstName +
                        " " +
                        commentsData.approvedBy.lastName}
                    </div>
                  </div>
                )}
              </div>

              <div className="col-12 col-sm-6">
                {commentsData?.workStatus != null && (
                  <div className="fw-bold my-2 text-start d-flex align-items-center">
                    <i className="bx bx-time-five me-2"></i>
                    <span className="me-2">Work Status :</span>
                    <span className="fw-normal">
                      {commentsData?.workStatus.name}
                      {/* {commentsData?.} */}
                    </span>
                  </div>
                )}
              </div>
            </div>
            <div className="col-12 d-flex">
              <span className="fw-bold">Total Approved : </span>
              <span className="ms-2">{commentsData?.completedTask}</span>
            </div>
          </>
        )}

        {commentsData?.reportedPreSignedUrls?.length > 0 && (
          <>
            <p className="fw-bold m-0 text-start">
              <i className="fa-solid fs-6 fa-paperclip me-3"></i>Attachment :
            </p>
            <div className=" text-start ms-3">
              <ImagePreview
                IsReported={true}
                images={commentsData?.reportedPreSignedUrls}
              />
            </div>
          </>
        )}

        <form onSubmit={handleSubmit(onSubmit)} className="text-start">
          {actionAllow && !commentsData.approvedBy && (
            <>
              <div className="row align-items-end my-1">
                <div className="col-6 col-sm-4 text-start">
                  <label>Completed</label>
                  <input
                    className="form-control form-control-sm"
                    {...register("approvedTask")}
                    type="number"
                  />
                  {errors.approvedTask && (
                    <p className="danger-text m-0">
                      {errors.approvedTask.message}
                    </p>
                  )}
                </div>
                <div className="col-6 col-sm-4 text-start align-items-end m-0">
                  <Label htmlFor="workStatus" className="form-label" required>
                    Audit Status
                  </Label>
                  <select
                    id="workStatus"
                    className={`form-select form-select-sm`}
                    {...register("workStatus")}
                    defaultValue=""
                    onChange={(e) => setValue("workStatus", e.target.value)}
                  >
                    <option value="" disabled>
                      Select Status
                    </option>
                    {auditStatusLoading ? (
                      <option disabled>Loading...</option>
                    ) : (
                      status.map((stat) => (
                        <option key={stat.id} value={stat.id}>
                          {stat.name}
                        </option>
                      ))
                    )}
                  </select>
                  {errors.workStatus && (
                    <div className="danger-text">
                      {errors.workStatus.message}
                    </div>
                  )}
                </div>
              </div>
            </>
          )}
          <i className="bx bx-comment-detail me-2"></i>
          <label className="fw-bold text-start my-1">Add comment :</label>
          <textarea
            {...register("comment")}
            className="form-control"
            id="exampleFormControlTextarea1"
            placeholder="Leave comment"
          />
          {errors.comment && (
            <div className="danger-text">{errors.comment.message}</div>
          )}
          <div
            className={` ${
              actionAllow && !commentsData.approvedBy
                ? " d-flex justify-content-between align-items-center"
                : "text-end"
            } mt-2`}
          >
            <div
              className={`form-check ${
                !(actionAllow && !commentsData.approvedBy && defaultCompletedTask > completed_Task ) && "d-none"
              } `}
            >
              <input
                className="form-check-input"
                type="checkbox"
                onChange={(e) => setIsNeededSubTask((e) => !e)}
                value={IsNeededSubTask}
                id="defaultCheck1"
              />
              <label className="form-check-label" htmlFor="username">
                Create Subtask
              </label>
            </div>
            <span>
              <button
                type="button"
                className="btn btn-sm btn-label-secondary mt-5"
                onClick={closeModal}
                data-bs-dismiss="modal"
                disabled={isPending}
              >
                Close
              </button>
              <button
                type="submit"
                className="btn btn-sm btn-primary ms-2 mt-5"
                disabled={isPending}
              >
                {isPending
                  ? actionAllow
                    ? "Please Wait..."
                    : "Send..."
                  : actionAllow
                  ? "Submit"
                  : "Comment"}
              </button>
            </span>
          </div>  
        </form>

        <ul
          className="list-group px-0 mx-0 overflow-auto border-0"
          ref={containerRef}
        >
          {comments &&
            comments
              ?.slice()
              .reverse()
              .map((data, idx) => {
                const fullName = `${data?.employee?.firstName} ${data?.employee?.lastName}`;
                return (
                  <li
                    className={`list-group-item list-group-item-action border-none my-1 p-1`}
                    key={idx}
                  >
                    <div
                      className={`li-wrapper d-flex justify-content-start align-items-center my-0`}
                    >
                      <div className="avatar avatar-xs me-1">
                        <span
                          className={`avatar-initial rounded-circle bg-label-primary`}
                        >
                          {`${data?.employee?.firstName?.slice(
                            0,
                            1
                          )} ${data?.employee?.lastName?.slice(0, 1)}`}
                        </span>
                      </div>

                      <div
                        className={`d-flex align-items-center justify-content-start`}
                      >
                        <p className={`mb-0 fw-semibold me-2`}>{fullName}</p>
                        <p
                          className={`text-secondary m-0`}
                          style={{ fontSize: "10px" }}
                        >
                          {moment.utc(data?.commentDate).local().fromNow()}
                        </p>
                      </div>
                    </div>
                    <p className={`ms-7 text-start mb-0 text-body`}>
                      {data?.comment}
                    </p>
                    {data?.preSignedUrls?.length > 0 && (
                      <div className="ps-7 text-start ">
                        <small className="">Attachment</small>
                        <ImagePreview
                          images={data?.preSignedUrls}
                          IsReported={true}
                        />
                      </div>
                    )}
                  </li>
                );
              })}
        </ul>
      </div>
    </div>
  );
};

export default ReportTaskComments;