import React, { useEffect, useState } from "react";
import styles from "./Transactions.module.css";
import { useParams } from "react-router-dom";
import { ColorRing } from "react-loader-spinner";
import {
  getMyTransactions,
  confirmTransaction,
  declineTransaction,
  getTransactionsFromCafe,
} from "../helpers/transactionHelpers";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import timezone from "dayjs/plugin/timezone";
import { ThreeDots } from "react-loader-spinner";

import ButtonWithReplica from "../components/ButtonWithReplica";

dayjs.extend(utc);
dayjs.extend(timezone);

export default function Transactions({ shop, shopId, propsShopId, sendParam, deviceType, paymentUrl, setModal, newTransaction }) {
  const { shopIdentifier, tableId } = useParams();
  if (sendParam) sendParam({ shopIdentifier, tableId });

  const [transactions, setTransactions] = useState([]);
  const [isPaymentLoading, setIsPaymentLoading] = useState(false);
  const [isPaymentOpen, setIsPaymentOpen] = useState(false);
  const [searchTerm, setSearchTerm] = useState('');
  const [matchedItems, setMatchedItems] = useState([]);

  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setMatchedItems(searchAndAggregateItems(transactions, searchTerm));
  }, [searchTerm, transactions]);

  useEffect(() => {
    const fetchTransactions = async () => {
      try {

        //   response = await getMyTransactions(shopId || propsShopId, 5);
        // setMyTransactions(response);
        setLoading(true);
        let response = await getTransactionsFromCafe(shopId || propsShopId, -1, false);

        setLoading(false);
        if (response) setTransactions(response);
      } catch (error) {
        console.error("Error fetching transactions:", error);
      }
    };
    console.log(deviceType)
    fetchTransactions();
  }, [deviceType, newTransaction]);

  const calculateTotalPrice = (detailedTransactions) => {
    return detailedTransactions.reduce((total, dt) => {
      return total + dt.qty * (dt.promoPrice ? dt.promoPrice : dt.price);
    }, 0);
  };
