import { useEffect, useState } from 'react';
import {
    Button,
    Col,
    DatePicker,
    Input,
    Row,
    Select,
    Space,
    Table,
    Tag,
    Typography,
    message,
    Spin,
} from 'antd';
import {
    DollarCircleOutlined,
    RedoOutlined,
    SearchOutlined,
    WalletOutlined,
    RiseOutlined,
    CheckCircleOutlined,
} 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 { RangePicker } = DatePicker;
const { Text } = Typography;

interface Supplier {
    id: string;
    name: string;
}

interface PattiLedgerRow {
    id: string;
    purchaseId: string;
    settlementNo: string;
    settlementDate: string;
    lotNo: string;
    supplierId: string | null;
    supplierName: string;
    vegetableName: string;
    totalWeightSold: number;
    grossSalesTotal: number;
    commissionPercent: number;
    commissionAmount: number;
    freightDeducted: number;
    extraFreightDeducted: number;
    associationDeducted: number;
    unloadingDeducted: number;
    miscDeducted: number;
    totalDeductions: number;
    advanceAdjusted: number;
    netPayable: number;
    paidAmount: number;
    balanceAmount: number;
    status: 'UNSETTLED' | 'PARTIALLY_SETTLED' | 'SETTLED';
    paymentMode?: string;
    remarks?: string;
}

interface PattiLedgerSummary {
    totalGrossSales: number;
    totalCommission: number;
    totalDeductions: number;
    totalAdvanceAdjusted: number;
    totalNetPayable: number;
    totalPaid: number;
    totalBalance: number;
}

const STATUS_TAGS: Record<string, { color: string; label: string }> = {
    SETTLED: { color: 'success', label: 'Settled' },
    PARTIALLY_SETTLED: { color: 'warning', label: 'Partially Settled' },
    UNSETTLED: { color: 'error', label: 'Unsettled' },
};

const MODE_COLORS: Record<string, string> = {
    CASH: 'green',
    BANK: 'blue',
    UPI: 'purple',
};

