import { useEffect, useState } from 'react';
import {
    Button,
    DatePicker,
    Input,
    Select,
    Space,
    Table,
    Tag,
    message,
    Spin,
    Row,
    Col,
    Modal,
    Descriptions,
    Divider,
} from 'antd';
import {
    DownloadOutlined,
    FilePdfOutlined,
    RedoOutlined,
    EyeOutlined,
} from '@ant-design/icons';
import dayjs, { Dayjs } from 'dayjs';
import { AppContainer } from '../../../components/AppContainer';
import jwtAxios from '../../../api/axiosInstance';
import { ENDPOINTS } from '../../../api/endpoints';
import SummaryCard from '../../../components/SummaryCard';

const ENTITY_LABEL = 'Retail Sales Report';
const { RangePicker } = DatePicker;

export const RetailSalesReport = () => {
    const [searchText, setSearchText] = useState('');
    const [dateRange, setDateRange] = useState<[Dayjs, Dayjs] | null>(null);
    const [paymentMode, setPaymentMode] = useState<string | undefined>(undefined);
    const [data, setData] = useState<any[]>([]);
    const [loading, setLoading] = useState<boolean>(false);
    const [sum, setSum] = useState({ grand_total: 0, total_invoices: 0 });
    const [selectedSale, setSelectedSale] = useState<any | null>(null);
    const [modalVisible, setModalVisible] = useState<boolean>(false);

    const [pagination, setPagination] = useState({
        current: 1,
        pageSize: Number(import.meta.env.VITE_PAGE_SIZE) || 10,
        total: 0,
        totalPages: 0,
    });

    const handleReset = () => {
        setSearchText('');
        setDateRange(null);
        setPaymentMode(undefined);
        fetchData(1, pagination.pageSize, '', null, undefined);
    };

    const fetchData = async (
        page: number = pagination.current,
        limit: number = pagination.pageSize,
        search: string = searchText,
        range: [Dayjs, Dayjs] | null = dateRange,
        mode: string | undefined = paymentMode
    ) => {
        setLoading(true);
        try {
            let url = `${ENDPOINTS.RETAIL_SALES}?page=${page}&limit=${limit}&search=${encodeURIComponent(search)}`;
            if (range) {
                url += `&dateFrom=${range[0].format('YYYY-MM-DD')}&dateTo=${range[1].format('YYYY-MM-DD')}`;
            }
            if (mode) {
                url += `&paymentMode=${mode}`;
            }
            const res = await jwtAxios.get(url);
            const result = res.data?.result || {};
            const records = result.data || [];
            const metaInfo = result.meta || {};
            const sumInfo = result.sum || {};

            setData(records.map((item: any) => ({ key: item.id, ...item })));
            setPagination((prev) => ({
                ...prev,
                current: metaInfo.page ?? page,
                pageSize: metaInfo.limit ?? limit,
                total: metaInfo.total ?? prev.total,
                totalPages: metaInfo.totalPages ?? prev.totalPages,
            }));
            setSum({
                grand_total: Number(sumInfo.grand_total ?? 0),
                total_invoices: Number(sumInfo.total_invoices ?? metaInfo.total ?? 0),
            });
        } catch (err: any) {
            message.error(err.response?.data?.message || 'Failed to fetch retail sales report');
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        fetchData(1, pagination.pageSize, '');
    }, []);

    const handleSearch = (value: string) => {
        fetchData(1, pagination.pageSize, value, dateRange, paymentMode);
    };

    const handleDateRangeChange = (values: any) => {
        const range = values ? (values as [Dayjs, Dayjs]) : null;
        setDateRange(range);
        fetchData(1, pagination.pageSize, searchText, range, paymentMode);
    };

    const handlePaymentModeChange = (value: string | undefined) => {
        setPaymentMode(value);
        fetchData(1, pagination.pageSize, searchText, dateRange, value);
    };

    const handleExportPdf = async () => {
        if (!data || data.length === 0) {
            message.warning('No data available to export');
            return;
        }
        setLoading(true);
        try {
            const params = new URLSearchParams();
            if (searchText) params.set('search', searchText);
            if (dateRange) {
                params.set('dateFrom', dateRange[0].format('YYYY-MM-DD'));
                params.set('dateTo', dateRange[1].format('YYYY-MM-DD'));
            }
            if (paymentMode) params.set('paymentMode', paymentMode);

            const url = `${ENDPOINTS.RETAIL_SALES_EXPORT_PDF}${params.toString() ? '?' + params.toString() : ''}`;
            const response = await jwtAxios.get(url, { responseType: 'blob' });

            const blob = new Blob([response.data], { type: 'application/pdf' });
            const objectUrl = window.URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = objectUrl;
            link.download = `retail-sales-report-${dayjs().format('YYYY-MM-DD')}.pdf`;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(objectUrl);

            message.success('Retail sales report PDF exported successfully');
        } catch {
            message.error('Failed to export retail sales report PDF');
        } finally {
            setLoading(false);
        }
    };

    const handleExportExcel = async () => {
        if (!data || data.length === 0) {
            message.warning('No data available to export');
            return;
        }
        setLoading(true);
        try {
            const params = new URLSearchParams();
            if (searchText) params.set('search', searchText);
            if (dateRange) {
                params.set('dateFrom', dateRange[0].format('YYYY-MM-DD'));
                params.set('dateTo', dateRange[1].format('YYYY-MM-DD'));
            }
            if (paymentMode) params.set('paymentMode', paymentMode);

            const url = `${ENDPOINTS.RETAIL_SALES_EXPORT_EXCEL}${params.toString() ? '?' + params.toString() : ''}`;
            const response = await jwtAxios.get(url, { responseType: 'blob' });

            const disposition = response.headers['content-disposition'];
            let fileName = `retail-sales-report-${dayjs().format('YYYY-MM-DD')}.xlsx`;
            if (disposition) {
                const match = disposition.match(/filename\*?=(?:UTF-8'')?"?([^"\n;]+)"?/i);
                if (match?.[1]) fileName = decodeURIComponent(match[1]);
            }

            const blob = new Blob([response.data], {
                type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
            });
            const objectUrl = window.URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = objectUrl;
            link.download = fileName;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(objectUrl);

            message.success('Retail sales report Excel exported successfully');
        } catch {
            message.error('Failed to export retail sales report Excel');
        } finally {
            setLoading(false);
        }
    };

    const handleViewDetails = (record: any) => {
        setSelectedSale(record);
        setModalVisible(true);
    };

    const columns = [
        {
            title: 'S.No',
            dataIndex: 'sNo',
            render: (_: number, __: any, index: number) =>
                (pagination.current - 1) * pagination.pageSize + index + 1,
        },
        {
            title: 'Invoice No',
            dataIndex: 'invoiceNo',
            render: (text: string) => <span className="font-semibold text-emerald-700">{text}</span>,
        },
        {
            title: 'Invoice Date',
            dataIndex: 'invoiceDate',
            render: (date: string) => dayjs(date).format('DD/MM/YYYY'),
        },
        {
            title: 'Customer Name',
            dataIndex: 'walkInName',
            render: (name: string, record: any) => (
                <div>
                    <div className="font-medium">{name || 'Walk-in Customer'}</div>
                    {record.walkInMobile && (
                        <div className="text-xs text-gray-400">{record.walkInMobile}</div>
                    )}
                </div>
            ),
        },
        {
            title: 'Items Sold',
            dataIndex: 'items',
            render: (items: any[]) => (
                <Tag color="cyan" className="font-medium">
                    {items?.length || 0} item(s)
                </Tag>
            ),
        },
        {
            title: 'Payment Mode',
            dataIndex: 'paymentMode',
            render: (mode: string) => {
                const colorMap: Record<string, string> = {
                    CASH: 'green',
                    BANK: 'blue',
                    UPI: 'purple',
                };
                return <Tag color={colorMap[mode] || 'default'}>{mode || 'CASH'}</Tag>;
            },
        },
        {
            title: 'Grand Total (₹)',
            dataIndex: 'grandTotal',
            render: (val: string) => (
                <span className="font-bold text-gray-800">
                    ₹{Number(val).toFixed(2)}
                </span>
            ),
        },
        {
            title: 'Action',
            key: 'action',
            render: (_: any, record: any) => (
                <Button
                    type="link"
                    icon={<EyeOutlined />}
                    onClick={() => handleViewDetails(record)}
                >
                    View Details
                </Button>
            ),
        },
    ];

    const itemColumns = [
        {
            title: 'Vegetable / Lot',
            dataIndex: 'retailStock',
            render: (_: any, record: any) => {
                const vegName = record.retailStock?.purchase?.vegetable?.name || 'N/A';
                const lotNo = record.retailStock?.lotNo || 'N/A';
                return (
                    <div>
                        <div className="font-semibold text-gray-800">{vegName}</div>
                        <div className="text-xs text-gray-500">Lot: {lotNo}</div>
                    </div>
                );
            },
        },
        {
            title: 'Unit',
            dataIndex: 'saleUnit',
            render: (unit: string) => <Tag color="blue">{unit}</Tag>,
        },
        {
            title: 'Quantity / Bags',
            dataIndex: 'quantity',
            render: (qty: string, record: any) => {
                if (record.saleUnit === 'KG') {
                    return `${Number(qty).toFixed(2)} KG`;
                }
                return `${Number(record.bags || 0)} ${record.saleUnit}`;
            },
        },
        {
            title: 'Selling Rate (₹)',
            dataIndex: 'sellingRate',
            render: (val: string) => `₹${Number(val).toFixed(2)}`,
        },
        {
            title: 'Total (₹)',
            dataIndex: 'total',
            render: (val: string) => (
                <span className="font-semibold">₹{Number(val).toFixed(2)}</span>
            ),
        },
    ];

    return (
        <div>
            <Spin spinning={loading}>
                <AppContainer
                    title={`${ENTITY_LABEL}`}
                    headerAction={
                        <Space>
                            <Button
                                icon={<FilePdfOutlined />}
                                style={{ color: '#ff4d4f', borderColor: '#ff4d4f' }}
                                loading={loading}
                                onClick={handleExportPdf}
                            >
                                Export PDF
                            </Button>
                            <Button
                                icon={<DownloadOutlined />}
                                style={{ color: '#52c41a', borderColor: '#52c41a' }}
                                loading={loading}
                                onClick={handleExportExcel}
                            >
                                Export Excel
                            </Button>
                        </Space>
                    }
                >
                    {/* Summary Cards */}
                    <Row gutter={[16, 16]} style={{ marginBottom: 20 }}>
                        <Col xs={24} sm={12} md={12}>
                            <SummaryCard
                                label="Total Retail Sales (Grand Total)"
                                value={sum.grand_total}
                                color="#15803d"
                                icon={<span style={{ fontSize: 20 }}>🛍️</span>}
                            />
                        </Col>
                        <Col xs={24} sm={12} md={12}>
                            <SummaryCard
                                label="Total Retail Invoices"
                                value={sum.total_invoices}
                                color="#1677ff"
                                icon={<span style={{ fontSize: 20 }}>📄</span>}
                            />
                        </Col>
                    </Row>

                    {/* Filters bar */}
                    <div className="flex flex-wrap justify-between items-center mb-4 pb-4 border-b border-gray-200 gap-2">
                        <Space flex-wrap="wrap">
                            <RangePicker
                                value={dateRange as any}
                                onChange={handleDateRangeChange}
                                placeholder={['From Date', 'To Date']}
                            />
                            <Select
                                placeholder="Payment Mode"
                                allowClear
                                value={paymentMode}
                                onChange={handlePaymentModeChange}
                                style={{ width: 160 }}
                                options={[
                                    { label: 'CASH', value: 'CASH' },
                                    { label: 'BANK', value: 'BANK' },
                                    { label: 'UPI', value: 'UPI' },
                                ]}
                            />
                            <Input.Search
                                placeholder="Search invoice, customer, lot..."
                                value={searchText}
                                onChange={(e) => setSearchText(e.target.value)}
                                onSearch={handleSearch}
                                allowClear
                                style={{ width: 260 }}
                            />
                            <Button type="default" icon={<RedoOutlined />} onClick={handleReset}>
                                Reset
                            </Button>
                        </Space>
                    </div>

                    <Table
                        columns={columns}
                        dataSource={data}
                        loading={loading}
                        rowKey="id"
                        pagination={{
                            ...pagination,
                            onChange: (page, pageSize) => fetchData(page, pageSize),
                        }}
                    />
                    <div className="text-center mt-2">
                        <Tag color="cyan">
                            Page {pagination.current} of {pagination.totalPages}
                        </Tag>
                    </div>
                </AppContainer>
            </Spin>

            {/* Retail Sale Detail Modal */}
            <Modal
                title={`Retail Sale Invoice: ${selectedSale?.invoiceNo}`}
                open={modalVisible}
                onCancel={() => setModalVisible(false)}
                footer={[
                    <Button key="close" onClick={() => setModalVisible(false)}>
                        Close
                    </Button>,
                ]}
                width={750}
            >
                {selectedSale && (
                    <div>
                        <Descriptions column={2} bordered size="small">
                            <Descriptions.Item label="Invoice No">
                                <span className="font-bold">{selectedSale.invoiceNo}</span>
                            </Descriptions.Item>
                            <Descriptions.Item label="Date">
                                {dayjs(selectedSale.invoiceDate).format('DD/MM/YYYY')}
                            </Descriptions.Item>
                            <Descriptions.Item label="Customer">
                                {selectedSale.walkInName || 'Walk-in Customer'}
                            </Descriptions.Item>
                            <Descriptions.Item label="Mobile">
                                {selectedSale.walkInMobile || '-'}
                            </Descriptions.Item>
                            <Descriptions.Item label="Payment Mode">
                                <Tag color="green">{selectedSale.paymentMode || 'CASH'}</Tag>
                            </Descriptions.Item>
                            <Descriptions.Item label="Grand Total">
                                <span className="font-bold text-emerald-700">
                                    ₹{Number(selectedSale.grandTotal).toFixed(2)}
                                </span>
                            </Descriptions.Item>
                        </Descriptions>

                        <Divider children="Sale Items" titlePlacement="left" />

                        <Table
                            columns={itemColumns}
                            dataSource={selectedSale.items || []}
                            pagination={false}
                            rowKey="id"
                            size="small"
                        />
                    </div>
                )}
            </Modal>
        </div>
    );
};

export default RetailSalesReport;