import React, { useEffect, useState } from 'react';
import {Button, Card, Col, DatePicker, Descriptions, Form, Input, Row, Select, Table } from 'antd'
import { ColumnProps } from 'antd/lib/table';
import {SearchOutlined,UndoOutlined} from '@ant-design/icons'
import {RMGrnService} from '@gtpl/shared-services/raw-material-procurement'
import { InvoiceRmItems, RmInvoiceReq, RmInvoiceUpdateReq } from '@gtpl/shared-models/raw-material-procurement';
import { ShrimpTypeEnum, SupplierTypeEnum } from '@gtpl/shared-models/common-models';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import {SuppliersService} from '@gtpl/shared-services/masters'
import { InvoiceStatusEnum } from '@gtpl/shared-models/masters';
import {useHistory} from 'react-router-dom'
import moment from 'moment';

const {Option} = Select

/* eslint-disable-next-line */
export interface RmInvoiceFormProps {}

export const RmInvoiceForm = () => {
  const [page, setPage] = React.useState(1);
  const grnService = new RMGrnService()
  const [grnNumberInfo,setGrnNumberInfo] = useState<any[]>([])
  const [grnItemsInfo,setGrnItemsInfo] = useState<any[]>([])
  const [indentNumberInfo,setIndentNumberInfo] = useState<any[]>([])
  const [form] = Form.useForm()
  const [billtoForm] = Form.useForm()
  const supplierService = new SuppliersService()
  const [suppliersInfo,setSuppliersInfo] = useState<any[]>([])
  const [indentDisable,setIndentDisable] = useState<boolean>(false)
  const [grnDisable,setGrnDisable] = useState<boolean>(false)
  const history = useHistory()
  const [billToType, setBillToType] = useState(null);
  const [batchNumbers,setBatchNumbers] = useState<any[]>([])
  const [selectedBatchNumbers,setSelectedBatchNumbers] = useState<string>(null)
  const plantId = localStorage.getItem('unit_id')
  const [addonCountInfo,setAddonCountInfo] = useState<any[]>([])
  
  

  useEffect(() => {
    // getGrnNumberDrodown()
    // getGrnItemsInfo()
    // getIndentNumberDrodown()
    getSuppliersInfo()
    getBtachNumInfo()
  },[])

  const getBtachNumInfo = () => {
    grnService.getBatchNumberDropdownForInvoice().then(res => {
      if(res.status){
        setBatchNumbers(res.data)
      }
    })
  }

  const getGrnNumberDrodown = () => {
    grnService.getGrnNumberDropdownInfoForRMInvoice().then(res => {
      if(res.status){
        setGrnNumberInfo(res.data)
      }
    })
  }

  const getIndentNumberDrodown = () => {
    grnService.getIndentNumberDropdownInfoForRMInvoice().then(res => {
      if(res.status){
        setIndentNumberInfo(res.data)
      }
    })
  }

  const getSuppliersInfo  = () => {
    supplierService.getAllSuppliers().then(res => {
      if(res.status){
        setSuppliersInfo(res.data)
      }
    })
  }

  const getGrnItemsInfo = () => {
    const req = new RmInvoiceReq(null, null, null);
  
    const selectedGrnItemIds: number[] = form.getFieldValue('batchNumber') || [];
  
    const selectedBatchNumbers = selectedGrnItemIds
      .map(id => {
        const match = batchNumbers.find(b => b.grnItemId === id);
        return match?.batchNumber;
      })
      .filter(batchNumber => batchNumber !== undefined);
  
    req.batchNumber = selectedBatchNumbers;
  
    const matchedYears = selectedGrnItemIds
      .map(id => {
        const match = batchNumbers.find(b => b.grnItemId === id);
        return match?.year;
      })
      .filter(year => year !== undefined);
  
    if (matchedYears.length > 0) {
      req.year = matchedYears;
    }
  
    grnService.getGrnItemInfoForInvoice(req).then(res => {
      if (res.status) {
        res.data.map(e => {
          const qty = e.recordType === 'Defect' ? e.defectQty : e.totalQty;
          const price = e.recordType === 'Defect' ? 0 : Number(e.expectedPrice);
          e.actualPrice = e.recordType === 'Defect' ? 0 : e.expectedPrice;
          e.totalAmount = Number(qty) * Number(price);
        });
        setGrnItemsInfo(res.data);
      } else {
        setGrnItemsInfo([]);
      }
    });
  
    grnService.getAddonCountsInfo(req).then(res => {
      if (res.status) {
        setAddonCountInfo(res.data);
      } else {
        setAddonCountInfo([]);
      }
    });
  };
  

  const onActualPriceChange = (e,index,rowData) => {
    console.log(index,'==')
    grnItemsInfo[index].actualPrice = Number(e.target.value)
    const qty = rowData.recordType == 'Defect' ? grnItemsInfo[index].defectQty : grnItemsInfo[index].totalQty
    console.log(qty,'========')
    console.log(e.target.value)
    const totalAmt = Number(qty) * Number(e.target.value)
    console.log(totalAmt)
    grnItemsInfo[index].totalAmount = totalAmt
    setGrnItemsInfo([...grnItemsInfo])
    // rowData.actualPrice = Number(e.target.value)
    // const totalAmt = Number(rowData.totalQty) * Number(e.target.value)
    // rowData.totalAmount = totalAmt
  }

  const onRemarksChange = (e,index,rowData) => {
    grnItemsInfo[index].invoiceRemarks = e.target.value
    setGrnItemsInfo([...grnItemsInfo])
  //  rowData.remarks = e.target.value
  }


  const columns : ColumnProps<any>[] = [
    {
      title: 'S No',
      key: 'sno',
      width: '70px',
      responsive: ['sm'],
      render: (text, object, index) => (page - 1) * 10 + (index + 1)
    },
    {
      title:'Batch Number',
      dataIndex:'batchNumber'
    },
    {
      title:'Lot Number',
      dataIndex:'lotNumber'
    },
    {
      title:'Type',
      dataIndex:'recordType'
    },
    {
      title:'Defect',
      dataIndex:'defectName',
      render:(text,record) => {
        return(
          <>{record.defectName ? record.defectName : '-'}</>
        )
      }
    },
    {
      title:'Count',
      dataIndex:'actualCount',
      render:(text,record) => {
        return(
          record.actualCount ? Number(record.actualCount) : '-'
        )
      }
    },
  
    {
      title:'Quantity In(Kgs)',
      dataIndex:'totalQty',
      render:(text,record) => {
        return(
          record.recordType == 'Defect' ? Number(record.defectQty) : Number(record.totalQty)
        )
      }
    },
    {
      title:'Price',
      dataIndex:'expectedPrice',
      render:(text,record) => {
        return(
          record.recordType == 'Defect' ? 0 : Number(record.expectedPrice)
        )
      }
    },
    {
      title:'Actual Price(Per KG)',
      dataIndex:'actualPrice',
      render:(text,record,index) => {
        return(
          <span>
          <>
            <Input type='number' onChange={(e) => {onActualPriceChange(e,index,record)}} defaultValue={record.actualPrice ? Number(record.actualPrice) : record.recordType == 'Defect' ? 0 : Number(record.expectedPrice)}/>
          </>
          </span>
        )
      }
    },
    {
      title:'Total Amount',
      dataIndex:'totalAmount',
      render:(text,record) => {
        const qty = record.recordType == 'Defect' ? record.defectQty : record.totalQty
        const price = record.recordType == 'Defect' ? 0 : Number(record.expectedPrice)
        // record.totalAmount =  Number(price) * Number(qty)
        return(
          <>
          {record.totalAmount ? record.totalAmount : Number(price) * Number(qty)}
          </>
        )
      }
    },
    {
      title:'Remarks',
      dataIndex:'remarks',
      render:(text,record,index) => {
        return(
          <>
          {<Input onChange={(e) => onRemarksChange(e,index,record)}/>}
          </>
        )
      }
    },

  ]

  const onSearch = () => {
    getGrnItemsInfo()
  }
  const handleBillToTypeChange = (value) => {
    setBillToType(value);
    billtoForm.resetFields(['farmerName', 'financierName']); // Reset dependent fiel
  };

  const onReset = () => {
    form.resetFields()
    billtoForm.resetFields()
    setGrnItemsInfo([])
    getSuppliersInfo()
    setIndentDisable(false)
    setGrnDisable(false)
    getBtachNumInfo()

  }

  const onSubmit = () => {
    // Validate the form fields
    billtoForm
        .validateFields()
        .then(() => {
            if (billToType === 'Farmer' && !billtoForm.getFieldValue('billTo')) {
                AlertMessages.getErrorMessage('Please select a Farmer Name');
                return;
            }
            if (billToType === 'Financier' && !billtoForm.getFieldValue('financierName')) {
                AlertMessages.getErrorMessage('Please select a Financier Name');
                return;
            }

            if (!billtoForm.getFieldValue('billToType')) {
                AlertMessages.getErrorMessage('Please select Bill To Type');
                return;
            }

            // const actPriceInd = grnItemsInfo.findIndex(e => e.actualPrice === undefined);
            // if (actPriceInd !== -1) {
            //     AlertMessages.getErrorMessage('Please add Actual Price for all items');
            //     return;
            // }

            // Check for missing invoiceRemarks
          

            // Proceed with submission logic
            const saveFlag = new Set<boolean>();
            const grnId = form.getFieldValue('grnId') || form.getFieldValue('indentId');
            const itemsReq = [];
            const grnItemIdMap = new Map<number,any>()
            grnItemsInfo.forEach(e => {
                if(!(grnItemIdMap.has(e.grnItemId))){
                grnItemIdMap.set(e.grnItemId,{'amount':e.totalAmount})
                }else{
                  const amount = grnItemIdMap.get(e.grnItemId).amount
                  grnItemIdMap.get(e.grnItemId).amount = amount + Number(e.totalAmount)
                }
                itemsReq.push(
                    new InvoiceRmItems(
                        e.batchNumber,
                        e.grnId,
                        e.grnItemId,
                        e.defectId,
                        billtoForm.getFieldValue('invoiceDate'),
                        e.actualCount,
                        e.actualPrice,
                        e.recordType === 'Defect' ? e.defectQty : e.totalQty,
                        e.totalAmount,
                        e.recordType === 'Defect' ? ShrimpTypeEnum.DEFECT : ShrimpTypeEnum.GOOD,
                        e.indentId,
                        e.invoiceRemarks,
                        billtoForm.getFieldValue('billToType'),
                        billtoForm.getFieldValue('financierName')
                    )
                );

                if (e.actualPrice > e.expectedPrice) {
                    saveFlag.add(false);
                }
            });

            const invStatus = saveFlag.has(false) ? InvoiceStatusEnum.UNDER_APPROVAL : InvoiceStatusEnum.APPROVED;
            
            const req = new RmInvoiceUpdateReq(
                itemsReq[0].grnId,
                billtoForm.getFieldValue('billTo'),
                grnItemsInfo[0].plantId,
                itemsReq,
                invStatus,
                billtoForm.getFieldValue('billToType'),
                billtoForm.getFieldValue('financierName'),
                JSON.parse(localStorage.getItem('username')),
                 Array.from(grnItemIdMap.entries())
            );
            grnService.updateInvoiceInfo(req).then(res => {
                if (res.status) {
                    onReset();
                    AlertMessages.getSuccessMessage(res.internalMessage);
                } else {
                    AlertMessages.getErrorMessage(res.internalMessage);
                }
                getSuppliersInfo();
                getBtachNumInfo();
            });
        })
        .catch(() => {
            AlertMessages.getErrorMessage('Please fill all required fields');
        });
};


  const onGrnNumberChange = () => {
    setIndentDisable(true)
  }

  const onIndentNumberChange = () => {
    setGrnDisable(true)
  }

  const onBatchNumberChange = (val) => {
    console.log(val)
    setSelectedBatchNumbers(val)
  }
   
  return (
   <Card title={<span style={{ color: 'white' }}>Invoice</span>}
   style={{ textAlign: 'center' }} headStyle={{ backgroundColor: '#69c0ff', border: 0 }}
   extra={<Button onClick={() => {history.push('/rm-price-acceptance-form')}}>View</Button>}>
    <Form form={form} layout='vertical'>
      <Row gutter={24}>
      {/* <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 6 }}>
        <Form.Item label='Grn Number' name='grnId'>
          <Select showSearch allowClear optionFilterProp='children' placeholder='Select Grn Number' onChange={onGrnNumberChange} disabled={grnDisable}>
            {grnNumberInfo.map(e => {
              return(
                <Option key={e.grnId} value={e.grnId}>{e.grnNumber}</Option>
              )
            })}
          </Select>
        </Form.Item>
        </Col>
        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 6 }}>
        <Form.Item label='Indent Number' name='indentId'>
          <Select showSearch allowClear optionFilterProp='children' placeholder='Select Indent Number' onChange={onIndentNumberChange} disabled={indentDisable}>
            {indentNumberInfo.map(e => {
              return(
                <Option key={e.grnId} value={e.grnId}>{e.indentNumber}</Option>
              )
            })}
          </Select>
        </Form.Item>
        </Col> */}
        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 6 }}>
        <Form.Item label='Batch Number' name='batchNumber'>
          <Select 
            showArrow 
            placeholder="Select Batch Number" 
            optionFilterProp="children" 
            mode="multiple" 
            onClear={onReset}
            dropdownMatchSelectWidth={false} 
            showSearch 
            onChange={onBatchNumberChange}
          >
          {
            batchNumbers.map(e => {
              return(
                <Option key={e.grnItemId} value={e.grnItemId}>
                {e.batchNumber} - {e.year}
              </Option>
              
              )
            })
          }
          </Select>
        </Form.Item>
        </Col>
        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 3 }} style={{marginTop:'2.3%'}}>
          <Form.Item>
            <Button type='primary' icon={<SearchOutlined/>} onClick={onSearch}>Search</Button>
          </Form.Item>
        </Col>
        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 2 }} style={{marginTop:'2.3%'}}>
          <Form.Item>
            <Button danger icon={<UndoOutlined/>} onClick={onReset}>Reset</Button>
          </Form.Item>
        </Col>
      </Row>
    </Form>
    {
      grnItemsInfo.length > 0 ? (<>
      <Card>
      <Form form={billtoForm}>
      <Row gutter={24}>
      <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 8 }}>
      <Form.Item name='invoiceDate' label='Invoice Date' initialValue={moment(moment().format("YYYY-MM-DD"))} rules={[{ required: true, message: 'Missing Date' }]}>
          <DatePicker style={{ width: '100%' }} defaultValue={moment(moment().format("YYYY-MM-DD"))} />
      </Form.Item>
      </Col>

      <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 8 }}>
        <Form.Item
          name="billToType"
          label="Bill To Type"
          rules={[{ required: true, message: 'Bill to Type is required' }]}
        >
          <Select
            allowClear
            showSearch
            optionFilterProp="children"
            placeholder="Select Bill To Type"
            onChange={handleBillToTypeChange} 
          >
            <Option value="Farmer">Farmer</Option>
            <Option value="Financier">Financier</Option>
          </Select>
        </Form.Item>
      </Col>

      {/* Conditionally render based on billToType */}
      {billToType === 'Farmer' && (
        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 8 }}>
          <Form.Item
            name="billTo"
            label="Bill To"
            rules={[{ required: true, message: 'Bill to is required' }]}
          >
            <Select allowClear showSearch optionFilterProp="children" placeholder="Select Bill To">
              {suppliersInfo.map((e) => (
                <Option key={e.supplierId} value={e.supplierId}>
                  {e.supplierName}-{e.supplierCode}
                </Option>
              ))}
            </Select>
          </Form.Item>
        </Col>
      )}

      {billToType === 'Financier' && (
        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 8 }}>
          <Form.Item
            name="financierName"
            label="Financier Name"
            rules={[{ required: true, message: 'Financier Name is required' }]}
          >
            <Input placeholder="Enter Financier Name" />
          </Form.Item>
        </Col>
      )}
      </Row>
          <Row gutter={24}>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 24 }}>
            <Descriptions column={4}>
              <Descriptions.Item label='Indent Number'>{grnItemsInfo[0]?.indentNumber}</Descriptions.Item>
              <Descriptions.Item label='GRN Number'>{grnItemsInfo[0]?.grnNumber}</Descriptions.Item>
              <Descriptions.Item label='Supplier Type'>{grnItemsInfo[0]?.supplierType}</Descriptions.Item>
              <Descriptions.Item label={grnItemsInfo[0]?.supplierType == SupplierTypeEnum.FARMER ? 'Farmer' : 'Agent'}>{grnItemsInfo[0]?.supplierName}</Descriptions.Item>
              <Descriptions.Item label={grnItemsInfo[0]?.supplierType == SupplierTypeEnum.FARMER ? 'Farmer Code' : 'Agent Code'}>{grnItemsInfo[0]?.supplierCode}</Descriptions.Item>
              <Descriptions.Item label='Supplier Address'>{grnItemsInfo[0]?.supplierAddress}</Descriptions.Item>
              <Descriptions.Item label='GST Number'>{grnItemsInfo[0]?.gstNumber}</Descriptions.Item>
              <Descriptions.Item label='Vehicle Number'>{grnItemsInfo[0]?.vehicleNumber}</Descriptions.Item>
              <Descriptions.Item label='Addon Batches'>{addonCountInfo[0]?.plantLotNumber}</Descriptions.Item>
            </Descriptions>
            </Col>
          </Row>
          <Table columns={columns} dataSource={grnItemsInfo}/>
          <br/><br/>
          <Row justify='end'>
            <Button type='primary' onClick={onSubmit}>Generate</Button>
          </Row>
      </Form>

      </Card>
      </>) : (<></>)
    }


   </Card>
  );
}

export default RmInvoiceForm;