import { useMemo, useState } from "react";
import {
  useActionOnExpense,
  useActionOnPaymentRequest,
  usePaymentRequestDetail,
} from "../../hooks/useExpense";
import {
  formatCurrency,
  formatFigure,
  getColorNameFromHex,
  getIconByFileType,
  localToUtc,
} from "../../utils/appUtils";
import { formatUTCToLocalTime } from "../../utils/dateUtils";
import Avatar from "../common/Avatar";
import DatePicker from "../common/DatePicker";
import EmployeeSearchInput from "../common/EmployeeSearchInput";
import Error from "../common/Error";
import {
  defaultActionValues,
  ExpenseActionScheam,
} from "../Expenses/ExpenseSchema";
import { ExpenseDetailsSkeleton } from "../Expenses/ExpenseSkeleton";
import ExpenseStatusLogs from "../Expenses/ExpenseStatusLogs";
import { useSelector } from "react-redux";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { useNavigate } from "react-router-dom";
import { usePaymentRequestContext } from "../../pages/PaymentRequest/PaymentRequestPage";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import {
  EXPENSE_PROCESSED,
  EXPENSE_REJECTEDBY,
  EXPENSE_STATUS,
  PROCESS_EXPENSE,
  REVIEW_EXPENSE,
} from "../../utils/constants";
import Label from "../common/Label";
import { FilelistView } from "../Expenses/Filelist";
import PaymentStatusLogs from "./PaymentStatusLogs";
import {
  defaultPRActionValues,
  PaymentRequestActionScheam,
} from "./PaymentRequestSchema";
import ActionPaymentRequest from "./ActionPaymentRequest";

