import React, { useCallback, useMemo } from "react";
import { Link, useLocation, useMatch, useNavigate } from "react-router-dom";
import profile_placeholder from "../assets/images/profile_placeholder.png";
import { useState, useEffect, useContext } from "react";
import henceforthApi from "../utils/henceforthApi";
import { GlobalContext } from "../context/Provider";
import Swal from "sweetalert2";
import moment from "moment";
import { Icons, toast } from "react-toastify";
import RideCreated from "./rideCreated";
import RideBooked from "./rideBooked";
import UserVehicles from "./userVehicles";
import MaskImage from "../components/common/MaskImage";
import WalletTransation from "./walletTransation";

type userDetails = {
  account_status: string,
  account_type: string,
  admin_verified: boolean,
  age_verified: boolean,
  bio: string,
  image: string
  cover_img: string,
  created_at: string,
  email: string,
  email_verified: boolean,
  name: string,
  is_blocked: boolean,
  is_deleted: boolean,
  last_name: string,
  last_seen?: null,
  profile_pic: string,
  social_token: string,
  licence_id: string,
  phone_no: string,
  gender: string,
  front_doc: any,
  document_status: string,
  passenger_document?: string,
  passenger_selfie?: string,
  passenger_document_status?: string,
  passenger_document_verified?: boolean,
  vehicle_licence?: string,
  driving_licence?: string,
  driver_document_status?: string,
  driver_document_verified?: boolean,
  social_type: string,
  total_coins: number,
  updated_at: null,
  date_of_birth: string
  user_name: string,
  user_status: number,
  _id: string,
  stripeAccountId: string,
  referral_code?: string,
  referral_count?: number,
  country?: string,
  state?: string
  state_name?: string,
  is_referral_coupon_credit_disable?: boolean | null,
  wallet: {
    balance: number,
    total_earned: number,
    total_withdrawn: number
  }
}

