import { useEffect, useState } from 'react';
import {
  DatePicker,
  Input,
  Select,
  Space,
  Spin,
  Table,
  message,
  Tag,
  Button,
  Row,
  Col,
} from 'antd';
import { DownloadOutlined, FilePdfOutlined, RedoOutlined } 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 = 'Arrival Settlements Report (P.Patti)';

const { RangePicker } = DatePicker;

const STATUS_OPTIONS = [
  { label: 'Unsettled', value: 'UNSETTLED' },
  { label: 'Partially Settled', value: 'PARTIALLY_SETTLED' },
  { label: 'Settled', value: 'SETTLED' },
];

const statusTagColor: Record<string, string> = {
  SETTLED: 'green',
  PARTIALLY_SETTLED: 'gold',
  UNSETTLED: 'red',
};
const statusLabel: Record<string, string> = {
  SETTLED: 'Settled',
  PARTIALLY_SETTLED: 'Partial',
  UNSETTLED: 'Unsettled',
};

const ArrivalSettlementsReport = () => {
  const [searchText, setSearchText] = useState('');
  const [dateRange, setDateRange] = useState<[Dayjs, Dayjs] | null>(null);
  const [status, setStatus] = useState<string | undefined>(undefined);

  const [data, setData] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
  const [exportLoading, setExportLoading] = useState(false);
  const [exportPdfLoading, setExportPdfLoading] = useState(false);

  const [summary, setSummary] = useState({
    totalCount: 0,
    totalGrossSales: 0,
    totalNetPayable: 0,
    totalPaidAmount: 0,
    totalBalance: 0,
  });

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

  const buildParams = (
    page: number,
    limit: number,
    search: string,
    range: [Dayjs, Dayjs] | null,
    st: string | undefined
  ) => {
    const params = new URLSearchParams();
    params.set('page', String(page));
    params.set('limit', String(limit));
    if (search) params.set('search', search);
    if (range) {
      params.set('dateFrom', range[0].format('YYYY-MM-DD'));
      params.set('dateTo', range[1].format('YYYY-MM-DD'));
    }
    if (st) params.set('status', st);
    return params;
  };

  const fetchData = async (
    page = pagination.current,
    limit = pagination.pageSize,
    search = searchText,
    range: [Dayjs, Dayjs] | null = dateRange,
    st = status
  ) => {
    setLoading(true);
    try {
      const params = buildParams(page, limit, search, range, st);
      const res = await jwtAxios.get(`${ENDPOINTS.ARRIVAL_SETTLEMENTS_REPORT}?${params.toString()}`);
      const records: any[] = res.data?.result?.data || [];
      const metaInfo = res.data?.result?.meta || {};

      setData(records.map((r) => ({ ...r, key: r.id })));
      setPagination((prev) => ({
        ...prev,
        current: metaInfo.page ?? page,
        pageSize: metaInfo.limit ?? limit,
        total: metaInfo.total ?? prev.total,
        totalPages: metaInfo.totalPages ?? prev.totalPages,
      }));

      setSummary({
        totalCount: records.length,
        totalGrossSales: records.reduce((s, r) => s + Number(r.grossSalesTotal ?? 0), 0),
        totalNetPayable: records.reduce((s, r) => s + Number(r.netPayable ?? 0), 0),
        totalPaidAmount: records.reduce((s, r) => s + Number(r.paidAmount ?? 0), 0),
        totalBalance: records.reduce((s, r) => s + Number(r.balanceAmount ?? 0), 0),
      });
    } catch (err: any) {
      message.error(err.response?.data?.message || 'Failed to fetch settlements report');
      setData([]);
    } finally {
      setLoading(false);
    }
  };

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

  // ── Export Excel ──────────────────────────────────────────────────
  const handleExportExcel = async () => {
    if (!data.length) { message.warning('No data to export'); return; }
    setExportLoading(true);
    try {
      const params = buildParams(1, 9999, searchText, dateRange, status);
      const response = await jwtAxios.get(`${ENDPOINTS.ARRIVAL_SETTLEMENTS_REPORT_EXPORT}?${params.toString()}`, { responseType: 'blob' });
      const disposition = response.headers['content-disposition'];
      let fileName = `arrival-settlements-${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 url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url; a.download = fileName;
      document.body.appendChild(a); a.click();
      document.body.removeChild(a); window.URL.revokeObjectURL(url);
      message.success('Excel exported successfully');
    } catch { message.error('Failed to export Excel'); }
    finally { setExportLoading(false); }
  };

  // ── Export PDF ────────────────────────────────────────────────────
  const handleExportPdf = async () => {
    if (!data.length) { message.warning('No data to export'); return; }
    setExportPdfLoading(true);
    try {
      const params = buildParams(1, 9999, searchText, dateRange, status);
      const response = await jwtAxios.get(`${ENDPOINTS.ARRIVAL_SETTLEMENTS_REPORT_EXPORT_PDF}?${params.toString()}`, { responseType: 'blob' });
      const disposition = response.headers['content-disposition'];
      let fileName = `arrival-settlements-${dayjs().format('YYYY-MM-DD')}.pdf`;
      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/pdf' });
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url; a.download = fileName;
      document.body.appendChild(a); a.click();
      document.body.removeChild(a); window.URL.revokeObjectURL(url);
      message.success('PDF exported successfully');
    } catch { message.error('Failed to export PDF'); }
    finally { setExportPdfLoading(false); }
  };

  // ── Filter handlers ───────────────────────────────────────────────
  const handleSearch = (val: string) => fetchData(1, pagination.pageSize, val, dateRange, status);
  const handleDateChange = (vals: any) => {
    const range = vals as [Dayjs, Dayjs] | null;
    setDateRange(range);
    fetchData(1, pagination.pageSize, searchText, range, status);
  };
  const handleStatusChange = (val: string | undefined) => {
    setStatus(val);
    fetchData(1, pagination.pageSize, searchText, dateRange, val);
  };
  const handleReset = () => {
    setSearchText(''); setDateRange(null); setStatus(undefined);
    fetchData(1, pagination.pageSize, '', null, undefined);
  };

  // ── Table columns ─────────────────────────────────────────────────
  const columns = [
    {
      title: 'S.No',
      render: (_: any, __: any, i: number) => (pagination.current - 1) * pagination.pageSize + i + 1,
      width: 50,
      fixed: 'left' as const,
    },
    {
      title: 'Patti No',
      dataIndex: 'settlementNo',
      width: 130,
      ellipsis: true,
      fixed: 'left' as const,
    },
    {
      title: 'Date',
      dataIndex: 'settlementDate',
      render: (v: any) => v ? dayjs(v).format('DD/MM/YYYY') : '-',
      width: 95,
    },
    {
      title: 'Lot No',
      render: (_: any, r: any) => r.purchase?.lotNo ?? '-',
      width: 80,
    },
    {
      title: 'Supplier',
      render: (_: any, r: any) => {
        const a = r.purchase;
        return a?.supplier?.name ?? a?.cashSupplierName ?? a?.agentName ?? '-';
      },
      width: 130,
      ellipsis: true,
    },
    {
      title: 'Vegetable',
      render: (_: any, r: any) => r.purchase?.vegetable?.name ?? '-',
      width: 100,
      ellipsis: true,
    },
    {
      title: 'Wt. Sold',
      dataIndex: 'totalWeightSold',
      render: (v: any) => <Tag color="purple">{Number(v ?? 0).toFixed(2)}</Tag>,
      align: 'right' as const,
      width: 90,
    },
    {
      title: 'Gross Sales',
      dataIndex: 'grossSalesTotal',
      render: (v: any) => <Tag color="blue">₹{Number(v ?? 0).toLocaleString('en-IN', { minimumFractionDigits: 2 })}</Tag>,
      align: 'right' as const,
      width: 110,
    },
    {
      title: 'Commission',
      render: (_: any, r: any) => (
        <span>
          {Number(r.commissionPercent ?? 0).toFixed(1)}%
          {' '}
          <Tag color="orange">₹{Number(r.commissionAmount ?? 0).toFixed(2)}</Tag>
        </span>
      ),
      width: 130,
    },
    {
      title: 'Deductions',
      dataIndex: 'totalDeductions',
      render: (v: any) => `₹${Number(v ?? 0).toFixed(2)}`,
      align: 'right' as const,
      width: 95,
    },
    {
      title: 'Net Payable',
      dataIndex: 'netPayable',
      render: (v: any) => (
        <Tag color="green">₹{Number(v ?? 0).toLocaleString('en-IN', { minimumFractionDigits: 2 })}</Tag>
      ),
      align: 'right' as const,
      width: 110,
    },
    {
      title: 'Paid',
      dataIndex: 'paidAmount',
      render: (v: any) => `₹${Number(v ?? 0).toFixed(2)}`,
      align: 'right' as const,
      width: 90,
    },
    {
      title: 'Balance',
      dataIndex: 'balanceAmount',
      render: (v: any) => {
        const n = Number(v ?? 0);
        return <Tag color={n > 0 ? 'red' : 'green'}>₹{n.toFixed(2)}</Tag>;
      },
      align: 'right' as const,
      width: 90,
    },
    {
      title: 'Status',
      dataIndex: 'status',
      render: (v: any) => <Tag color={statusTagColor[v] ?? 'default'}>{statusLabel[v] ?? v}</Tag>,
      width: 90,
      fixed: 'right' as const,
    },
  ];

  return (
    <div>
      <Spin spinning={loading}>
        <AppContainer
          title={ENTITY_LABEL}
          headerAction={
            <Space wrap>
              <Button
                icon={<DownloadOutlined />}
                style={{ color: '#52c41a', borderColor: '#52c41a' }}
                loading={exportLoading}
                onClick={handleExportExcel}
              >
                Export Excel
              </Button>
              <Button
                icon={<FilePdfOutlined />}
                danger
                loading={exportPdfLoading}
                onClick={handleExportPdf}
              >
                Export PDF
              </Button>
            </Space>
          }
        >
          {/* Summary Cards */}
          <Row gutter={[16, 16]} style={{ marginBottom: 20 }}>
            <Col xs={24} sm={12} md={5}>
              <SummaryCard
                label="No. of Settlements"
                value={summary.totalCount}
                color="#1677ff"
                icon={<span style={{ fontSize: 20 }}>📋</span>}
                showCurrency={false}
              />
            </Col>
            <Col xs={24} sm={12} md={5}>
              <SummaryCard
                label="Gross Sales (₹)"
                value={summary.totalGrossSales}
                color="#722ed1"
                icon={<span style={{ fontSize: 20 }}>📈</span>}
              />
            </Col>
            <Col xs={24} sm={12} md={5}>
              <SummaryCard
                label="Net Payable (₹)"
                value={summary.totalNetPayable}
                color="#0f5132"
                icon={<span style={{ fontSize: 20 }}>💳</span>}
              />
            </Col>
            <Col xs={24} sm={12} md={5}>
              <SummaryCard
                label="Paid Amount (₹)"
                value={summary.totalPaidAmount}
                color="#fa8c16"
                icon={<span style={{ fontSize: 20 }}>✅</span>}
              />
            </Col>
            <Col xs={24} sm={12} md={4}>
              <SummaryCard
                label="Due (₹)"
                value={summary.totalBalance}
                color="#f5222d"
                icon={<span style={{ fontSize: 20 }}>⚠️</span>}
              />
            </Col>
          </Row>

          {/* Filters */}
          <div className="flex justify-between items-center mb-4 pb-4 border-b border-gray-200">
            <Space wrap>
              <RangePicker value={dateRange as any} onChange={handleDateChange} />
              <Select
                allowClear placeholder="Filter by status"
                style={{ width: 180 }} value={status}
                onChange={handleStatusChange}
                options={STATUS_OPTIONS}
              />
              <Input.Search
                placeholder="Search patti no, lot, supplier…"
                value={searchText}
                onChange={(e) => {
                  setSearchText(e.target.value);
                  if (!e.target.value) handleSearch('');
                }}
                onSearch={handleSearch}
                allowClear style={{ width: 240 }}
              />
              <Button icon={<RedoOutlined />} onClick={handleReset}>Reset</Button>
            </Space>
          </div>

          {/* Table */}
          <Table
            rowKey="key"
            columns={columns}
            dataSource={data}
            loading={loading}
            scroll={{ x: 'max-content', y: 400 }}
            pagination={{
              current: pagination.current,
              pageSize: pagination.pageSize,
              total: pagination.total,
              showSizeChanger: true,
            }}
            onChange={(pageInfo) =>
              fetchData(pageInfo.current!, pageInfo.pageSize!, searchText, dateRange, status)
            }
          />
          <div className="text-center mt-2">
            <Tag color="cyan">Page {pagination.current} of {pagination.totalPages}</Tag>
          </div>
        </AppContainer>
      </Spin>
    </div>
  );
};

export default ArrivalSettlementsReport;