const ViewPaymentRequest = ({ requestId }) => {
  const [IsPaymentProcess, setIsPaymentProcess] = useState(false);
  const [clickedStatusId, setClickedStatusId] = useState(null);
  const [imageLoaded, setImageLoaded] = useState({});
  const IsReview = useHasUserPermission(REVIEW_EXPENSE);
  const navigate = useNavigate();

  const { data, isLoading, isError, error, isFetching } =
    usePaymentRequestDetail(requestId);

  const { setDocumentView, setModalSize, setVieRequest, setIsExpenseGenerate } =
    usePaymentRequestContext();
  const ActionSchema =
    PaymentRequestActionScheam(IsPaymentProcess, data?.createdAt) ??
    z.object({});

  const {
    register,
    handleSubmit,
    setValue,
    reset,
    control,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(ActionSchema),
    defaultValues: defaultPRActionValues,
  });

  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 isRejectedRequest = useMemo(() => {
    return EXPENSE_REJECTEDBY.includes(data?.status?.id);
  }, [data]);

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

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

  const onSubmit = (formData) => {
    const Payload = {
      ...formData,
      paidAt: localToUtc(formData.paidAt),
      paymentRequestId: data.id,
      comment: formData.comment,
    };
    MakeAction(Payload);
  };

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

  const STATUS_HEADING = {
    [EXPENSE_STATUS.daft]: "Payment Request - Initiation",
    [EXPENSE_STATUS.review_pending]: "Payment Request - Review & Validation",
    [EXPENSE_STATUS.approve_pending]: "Payment Request - Approval",
    [EXPENSE_STATUS.payment_pending]: "Payment Request -  Processing & Disbursement",
    [EXPENSE_STATUS.payment_processed]: "Payment Request -  Bills & Tax Invoices Upload",
    [EXPENSE_STATUS.payment_done]: "Payment Request - Reconciliation & Confirmation",
  };

  return (
    <div
      className="container px-3 py-2 py-md-0"
      onSubmit={handleSubmit(onSubmit)}
    >
      <div className="col-12 mb-2 text-center ">
        <h5 className="fw-semibold m-0">
          {STATUS_HEADING[data?.expenseStatus?.id] || "Payment Request Details"}
        </h5>
        <hr />
      </div>
      <div className="row mb-1 ">
        <div className="col-12 col-sm-6 ">
          <div className="row ">
            <div className="col-12 d-flex justify-content-between  mb-6">
              <div className="d-flex align-items-center"><span className="fw-semibold">PR No : </span><span className="fw-semibold ms-2"> {data?.paymentRequestUID}</span></div>
              <span
                className={`badge bg-label-${getColorNameFromHex(data?.expenseStatus?.color) || "secondary"
                  }`}
              >
                {data?.expenseStatus?.name}
              </span>
            </div>
            <div className="row">
              <div className="col-6 mb-3 text-start ">
                <label className="form-label me-2 mb-0 fw-semibold ">
                  Project Name:
                </label>
              </div>
              <div className="col-6 mb-3 text-start ">
                <small className="text-muted">
                  {data?.project?.name || "—"}
                </small>
              </div>
            </div>

            <div className="row">
              <div className="col-6 mb-3 text-start">
                <label className="form-label me-2 mb-0 fw-semibold text-start">
                  Due Date:
                </label>
              </div>
              <div className="col-6 mb-3 text-start">
                <small className="text-muted">
                  {formatUTCToLocalTime(data?.dueDate)}
                </small>
              </div>
            </div>

            <div className="row">
              <div className="col-6 mb-3 text-start">
                <label className="form-label me-2 mb-0 fw-semibold ">
                  Expense Category:
                </label>
              </div>
              <div className="col-6 mb-3 text-start">
                <small className="text-muted">
                  {data?.expenseCategory?.name}
                </small>
              </div>
            </div>

            {/* Row 2 */}
            <div className="row text-start">
              <div className="col-6 mb-3">
                <label className="form-label me-2 mb-0 fw-semibold text-start">
                  Payee:
                </label>
              </div>
              <div className="col-6 mb-3">
                <div className="text-muted">{data?.payee}</div>
              </div>
            </div>
            <div className="row text-start">
              <div className="col-6 mb-3">
                <label className="form-label me-2 mb-0 fw-semibold text-start">
                  Amount:
                </label>
              </div>
              <div className="col-6 mb-3">
                <small className="text-muted">
                  {formatFigure(data?.amount, {
                    type: "currency",
                    currency: data?.currency?.currencyCode,
                  })}
                </small>
              </div>
            </div>

            {data?.gstNumber && (
              <div className="row text-start">
                <div className="col-6 mb-3">
                  <label className="form-label me-2 mb-0 fw-semibold text-start">
                    GST Number:
                  </label>
                </div>
                <div className="col-6 mb-3">
                  <div className="text-muted">{data?.gstNumber}</div>
                </div>
              </div>
            )}

            <div className="row text-start">
              <div className="col-6 mb-3">
                <label className="form-label me-2 mb-0 fw-semibold text-start">
                  Created At:
                </label>
              </div>
              <div className="col-6 mb-3">
                <small className="text-muted">
                  {formatUTCToLocalTime(data?.createdAt, true)}
                </small>
              </div>
            </div>

            {/* Row 6 */}
            {data?.createdBy && (
              <div className="row">
                <div className="col-6 text-start">
                  <label className="form-label me-2 mb-0 fw-semibold">
                    Created By:
                  </label>
                </div>
                <div className="col-6 text-start">
                  <div className="d-flex align-items-center">
                    <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="text-start my-2">
              <label className="fw-semibold form-label">Description : </label>
              <div className="text-muted">{data?.description}</div>
            </div>

            {data?.paidTransactionId && (
              <>
                <div className="row  text-start mb-2">
                  <div className="col-6 mb-sm-0 mb-2">
                    <label className="form-label me-2 mb-0 fw-semibold">
                      Transaction ID:
                    </label>
                  </div>
                  <div className="col-6 mb-sm-0 mb-2">
                    <small>{data?.paidTransactionId}</small>
                  </div>
                </div>
                <div className="row text-start mb-2">
                  <div className="col-6 ">
                    <label className="form-label me-2 mb-0 fw-semibold">
                      Transaction Date :
                    </label>
                  </div>
                  <div className="col-6 ">
                    {formatUTCToLocalTime(data?.paidAt)}
                    <small></small>{" "}
                  </div>
                </div>

                {data?.paidBy && (
                  <div className="row text-start mb-2">
                    <div className="col-6  ">
                      <label className="form-label me-2 mb-0 fw-semibold">
                        Paid By :
                      </label>
                    </div>
                    <div className="col-6 d-flex align-items-center ">
                      <Avatar
                        size="xs"
                        classAvatar="m-0 me-1"
                        firstName={data?.paidBy?.firstName}
                        lastName={data?.paidBy?.lastName}
                      />
                      <span className="text-muted">
                        {`${data?.paidBy?.firstName} ${data?.paidBy?.lastName}`.trim()}
                      </span>
                    </div>
                  </div>
                )}
              </>
            )}
            <div className="col-6 text-start mt-2 mb-2">
              <label className="form-label me-2 mb-1 fw-semibold">
                Attachment:
              </label>

              <div className="d-flex flex-wrap gap-2">
                {data?.attachments?.length > 0 ? (
                  <FilelistView
                    files={data?.attachments}
                    viewFile={setDocumentView}
                  />
                ) : (
                  <p className="m-0 text-secondary">No Attachment</p>
                )}
              </div>
            </div>
            <ActionPaymentRequest requestId={requestId} />
          </div>
        </div>
        <div className=" col-sm-12  my-md-0 border-top border-md-none col-md-6 ">
          <PaymentStatusLogs data={data} />
        </div>
      </div>
    </div>
  );
};
export default ViewPaymentRequest;