import React, { useEffect, useState } from 'react';
import {
    Modal,
    Spin,
    Descriptions,
    Table,
    message,
} from 'antd';
import dayjs from 'dayjs';
import jwtAxios from '../../../api/axiosInstance';
import { ENDPOINTS } from '../../../api/endpoints';

interface RetailSaleDetailModalProps {
    open: boolean;
    saleId: string | null;
    onClose: () => void;
}

export const RetailSaleDetailModal: React.FC<RetailSaleDetailModalProps> = ({
    open,
    saleId,
    onClose,
}) => {
    const [loading, setLoading] = useState(false);
    const [sale, setSale] = useState<any>(null);

    useEffect(() => {
        if (open && saleId) {
            fetchSale(saleId);
        } else {
            setSale(null);
        }
    }, [open, saleId]);

    const fetchSale = async (id: string) => {
        setLoading(true);
        try {
            const res = await jwtAxios.get(`${ENDPOINTS.RETAIL_SALES}/${id}`);
            setSale(res.data?.result || null);
        } catch (err: any) {
            message.error(err.response?.data?.message || 'Failed to fetch sale details');
            onClose();
        } finally {
            setLoading(false);
        }
    };

    const itemColumns = [
        {
            title: 'Vegetable',
            render: (_: any, record: any) =>
                record.retailStock?.purchase?.vegetable?.name || record.purchase?.vegetable?.name || '—',
        },
        {
            title: 'Lot No',
            render: (_: any, record: any) =>
                record.retailStock?.lotNo || record.lotNo || record.retailStockId || '—',
        },
        {
            title: 'Sold By',
            dataIndex: 'saleUnit',
        },
        {
            title: 'Qty (Kg/Pcs)',
            dataIndex: 'quantity',
            render: (val: any, record: any) => {
                if (val == null) return '—';
                return (record.saleUnit === 'PIECES' || record.saleUnit === 'THAAR')
                    ? Number(val)
                    : Number(val).toFixed(2);
            },
        },
        {
            title: 'Bag/Box',
            render: (r: any) =>
                r.saleUnit === 'PIECES' || r.saleUnit === 'THAAR'
                    ? '-'
                    : (r.bags != null ? Number(r.bags) : '-'),
        },
        {
            title: 'Rate',
            dataIndex: 'sellingRate',
            render: (val: any) => (val != null ? Number(val).toFixed(2) : '—'),
        },
        {
            title: 'Total',
            dataIndex: 'total',
            render: (val: any) => (val != null ? Number(val).toFixed(2) : '—'),
        },
    ];

    return (
        <Modal
            title={`Sale Details - ${sale?.invoiceNo || ''}`}
            open={open}
            onCancel={onClose}
            footer={null}
            width={800}
            destroyOnHidden
        >
            <Spin spinning={loading}>
                {sale && (
                    <>
                        <Descriptions bordered column={2}>
                            <Descriptions.Item label="Invoice No">{sale.invoiceNo}</Descriptions.Item>
                            <Descriptions.Item label="Date">
                                {sale.invoiceDate ? dayjs(sale.invoiceDate).format('DD/MM/YYYY') : '—'}
                            </Descriptions.Item>
                            <Descriptions.Item label="Customer">
                                {sale.customer?.name || (sale.walkInName ? `${sale.walkInName} (Walk-in)` : 'Walk-in Customer')}
                            </Descriptions.Item>
                            {sale.walkInMobile && (
                                <Descriptions.Item label="Mobile">{sale.walkInMobile}</Descriptions.Item>
                            )}
                            <Descriptions.Item label="Sub Total">₹{Number(sale.subTotal || 0).toFixed(2)}</Descriptions.Item>
                            {Number(sale.discount || 0) > 0 && (
                                <Descriptions.Item label="Discount">₹{Number(sale.discount).toFixed(2)}</Descriptions.Item>
                            )}
                            <Descriptions.Item label="Grand Total">₹{Number(sale.grandTotal || 0).toFixed(2)}</Descriptions.Item>
                            <Descriptions.Item label="Received">
                                ₹{Number(sale.receivedAmount ?? sale.grandTotal ?? 0).toFixed(2)}
                            </Descriptions.Item>
                            {sale.paymentMode && (
                                <Descriptions.Item label={`  — ${sale.paymentMode}`}>
                                    ₹{Number(sale.receivedAmount ?? sale.grandTotal ?? 0).toFixed(2)}
                                </Descriptions.Item>
                            )}
                            <Descriptions.Item label="Balance">
                                ₹{Number(sale.balanceAmount ?? 0).toFixed(2)}
                            </Descriptions.Item>
                            {sale.remarks && (
                                <Descriptions.Item label="Remarks" span={2}>
                                    {sale.remarks}
                                </Descriptions.Item>
                            )}
                        </Descriptions>

                        <h4 style={{ marginTop: 24 }}>Items</h4>
                        <Table
                            dataSource={sale.items || []}
                            pagination={false}
                            rowKey="id"
                            columns={itemColumns}
                            scroll={{ x: 'max-content' }}
                        />
                    </>
                )}
            </Spin>
        </Modal>
    );
};