import React from "react";
import { useExpenseTransactions } from "../../hooks/useExpense";
import Error from "../common/Error";
import { formatUTCToLocalTime } from "../../utils/dateUtils";
import Loader, { SpinnerLoader } from "../common/Loader";

const AdvancePaymentList = ({ employeeId }) => {
  const { data, isError, isLoading, error, isFetching } =
    useExpenseTransactions(employeeId, { enabled: !!employeeId });

  // Handle no employee selected
  if (!employeeId) {
    return (
      <div
        className="d-flex justify-content-center align-items-center"
        style={{ height: "200px" }}
      >
        <p className="text-muted m-0">Please select an employee</p>
      </div>
    );
  }

  // Handle loading state
  if (isLoading || isFetching) {
    return (
      <div
        className="d-flex justify-content-center align-items-center"
        style={{ height: "200px" }}
      >
        <SpinnerLoader/>
      </div>
    );
  }

  // Handle error state
  if (isError) {
    return (
      <div className="text-center  py-3">
        {error?.status === 404 ? (
          "No advance payment transactions found."
        ) : (
          <Error error={error} />
        )}
      </div>
    );
  }

  const records = Array.isArray(data) ? data : [];

  let currentBalance = 0;
  const rowsWithBalance = records.map((r) => {
    const isCredit = r.amount > 0;
    const credit = isCredit ? r.amount : 0;
    const debit = !isCredit ? Math.abs(r.amount) : 0;
    currentBalance += credit - debit;

    return {
      id: r.id,
      description: r.title || "-",
      projectName: r.project?.name || "-",
      createdAt: r.createdAt,
      credit,
      debit,
      balance: currentBalance,
    };
  });

  const columns = [
    { key: "description", label: "Description", align: "text-start" },
    {
      key: "credit",
      label: (
        <>
          Credit <i className="bx bx-rupee text-success"></i>
        </>
      ),
      align: "text-end",
    },
    {
      key: "debit",
      label: (
        <>
          Debit <i className="bx bx-rupee text-danger"></i>
        </>
      ),
      align: "text-end",
    },
    {
      key: "balance",
      label: (
        <>
          Balance <i className="bi bi-currency-rupee text-primary"></i>
        </>
      ),
      align: "text-end fw-bold",
    },
  ];

  // Handle empty records
  if (rowsWithBalance.length === 0) {
    return (
      <div className="text-center text-muted py-3">
        No advance payment records found.
      </div>
    );
  }

  return (
    <div className="table-responsive">
      <table className="table align-middle">
        <thead className="table_header_border">
          <tr>
            {columns.map((col) => (
              <th key={col.key} className={col.align}>
                {col.label}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rowsWithBalance.map((row) => (
            <tr key={row.id}>
              {columns.map((col) => (
                <td key={col.key} className={`${col.align} p-2`}>
                  {["balance", "credit", "debit"].includes(col.key) ? (
                    <span>
                      {row[col.key].toLocaleString("en-IN")}
                    </span>
                  ) : (
                    <div className="d-flex flex-column text-start">
                      <small className="text-muted">
                        {formatUTCToLocalTime(row.createdAt)}
                      </small>
                      <small className="fw-semibold text-dark">
                        {row.projectName}
                      </small>
                      <small>{row.description}</small>
                    </div>
                  )}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
        <tfoot className="table-secondary fw-bold">
          <tr>
            <td className="text-start p-3">Final Balance</td>
            <td className="text-end" colSpan="3">
              {currentBalance.toLocaleString("en-IN", {
                style: "currency",
                currency: "INR",
              })}
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
  );
};

export default AdvancePaymentList;