import React, { useEffect, useState } from 'react';
import moment from 'moment';
import { Button, Card, Col, DatePicker, Form, Row, Select, Table, Typography } from 'antd';
import { DownloadOutlined } from '@ant-design/icons';
import ReactHTMLTableToExcel from 'react-html-table-to-excel';
import { useForm } from 'antd/lib/form/Form';
import { UnitcodeService } from 'libs/shared-services/masters/src/lib/unit-code.services';
import { PlantsDropDown } from '@gtpl/shared-models/masters';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { SaleOrderService } from '@gtpl/shared-services/sale-management';
import { DutyDrawBackReportReq } from '@gtpl/shared-models/finance';

const FarmerAgingWiseReport: React.FC = () => {
  const [unitName,setUnitName] = useState<string> (null)
  const [supplierName,setSupplierName] = useState<string> (null)
  const [reportData, setReportData] = useState<any | null>(null);
  const [plantData, setPlantData] = useState<any[]>([]);
  const [suppliersData,setSuppliersData] = useState<any[]>([])
  const [page, setPage] = useState(1);
  const [fromDate, setFromDate] = useState<string | undefined>(undefined);
  const [toDate, setToDate] = useState<string | undefined>(undefined);
  const { RangePicker } = DatePicker;
  const unitsService = new UnitcodeService();
  const saleOrderService = new SaleOrderService();
  const { Text, Title } = Typography;
  const { Option } = Select;
  const [form] = useForm();

  useEffect(() => {
    getAllPlants();
    getFarmersData();
getAllSuppliers()
  }, []);

  const getAllPlants = () => {
    saleOrderService
      .getAllUnitManufacturing()
      .then((res) => {
        if (res.status) {
          setPlantData(res.data);
        } else {
          setPlantData([]);
        }
      })
      .catch((err) => {
        AlertMessages.getErrorMessage(err.message);
        setPlantData([]);
      });
  };

    const getAllSuppliers = () => {
    saleOrderService
      .getSuppliersData()
      .then((res) => {
        if (res.status) {
          setSuppliersData(res.data);
        } else {
          setSuppliersData([]);
        }
      })
      .catch((err) => {
        AlertMessages.getErrorMessage(err.message);
        setSuppliersData([]);
      });
  };

  const handleUnit = (value: string) => {
    setUnitName(value);
    form.setFieldsValue({ unitName: value }); 
  };
  const handleSupplier = (value: string) => {
    setSupplierName(value);
    form.setFieldsValue({ supplier: value }); 
  };

  const handleDateRange = (dates: any) => {
    if (dates && dates.length === 2) {
      setFromDate(dates[0].format('YYYY-MM-DD'));
      setToDate(dates[1].format('YYYY-MM-DD'));
    } else {
      setFromDate(undefined);
      setToDate(undefined);
    }
  };

  const getFarmersData = () => {
    const req = new DutyDrawBackReportReq();
    if (fromDate) {
      req.fromDate = fromDate;
    }
    if (toDate) {
      req.toDate = toDate;
    }
    if (unitName) {
      req.unitName = unitName;
    }
    if (supplierName) {
      req.supplierName = supplierName;
    }
    saleOrderService
      .getFarmerAgingWiseReport(req)
      .then((res) => {
        if (res.status) {
          setReportData(res.data);
        } else {
          setReportData(null);
        }
      })
      .catch((err) => {
        AlertMessages.getErrorMessage(err.message);
        setReportData(null);
      });
  };

 const onReset = () => {
    form.resetFields();
    setUnitName(null);
    setSupplierName(null);
    setFromDate(undefined);
    setToDate(undefined);
    setPage(1);

    const req = new DutyDrawBackReportReq();
    saleOrderService
      .getFarmerAgingWiseReport(req)
      .then((res) => {
        if (res.status) {
          setReportData(res.data);
        } else {
          setReportData(null);
        }
      })
      .catch((err) => {
        AlertMessages.getErrorMessage(err.message);
        setReportData(null);
      });
  };



  const onFinish = () => {
    setPage(1);
    getFarmersData();
  };

  const onSearch = () => {
    getFarmersData();
  };

  const formatNumber = (num: string): string => {
    const parsed = parseFloat(num);
    if (isNaN(parsed)) return '-';
    return parsed.toLocaleString('en-IN', { minimumFractionDigits: 0 });
  };

  const renderRows = (entries: any[]) => {
    return entries.map((entry, index) => (
      <tr key={index} style={{ backgroundColor: '#fafafa' }}>
        <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'left' }}>{entry.unitName}</td>
        <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'left' }}>{entry.endCustomerName}</td>
        <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(entry.totalPendingBills)}</td>
        <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(entry.totalLess10days)}</td>
        <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(entry.total10to20days)}</td>
        <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(entry.total20to25days)}</td>
        <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(entry.total25to30days)}</td>
        <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(entry.total30to40days)}</td>
        <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(entry.total40to45days)}</td>
        <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(entry.total45to50days)}</td>
        <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(entry.total50to60days)}</td>
        <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(entry.total60to70days)}</td>
        <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(entry.total70to80days)}</td>
        <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(entry.total80to90days)}</td>
        <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(entry.totalafter90days)}</td>
      </tr>
    ));
  };

  const renderTotalRow = (supplierData: any, label: string) => (
    <tr style={{ backgroundColor: '#f0f0f0', fontWeight: 'bold' }}>
      <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'left' }}></td>
      <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'left' }}>{label}</td>
      <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(supplierData.totalPendingBills)}</td>
      <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(supplierData.totalLess10days)}</td>
      <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(supplierData.total10to20days)}</td>
      <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(supplierData.total20to25days)}</td>
      <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(supplierData.total25to30days)}</td>
      <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(supplierData.total30to40days)}</td>
      <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(supplierData.total40to45days)}</td>
      <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(supplierData.total45to50days)}</td>
      <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(supplierData.total50to60days)}</td>
      <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(supplierData.total60to70days)}</td>
      <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(supplierData.total70to80days)}</td>
      <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(supplierData.total80to90days)}</td>
      <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(supplierData.totalafter90days)}</td>
    </tr>
  );

  const renderGrandTotal = () => {
    if (!reportData?.grandTotal) return null;
    return (
      <tr style={{ backgroundColor: '#d9d9d9', fontWeight: 'bold' }}>
        <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'left' }}></td>
        <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'left' }}>Grand Total</td>
        <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(reportData.grandTotal.totalPendingBills)}</td>
        <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(reportData.grandTotal.totalLess10days)}</td>
        <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(reportData.grandTotal.total10to20days)}</td>
        <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(reportData.grandTotal.total20to25days)}</td>
        <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(reportData.grandTotal.total25to30days)}</td>
        <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(reportData.grandTotal.total30to40days)}</td>
        <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(reportData.grandTotal.total40to45days)}</td>
        <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(reportData.grandTotal.total45to50days)}</td>
        <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(reportData.grandTotal.total50to60days)}</td>
        <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(reportData.grandTotal.total60to70days)}</td>
        <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(reportData.grandTotal.total70to80days)}</td>
        <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(reportData.grandTotal.total80to90days)}</td>
        <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(reportData.grandTotal.totalafter90days)}</td>
      </tr>
    );
  };

  const renderSupplierSection = (title: string, supplierData: any) => {
    if (!supplierData || !supplierData.entries || supplierData.entries.length === 0) return null;

    return (
      <>
        <tr style={{ backgroundColor: '#ffcccc', fontWeight: 'bold' }}>
          <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'left' }}></td>
          <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'left' }}>{title}</td>
          <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(supplierData.totalPendingBills)}</td>
          <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(supplierData.totalLess10days)}</td>
          <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(supplierData.total10to20days)}</td>
          <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(supplierData.total20to25days)}</td>
          <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(supplierData.total25to30days)}</td>
          <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(supplierData.total30to40days)}</td>
          <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(supplierData.total40to45days)}</td>
          <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(supplierData.total45to50days)}</td>
          <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(supplierData.total50to60days)}</td>
          <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(supplierData.total60to70days)}</td>
          <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(supplierData.total70to80days)}</td>
          <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(supplierData.total80to90days)}</td>
          <td style={{ border: '1px solid #d9d9d9', padding: '8px', textAlign: 'right' }}>{formatNumber(supplierData.totalafter90days)}</td>
        </tr>
        {renderRows(supplierData.entries)}
      </>
    );
  };

  return (
    <div>
      <Card
        size="small"
        title={<span style={{ color: 'white' }}>Farmer Payable Aging Report</span>}
        style={{ textAlign: 'center', border: '1px solid #d9d9d9', borderRadius: '4px', background: '#fff' }}
        headStyle={{ backgroundColor: '#69c0ff', border: 0 }}
        extra={
          <>
            <ReactHTMLTableToExcel
              id="excel-button"
              table="farmer-aging-wise-report"
              filename="Farmer-aging-wise-report"
              sheet="Sheet 1"
              buttonText="Get Excel"
              className="ant-btn ant-btn"
              style={{ backgroundColor: '#1890ff', color: 'white', border: 'none', padding: '8px 16px', borderRadius: '4px', cursor: 'pointer', marginRight: '30px' }}
            />
          </>
        }
      >
        <Form form={form} onFinish={onFinish}>
          <Row gutter={24}>
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 6 }} lg={{ span: 6 }} xl={{ span: 6 }}>
              <Form.Item name="unitName" label="Unit">
                <Select
                  showSearch
                  optionFilterProp="children"
                  filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  placeholder="Select Unit"
                  allowClear
                  style={{ width: '100%' }}
                  onChange={handleUnit}
                >
                  {plantData.map((dropData) => (
                    <Option key={dropData.plantId} value={dropData.unitName}>
                      {dropData.unitName}
                    </Option>
                  ))}
                </Select>
              </Form.Item>
            </Col>
            <Col>
              <Form.Item label="Invoice Date" name="invoiceDate">
                <RangePicker onChange={handleDateRange} />
              </Form.Item>
            </Col>
            
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 6 }} lg={{ span: 6 }} xl={{ span: 6 }}>
              <Form.Item name="supplier" label="Supplier">
                <Select
                  showSearch
                  optionFilterProp="children"
                  filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  placeholder="Select Supplier"
                  allowClear
                  style={{ width: '100%' }}
                  onChange={handleSupplier}
                >
                  {suppliersData.filter(supp => supp.supplierName !== null).map((dropData) => (
                    <Option key={dropData.supplierId} value={dropData.supplierId}>
                      {dropData.supplierName}
                    </Option>
                  ))}
                </Select>
              </Form.Item>
            </Col>
            <Col>
              <Form.Item>
                <Button type="primary" htmlType="submit">
                  Search
                </Button>
              </Form.Item>
            </Col>
            <Col>
              <Form.Item>
                <Button onClick={onReset}>
                  Reset
                </Button>
              </Form.Item>
            </Col>
          </Row>
        </Form>

        {reportData && (
           <div style={{ overflowX: 'auto', width: '100%' }}>
          <table id="farmer-aging-wise-report" style={{ width: '100%', borderCollapse: 'collapse', fontSize: '12px', backgroundColor: '#fff', fontFamily: 'Arial, sans-serif' }}>
            <thead>
              <tr>
                <th style={{ border: '1px solid #d9d9d9', padding: '8px', backgroundColor: '#f0f0f0', fontWeight: 'bold', textAlign: 'center' }} rowSpan={2}>Unit Name</th>
                <th style={{ border: '1px solid #d9d9d9', padding: '8px', backgroundColor: '#f0f0f0', fontWeight: 'bold', textAlign: 'center' }} rowSpan={2}>Supplier Name</th>
                <th style={{ border: '1px solid #d9d9d9', padding: '8px', backgroundColor: '#f0f0f0', fontWeight: 'bold', textAlign: 'center' }} rowSpan={2}>Pending Bills</th>
                <th style={{ border: '1px solid #d9d9d9', padding: '8px', backgroundColor: '#f0f0f0', fontWeight: 'bold', textAlign: 'center' }} colSpan={12}>Invoice Date Range</th>
              </tr>
              <tr>
                <th style={{ border: '1px solid #d9d9d9', padding: '8px', backgroundColor: '#f0f0f0', fontWeight: 'bold', textAlign: 'center' }}> 10 & Below 10 days</th>
                <th style={{ border: '1px solid #d9d9d9', padding: '8px', backgroundColor: '#f0f0f0', fontWeight: 'bold', textAlign: 'center' }}>11 to 20 days</th>
                <th style={{ border: '1px solid #d9d9d9', padding: '8px', backgroundColor: '#f0f0f0', fontWeight: 'bold', textAlign: 'center' }}>21 to 25 days</th>
                <th style={{ border: '1px solid #d9d9d9', padding: '8px', backgroundColor: '#f0f0f0', fontWeight: 'bold', textAlign: 'center' }}>26 to 30 days</th>
                <th style={{ border: '1px solid #d9d9d9', padding: '8px', backgroundColor: '#f0f0f0', fontWeight: 'bold', textAlign: 'center' }}>31 to 40 days</th>
                <th style={{ border: '1px solid #d9d9d9', padding: '8px', backgroundColor: '#f0f0f0', fontWeight: 'bold', textAlign: 'center' }}>41 to 45 days</th>
                <th style={{ border: '1px solid #d9d9d9', padding: '8px', backgroundColor: '#f0f0f0', fontWeight: 'bold', textAlign: 'center' }}>46 to 50 days</th>
                <th style={{ border: '1px solid #d9d9d9', padding: '8px', backgroundColor: '#f0f0f0', fontWeight: 'bold', textAlign: 'center' }}>51 to 60 days</th>
                <th style={{ border: '1px solid #d9d9d9', padding: '8px', backgroundColor: '#f0f0f0', fontWeight: 'bold', textAlign: 'center' }}>61 to 70 days</th>
                <th style={{ border: '1px solid #d9d9d9', padding: '8px', backgroundColor: '#f0f0f0', fontWeight: 'bold', textAlign: 'center' }}>71 to 80 days</th>
                <th style={{ border: '1px solid #d9d9d9', padding: '8px', backgroundColor: '#f0f0f0', fontWeight: 'bold', textAlign: 'center' }}>81 to 90 days</th>
                <th style={{ border: '1px solid #d9d9d9', padding: '8px', backgroundColor: '#f0f0f0', fontWeight: 'bold', textAlign: 'center' }}>Above 90 days</th>
              </tr>
            </thead>
            <tbody>
              {renderSupplierSection('Farmers', reportData.farmers)}
              {renderSupplierSection('Agents', reportData.agents)}
              {renderSupplierSection('Dealers', reportData.dealers)}
              {renderGrandTotal()}
            </tbody>
          </table>
          </div>
        )}
      </Card>
    </div>
  );
};

export default FarmerAgingWiseReport;