import React from 'react'
import Avatar from "../../components/common/Avatar"; // <-- ADD THIS
import { useExpenseAllTransactionsList } from '../../hooks/useExpense';
import { useNavigate } from 'react-router-dom';
import { formatFigure } from '../../utils/appUtils';

const AdvancePaymentList1 = ({ searchString }) => {

    const { data, isError, isLoading, error } =
        useExpenseAllTransactionsList(searchString);

    const rows = data || [];
    const navigate = useNavigate();

    const columns = [
        {
            key: "employee",
            label: "Employee Name",
            align: "text-start",
            customRender: (r) => (
                <div className="d-flex align-items-center gap-2" onClick={() => navigate(`/advance-payment/${r.id}`)}
                    style={{ cursor: "pointer" }}>
                    <Avatar firstName={r.firstName} lastName={r.lastName} />

                    <span className="fw-medium">
                        {r.firstName} {r.lastName}
                    </span>
                </div>
            ),
        },
        {
            key: "jobRoleName",
            label: "Job Role",
            align: "text-start",
            customRender: (r) => (
                <span className="fw-semibold">
                    {r.jobRoleName}
                </span>
            ),
        },
        {
            key: "balanceAmount",
            label: "Balance (₹)",
            align: "text-end",
            customRender: (r) => (
                <span className="fw-semibold fs-6">
                    {formatFigure(r.balanceAmount, {
                        // type: "currency",
                        currency: "INR",
                    })}
                </span>
            ),
        },
    ];

    if (isLoading) return <p className="text-center py-4">Loading...</p>;
    if (isError) return <p className="text-center py-4 text-danger">{error.message}</p>;

    return (
        <div className="card-datatable" id="payment-request-table">
            <div className="mx-2">
                <table className="table border-top dataTable text-nowrap align-middle">
                    <thead>
                        <tr>
                            {columns.map((col) => (
                                <th key={col.key} className={`sorting ${col.align}`}>
                                    {col.label}
                                </th>
                            ))}
                        </tr>
                    </thead>

                    <tbody>
                        {rows.length > 0 ? (
                            rows.map((row) => (
                                <tr key={row.id} className="align-middle" style={{ height: "40px" }}>
                                    {columns.map((col) => (
                                        <td key={col.key} className={`d-table-cell ${col.align} py-3`}>
                                            {col.customRender
                                                ? col.customRender(row)
                                                : col.getValue(row)}
                                        </td>
                                    ))}
                                </tr>
                            ))
                        ) : (
                            <tr>
                                <td colSpan={columns.length} className="text-center border-0 py-3">
                                    No Employees Found
                                </td>
                            </tr>
                        )}
                    </tbody>
                </table>
            </div>
        </div>
    )
}

export default AdvancePaymentList1;