const PattiLedger = () => {
    const [dateRange, setDateRange] = useState<[Dayjs, Dayjs] | null>(null);
    const [selectedSupplier, setSelectedSupplier] = useState<string | undefined>(undefined);
    const [statusFilter, setStatusFilter] = useState<string | undefined>(undefined);
    const [searchQuery, setSearchQuery] = useState<string>('');
    const [suppliers, setSuppliers] = useState<Supplier[]>([]);
    const [data, setData] = useState<PattiLedgerRow[]>([]);
    const [loading, setLoading] = useState(false);
    const [summary, setSummary] = useState<PattiLedgerSummary>({
        totalGrossSales: 0,
        totalCommission: 0,
        totalDeductions: 0,
        totalAdvanceAdjusted: 0,
        totalNetPayable: 0,
        totalPaid: 0,
        totalBalance: 0,
    });

    const fetchMeta = async () => {
        try {
            const res = await jwtAxios.get(ENDPOINTS.SUPPLIER_LEDGER_META);
            setSuppliers(res.data?.result?.suppliers || []);
        } catch (err: any) {
            console.error('Failed to load suppliers for patti ledger:', err);
        }
    };

    const fetchData = async (
        range: [Dayjs, Dayjs] | null = dateRange,
        supplierId: string | undefined = selectedSupplier,
        status: string | undefined = statusFilter,
        search: string = searchQuery
    ) => {
        setLoading(true);
        try {
            const params = new URLSearchParams();
            if (range) {
                params.set('dateFrom', range[0].format('YYYY-MM-DD'));
                params.set('dateTo', range[1].format('YYYY-MM-DD'));
            }
            if (supplierId) params.set('supplierId', supplierId);
            if (status) params.set('status', status);
            if (search.trim()) params.set('search', search.trim());

            const res = await jwtAxios.get(`${ENDPOINTS.PATTI_LEDGER}?${params.toString()}`);
            const result = res.data?.result || {};
            const entries: PattiLedgerRow[] = (result.entries || []).map((r: any) => ({
                id: r.id,
                purchaseId: r.purchaseId,
                settlementNo: r.settlementNo,
                settlementDate: r.settlementDate,
                lotNo: r.lotNo,
                supplierId: r.supplierId,
                supplierName: r.supplierName,
                vegetableName: r.vegetableName,
                totalWeightSold: Number(r.totalWeightSold ?? 0),
                grossSalesTotal: Number(r.grossSalesTotal ?? 0),
                commissionPercent: Number(r.commissionPercent ?? 0),
                commissionAmount: Number(r.commissionAmount ?? 0),
                freightDeducted: Number(r.freightDeducted ?? 0),
                extraFreightDeducted: Number(r.extraFreightDeducted ?? 0),
                associationDeducted: Number(r.associationDeducted ?? 0),
                unloadingDeducted: Number(r.unloadingDeducted ?? 0),
                miscDeducted: Number(r.miscDeducted ?? 0),
                totalDeductions: Number(r.totalDeductions ?? 0),
                advanceAdjusted: Number(r.advanceAdjusted ?? 0),
                netPayable: Number(r.netPayable ?? 0),
                paidAmount: Number(r.paidAmount ?? 0),
                balanceAmount: Number(r.balanceAmount ?? 0),
                status: r.status,
                paymentMode: r.paymentMode,
                remarks: r.remarks,
            }));
            setData(entries);

            const s = result.summary || {};
            setSummary({
                totalGrossSales: Number(s.totalGrossSales ?? 0),
                totalCommission: Number(s.totalCommission ?? 0),
                totalDeductions: Number(s.totalDeductions ?? 0),
                totalAdvanceAdjusted: Number(s.totalAdvanceAdjusted ?? 0),
                totalNetPayable: Number(s.totalNetPayable ?? 0),
                totalPaid: Number(s.totalPaid ?? 0),
                totalBalance: Number(s.totalBalance ?? 0),
            });
        } catch (err: any) {
            message.error(err.response?.data?.message || 'Failed to fetch Patti ledger data');
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        fetchMeta();
        const from = dayjs().startOf('month');
        const to = dayjs().endOf('month');
        const range: [Dayjs, Dayjs] = [from, to];
        setDateRange(range);
        fetchData(range, undefined, undefined, '');
    }, []);

    const handleReset = () => {
        const from = dayjs().startOf('month');
        const to = dayjs().endOf('month');
        const range: [Dayjs, Dayjs] = [from, to];
        setDateRange(range);
        setSelectedSupplier(undefined);
        setStatusFilter(undefined);
        setSearchQuery('');
        fetchData(range, undefined, undefined, '');
    };

    const handleDateRangeChange = (values: any) => {
        const range = values ? (values as [Dayjs, Dayjs]) : null;
        setDateRange(range);
        fetchData(range, selectedSupplier, statusFilter, searchQuery);
    };

    const handleSupplierChange = (value: string | undefined) => {
        setSelectedSupplier(value);
        fetchData(dateRange, value ?? undefined, statusFilter, searchQuery);
    };

    const handleStatusChange = (value: string | undefined) => {
        setStatusFilter(value);
        fetchData(dateRange, selectedSupplier, value ?? undefined, searchQuery);
    };

    const handleSearch = (value: string) => {
        setSearchQuery(value);
        fetchData(dateRange, selectedSupplier, statusFilter, value);
    };

    const columns = [
        {
            title: 'Date',
            dataIndex: 'settlementDate',
            width: 105,
            render: (val: string) => val ? dayjs(val).format('DD/MM/YYYY') : '—',
        },
        {
            title: 'Patti No',
            dataIndex: 'settlementNo',
            width: 140,
            render: (val: string) => <Text strong>{val}</Text>,
        },
        {
            title: 'Lot No',
            dataIndex: 'lotNo',
            width: 110,
            render: (val: string) => <Tag color="blue">{val}</Tag>,
        },
        {
            title: 'Supplier / Farmer',
            dataIndex: 'supplierName',
            width: 160,
            render: (val: string) => val || <Text type="secondary">—</Text>,
        },
        {
            title: 'Vegetable',
            dataIndex: 'vegetableName',
            width: 130,
            render: (val: string) => val || <Text type="secondary">—</Text>,
        },
        {
            title: 'Sold Qty',
            dataIndex: 'totalWeightSold',
            width: 110,
            align: 'right' as const,
            render: (val: number) => val > 0 ? `${val.toLocaleString('en-IN', { maximumFractionDigits: 2 })} KG` : '—',
        },
        {
            title: 'Gross Sales (₹)',
            dataIndex: 'grossSalesTotal',
            width: 130,
            align: 'right' as const,
            render: (val: number) => val > 0
                ? <Text>{val.toLocaleString('en-IN', { minimumFractionDigits: 2 })}</Text>
                : <Text type="secondary">—</Text>,
        },
        {
            title: 'Deductions (₹)',
            dataIndex: 'totalDeductions',
            width: 120,
            align: 'right' as const,
            render: (val: number) => val > 0
                ? <Text style={{ color: '#d46b08' }}>{val.toLocaleString('en-IN', { minimumFractionDigits: 2 })}</Text>
                : <Text type="secondary">—</Text>,
        },
        {
            title: 'Net Payable (₹)',
            dataIndex: 'netPayable',
            width: 130,
            align: 'right' as const,
            render: (val: number) => (
                <Text strong style={{ color: '#1677ff' }}>
                    {val.toLocaleString('en-IN', { minimumFractionDigits: 2 })}
                </Text>
            ),
        },
        {
            title: 'Paid Amount (₹)',
            dataIndex: 'paidAmount',
            width: 130,
            align: 'right' as const,
            render: (val: number) => val > 0
                ? <Text strong style={{ color: '#389e0d' }}>{val.toLocaleString('en-IN', { minimumFractionDigits: 2 })}</Text>
                : <Text type="secondary">—</Text>,
        },
        {
            title: 'Balance (₹)',
            dataIndex: 'balanceAmount',
            width: 130,
            align: 'right' as const,
            render: (val: number) => val > 0
                ? <Text strong style={{ color: '#cf1322' }}>{val.toLocaleString('en-IN', { minimumFractionDigits: 2 })}</Text>
                : <Text type="secondary" style={{ color: '#52c41a' }}>0.00</Text>,
        },
        {
            title: 'Status',
            dataIndex: 'status',
            width: 130,
            render: (status: string) => {
                const conf = STATUS_TAGS[status] || { color: 'default', label: status };
                return <Tag color={conf.color}>{conf.label}</Tag>;
            },
        },
        {
            title: 'Mode',
            dataIndex: 'paymentMode',
            width: 90,
            render: (mode: string) => mode ? <Tag color={MODE_COLORS[mode] ?? 'default'}>{mode}</Tag> : <Text type="secondary">—</Text>,
        },
    ];

    return (
        <div>
            <Spin spinning={loading}>
                <AppContainer title="Patti Settlement Ledger">
                    {/* Summary Cards */}
                    <Row gutter={[18, 18]} style={{ marginBottom: 20 }}>
                        <Col xs={24} sm={12} md={6} lg={6}>
                            <SummaryCard
                                label="Total Gross Sales"
                                value={summary.totalGrossSales}
                                color="#fa8c16"
                                icon={<RiseOutlined style={{ fontSize: 20 }} />}
                            />
                        </Col>
                        <Col xs={24} sm={12} md={6} lg={6}>
                            <SummaryCard
                                label="Total Net Payable"
                                value={summary.totalNetPayable}
                                color="#1677ff"
                                icon={<DollarCircleOutlined style={{ fontSize: 20 }} />}
                            />
                        </Col>
                        <Col xs={24} sm={12} md={6} lg={6}>
                            <SummaryCard
                                label="Total Paid Amount"
                                value={summary.totalPaid}
                                color="#52c41a"
                                icon={<CheckCircleOutlined style={{ fontSize: 20 }} />}
                            />
                        </Col>
                        <Col xs={24} sm={12} md={6} lg={6}>
                            <SummaryCard
                                label="Total Balance Due"
                                value={summary.totalBalance}
                                color={summary.totalBalance > 0 ? '#cf1322' : '#52c41a'}
                                icon={<WalletOutlined style={{ fontSize: 20 }} />}
                            />
                        </Col>
                    </Row>

                    {/* Filters */}
                    <div style={{ marginBottom: 16 }}>
                        <Space wrap>
                            <RangePicker value={dateRange as any} onChange={handleDateRangeChange} />
                            <Select
                                placeholder="All Suppliers"
                                allowClear
                                showSearch
                                value={selectedSupplier}
                                onChange={handleSupplierChange}
                                style={{ width: 220 }}
                                optionFilterProp="label"
                                filterOption={(input, option) =>
                                    (option?.label as string)?.toLowerCase().includes(input.toLowerCase())
                                }
                                options={suppliers.map((s) => ({ label: s.name, value: String(s.id) }))}
                            />
                            <Select
                                placeholder="All Status"
                                allowClear
                                value={statusFilter}
                                onChange={handleStatusChange}
                                style={{ width: 170 }}
                                options={[
                                    { label: 'All Statuses', value: '' },
                                    { label: 'Settled', value: 'SETTLED' },
                                    { label: 'Partially Settled', value: 'PARTIALLY_SETTLED' },
                                    { label: 'Unsettled', value: 'UNSETTLED' },
                                ]}
                            />
                            <Input
                                placeholder="Search Patti / Lot / Veg"
                                prefix={<SearchOutlined />}
                                value={searchQuery}
                                onChange={(e) => handleSearch(e.target.value)}
                                style={{ width: 220 }}
                                allowClear
                            />
                            <Button type="default" icon={<RedoOutlined />} onClick={handleReset}>
                                Reset
                            </Button>
                        </Space>
                    </div>

                    {/* Table */}
                    <Table
                        columns={columns}
                        dataSource={data}
                        loading={loading}
                        rowKey="id"
                        pagination={false}
                        scroll={{ x: 1300 }}
                        size="small"
                        rowClassName={(record) => {
                            if (record.status === 'SETTLED') return 'patti-row-settled';
                            if (record.balanceAmount > 0) return 'patti-row-pending';
                            return '';
                        }}
                        summary={() => (
                            <Table.Summary fixed>
                                <Table.Summary.Row>
                                    <Table.Summary.Cell index={0} colSpan={6}>
                                        <Text strong>Total</Text>
                                    </Table.Summary.Cell>
                                    <Table.Summary.Cell index={6} align="right">
                                        <Text strong>
                                            {summary.totalGrossSales.toLocaleString('en-IN', { minimumFractionDigits: 2 })}
                                        </Text>
                                    </Table.Summary.Cell>
                                    <Table.Summary.Cell index={7} align="right">
                                        <Text strong style={{ color: '#d46b08' }}>
                                            {summary.totalDeductions.toLocaleString('en-IN', { minimumFractionDigits: 2 })}
                                        </Text>
                                    </Table.Summary.Cell>
                                    <Table.Summary.Cell index={8} align="right">
                                        <Text strong style={{ color: '#1677ff' }}>
                                            {summary.totalNetPayable.toLocaleString('en-IN', { minimumFractionDigits: 2 })}
                                        </Text>
                                    </Table.Summary.Cell>
                                    <Table.Summary.Cell index={9} align="right">
                                        <Text strong style={{ color: '#389e0d' }}>
                                            {summary.totalPaid.toLocaleString('en-IN', { minimumFractionDigits: 2 })}
                                        </Text>
                                    </Table.Summary.Cell>
                                    <Table.Summary.Cell index={10} align="right">
                                        <Text strong style={{ color: summary.totalBalance > 0 ? '#cf1322' : '#52c41a' }}>
                                            {summary.totalBalance.toLocaleString('en-IN', { minimumFractionDigits: 2 })}
                                        </Text>
                                    </Table.Summary.Cell>
                                    <Table.Summary.Cell index={11} colSpan={2} />
                                </Table.Summary.Row>
                            </Table.Summary>
                        )}
                    />
                </AppContainer>
            </Spin>

            <style>{`
                .patti-row-settled td { background-color: #f6ffed !important; }
                .patti-row-pending td { background-color: #fff9f0 !important; }
            `}</style>
        </div>
    );
};

export default PattiLedger;