const calculateAllTransactionsTotal = (transactions) => {
  return transactions
    .filter(transaction => transaction.confirmed > 1) // Filter transactions where confirmed > 1
    .reduce((grandTotal, transaction) => {
      return grandTotal + calculateTotalPrice(transaction.DetailedTransactions);
    }, 0);
};
const searchAndAggregateItems = (transactions, searchTerm) => {
  if (!searchTerm.trim()) return [];

  const normalizedTerm = searchTerm.trim().toLowerCase();
  // Map with key = `${itemId}-${confirmedGroup}` to keep confirmed groups separate
  const aggregatedItems = new Map();

  transactions.forEach(transaction => {
    // Determine confirmed group as a string key
    const confirmedGroup = transaction.confirmed >= 0  && transaction.confirmed > 1 ? 'confirmed_gt_1' : 'confirmed_le_1';

    transaction.DetailedTransactions.forEach(detail => {
      const itemName = detail.Item.name;
      const itemNameLower = itemName.toLowerCase();

      if (itemNameLower.includes(normalizedTerm)) {
        // Combine itemId and confirmedGroup to keep them separated
        const key = `${detail.itemId}-${confirmedGroup}`;

        if (!aggregatedItems.has(key)) {
          aggregatedItems.set(key, {
            itemId: detail.itemId,
            name: itemName,
            totalQty: 0,
            totalPrice: 0,
            confirmedGroup, // Keep track of which group this belongs to
          });
        }

        const current = aggregatedItems.get(key);
        current.totalQty += detail.qty;
        current.totalPrice += detail.qty * (detail.promoPrice || detail.price);
      }
    });
  });
console.log(aggregatedItems.values())
  return Array.from(aggregatedItems.values());
};



  const handleConfirm = async (transactionId) => {
    setIsPaymentLoading(true);
    try {
      const result = await confirmTransaction(transactionId);
      if (result) {
        setTransactions(prev =>
          prev.map(t =>
            t.transactionId === transactionId ? result : t
          )
        );
      }
    } catch (error) {
      console.error("Error processing payment:", error);
    } finally {
      setIsPaymentLoading(false);
    }
  };

  const handleDecline = async (transactionId) => {
    setIsPaymentLoading(true);
    try {
      const result = await declineTransaction(transactionId);
      if (result) {
        setTransactions(prev =>
          prev.map(t =>
            t.transactionId === transactionId ? result : t
          )
        );
      }
    } catch (error) {
      console.error("Error processing payment:", error);
    } finally {
      setIsPaymentLoading(false);
    }
  };

  if (loading)
    return (
      <div className="Loader">
        <div className="LoaderChild">
          <ThreeDots />
          <h1></h1>
        </div>
      </div>
    );
  return (
    <div className={styles.Transactions}>
      <h2 className={styles["Transactions-title"]}>
        Transaksi selesai Rp {calculateAllTransactionsTotal(transactions)}
      </h2>

      <input
        type="text"
        placeholder="Cari nama item..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        style={{ border: '0px', height: '42px', borderRadius: '15px', margin: '7px auto 10px', width: '88%', paddingLeft: '8px' }}
      />



      {/* Existing Transactions List (keep all your JSX below unchanged) */}
      <div className={styles.TransactionListContainer} style={{ padding: '0 8px' }}>

        {matchedItems.length > 0 && matchedItems.map(item => (
          <div
 key={`${item.itemId}-${item.confirmedGroup}`}
             className={styles.RoundedRectangle}
            style={{ overflow: "hidden" }}
          >
            <ul>
              <li>
                <strong>{item.name}</strong> x {item.totalQty}
              </li>
            </ul>
            <div className={styles.TotalContainer}>
              <span>Total:</span>
              <span>Rp {item.totalPrice}</span>
            </div>
          </div>
        ))}
        {transactions &&
          transactions.map((transaction) => (
            <div
              key={transaction.transactionId}
              className={styles.RoundedRectangle}
              style={{ overflow: 'hidden' }}
            >

              <div className={styles['receipt-header']}>
                {transaction.confirmed === 1 ? (
                  <ColorRing className={styles['receipt-logo']} />
                ) : transaction.confirmed === -1 && !transaction.is_paid || transaction.confirmed === -2 && !transaction.is_paid ? (
                  <div style={{ display: 'flex', justifyContent: 'center', margin: '16px 0px' }}>
                    <svg
                      style={{ width: '60px', transform: 'Rotate(45deg)' }}
                      clipRule="evenodd"
                      fillRule="evenodd"
                      strokeLinejoin="round"
                      strokeMiterlimit="2"
                      viewBox="0 0 24 24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m12.002 2c5.518 0 9.998 4.48 9.998 9.998 0 5.517-4.48 9.997-9.998 9.997-5.517 0-9.997-4.48-9.997-9.997 0-5.518 4.48-9.998 9.997-9.998zm0 1.5c-4.69 0-8.497 3.808-8.497 8.498s3.807 8.497 8.497 8.497 8.498-3.807 8.498-8.497-3.808-8.498-8.498-8.498zm-.747 7.75h-3.5c-.414 0-.75.336-.75.75s.336.75.75.75h3.5v3.5c0 .414.336.75.75.75s.75-.336.75-.75v-3.5h3.5c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-3.5v-3.5c0-.414-.336-.75-.75-.75s-.75.336-.75.75z"
                        fillRule="nonzero"
                      />
                    </svg>
                  </div>
                ) : transaction.confirmed === 2 && !transaction.is_paid ? (
                  <ColorRing className={styles['receipt-logo']} />
                ) : transaction.confirmed === 3 || transaction.is_paid ? (
                  <div>
                    <svg
                      height="60px"
                      width="60px"
                      version="1.1"
                      id="Layer_1"
                      xmlns="http://www.w3.org/2000/svg"
                      xmlnsXlink="http://www.w3.org/1999/xlink"
                      viewBox="0 0 506.4 506.4"
                      xmlSpace="preserve"
                      fill="#000000"
                      style={{ marginTop: '12px', marginBottom: '12px' }}
                    >
                      <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
                      <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
                      <g id="SVGRepo_iconCarrier">
                        <circle style={{ fill: '#54B265' }} cx="253.2" cy="253.2" r="249.2" />
                        <path
                          style={{ fill: '#F4EFEF' }}
                          d="M372.8,200.4l-11.2-11.2c-4.4-4.4-12-4.4-16.4,0L232,302.4l-69.6-69.6c-4.4-4.4-12-4.4-16.4,0 L134.4,244c-4.4,4.4-4.4,12,0,16.4l89.2,89.2c4.4,4.4,12,4.4,16.4,0l0,0l0,0l10.4-10.4l0.8-0.8l121.6-121.6 C377.2,212.4,377.2,205.2,372.8,200.4z"
                        ></path>
                        <path d="M253.2,506.4C113.6,506.4,0,392.8,0,253.2S113.6,0,253.2,0s253.2,113.6,253.2,253.2S392.8,506.4,253.2,506.4z M253.2,8 C118,8,8,118,8,253.2s110,245.2,245.2,245.2s245.2-110,245.2-245.2S388.4,8,253.2,8z"></path>
                        <path d="M231.6,357.2c-4,0-8-1.6-11.2-4.4l-89.2-89.2c-6-6-6-16,0-22l11.6-11.6c6-6,16.4-6,22,0l66.8,66.8L342,186.4 c2.8-2.8,6.8-4.4,11.2-4.4c4,0,8,1.6,11.2,4.4l11.2,11.2l0,0c6,6,6,16,0,22L242.8,352.4C239.6,355.6,235.6,357.2,231.6,357.2z M154,233.6c-2,0-4,0.8-5.6,2.4l-11.6,11.6c-2.8,2.8-2.8,8,0,10.8l89.2,89.2c2.8,2.8,8,2.8,10.8,0l132.8-132.8c2.8-2.8,2.8-8,0-10.8 l-11.2-11.2c-2.8-2.8-8-2.8-10.8,0L234.4,306c-1.6,1.6-4,1.6-5.6,0l-69.6-69.6C158,234.4,156,233.6,154,233.6z"></path>
                      </g>
                    </svg>
                  </div>
                ) : (

                  <ColorRing className={styles['receipt-logo']} />
                )}


                <div className={styles['receipt-info']}>
                  {deviceType == 'clerk' ?
                    <h3>{transaction.confirmed === 1 && !transaction.is_paid ? (
                      "Silahkan Cek Pembayaran"
                    ) : transaction.confirmed === -1 && !transaction.is_paid ? (
                      "Dibatalkan Oleh Kasir"
                    ) : transaction.confirmed === -2 && !transaction.is_paid ? (
                      "Dibatalkan Oleh Pelanggan"
                    ) : transaction.confirmed === 2 && !transaction.is_paid ? (
                      "Sedang Diproses"
                    ) : transaction.confirmed === 3 || transaction.is_paid ? (
                      "Transaksi Sukses"
                    ) : (
                      "Silahkan Cek Ketersediaan"
                    )}</h3>
                    :
                    <h3>{transaction.confirmed === 1 ? (
                      (transaction.payment_type == 'cash' ? 'Silahkan Bayar Ke Kasir' : "Silahkan Bayar Dengan QRIS")
                    ) : transaction.confirmed === -1 ? (
                      "Dibatalkan Oleh Kasir"
                    ) : transaction.confirmed === -2 ? (
                      "Dibatalkan Oleh Pelanggan"
                    ) : transaction.confirmed === 2 ? (
                      "Sedang diproses"
                    ) : transaction.confirmed === 3 ? (
                      "Transaksi Sukses"
                    ) : (
                      "Memeriksa Ketersediaan "
                    )}</h3>}

                  <p>Transaction ID: {transaction.transactionId}</p>
                  <p>Payment Type: {transaction.payment_type}</p>
                  <p>{dayjs.utc(transaction.createdAt).tz(shop.timezone).format('YYYY-MM-DD HH:mm:ss')}</p>
                </div>
              </div>
              <div className={styles['dotted-line']}>
                <div className={styles['circle-left']}>

                </div>
                <div className={styles['line']} ></div>
                <div className={styles['circle-right']} >

                </div>
              </div>

              {transaction.paymentClaimed && transaction.confirmed < 2 && (
                <div className={styles.RibbonBanner}>
                  <img src={"https://i.imgur.com/yt6osgL.png"}></img>
                  <h1>payment claimed</h1>
                </div>
              )}
              <ul>
                {transaction.DetailedTransactions.map((detail) => (
                  <li key={detail.detailedTransactionId}>
                    <span>{detail.Item.name}</span> - {detail.qty < 1 ? 'tidak tersedia' : `${detail.qty} x Rp
                  ${detail.promoPrice ? detail.promoPrice : detail.price}`}
                  </li>
                ))}
              </ul>
              {!transaction.is_paid && transaction.confirmed > -1 &&
                <div
                  onClick={() => {
                    localStorage.setItem('lastTransaction', JSON.stringify(transaction));
                    setModal("message", { captMessage: 'Silahkan tambahkan pesanan', descMessage: 'Pembayaran akan ditambahkan ke transaksi sebelumnya.' }, null, null);

                    // Dispatch the custom event
                    window.dispatchEvent(new Event("localStorageUpdated"));
                  }}
                  className={styles["addNewItem"]}
                >
                  Tambah pesanan
                </div>
              }
              <h2 className={styles["Transactions-detail"]}>
                {transaction.serving_type === "pickup"
                  ? "Self pickup"
                  : `Serve to ${transaction.Table ? transaction.Table.tableNo : "N/A"
                  }`}
              </h2>

              {transaction.notes && (
                <>
                  <div className={styles.NoteContainer}>
                    <span>Note :</span>
                    <span></span>
                  </div>

                  <div className={styles.NoteContainer}>
                    <textarea
                      className={styles.NoteInput}
                      value={transaction.notes}
                      disabled
                    />
                  </div>
                </>
              )}

              <div className={styles.TotalContainer}>
                <span>Total:</span>
                <span>
                  Rp {calculateTotalPrice(transaction.DetailedTransactions)}
                </span>
              </div>

              <div className={styles.TotalContainer}>
                {(deviceType == 'clerk' && !transaction.is_paid && (transaction.confirmed == 0 || transaction.confirmed == 1 || transaction.confirmed == 2)) &&
                  <button
                    className={styles.PayButton}
                    onClick={() => handleConfirm(transaction.transactionId)}
                    disabled={isPaymentLoading}
                  >
                    {
                      isPaymentLoading ? (
                        <ColorRing height="50" width="50" color="white" />
                      ) : transaction.confirmed === 1 ? (
                        "Konfirmasi Telah Bayar"
                      ) : transaction.confirmed === 2 ? (
                        "Confirm item is ready"
                      ) : (
                        "Confirm availability"
                      )
                    }

                  </button>
                }

                {deviceType == 'guestDevice' && transaction.confirmed < 2 && transaction.payment_type != 'cash' && transaction.payment_type != 'paylater/cash' &&
                  <ButtonWithReplica
                    paymentUrl={paymentUrl}
                    price={
                      "Rp" + calculateTotalPrice(transaction.DetailedTransactions)
                    }
                    disabled={isPaymentLoading}
                    isPaymentLoading={isPaymentLoading}
                    handleClick={() => handleConfirm(transaction.transactionId)}
                    Open={() => setIsPaymentOpen(transaction.transactionId)}
                    isPaymentOpen={isPaymentOpen == transaction.transactionId}
                  >
                    {
                      isPaymentLoading ? null : isPaymentOpen == transaction.transactionId ? (
                        transaction.paymentClaimed ? (
                          <>
                            <div style={{ position: 'absolute', left: '15px', top: '9px' }}>
                              <ColorRing height="20" width="20" className={styles['receipt-logo']} />
                            </div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Menunggu konfirmasi
                          </>
                        ) : 'Klaim telah bayar'
                      ) : 'Tampilkan QR'
                    }

                  </ButtonWithReplica>
                }
              </div>

              {deviceType == 'guestDevice' && transaction.confirmed >= 0 && transaction.confirmed < 2 && transaction.payment_type == 'cash' ?
                <button
                  className={styles.PayButton}
                  onClick={() => handleDecline(transaction.transactionId)}
                  disabled={
                    transaction.confirmed === -1 ||
                    transaction.confirmed === 3 ||
                    isPaymentLoading
                  } // Disable button if confirmed (1) or declined (-1) or
                >
                  {isPaymentLoading ? (
                    <ColorRing height="50" width="50" color="white" />
                  ) : transaction.confirmed === -1 ? (
                    "Ditolak" // Display "Declined" if the transaction is declined (-1)
                  ) : transaction.confirmed === -2 ? (
                    "Dibatalkan" // Display "Declined" if the transaction is declined (-1)
                  ) : (
                    "Batalkan" // Display "Confirm availability" if the transaction is not confirmed (0)
                  )}
                </button>
                :
                ((transaction.confirmed >= 0 && transaction.confirmed < 2 && transaction.payment_type != 'paylater/cash' && transaction.payment_type != 'paylater/cashless' || isPaymentOpen) &&
                  <h5
                    className={`${styles.DeclineButton}`}
                    onClick={() =>
                      isPaymentOpen
                        ? setIsPaymentOpen(false)
                        : handleDecline(transaction.transactionId)
                    }
                  >
                    {isPaymentOpen ? "kembali" : "batalkan"}
                  </h5>
                )
              }
            </div>
          ))}
      </div>
    </div>
  );
}