import React from "react";
import { useRecurringExpenseDetail } from "../../hooks/useExpense";
import { formatUTCToLocalTime } from "../../utils/dateUtils";
import { formatFigure, getColorNameFromHex } from "../../utils/appUtils";
import Avatar from "../common/Avatar";
import { FREQUENCY_FOR_RECURRING } from "../../utils/constants";
import { ExpenseDetailsSkeleton } from "../Expenses/ExpenseSkeleton";

const ViewRecurringExpense = ({ RecurringId }) => {
  const { data, isLoading, isError, error, isFetching } =
    useRecurringExpenseDetail(RecurringId);

  const statusColorMap = {
    "da462422-13b2-45cc-a175-910a225f6fc8": "primary", // Active
    "306856fb-5655-42eb-bf8b-808bb5e84725": "success", // Completed
    "3ec864d2-8bf5-42fb-ba70-5090301dd816": "danger", // De-Activated
    "8bfc9346-e092-4a80-acbf-515ae1ef6868": "warning", // Paused
  };
  if (isLoading) return <ExpenseDetailsSkeleton />;

  return (
    <form className="container px-3">
      <div className="col-12 mb-1">
        <h5 className="fw-semibold m-0">Recurring Expense Details</h5>
      </div>
      <div className="row mb-1">
        {/* <div className="col-12 col-lg-7 col-xl-8 mb-3"> */}
        <div className="row">
          {/* Row 1 Recurring Id and Status  */}

          <div className="col-12 d-flex justify-content-between text-start fw-semibold my-2 mb-4">
            <span>{data?.recurringPaymentUID}</span>
            <span
              className={`badge bg-label-${
                statusColorMap[data?.status?.id] || "secondary"
              }`}
            >
              {data?.status?.name || "N/A"}
            </span>
          </div>

          {/* Row 2 Category*/}

          <div className="col-md-6 mb-6">
            <div className="d-flex">
              <label
                className="form-label me-2 mb-0 fw-semibold text-start"
                style={{ minWidth: "130px" }}
              >
                Expense Category :
              </label>
              <div className="text-muted">
                {data?.expenseCategory?.name || "N/A"}
              </div>
            </div>
          </div>

          {/* Row 3 Amount and Project */}

          <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 != null
                  ? `${data?.currency?.symbol ?? "¥"} ${Number(
                      data.amount
                    ).toFixed(2)} ${data?.currency?.currencyCode ?? "CN"}`
                  : "N/A"}
              </div>
            </div>
          </div>

          <div className="col-md-6 mb-6">
            <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 || "N/A"}</div>
            </div>
          </div>

          {/* Row 4 Created At and Title*/}

          <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 className="text-muted">
                {data?.createdAt
                  ? formatUTCToLocalTime(data.createdAt, true)
                  : "N/A"}
              </div>
            </div>
          </div>

          <div className="col-md-6 mb-6">
            <div className="d-flex">
              <label
                className="form-label me-2 mb-0 fw-semibold text-start"
                style={{ minWidth: "130px" }}
              >
                Title :
              </label>
              <div className="text-muted">{data?.title || "N/A"}</div>
            </div>
          </div>

          {/* Row 5 Payee and Notify*/}

          <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" }}
              >
                Payee :
              </label>
              <div className="text-muted">{data?.payee || "N/A"}</div>
            </div>
          </div>

          <div className="col-md-6 mb-6">
            <div className="d-flex align-items-start">
              <label
                className="form-label me-2 mb-0 fw-semibold text-start"
                style={{ minWidth: "130px" }}
              >
                Notify To :
              </label>

              <div className="text-muted" style={{ textAlign: "left" }}>
                {data?.notifyTo?.length > 0
                  ? data.notifyTo?.map((user, index) => (
                      <span key={user.id}>
                        {user.email}
                        {index < data?.notifyTo?.length - 1 && ", "}
                      </span>
                    ))
                  : "N/A"}
              </div>
            </div>
          </div>

          {/* Row 6  Strike Date*/}

          <div className="col-md-6 mb-6">
            <div className="d-flex">
              <label
                className="form-label me-2 mb-0 fw-semibold text-start"
                style={{ minWidth: "130px" }}
              >
                Strike Date :
              </label>
              {/* <div className="text-muted">
                {formatUTCToLocalTime(data?.strikeDate)}
              </div> */}
              <div className="text-muted">
                {data?.strikeDate
                  ? formatUTCToLocalTime(data.strikeDate, true)
                  : "N/A"}
              </div>
            </div>
          </div>

          {/* Row 7 Frequency and Buffer Days*/}

          <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" }}
              >
                Frequency :
              </label>
              <div className="text-muted flex-grow-1 text-start">
                {data?.frequency !== undefined
                  ? FREQUENCY_FOR_RECURRING[data.frequency]
                  : "N/A"}
              </div>
            </div>
          </div>

          <div className="col-md-6 mb-6">
            <div className="d-flex">
              <label
                className="form-label me-2 mb-0 fw-semibold text-start"
                style={{ minWidth: "130px" }}
              >
                Payment Buffer Days :
              </label>
              <div className="text-muted">
                {data?.paymentBufferDays || "N/A"}
              </div>
            </div>
          </div>

          {/* Row 8 Updated At and Number of Iteration*/}

          <div className="col-md-6 mb-6">
            <div className="d-flex">
              <label
                className="form-label me-2 mb-0 fw-semibold text-start"
                style={{ minWidth: "130px" }}
              >
                Updated At :
              </label>
              <div className="text-muted">
                {data?.updatedAt
                  ? formatUTCToLocalTime(data.updatedAt, true)
                  : "N/A"}
              </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" }}
              >
                Number of Iteration :
              </label>
              <div className="text-muted">
                {data?.numberOfIteration || "N/A"}
              </div>
            </div>
          </div>

          {/* Row 9  Created By and Updated By*/}

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

                <>
                  <Avatar
                    size="xs"
                    classAvatar="m-0 me-1"
                    firstName={data.updatedBy.firstName}
                    lastName={data.updatedBy.lastName}
                  />
                  <span className="text-muted">
                    {`${data.updatedBy.firstName ?? ""} ${
                      data.updatedBy.lastName ?? ""
                    }`.trim() || "N/A"}
                  </span>
                </>
              </div>
            </div>
          )}

          {/* Row 10 Description  */}

          <div className="col-12 text-start mb-5 d-flex">
            <label
              className="fw-semibold form-label mb-0"
              style={{ minWidth: "140px", whiteSpace: "nowrap" }}
            >
              Description :
            </label>
            <div
              className="text-muted flex-grow-1"
              style={{ whiteSpace: "pre-wrap" }}
            >
              {data?.description || "N/A"}
            </div>
          </div>
        </div>
        {/* </div> */}
      </div>
    </form>
  );
};

export default ViewRecurringExpense;