"use client";

import { useEffect, useState } from "react";
import "./Wallet.css";
import Add_Money_Modal from "../common-components/common_modal/add_Money_Modal/Add_Money_Modal";
import Green_btn from "../common-components/common_btn/green_btn/Green_btn";

import Withdrow_Modal from "../common-components/common_modal/withdrow_Modal/Withdrow_Modal";
import { getAllWalletHistory } from "../../features/wallet/walletSlice";
import { useDispatch, useSelector } from "react-redux";
import { formatDateTime } from "../../utils/common";
import Green_Outline_Btn from "../common-components/common_btn/green_outline_btn/Green_Outline_Btn";

function Wallet() {
  const [showAddModal, setShowAddModal] = useState(false);
  const [showWithdrawModal, setShowWithdrawModal] = useState(false);

  const allWalletHistory = useSelector(
    (state) => state.wallet.allWalletHistory,
  );
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getAllWalletHistory());
  }, [dispatch]);

  return (
    <>
      <div className="containe">
        <div className="wallet_container">
          <div className="wallet_top_section">
            <div className="wallet_balance_card">
              <p className="wallet_title">My Wallet</p>

              <h2 className="wallet_balance">
                ₹
                {parseFloat(allWalletHistory?.user_wallet?.amount || 0).toFixed(
                  2,
                )}
              </h2>

              <span className="wallet_subtitle">Available Balance</span>
            </div>

            <div className="wallet_right_section">
              <div className="info_card">
                <p>Total Transactions</p>
                <h3>{allWalletHistory?.data?.length || 0}</h3>
                <div className="wallet_btns">
                  <Green_btn
                    btnText="Add Money"
                    onClick={() => setShowAddModal(true)}
                  />

                  <Green_Outline_Btn
                    btnText="Withdraw"
                    onClick={() => setShowWithdrawModal(true)}
                  />
                </div>
              </div>
            </div>
          </div>

          {/* Transaction History */}
          <div className="transaction_history_card">
            <div className="transaction_header">Transaction History</div>
            <div className="Table_holder">
              <div className="table-responsive">
                <table className="transaction_table">
                  <thead>
                    <tr>
                      <th>Date</th>
                      <th>Description</th>
                      <th>Type</th>
                      <th>Amount</th>
                      <th>Transaction id</th>
                      <th>Withdraw Status</th>
                    </tr>
                  </thead>
                  <tbody>
                    {allWalletHistory?.data?.map((transaction) => (
                      <tr key={transaction.id}>
                        <td>{formatDateTime(transaction.createdAt)}</td>
                        <td>{transaction?.description}</td>
                        <td>{transaction?.transaction_type}</td>
                        <td>{transaction?.amount}</td>
                        <td>{transaction?.transaction_id || "--"}</td>
                        <td>
                          {transaction?.Withdraw_History?.Withdraw_Status
                            ?.name || "--"}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Modals */}
      <Add_Money_Modal
        show={showAddModal}
        onHide={() => setShowAddModal(false)}
      />

      <Withdrow_Modal
        currentBalance={parseFloat(
          allWalletHistory?.user_wallet?.amount,
        ).toFixed(2)}
        show={showWithdrawModal}
        onHide={() => setShowWithdrawModal(false)}
      />
    </>
  );
}

export default Wallet;
