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 Payment 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>
          <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>

              {data?.updatedBy ? (
                <>
                  <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>
                </>
              ) : (
                <span className="text-muted">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