import React, { useState, useMemo } from "react";
import {
  useActionOnExpense,
  useExpense,
  useHasAnyPermission,
} from "../../hooks/useExpense";
import { formatUTCToLocalTime } from "../../utils/dateUtils";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { defaultActionValues, ExpenseActionScheam } from "./ExpenseSchema";
import { useExpenseContext } from "../../pages/Expense/ExpensePage";
import { getColorNameFromHex, getIconByFileType } from "../../utils/appUtils";
import { ExpenseDetailsSkeleton } from "./ExpenseSkeleton";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import {
  EXPENSE_REJECTEDBY,
  PROCESS_EXPENSE,
  REVIEW_EXPENSE,
} from "../../utils/constants";
import { useProfile } from "../../hooks/useProfile";
import { useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import Avatar from "../common/Avatar";
import Error from "../common/Error";
import DatePicker from "../common/DatePicker";
import { useEmployeeRoles, useEmployeesName } from "../../hooks/useEmployees";
import EmployeeSearchInput from "../common/EmployeeSearchInput";
import { z } from "zod";
import moment from "moment";
import ExpenseStatusLogs from "./ExpenseStatusLogs";

const ViewExpense = ({ ExpenseId }) => {
  const { data, isLoading, isError, error } = useExpense(ExpenseId);
  const [IsPaymentProcess, setIsPaymentProcess] = useState(false);
  const [clickedStatusId, setClickedStatusId] = useState(null);

  const IsReview = useHasUserPermission(REVIEW_EXPENSE);
  const [imageLoaded, setImageLoaded] = useState({});
  const { setDocumentView } = useExpenseContext();
  const ActionSchema = ExpenseActionScheam(IsPaymentProcess) ?? z.object({});
  const navigate = useNavigate();
  const {
    register,
    handleSubmit,
    setValue,
    reset,
    control,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(ActionSchema),
    defaultValues: defaultActionValues,
  });

  const userPermissions = useSelector(
    (state) => state?.globalVariables?.loginUser?.featurePermissions || []
  );
  const CurrentUser = useSelector(
    (state) => state?.globalVariables?.loginUser?.employeeInfo
  );

  const nextStatusWithPermission = useMemo(() => {
    if (!Array.isArray(data?.nextStatus)) return [];

    return data.nextStatus.filter((status) => {
      const permissionIds = Array.isArray(status?.permissionIds)
        ? status.permissionIds
        : [];

      if (permissionIds.length === 0) return true;
      if (permissionIds.includes(PROCESS_EXPENSE)) {
        setIsPaymentProcess(true);
      }
      return permissionIds.some((id) => userPermissions.includes(id));
    });
  }, [data, userPermissions]);

  const IsRejectedExpense = useMemo(() => {
    return EXPENSE_REJECTEDBY.includes(data?.status?.id);
  }, [data]);

  const isCreatedBy = useMemo(() => {
    return data?.createdBy.id === CurrentUser?.id;
  }, [data, CurrentUser]);

  const { mutate: MakeAction, isPending } = useActionOnExpense(() => {
    setClickedStatusId(null);
    reset();
  });

  const onSubmit = (formData) => {
    const Payload = {
      ...formData,
      reimburseDate: moment
        .utc(formData.reimburseDate, "DD-MM-YYYY")
        .toISOString(),
      expenseId: ExpenseId,
      comment: formData.comment,
    };
    MakeAction(Payload);
  };

  if (isLoading) return <ExpenseDetailsSkeleton />;
  if (isError) return <Error error={error} />;
  const handleImageLoad = (id) => {
    setImageLoaded((prev) => ({ ...prev, [id]: true }));
  };

  return (
    <form className="container px-3" onSubmit={handleSubmit(onSubmit)}>
      <div className="row mb-3">
        <div className="col-12 mb-3">
          <h5 className="fw-semibold">Expense Details</h5>
          <hr />
        </div>
        <div className="text-start mb-2">
          <div className="text-muted">{data?.description}</div>
        </div>
        {/* Row 1 */}
        <div className="col-md-6 mb-3">
          <div className="d-flex">
            <label
              className="form-label me-2 mb-0 fw-semibold text-start"
              style={{ minWidth: "130px" }}
            >
              Transaction Date :
            </label>
            <div className="text-muted">
              {formatUTCToLocalTime(data?.transactionDate)}
            </div>
          </div>
        </div>
        <div className="col-md-6 mb-3">
          <div className="d-flex">
            <label
              className="form-label me-2 mb-0 fw-semibold text-start"
              style={{ minWidth: "130px" }}
            >
              Expense Type :
            </label>
            <div className="text-muted">{data?.expensesType?.name}</div>
          </div>
        </div>

        {/* Row 2 */}
        <div className="col-md-6 mb-3">
          <div className="d-flex">
            <label
              className="form-label me-2 mb-0 fw-semibold text-start"
              style={{ minWidth: "130px" }}
            >
              Supplier :
            </label>
            <div className="text-muted">{data?.supplerName}</div>
          </div>
        </div>
        <div className="col-md-6 mb-3">
          <div className="d-flex">
            <label
              className="form-label me-2 mb-0 fw-semibold text-start"
              style={{ minWidth: "130px" }}
            >
              Amount :
            </label>
            <div className="text-muted">₹ {data.amount}</div>
          </div>
        </div>

        {/* Row 3 */}
        <div className="col-md-6 mb-3">
          <div className="d-flex">
            <label
              className="form-label me-2 mb-0 fw-semibold text-start"
              style={{ minWidth: "130px" }}
            >
              Payment Mode :
            </label>
            <div className="text-muted">{data?.paymentMode?.name}</div>
          </div>
        </div>
        <div className="col-md-6 mb-3">
          <div className="d-flex">
            <label
              className="form-label me-2 mb-0 fw-semibold text-start"
              style={{ minWidth: "130px" }}
            >
              GST Number :
            </label>
            <div className="text-muted">
              {data?.gstNumber}
            </div>
          </div>
        </div>
       

        {/* Row 4 */}
        <div className="col-md-6 mb-3">
          <div className="d-flex">
            <label
              className="form-label me-2 mb-0 fw-semibold text-start"
              style={{ minWidth: "130px" }}
            >
              Status :
            </label>
            <span
              className={`badge bg-label-${
                getColorNameFromHex(data?.status?.color) || "secondary"
              }`}
            >
              {data?.status?.name}
            </span>
          </div>
        </div>
        <div className="col-md-6 mb-3">
          <div className="d-flex">
            <label
              className="form-label me-2 mb-0 fw-semibold text-start"
              style={{ minWidth: "130px" }}
            >
              Pre-Approved :
            </label>
            <div className="text-muted">{data.preApproved ? "Yes" : "No"}</div>
          </div>
        </div>

        <div className="col-md-6 mb-3">
          <div className="d-flex">
            <label
              className="form-label me-2 mb-0 fw-semibold text-start"
              style={{ minWidth: "130px" }}
            >
              Project :
            </label>
            <div className="text-muted">{data?.project?.name}</div>
          </div>
        </div>
        <div className="col-md-6 mb-3">
          <div className="d-flex">
            <label
              className="form-label me-2 mb-0 fw-semibold text-start"
              style={{ minWidth: "130px" }}
            >
              Created At :
            </label>
            <div className="text-muted">
              {formatUTCToLocalTime(data?.createdAt, true)}
            </div>
          </div>
        </div>

        {/* Row 6 */}
        {data.createdBy && (
          <div className="col-md-6 text-start">
            <div className="d-flex align-items-center">
              <label
                className="form-label me-2 mb-0 fw-semibold"
                style={{ minWidth: "130px" }}
              >
                Created By :
              </label>
              <div className="d-flex align-items-center gap-1">
                <Avatar
                  size="xs"
                  classAvatar="m-0"
                  firstName={data.createdBy?.firstName}
                  lastName={data.createdBy?.lastName}
                />
                <span className="text-muted">
                  {`${data.createdBy?.firstName ?? ""} ${
                    data.createdBy?.lastName ?? ""
                  }`.trim() || "N/A"}
                </span>
              </div>
            </div>
          </div>
        )}
         <div className="col-md-6 mb-3">
          <div className="d-flex">
            <label
              className="form-label me-2 mb-0 fw-semibold text-start"
              style={{ minWidth: "130px" }}
            >
              Paid By :
            </label>
            <div className="text-muted">
              {data?.paidBy?.firstName} {data?.paidBy?.lastName}
            </div>
          </div>
        </div>
      </div>

      <div className="col-12 text-start">
        <label className="form-label me-2 mb-2 fw-semibold">Attachment :</label>

        <div className="d-flex flex-wrap gap-2">
          {data?.documents?.map((doc) => {
            const isImage = doc.contentType?.includes("image");

            return (
              <div
                key={doc.documentId}
                className="border rounded  hover-scale p-2 d-flex flex-column align-items-center"
                style={{
                  width: "80px",
                  cursor: isImage ? "pointer" : "default",
                }}
                onClick={() => {
                  if (isImage) {
                    setDocumentView({
                      IsOpen: true,
                      Image: doc.preSignedUrl,
                    });
                  }
                }}
              >
                <i
                  className={`bx ${getIconByFileType(doc.contentType)}`}
                  style={{ fontSize: "30px" }}
                ></i>
                <small
                  className="text-center text-tiny text-truncate w-100"
                  title={doc.fileName}
                >
                  {doc.fileName}
                </small>
              </div>
            );
          })}
        </div>
      </div>

      {data.expensesReimburse && (
        <div className="row text-start">
          <div className="col-md-6 mb-sm-0 mb-2">
            <label className="form-label me-2 mb-0 fw-semibold">
              Transaction ID :
            </label>
            {data.expensesReimburse.reimburseTransactionId || "N/A"}
          </div>
          <div className="col-md-6 ">
            <label className="form-label me-2 mb-0 fw-semibold">
              Reimburse Date :
            </label>
            {formatUTCToLocalTime(data.expensesReimburse.reimburseDate)}
          </div>

          {data.expensesReimburse && (
            <>
              <div className="col-md-6  d-flex align-items-center">
                <label className="form-label me-2 mb-0 fw-semibold">
                  Reimburse By :
                </label>
                <Avatar
                  size="xs"
                  classAvatar="m-0 me-1"
                  firstName={data?.expensesReimburse?.reimburseBy?.firstName}
                  lastName={data?.expensesReimburse?.reimburseBy?.lastName}
                />
                <span className="text-muted">
                  {`${data?.expensesReimburse?.reimburseBy?.firstName} ${data?.expensesReimburse?.reimburseBy?.lastName}`.trim()}
                </span>
              </div>
            </>
          )}
        </div>
      )}
     <hr className="divider my-1  divider-primary"  />

      {Array.isArray(data?.nextStatus) && data.nextStatus.length > 0 && (
        <>
          {IsPaymentProcess && nextStatusWithPermission?.length > 0 && (
            <div className="row">
              <div className="col-12 col-md-6 text-start">
                <label className="form-label">Transaction Id </label>
                <input
                  type="text"
                  className="form-control form-control-sm"
                  {...register("reimburseTransactionId")}
                />
                {errors.reimburseTransactionId && (
                  <small className="danger-text">
                    {errors.reimburseTransactionId.message}
                  </small>
                )}
              </div>
              <div className="col-12 col-md-6 text-start">
                <label className="form-label">Transaction Date </label>
                <DatePicker
                  name="reimburseDate"
                  control={control}
                  minDate={data?.transactionDate}
                />
                {errors.reimburseDate && (
                  <small className="danger-text">
                    {errors.reimburseDate.message}
                  </small>
                )}
              </div>
              <div className="col-12 col-md-6 text-start">
                <label className="form-label">Reimburse By </label>
                <EmployeeSearchInput
                  control={control}
                  name="reimburseById"
                  projectId={null}
                />
              </div>
            </div>
          )}
          <div className="col-12 mb-3 text-start">
            {((nextStatusWithPermission.length > 0 && !IsRejectedExpense) ||
              (IsRejectedExpense && isCreatedBy)) && (
              <>
                <label className="form-label me-2 mb-0">Comment:</label>
                <textarea
                  className="form-control form-control-sm"
                  {...register("comment")}
                  rows="2"
                />
                {errors.comment && (
                  <small className="danger-text">
                    {errors.comment.message}
                  </small>
                )}
              </>
            )}

            {nextStatusWithPermission?.length > 0 &&
              (!IsRejectedExpense || isCreatedBy) && (
                <div className="text-center flex-wrap gap-2 my-2">
                  {nextStatusWithPermission.map((status, index) => (
                    <button
                      key={status.id || index}
                      type="button"
                      onClick={() => {
                        setClickedStatusId(status.id);
                        setValue("statusId", status.id);
                        handleSubmit(onSubmit)();
                      }}
                      disabled={isPending}
                      className="btn btn-primary btn-sm cursor-pointer mx-2 border-0"
                    >
                      {isPending && clickedStatusId === status.id
                        ? "Please Wait..."
                        : status.displayName || status.name}
                    </button>
                  ))}
                </div>
              )}
          </div>
        </>
      )}

      <ExpenseStatusLogs data={data} />
    </form>
  );
};

export default ViewExpense;