export default () => {
  const match: any = useMatch("/user/:id");
  let sta = +1
  const navigate = useNavigate();
  const location = useLocation()
  console.log(location)
  const { authState, handleError } = useContext(GlobalContext);

  const [userDetails, setUserDetails] = useState({
    account_status: "",
    account_type: "",
    admin_verified: false,
    age_verified: false,
    bio: "",
    cover_img: "",
    created_at: "",
    gender: "",
    email: "",
    phone_no: '',
    document_status: "",
    licence_id: '',
    email_verified: false,
    name: "",
    is_blocked: false,
    is_deleted: false,
    last_name: "",
    last_seen: null,
    front_doc: "",
    passenger_document: "",
    passenger_selfie: "",
    passenger_document_status: "",
    passenger_document_verified: false,
    vehicle_licence: "",
    driving_licence: "",
    driver_document_status: "",
    driver_document_verified: false,
    date_of_birth: "",
    profile_pic: "",
    social_token: "",
    social_type: "",
    total_coins: 0,
    updated_at: null,
    user_name: "",
    user_status: 0,
    _id: "",
    referral_code: "",
    referral_count: 0,
    country: "",
    state: "",
    state_name: "",
    is_referral_coupon_credit_disable: null,
    wallet: {
      balance: 0,
      total_earned: 0,
      total_withdrawn: 0
    }
  } as userDetails);

  if (authState.access_token) { henceforthApi.setToken(authState.access_token); }

  const [manageUsers, setManageUsers] = useState({
    type: "",
    _id: "",
    is_blocked: false,
    is_deleted: false,
    admin_verified: false,
    language: "ENGLISH",
    account_status: "",
  });

  const [referralUsers, setReferralUsers] = useState<Array<any>>([]);
  const [walletTransactions, setWalletTransactions] = useState<Array<any>>([]);
  const [referralLoading, setReferralLoading] = useState(false);
  const [updatingReferral, setUpdatingReferral] = useState(false);

  const getUserDetails = async () => {
    try {
      const UserDetail = await henceforthApi.User.getUserDetails(match.params.id);
      console.log("user details are", UserDetail);
      setUserDetails(UserDetail.data);
    } catch (error) {
      handleError(error)
    }
  };

  const getReferralUsers = async () => {
    setReferralLoading(true);
    try {
      const referralData = await henceforthApi.User.getReferralUsers(match.params.id);
      console.log("referral users are", referralData);
      setReferralUsers(referralData.data?.data || []);
    } catch (error) {
      handleError(error);
      setReferralUsers([]);
    } finally {
      setReferralLoading(false);
    }
  };

  const handleExpireReferral = async () => {
    if (updatingReferral) return;

    Swal.fire({
      title: "Expire Referral?",
      text: "This will disable the referral coupon credit for this user.",
      icon: "warning",
      showCancelButton: true,
      confirmButtonColor: "#3085d6",
      cancelButtonColor: "#d33",
      confirmButtonText: "Yes, Expire it!",
    }).then(async (result: any) => {
      if (result.isConfirmed) {
        try {
          setUpdatingReferral(true);
          const response = await henceforthApi.User.updateReferralCouponSettings({
            is_referral_coupon_credit_disable: true,
            user_id: userDetails._id
          });

          // Update local state
          setUserDetails(prev => ({
            ...prev,
            is_referral_coupon_credit_disable: true
          }));

          Swal.fire({
            title: "Success!",
            text: "Referral coupon has been expired successfully",
            icon: "success",
            confirmButtonText: "OK",
          });

          // Refresh user details
          getUserDetails();
        } catch (error: any) {
          console.log("Expire referral failed", error);
          Swal.fire({
            title: "Error!",
            text: error.response?.body?.error_description || "Failed to expire referral coupon",
            icon: "error",
            confirmButtonText: "Cancel",
          });
        } finally {
          setUpdatingReferral(false);
        }
      }
    });
  };

  const handleRenewReferral = async () => {
    if (updatingReferral) return;

    Swal.fire({
      title: "Renew Referral?",
      text: "This will enable the referral coupon credit for this user.",
      icon: "question",
      showCancelButton: true,
      confirmButtonColor: "#3085d6",
      cancelButtonColor: "#d33",
      confirmButtonText: "Yes, Renew it!",
    }).then(async (result: any) => {
      if (result.isConfirmed) {
        try {
          setUpdatingReferral(true);
          const response = await henceforthApi.User.updateReferralCouponSettings({
            is_referral_coupon_credit_disable: false,
            user_id: userDetails._id
          });

          // Update local state
          setUserDetails(prev => ({
            ...prev,
            is_referral_coupon_credit_disable: false
          }));

          Swal.fire({
            title: "Success!",
            text: "Referral coupon has been renewed successfully",
            icon: "success",
            confirmButtonText: "OK",
          });

          // Refresh user details
          getUserDetails();
        } catch (error: any) {
          console.log("Renew referral failed", error);
          Swal.fire({
            title: "Error!",
            text: error.response?.body?.error_description || "Failed to renew referral coupon",
            icon: "error",
            confirmButtonText: "Cancel",
          });
        } finally {
          setUpdatingReferral(false);
        }
      }
    });
  };

  const handleActivate = async () => {
    let data = {
      type: "ACTIVATE/DEACTIVATE",
      _id: userDetails._id,
      is_blocked: userDetails.is_blocked,
      is_deleted: userDetails.is_deleted,
      language: "ENGLISH",
      account_status:
        userDetails.account_status == "ACTIVATED" ? `DEACTIVATED` : `ACTIVATED`,
    } as any;

    try {
      const manage_users = await henceforthApi.User.manageUsers(data);
      console.log("mmanage users", manage_users);
      setManageUsers(data);
      {
        userDetails.account_status == "DEACTIVATED"
          ? Swal.fire({
            title: "Activated",
            text: "Account Activated Successfully",
            icon: "success",
            confirmButtonText: "OK",
          })
          : Swal.fire({
            title: "Deactivated",
            text: "Account Deactivated Successfully",
            icon: "success",
            confirmButtonText: "OK",
          });
      }
    } catch (error: any) {
      console.log(error, "error is ");
    }
  };

  const verifyDocument = async (documentType: string) => {
    Swal.fire({
      title: "Are you sure?",
      text: "You won't be able to revert this!",
      icon: "question",
      showCancelButton: true,
      confirmButtonColor: "#3085d6",
      cancelButtonColor: "#d33",
      confirmButtonText: "Yes, Verify it!",
    }).then(async (result: any) => {
      if (result.isConfirmed) {
        try {
          // Use verifyPassengerDocuments for passage documents, verifyDriverDocuments for driver documents
          const apiCall = documentType === "Passage Documents"
            ? henceforthApi.User.verifyPassengerDocuments(match?.params.id, 1)
            : henceforthApi.User.verifyDriverDocuments(match?.params.id, 1);

          let apiRes = await apiCall.then((res: any) => {
            Swal.fire({
              title: "Verification Successful",
              text: `${documentType} verified successfully`,
              icon: "success",
              confirmButtonText: "OK",
            })
            getUserDetails()
          }).catch((err: any) => {
            console.log("Verify failed", err);
            Swal.fire({
              title: "Verified Failed",
              text: err.response?.body?.error_description || "Failed to verify document",
              icon: "error",
              confirmButtonText: "Cancel",
            });
          });
          console.log("verify", apiRes)
        }
        catch { }
      }
    })
  }

  const rejectDocument = async (documentType: string) => {
    Swal.fire({
      title: "Are you sure?",
      text: "You won't be able to revert this!",
      icon: "warning",
      showCancelButton: true,
      confirmButtonColor: "#3085d6",
      cancelButtonColor: "#d33",
      confirmButtonText: "Yes, Reject it!",
    }).then(async (result: any) => {
      if (result.isConfirmed) {
        try {
          // Use verifyPassengerDocuments with status 0 for passage documents, verifyDriverDocuments with status 0 for driver documents
          const apiCall = documentType === "Passage Documents"
            ? henceforthApi.User.verifyPassengerDocuments(match?.params.id, 0)
            : henceforthApi.User.verifyDriverDocuments(match?.params.id, 0);

          let apiRes = await apiCall.then((res: any) => {
            Swal.fire({
              title: "Reject Successful",
              text: `${documentType} rejected successfully`,
              icon: "success",
              confirmButtonText: "OK",
            })
            getUserDetails()
          }).catch((err: any) => {
            console.log("Reject failed", err);
            Swal.fire({
              title: "Reject Failed",
              text: err.response?.body?.error_description || "Failed to reject document",
              icon: "error",
              confirmButtonText: "Cancel",
            });
          });
          console.log("verify", apiRes)
        }
        catch (err: any) { console.log(err); }
      }
    })
  }

  const getDocumentStatus = (status?: string): string => {
    if (!status) return "NOT_VERIFY";
    return status.toUpperCase();
  }

  const getStatusBadgeClass = (status: string): string => {
    switch (status) {
      case "ACCEPTED":
        return "badge bg-success";
      case "REJECTED":
        return "badge bg-danger";
      case "PENDING":
        return "badge bg-warning";
      default:
        return "badge bg-secondary";
    }
  }

  const renderDocumentSection = (
    title: string,
    documentImage: string | null | undefined
  ) => {
    const hasDocument = documentImage && documentImage !== null && documentImage !== 'null';

    return (
      <div className="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12 mb-3">
        <div className="ibox h-100 mb-0">
          <div className="ibox-content p-3 border-top-0">
            <div className="text-center mb-2">
              <strong className="text-dark">{title}</strong>
            </div>
            <div className="document-image-wrapper" style={{
              width: '100%',
              height: '200px',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              overflow: 'hidden',
              position: 'relative'
            }}>
              <img
                src={
                  hasDocument
                    ? henceforthApi.FILES.imageOriginal(documentImage || '')
                    : profile_placeholder
                }
                alt={title}
                className="img-fluid"
                style={{
                  cursor: hasDocument ? 'pointer' : 'default',
                  maxWidth: '100%',
                  maxHeight: '100%',
                  objectFit: 'contain'
                }}
              />
              {hasDocument && (
                <MaskImage image={documentImage || ''} key={documentImage} />
              )}
            </div>
          </div>
        </div>
      </div>
    );
  };

  const hasDriverDocuments = () => {
    const hasVehicleLicence = userDetails?.vehicle_licence && userDetails?.vehicle_licence !== null && userDetails?.vehicle_licence !== 'null';
    const hasDrivingLicence = userDetails?.driving_licence && userDetails?.driving_licence !== null && userDetails?.driving_licence !== 'null';
    return hasVehicleLicence || hasDrivingLicence;
  };

  const hasPendingDriverDocuments = () => {
    const driverStatus = getDocumentStatus(userDetails?.driver_document_status);
    return driverStatus === "PENDING";
  };

  const hasPendingPassageDocuments = () => {
    const passageStatus = getDocumentStatus(userDetails?.passenger_document_status);
    return passageStatus === "PENDING";
  };

  // const shouldShowDriverButtons = () => {
  //   const docStatus = getDocumentStatus(userDetails?.document_status);
  //   return docStatus === "PENDING" && hasPendingDriverDocuments();
  // };

  // const shouldShowPassageButtons = () => {
  //   const docStatus = getDocumentStatus(userDetails?.document_status);
  //   return docStatus === "PENDING" && hasPendingPassageDocuments();
  // };

  const handleBlocking = async () => {
    let data = {
      type: "BLOCK/DELETE",
      _id: userDetails._id,
      is_blocked: !Boolean(userDetails.is_blocked),
      is_deleted: userDetails.is_deleted,
      language: "ENGLISH",
      account_status: userDetails.account_status,
    } as any;
    try {
      const manage_users = await henceforthApi.User.manageUsers(data);
      console.log("mmanage users", manage_users);
      setManageUsers(data);
      {
        !userDetails.is_blocked
          ? Swal.fire({
            title: "User Blocked",
            text: "User Blocked  successfully",
            icon: "success",
            confirmButtonText: "OK",
          })
          : Swal.fire({
            title: "User Unblocked",
            text: "User Unblocked  successfully",
            icon: "success",
            confirmButtonText: "OK",
          });
      }
    } catch (error: any) {
      console.log(error, "error is ");
      Swal.fire({
        title: "Error!",
        text: error.response.body.error_description,
        icon: "error",
        confirmButtonText: "Cancel",
      });
    }
  };

  const copyText = (id: string) => {
    navigator?.clipboard?.writeText(id)
    toast.success("id copied")
  }

  const handleDelete = async (creatorId: any) => {
    let data = {
      type: "BLOCK/DELETE",
      _id: userDetails._id,
      is_blocked: userDetails.is_blocked,
      is_deleted: true,
      language: "ENGLISH",
      account_status: userDetails.account_status,
    };

    Swal.fire({
      title: "Are you sure?",
      text: "You won't be able to revert this!",
      icon: "warning",
      showCancelButton: true,
      confirmButtonColor: "#3085d6",
      cancelButtonColor: "#d33",
      confirmButtonText: "Yes, delete it!",
    }).then(async (result: any) => {
      if (result.isConfirmed) {
        try {
          henceforthApi.User.manageUsers(data)
            .then((res: any) => {
              console.log(res, "response");
              Swal.fire({
                title: "User Deleted",
                text: res.data.message,
                icon: "success",
                confirmButtonText: "OK",
              });
              window.history.back();
            }).catch((err: any) => {
              console.log(err, "ERROR");

              Swal.fire({
                title: "Error!",
                text: err,
                icon: "error",
                confirmButtonText: "Cancel",
              });
            });
        } catch (error: any) {

        }
      }
    });
  };

  useEffect(() => {
    getUserDetails();
    getReferralUsers();
  }, [manageUsers]);

  useEffect(() => {
    // scrollToTop();
  }, []);

  console.log("userDetails", userDetails);

  return (
    <>
      <div className="row animated fadeInRight d-flex">
        {/* User Details Section */}
        <div className="col-xl-5 col-lg-12 col-md-12 col-12 mb-3 mb-xl-0 d-flex">
          <div className="ibox w-100 d-flex flex-column">
            <div className="ibox-title">
              <h5>User Details</h5>
            </div>
            <div className="ibox-content d-flex flex-column flex-grow-1">
              <div className="text-center mb-4">
                <div className="position-relative d-inline-block">
                  <img
                    src={
                      userDetails?.profile_pic !== null && userDetails?.profile_pic !== 'null'
                        ? henceforthApi.FILES.imageOriginal(userDetails?.profile_pic)
                        : profile_placeholder
                    }
                    alt="ProfileImage"
                    className="img-fluid rounded-circle"
                    style={{
                      width: '150px',
                      height: '150px',
                      objectFit: 'cover'
                    }}
                  />
                  <MaskImage image={userDetails?.profile_pic} key={userDetails?.profile_pic} />
                </div>
              </div>

              <div className="user-info-section">
                <p className="text-black mb-2">
                  <b>Name:</b>
                  <span className="text-muted ms-1">
                    {userDetails?.name ? ` ${userDetails?.name} ` : `Not Available`}
                  </span>
                </p>
                <p className="text-black mb-2">
                  <b>Phone no:</b>
                  <span className="text-muted ms-1">
                    {userDetails?.phone_no}
                  </span>
                </p>
                <p className="text-black mb-2">
                  <b>Gender:</b>
                  <span className="text-muted ms-1">
                    {userDetails?.gender ? `${userDetails?.gender}` : "not available"}
                  </span>
                </p>
                <p className="text-black mb-2">
                  <b>Date of Birth:</b>
                  <span className="text-muted ms-1">
                    {userDetails?.date_of_birth ? `${userDetails?.date_of_birth.slice(0, 10)}` : "not available"}
                  </span>
                </p>
                <p className="text-black mb-2">
                  <b>Country:</b>
                  <span className="text-muted ms-1">
                    {userDetails?.country ? `${userDetails?.country}` : "Not available"}
                  </span>
                </p>
                <p className="text-black mb-2">
                  <b>State:</b>
                  <span className="text-muted ms-1">
                    {userDetails?.state_name ? `${userDetails?.state_name}` : "Not available"}
                  </span>
                </p>
                <p className="text-black mb-2">
                  <b>Date Activate:</b>
                  <span className="text-muted ms-1">
                    {moment(Number(userDetails?.created_at)).format("YYYY-MM-DD")}
                  </span>
                </p>
                <p className="text-black mb-2">
                  <b>Bank account Id:</b>
                  <span className="text-muted ms-1 text-break">
                    {userDetails?.stripeAccountId ? `${userDetails?.stripeAccountId}` : "not available"}
                    {userDetails?.stripeAccountId && (
                      <i role="button" className="bi bi-clipboard ms-2" onClick={() => { navigator?.clipboard?.writeText(userDetails?.stripeAccountId); toast.success("Id Copied") }}></i>
                    )}
                  </span>
                </p>
                <p className="text-black mb-2">
                  <b>Id:</b>
                  <span className="text-muted ms-1 text-break">
                    {userDetails?._id ? `${userDetails?._id}` : "not available"}
                    {userDetails?._id && (
                      <i role="button" className="bi bi-clipboard ms-2" onClick={() => { navigator?.clipboard?.writeText(userDetails?._id); toast.success("Id Copied") }}></i>
                    )}
                  </span>
                </p>
                <p className="text-black mb-2">
                  <b>Referral Count:</b>
                  <span className="text-muted ms-1">
                    {userDetails?.referral_count !== undefined && userDetails?.referral_count !== null ? `${userDetails?.referral_count}` : "0"} users
                  </span>
                </p>
                {/* <p className="text-black mb-2">
                  <b>Referral Code:</b>
                  <span className="text-muted ms-1">
                    {userDetails?.referral_code ? `${userDetails?.referral_code}` : "Not available"}
                    {userDetails?.referral_code && (
                      <i role="button" className="bi bi-clipboard ms-2" onClick={() => { navigator?.clipboard?.writeText(userDetails?.referral_code || ""); toast.success("Referral Code Copied") }}></i>
                    )}
                  </span>
                </p> */}
                <div className="d-flex align-items-center flex-wrap gap-3 mb-3 text-black">
                  {/* <div>
                    <b>Referral Status:</b>
                    <span className="text-muted ms-1">
                      {userDetails?.is_referral_coupon_credit_disable === true 
                        ? <span className="badge bg-danger">Expired</span>
                        :<span className="badge bg-success">Active</span>
                      }
                    </span>
                  </div> */}

                  <div>
                    <b>Referral Code:</b>
                    <span className="text-muted ms-1">
                      {userDetails?.referral_code ? `${userDetails?.referral_code}` : "Not available"}
                      {userDetails?.referral_code && (
                        <i role="button" className="bi bi-clipboard ms-2" onClick={() => { navigator?.clipboard?.writeText(userDetails?.referral_code || ""); toast.success("Referral Code Copied") }}></i>
                      )}
                    </span>
                  </div>

                  {(!userDetails?.is_referral_coupon_credit_disable) && (
                    <button
                      type="button"
                      onClick={handleExpireReferral}
                      disabled={updatingReferral}
                      className="btn btn-danger btn-sm"
                    >
                      {updatingReferral ? (
                        <>
                          <span className="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
                          Processing...
                        </>
                      ) : (
                        <>
                          <i className="bi bi-x-circle me-1"></i>
                          Expire Referral
                        </>
                      )}
                    </button>
                  )}

                  {userDetails?.is_referral_coupon_credit_disable === true && (
                    <button
                      type="button"
                      onClick={handleRenewReferral}
                      disabled={updatingReferral}
                      className="btn btn-success btn-sm"
                    >
                      {updatingReferral ? (
                        <>
                          <span className="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
                          Processing...
                        </>
                      ) : (
                        <>
                          <i className="bi bi-arrow-repeat me-1"></i>
                          Renew Referral
                        </>
                      )}
                    </button>
                  )}
                </div>

                <hr />
                <p className="mb-3 text-break">
                  <i className="fas fa-envelope me-2"></i>
                  <span className="text-muted">{userDetails?.email || 'Not available'}</span>
                </p>
                <hr />

                <div className="bg-light p-3 rounded mb-3 border">
                  <h6 className="fw-bold mb-3 d-flex align-items-center text-dark">
                    <i className="fas fa-wallet me-2"></i> Wallet Details
                  </h6>
                  <div className="row g-2 text-center">
                    <div className="col-4 border-end">
                      <small className="text-muted d-block text-uppercase" style={{ fontSize: '0.75rem' }}>Balance</small>
                      <span className="fw-bold fs-5 text-success">
                        {userDetails?.wallet?.balance ?? 0}
                      </span>
                    </div>
                    <div className="col-4 border-end">
                      <small className="text-muted d-block text-uppercase" style={{ fontSize: '0.75rem' }}>Earned</small>
                      <span className="fw-bold fs-6">
                        {userDetails?.wallet?.total_earned ?? 0}
                      </span>
                    </div>
                    <div className="col-4">
                      <small className="text-muted d-block text-uppercase" style={{ fontSize: '0.75rem' }}>Withdrawn</small>
                      <span className="fw-bold fs-6 text-danger">
                        {userDetails?.wallet?.total_withdrawn ?? 0}
                      </span>
                    </div>
                  </div>
                </div>

                <div className="d-flex flex-wrap gap-2 mt-4">
                  <button
                    type="button"
                    onClick={handleBlocking}
                    className="btn btn-default btn-sm flex-grow-1 flex-sm-grow-0">
                    <i className={userDetails?.is_blocked == false ? `fas fa-unlock me-2` : `fas fa-lock me-2`}></i>
                    {userDetails?.is_blocked == false ? `Block` : `Unblock`}
                  </button>
                  <button
                    type="button"
                    onClick={handleActivate}
                    className="btn btn-default btn-sm flex-grow-1 flex-sm-grow-0">
                    <i className={userDetails?.account_status == "ACTIVATED" ? `fas fa-unlock me-2` : `fas fa-lock me-2`}></i>
                    {userDetails?.account_status == "ACTIVATED" ? `Deactivate` : `Activate`}
                  </button>
                  <button
                    onClick={handleDelete}
                    disabled={userDetails?.is_deleted ? true : false}
                    className="btn btn-outline-primary btn-sm flex-grow-1 flex-sm-grow-0">
                    <i className={userDetails?.is_deleted ? `fa fa-ban me-2` : "fas fa-trash-alt me-2"}></i>
                    {userDetails?.is_deleted ? `Deleted` : `Delete`}
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Documents Section */}
        <div className="col-xl-7 col-lg-12 col-md-12 col-12 mb-3 d-flex">
          <div className="ibox w-100 d-flex flex-column">
            <div className="ibox-title d-flex flex-wrap justify-content-between align-items-center gap-2">
              <h5>Passage Documents</h5>
              {hasPendingPassageDocuments() && (
                <div className="d-flex flex-wrap gap-2">
                  <button
                    className="btn btn-danger btn-sm"
                    onClick={() => rejectDocument("Passage Documents")}>
                    Reject
                  </button>
                  <button
                    className="btn btn-color btn-sm"
                    onClick={() => verifyDocument("Passage Documents")}>
                    Approve
                  </button>
                </div>
              )}
            </div>
            <div className="ibox-content d-flex flex-column flex-grow-1">
              {/* Passage Documents Section */}
              <div className="mb-4">
                <div className="row g-3">
                  {renderDocumentSection("ID", userDetails?.passenger_document)}
                  {renderDocumentSection("Selfie holding ID", userDetails?.passenger_selfie)}
                </div>
              </div>
            </div>
            <div className="ibox-title d-flex flex-wrap justify-content-between align-items-center gap-2">
              <h5>Driver Documents</h5>
              {hasPendingDriverDocuments() && (
                <div className="d-flex flex-wrap gap-2">
                  <button
                    className="btn btn-danger btn-sm"
                    onClick={() => rejectDocument("Driver Documents")}>
                    Reject
                  </button>
                  <button
                    className="btn btn-color btn-sm"
                    onClick={() => verifyDocument("Driver Documents")}>
                    Approve
                  </button>
                </div>
              )}
            </div>
            <div className="ibox-content d-flex flex-column flex-grow-1">
              {/* Driver Documents Section */}
              <div>
                <div className="row g-3">
                  {renderDocumentSection("Vehicle Registration", userDetails?.vehicle_licence)}
                  {renderDocumentSection("Driving Licence", userDetails?.driving_licence)}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Additional Sections */}
      <div className="row">
        <div className="col-12">
          <RideCreated _id={match?.params.id} />
        </div>
      </div>
      <div className="row">
        <div className="col-12">
          <RideBooked _id={match?.params.id} />
        </div>
      </div>
      <div className="row">
        <div className="col-12">
          <UserVehicles _id={match?.params.id} />
        </div>
      </div>

      <div className="row">
        <div className="col-12">
          <WalletTransation _id={match?.params.id} />
        </div>
      </div>

      {/* Referral Users Section */}
      <div className="row">
        <div className="col-12">
          <div className="ibox animated fadeInRight">
            <div className="ibox-title">
              <h5>Referral Users</h5>
            </div>
            <div className="ibox-content">
              {referralLoading ? (
                <div className="text-center py-4">
                  <div className="spinner-border" role="status">
                    <span className="visually-hidden">Loading...</span>
                  </div>
                </div>
              ) : (
                <div className="table-responsive">
                  <table className="table table-striped">
                    <thead>
                      <tr>
                        <th>Sr No.</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Date Joined</th>
                        <th>Status</th>
                      </tr>
                    </thead>
                    <tbody>
                      {Array.isArray(referralUsers) && referralUsers.length > 0 ? (
                        referralUsers.map((user: any, index: number) => (
                          <tr key={user._id || index}>
                            <td>{index + 1}.</td>
                            <td>
                              <div className="text-nowrap d-flex align-items-center">
                                <img
                                  src={
                                    user?.profile_pic !== null && user?.profile_pic !== 'null' && user?.profile_pic !== undefined
                                      ? henceforthApi.FILES.imageOriginal(user?.profile_pic)
                                      : profile_placeholder
                                  }
                                  className="me-2 imageSize"
                                  alt=""
                                  style={{ width: '30px', height: '30px', borderRadius: '50%', objectFit: 'cover' }}
                                />
                                {user?.name || "Not Available"}
                              </div>
                            </td>
                            <td>{user?.email || "Not available"}</td>
                            <td>{user?.phone_no || "Not available"}</td>
                            <td>
                              {user?.created_at
                                ? moment(Number(user.created_at)).format("MMM DD, YYYY")
                                : "Not available"}
                            </td>
                            <td>
                              <span className={`badge ${user?.status === "COMPLETED"
                                ? "bg-success"
                                : user?.status === "PENDING"
                                  ? "bg-danger"
                                  : "bg-secondary"
                                }`}>
                                {user?.status || "Not available"}
                              </span>
                            </td>
                          </tr>
                        ))
                      ) : (
                        <tr>
                          <td colSpan={6} className="text-center">
                            No referral users found
                          </td>
                        </tr>
                      )}
                    </tbody>
                  </table>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </>
  );
};