"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 Orange_Btn from "../common-components/common_btn/orange_btn/Orange_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 [balance, setBalance] = useState(1250.75);
  const [showAddModal, setShowAddModal] = useState(false);
  const [showWithdrawModal, setShowWithdrawModal] = useState(false);
  const [transactions, setTransactions] = useState([
    {
      id: 1,
      date: "2024-01-15",
      description: "Added money via Credit Card",
      amount: 500.0,
      type: "credit",
      method: "Credit Card",
    },
    {
      id: 2,
      date: "2024-01-14",
      description: "Withdrawal to Bank Account",
      amount: 200.0,
      type: "debit",
      method: "Bank Transfer",
    },
    {
      id: 3,
      date: "2024-01-13",
      description: "Added money via PayPal",
      amount: 300.0,
      type: "credit",
      method: "PayPal",
    },
    {
      id: 4,
      date: "2024-01-12",
      description: "Purchase Payment",
      amount: 75.25,
      type: "debit",
      method: "Wallet Payment",
    },
    {
      id: 5,
      date: "2024-01-11",
      description: "Added money via Debit Card",
      amount: 725.0,
      type: "credit",
      method: "Debit Card",
    },
  ]);

  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_header">
            <div className="wallet_title">My Wallet</div>
            <div className="balance_amount">
              ₹{parseFloat(allWalletHistory?.user_wallet?.amount).toFixed(2)}
            </div>
            <div className="balance_label">Available Balance</div>
          </div>

          <div className="action_buttons_container">
            <Green_btn
              btnText="Add Money"
              onClick={() => setShowAddModal(true)}
            />
            <Green_Outline_Btn
              btnText="Withdraw Money"
              onClick={() => setShowWithdrawModal(true)}
            />
          </div> */}
          <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>

                        {/* <td className={transaction.type === "credit" ? "credit_amount" : "debit_amount"}>
                                                    {transaction.type === "credit" ? "+" : "-"}₹{transaction.amount.toFixed(2)}
                                                </td> */}
                        {/* <td>
                                                    <span className={transaction.type === "credit" ? "credit_badge" : "debit_badge"}>
                                                        {transaction.type === "credit" ? "Credit" : "Debit"}
                                                    </span>
                                                </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;
