import { DefaultModal } from "../../../../Components/Modal/DefaultModal"
import { extractLastNumberOrderId } from "../../../../Services/Others"
import '../../../../Styles/BookingScreen/Template/BSLayout2/BSLayout2.scss';

const SalesDetailsModal = ({ isModalOpen = false,
    setIsModalOpen = () => { },
    currentData = [],
    currentPage,
    totalPages,
    setCurrentPage = () => { },
    startIndex
}) => {

    return (
        <DefaultModal
            open={isModalOpen}
            title="Sales Details"
            handleCancel={() => setIsModalOpen(false)}
            handleSubmit={() => setIsModalOpen(false)}
            width={700}
            footer={false}
        >
            <div style={{ overflowX: 'auto' }}>
                <table
                    style={{
                        width: '100%',
                        borderCollapse: 'collapse',
                        fontFamily: "'Segoe UI', Roboto, sans-serif",
                        fontSize: '14px',
                        borderRadius: '8px',
                        overflow: 'hidden',
                        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
                    }}
                    className='SCTableInPageSales'
                >
                    <thead>
                        <tr style={{ backgroundColor: '#2c88ee', color: '#fff' }}>
                            <th style={{ border: '1px solid #ddd', padding: '10px' }}>
                                S.No
                            </th>
                            <th style={{ border: '1px solid #ddd', padding: '10px' }}>
                                Order ID
                            </th>
                            <th style={{ border: '1px solid #ddd', padding: '10px' }}>
                                Customer
                            </th>
                            <th style={{ border: '1px solid #ddd', padding: '10px' }}>
                                Mobile
                            </th>
                            {/* <th style={{ border: "1px solid #ddd", padding: "10px" }}>Booked By</th> */}
                            <th style={{ border: '1px solid #ddd', padding: '10px' }}>
                                Payment Type
                            </th>
                            <th style={{ border: '1px solid #ddd', padding: '10px', backgroundColor: '#055ec0' }}>
                                Amount (₹)
                            </th>
                        </tr>
                    </thead>

                    <tbody>
                        {currentData?.length > 0 ? (
                            currentData?.map((item, index) => (
                                <tr
                                    key={item.OrderId}
                                    style={{
                                        backgroundColor: index % 2 === 0 ? '#f7faff' : '#e9f1ff',
                                        textAlign: 'center',
                                        transition: 'background 0.3s',
                                    }}
                                    onMouseEnter={(e) =>
                                        (e.currentTarget.style.backgroundColor = '#d6e4ff')
                                    }
                                    onMouseLeave={(e) =>
                                    (e.currentTarget.style.backgroundColor =
                                        index % 2 === 0 ? '#f7faff' : '#e9f1ff')
                                    }
                                >
                                    <td style={{ border: '1px solid #ddd', padding: '8px' }}>
                                        {startIndex + index + 1}
                                    </td>
                                    <td style={{ border: '1px solid #ddd', padding: '8px' }}>
                                        {extractLastNumberOrderId(item.OrderId)}
                                    </td>
                                    <td style={{ border: '1px solid #ddd', padding: '8px' }}>
                                        {item.CustName || '—'}
                                    </td>
                                    <td style={{ border: '1px solid #ddd', padding: '8px' }}>
                                        {item.CustMobile || '—'}
                                    </td>
                                    {/* <td style={{ border: "1px solid #ddd", padding: "8px" }}>
                                                {item.BookedBy || "—"}
                                            </td> */}
                                    <td style={{ border: '1px solid #ddd', padding: '8px' }}>
                                        {item.PaymentTypeName || '—'}
                                    </td>
                                    <td
                                        style={{
                                            border: '1px solid #ddd',
                                            padding: '8px',
                                            fontWeight: '600',
                                            color: '#2e7d32',
                                            backgroundColor: '#eaf6ea',
                                        }}
                                    >
                                        ₹{item.Amount?.toLocaleString()}
                                    </td>
                                </tr>
                            ))
                        ) : (
                            <tr>
                                <td
                                    colSpan="7"
                                    style={{
                                        textAlign: 'center',
                                        padding: '12px',
                                        border: '1px solid #ddd',
                                        color: '#888',
                                    }}
                                >
                                    No booking data available
                                </td>
                            </tr>
                        )}
                    </tbody>
                </table>

                {/* Pagination */}
                {totalPages > 1 && (
                    <div
                        style={{
                            marginTop: '12px',
                            display: 'flex',
                            justifyContent: 'center',
                            alignItems: 'center',
                            gap: '8px',
                        }}
                    >
                        {currentPage == 1 ? (
                            ''
                        ) : (
                            <button
                                onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
                                disabled={currentPage === 1}
                                style={{
                                    padding: '5px 10px',
                                    backgroundColor: '#003366',
                                    color: '#fff',
                                    border: 'none',
                                    borderRadius: '4px',
                                    cursor: currentPage === 1 ? 'not-allowed' : 'pointer',
                                    opacity: currentPage === 1 ? 0.5 : 1,
                                }}
                            >
                                Prev
                            </button>
                        )}

                        <span style={{ fontWeight: '600' }}>
                            Page {currentPage} of {totalPages}
                        </span>

                        <button
                            onClick={() =>
                                setCurrentPage((p) => Math.min(p + 1, totalPages))
                            }
                            disabled={currentPage === totalPages}
                            style={{
                                padding: '5px 10px',
                                backgroundColor: '#003366',
                                color: '#fff',
                                border: 'none',
                                borderRadius: '4px',
                                cursor:
                                    currentPage === totalPages ? 'not-allowed' : 'pointer',
                                opacity: currentPage === totalPages ? 0.5 : 1,
                            }}
                        >
                            Next
                        </button>
                    </div>
                )}
            </div>
        </DefaultModal>
    )
}

const SalesNetAmountModal = ({
    isNetAmtModalOpen = false,
    setIsNetAmtModalOpen = () => { },
    orderDetails = [],
    RefundAmt
}) => {
    return (
        <DefaultModal
            open={isNetAmtModalOpen}
            title="Sales Net Amount"
            handleCancel={() => setIsNetAmtModalOpen(false)}
            handleSubmit={() => setIsNetAmtModalOpen(false)}
            width={800}
            footer={false}
        >
            <div style={{ overflowX: 'auto' }}>
                <table
                    style={{
                        width: '100%',
                        borderCollapse: 'collapse',
                        textAlign: 'center',
                        fontFamily: "'Segoe UI', Roboto, sans-serif",
                        fontSize: '14px',
                        borderRadius: '8px',
                        overflow: 'hidden',
                        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
                    }}
                    className='SCTableInPageSales'
                >
                    <thead>
                        <tr style={{ backgroundColor: '#2c88ee', color: '#fff' }}>
                            <th
                                colSpan="2"
                                style={{ border: '1px solid #ddd', padding: '10px' }}
                            >
                                Cash
                            </th>
                            <th
                                colSpan="2"
                                style={{ border: '1px solid #ddd', padding: '10px' }}
                            >
                                UPI
                            </th>
                            <th
                                colSpan="2"
                                style={{ border: '1px solid #ddd', padding: '10px' }}
                            >
                                Card
                            </th>
                            <th
                                colSpan="2"
                                style={{ border: '1px solid #ddd', padding: '10px' }}
                            >
                                Credit
                            </th>
                            <th
                                colSpan="2"
                                style={{ border: '1px solid #ddd', padding: '10px' }}
                            >
                                Business UPI
                            </th>
                            <th
                                rowSpan="2"
                                style={{
                                    border: '1px solid #ddd',
                                    padding: '10px',
                                    backgroundColor: '#055ec0',
                                    color: '#fff',
                                }}
                            >
                                Refund Amt
                            </th>
                            <th
                                rowSpan="2"
                                style={{
                                    border: '1px solid #ddd',
                                    padding: '10px',
                                    backgroundColor: '#055ec0',
                                    color: '#fff',
                                }}
                            >
                                Total
                            </th>
                        </tr>
                        <tr style={{ backgroundColor: '#2c88ee', color: '#fff' }}>
                            <th style={{ border: '1px solid #ddd', padding: '8px' }}>
                                Count
                            </th>
                            <th style={{ border: '1px solid #ddd', padding: '8px' }}>
                                Amt
                            </th>
                            <th style={{ border: '1px solid #ddd', padding: '8px' }}>
                                Count
                            </th>
                            <th style={{ border: '1px solid #ddd', padding: '8px' }}>
                                Amt
                            </th>
                            <th style={{ border: '1px solid #ddd', padding: '8px' }}>
                                Count
                            </th>
                            <th style={{ border: '1px solid #ddd', padding: '8px' }}>
                                Amt
                            </th>
                            <th style={{ border: '1px solid #ddd', padding: '8px' }}>
                                Count
                            </th>
                            <th style={{ border: '1px solid #ddd', padding: '8px' }}>
                                Amt
                            </th>
                            <th style={{ border: '1px solid #ddd', padding: '8px' }}>
                                Count
                            </th>
                            <th style={{ border: '1px solid #ddd', padding: '8px' }}>
                                Amt
                            </th>
                        </tr>
                    </thead>

                    <tbody>
                        {orderDetails?.map((item, index) => {
                            const total =
                                (item.CashAmount || 0) +
                                (item.UpiAmount || 0) +
                                (item.CardAmount || 0) +
                                (item.CreditAmount || 0) ;

                            return (
                                <tr
                                    key={index}
                                    style={{
                                        backgroundColor: index % 2 === 0 ? '#f7faff' : '#ffffff',
                                        transition: 'background 0.3s',
                                    }}
                                    onMouseEnter={(e) =>
                                        (e.currentTarget.style.backgroundColor = '#e6f2ff')
                                    }
                                    onMouseLeave={(e) =>
                                    (e.currentTarget.style.backgroundColor =
                                        index % 2 === 0 ? '#f7faff' : '#ffffff')
                                    }
                                >
                                    <td
                                        style={{
                                            border: '1px solid #ddd',
                                            fontWeight: '700',
                                            padding: '8px',
                                        }}
                                    >
                                        {item.CashCount}
                                    </td>
                                    <td
                                        style={{
                                            border: '1px solid #ddd',
                                            fontWeight: '700',
                                            padding: '8px',
                                        }}
                                    >
                                        {item.CashAmount}
                                    </td>
                                    <td
                                        style={{
                                            border: '1px solid #ddd',
                                            fontWeight: '700',
                                            padding: '8px',
                                        }}
                                    >
                                        {item.UpiCount}
                                    </td>
                                    <td
                                        style={{
                                            border: '1px solid #ddd',
                                            fontWeight: '700',
                                            padding: '8px',
                                        }}
                                    >
                                        {item.UpiAmount}
                                    </td>
                                    <td
                                        style={{
                                            border: '1px solid #ddd',
                                            fontWeight: '700',
                                            padding: '8px',
                                        }}
                                    >
                                        {item.CardCount}
                                    </td>
                                    <td
                                        style={{
                                            border: '1px solid #ddd',
                                            fontWeight: '700',
                                            padding: '8px',
                                        }}
                                    >
                                        {item.CardAmount}
                                    </td>
                                    <td
                                        style={{
                                            border: '1px solid #ddd',
                                            fontWeight: '700',
                                            padding: '8px',
                                        }}
                                    >
                                        {item.CreditCount}
                                    </td>
                                    <td
                                        style={{
                                            border: '1px solid #ddd',
                                            fontWeight: '700',
                                            padding: '8px',
                                        }}
                                    >
                                        {item.CreditAmount}
                                    </td>
                                    <td
                                        style={{
                                            border: '1px solid #ddd',
                                            fontWeight: '700',
                                            padding: '8px',
                                        }}
                                    >
                                        {item.BusinessUpiCount}
                                    </td>
                                    <td
                                        style={{
                                            border: '1px solid #ddd',
                                            fontWeight: '700',
                                            padding: '8px',
                                        }}
                                    >
                                        {item.BusinessUpiAmount}
                                    </td>
                                    <td
                                        style={{
                                            border: '1px solid #ddd',
                                            padding: '8px',
                                            fontWeight: '700',
                                            // backgroundColor: '#eaf6ea',
                                            // color: '#2e7d32',
                                        }}
                                    >
                                        {RefundAmt}
                                    </td>
                                    <td
                                        style={{
                                            border: '1px solid #ddd',
                                            padding: '8px',
                                            fontWeight: '700',
                                            backgroundColor: '#eaf6ea',
                                            color: '#2e7d32',
                                        }}
                                    >
                                        {total-RefundAmt}
                                    </td>
                                </tr>
                            );
                        })}
                    </tbody>
                </table>
            </div>
        </DefaultModal>
    )
}

export { SalesDetailsModal, SalesNetAmountModal };