import { GrnData } from '@gtpl/shared-models/raw-material-procurement'
import { WarehouseDashboardService } from '@gtpl/shared-services/analytics'
import { Button, Card, Col, DatePicker, Form, message, Row, Table } from 'antd'
import React, { useCallback, useEffect, useState } from 'react'
import { MonthWiseShrimpReq } from '@gtpl/shared-models/warehouse-management';
const { MonthPicker } = DatePicker;
import ReactHTMLTableToExcel from 'react-html-table-to-excel';



const MonthlyWiseShrimpReport = () => {
    const service = new WarehouseDashboardService()
    const [shrimpData, setShrimpData] = useState<any[]>([])
    const [g1Data, setG1Data] = useState<any[]>([])
    const [jumbleData, setJumbleData] = useState<any[]>([])
    const [otherData, setOtherData] = useState<any[]>([])
    const [shippedData, setShippedData] = useState<any>([])
    const [grnQuantity, setGrnQuantity] = useState<any>([])
    const [form] = Form.useForm()
    const [selectedYear, setSelectedYear] = useState<number>()
    const [selectedMonth, setSelectedMonth] = useState<number>()
    const role = JSON.parse(localStorage.getItem('role')) 
    const [isFiltered, setIsFiltered] = useState(false);

  
    const getMonthlyShrimpMISReport = useCallback((month, year) => {
      const req = new MonthWiseShrimpReq(year, month)
      const loggedInRole = JSON.parse(localStorage.getItem('role'));
      const loggedInUnitId = Number(localStorage.getItem('unit_id'));
  
      if (loggedInRole !== 'SUPERADMIN') {
        req.plantId = loggedInUnitId 
      }

      service.getMonthlyShrimpMISReport(req).then((res) => {
        if (res.status) {
          setShrimpData(res.data)
          separateData(res.data)
          message.success('Monthly Shrimp Data retrieved successfully')
        } else {
          setShrimpData([])
          message.error('No data found')
        }
      })
    }, [service])

    
    const separateData = (data) => {
      const acc = {
        g1Data: [],
        jumbleData: [],
        otherData: []
      }
    
      data.forEach((item) => {
        if (item.productCategory === 'G1') {
          acc.g1Data.push(item)
        } else if (item.productCategory === 'jumble') {
          acc.jumbleData.push(item)
        } else {
          acc.otherData.push(item)
        }
      })
    
      setG1Data(acc.g1Data)
      setJumbleData(acc.jumbleData)
      setOtherData(acc.otherData)
    }
  
    const getGrnQuantityForMISReport = useCallback((month, year) => {
        const req = new MonthWiseShrimpReq(year, month)
        const loggedInRole = JSON.parse(localStorage.getItem('role'));
        const loggedInUnitId = Number(localStorage.getItem('unit_id'));
    
        if (loggedInRole !== 'SUPERADMIN') {
          req.plantId = loggedInUnitId 
      }
      service.getGrnQuantityForMISReport(req).then((res) => {
        if (res.status) {
          setGrnQuantity(res.data)
        } else {
          setGrnQuantity([])
        }
      })
    }, [service])
  
    const getShippedContainerMISDetails = useCallback((month, year) => {
        const req = new MonthWiseShrimpReq(year, month)
        const loggedInRole = JSON.parse(localStorage.getItem('role'));
        const loggedInUnitId = Number(localStorage.getItem('unit_id'));
    
        if (loggedInRole !== 'SUPERADMIN') {
          req.unitId = loggedInUnitId 
      }
      service.getShippedContainerMISDetails(req).then((res) => {
        if (res.status) {
          setShippedData(res.data)
        } else {
          setShippedData([])
        }
      })
    }, [service])
  
    const onSearch = () => {
        if (selectedMonth && selectedYear) {
            getMonthlyShrimpMISReport(selectedMonth, selectedYear)
            getGrnQuantityForMISReport(selectedMonth, selectedYear)
            getShippedContainerMISDetails(selectedMonth, selectedYear)
            setIsFiltered(true);
        } else {
            message.error('Please select both month and year')
        }
    }
  
    const handleMonthChange = (date, dateString) => {
      if (date) {
        const year = date.year()
        const month = date.month() + 1
        setSelectedMonth(month)
        setSelectedYear(year)
      }
    }
  
    const onReset = () => {
      setShrimpData([])
      setGrnQuantity([])
      setShippedData([])
      form.resetFields()
      setIsFiltered(false);
    }

    const getLastDateOfMonth = (month: number, year: number) => {
        return new Date(year, month, 0).toLocaleDateString('en-GB');
      };
      
      const getLastDayOfMonth = (year: number, month: number) => {
        return new Date(year, month, 0).getDate(); // 0 means the last day of the previous month
      };

      const lastDayOfMonth = getLastDayOfMonth(selectedYear, selectedMonth);

const openingStockAsOnDate = shrimpData
  .filter(rec => {
    const recDate = new Date(rec.date); // Assuming `rec.date` is a string or Date object
    return recDate.getFullYear() === selectedYear && recDate.getMonth() + 1 === selectedMonth;
  })
  .reduce((sum, rec) => sum + (rec.openingStockKgs !== null ? parseFloat(rec.openingStockKgs) : 0), 0);


const calculateTotals1 = (data) => {
    let totals = {
        openingStock: 0,
        freshProduction: 0,
        reproduction: 0,
        totalProduction: 0,
        total: 0,
        shipments: 0,
        reprocessIssues: 0,
        labSamples: 0,
        shiftings: 0,
        closingStock: 0
    };

    data.forEach(rec => {
        const openingStock = rec.openingStockKgs !== null ? parseFloat(rec.openingStockKgs) : 0;
        const totalProduction = rec.totalProductionKgs !== null ? parseFloat(rec.totalProductionKgs) : 0;
        const total = openingStock + totalProduction;

        const shipments = rec.shipmentQuantity !== null ? parseFloat(rec.shipmentQuantity) : 0;
        const reprocessIssues = rec.reprocessQtyKg !== null ? parseFloat(rec.reprocessQtyKg) : 0;
        const labSamples = rec.labSampleQtyKg !== null ? parseFloat(rec.labSampleQtyKg) : 0;
        const shiftings = rec.domesticSaleQty !== null ? parseFloat(rec.domesticSaleQty) : 0;
        const closingStock = total - (shipments + reprocessIssues + labSamples + shiftings);

        totals.openingStock += openingStock;
        totals.freshProduction += rec.freshProductionKgs !== null ? parseFloat(rec.freshProductionKgs) : 0;
        totals.reproduction += rec.reproductionKgs !== null ? parseFloat(rec.reproductionKgs) : 0;
        totals.totalProduction += totalProduction;
        totals.total += total;
        totals.shipments += shipments;
        totals.reprocessIssues += reprocessIssues;
        totals.labSamples += labSamples;
        totals.shiftings += shiftings;
        totals.closingStock += closingStock;

    });

    return totals;
};

const totals1 = calculateTotals1(g1Data);

const calculateTotals2 = (data) => {
  let totals = {
      openingStock: 0,
      freshProduction: 0,
      reproduction: 0,
      totalProduction: 0,
      total: 0,
      shipments: 0,
      reprocessIssues: 0,
      labSamples: 0,
      shiftings: 0,
      closingStock: 0
  };

  data.forEach(rec => {
      const openingStock = rec.openingStockKgs !== null ? parseFloat(rec.openingStockKgs) : 0;
      const totalProduction = rec.totalProductionKgs !== null ? parseFloat(rec.totalProductionKgs) : 0;
      const total = openingStock + totalProduction;

      const shipments = rec.shipmentQuantity !== null ? parseFloat(rec.shipmentQuantity) : 0;
      const reprocessIssues = rec.reprocessQtyKg !== null ? parseFloat(rec.reprocessQtyKg) : 0;
      const labSamples = rec.labSampleQtyKg !== null ? parseFloat(rec.labSampleQtyKg) : 0;
      const shiftings = rec.domesticSaleQty !== null ? parseFloat(rec.domesticSaleQty) : 0;
      const closingStock = total - (shipments + reprocessIssues + labSamples + shiftings);

      totals.openingStock += openingStock;
      totals.freshProduction += rec.freshProductionKgs !== null ? parseFloat(rec.freshProductionKgs) : 0;
      totals.reproduction += rec.reproductionKgs !== null ? parseFloat(rec.reproductionKgs) : 0;
      totals.totalProduction += totalProduction;
      totals.total += total;
      totals.shipments += shipments;
      totals.reprocessIssues += reprocessIssues;
      totals.labSamples += labSamples;
      totals.shiftings += shiftings;
      totals.closingStock += closingStock;

  });

  return totals;
};

const totals2 = calculateTotals2(jumbleData);

const calculateTotals3 = (data) => {
  let totals = {
      openingStock: 0,
      freshProduction: 0,
      reproduction: 0,
      totalProduction: 0,
      total: 0,
      shipments: 0,
      reprocessIssues: 0,
      labSamples: 0,
      shiftings: 0,
      closingStock: 0
  };

  data.forEach(rec => {
      const openingStock = rec.openingStockKgs !== null ? parseFloat(rec.openingStockKgs) : 0;
      const totalProduction = rec.totalProductionKgs !== null ? parseFloat(rec.totalProductionKgs) : 0;
      const total = openingStock + totalProduction;

      const shipments = rec.shipmentQuantity !== null ? parseFloat(rec.shipmentQuantity) : 0;
      const reprocessIssues = rec.reprocessQtyKg !== null ? parseFloat(rec.reprocessQtyKg) : 0;
      const labSamples = rec.labSampleQtyKg !== null ? parseFloat(rec.labSampleQtyKg) : 0;
      const shiftings = rec.domesticSaleQty !== null ? parseFloat(rec.domesticSaleQty) : 0;
      const closingStock = total - (shipments + reprocessIssues + labSamples + shiftings);

      totals.openingStock += openingStock;
      totals.freshProduction += rec.freshProductionKgs !== null ? parseFloat(rec.freshProductionKgs) : 0;
      totals.reproduction += rec.reproductionKgs !== null ? parseFloat(rec.reproductionKgs) : 0;
      totals.totalProduction += totalProduction;
      totals.total += total;
      totals.shipments += shipments;
      totals.reprocessIssues += reprocessIssues;
      totals.labSamples += labSamples;
      totals.shiftings += shiftings;
      totals.closingStock += closingStock;

  });

  return totals;
};

const totals3 = calculateTotals3(otherData);

const calculateTotals4 = (data) => {
  let totals = {
      openingStock: 0,
      freshProduction: 0,
      reproduction: 0,
      totalProduction: 0,
      total: 0,
      shipments: 0,
      reprocessIssues: 0,
      labSamples: 0,
      shiftings: 0,
      closingStock: 0
  };

  data.forEach(rec => {
      const openingStock = rec.openingStockKgs !== null ? parseFloat(rec.openingStockKgs) : 0;
      const totalProduction = rec.totalProductionKgs !== null ? parseFloat(rec.totalProductionKgs) : 0;
      const total = openingStock + totalProduction;

      const shipments = rec.shipmentQuantity !== null ? parseFloat(rec.shipmentQuantity) : 0;
      const reprocessIssues = rec.reprocessQtyKg !== null ? parseFloat(rec.reprocessQtyKg) : 0;
      const labSamples = rec.labSampleQtyKg !== null ? parseFloat(rec.labSampleQtyKg) : 0;
      const shiftings = rec.domesticSaleQty !== null ? parseFloat(rec.domesticSaleQty) : 0;
      const closingStock = total - (shipments + reprocessIssues + labSamples + shiftings);

      totals.openingStock += openingStock;
      totals.freshProduction += rec.freshProductionKgs !== null ? parseFloat(rec.freshProductionKgs) : 0;
      totals.reproduction += rec.reproductionKgs !== null ? parseFloat(rec.reproductionKgs) : 0;
      totals.totalProduction += totalProduction;
      totals.total += total;
      totals.shipments += shipments;
      totals.reprocessIssues += reprocessIssues;
      totals.labSamples += labSamples;
      totals.shiftings += shiftings;
      totals.closingStock += closingStock;

  });

  return totals;
};

const totals4 = calculateTotals4(shrimpData);

const totalShippedStatusCount = shippedData.reduce((sum, rec) => sum + Number(rec.shippedStatusCount), 0);

const containerStyle = {
    border: '2px solid black',
    padding: '10px',
    margin: '20px', // Optional: Add some margin around the container
  };

  const heading1Style = {
    borderBottom: '2px solid black',
    textAlign: 'center' as const,
    fontWeight: 'bold' as const,
    fontSize: '1.5em',
  };

  const heading2Style = {
    borderBottom: '2px solid black',
    textAlign: 'center' as const,
    fontWeight: 'bold' as const,
    fontSize: '1.2em',
  };

  const monthNames = [
    'January', 'February', 'March', 'April', 'May', 'June',
    'July', 'August', 'September', 'October', 'November', 'December'
  ];




  return (
    <div>
        <Card size='small' title={<span style={{color:'white'}}>MONTHLY SHRIMP MIS REPORT</span>} 
    style={{textAlign:'center'}} headStyle={{backgroundColor: '#69c0ff', border: 0 }}>
      <br />
        <Form onFinish={onSearch} form={form}>
          <Row gutter={24}>
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 5 }}>
            <Form.Item name='date' label="Month">
              <MonthPicker style={{width:'100%'}} onChange={handleMonthChange} placeholder='Select Month'/>
            </Form.Item>
            </Col>
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 2 }}>
            <Form.Item>
              <Button htmlType='submit' type='primary'>Get Report</Button>
            </Form.Item>
            </Col>
            <Col style={{paddingLeft:"40px"}}>
            <Form.Item>
              <Button type='primary' onClick={onReset}>Reset</Button>
            </Form.Item>
            </Col>

          </Row>
        </Form>
        
               
         <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
        {isFiltered && (
        <ReactHTMLTableToExcel 
        id='excel-button'
        // className='download-table-xls-button'
        table='report-table'
        filename='monthlyshrimpreportxls'
        sheet="Sheet1"
        buttonText='Get Excel'
        className="ant-btn ant-btn-primary"
              />
            ) }
          </div>  
        {isFiltered && (
            <table id='report-table'>
        <div style={containerStyle}>
           
            <html>
                <body>
                   
                <div style={heading1Style}>MONTHLY SHRIMP MIS REPORT</div>
                <div style={heading2Style}>
                    {selectedMonth && selectedYear 
                        ? `${monthNames[selectedMonth - 1]}-${selectedYear}` 
                        : 'Select a Month-Year'}
                </div>          
               
                <div style={{ display: 'flex',paddingLeft:"3px" }} >
            <div style={{ marginRight: "212px" }}>
                <b>
                <p>Opening Stock as on {`${selectedMonth < 10 ? '0' : ''}01/${selectedMonth}/${selectedYear}`}:{openingStockAsOnDate.toFixed(2)} KGS</p>
                <p style={{paddingLeft:"140px"}}>Production:{totals1.freshProduction} KGS</p>
                    <p style={{paddingLeft:"150px"}}>Shipment:{totals1.shipments} KGS</p>
                    <p style={{paddingLeft:"110px"}}>Reprocess Issue:{totals1.reprocessIssues} KGS</p>
                    <p>lab Samples/Compliments/Sales:{totals1.labSamples} KGS</p>
                    <p>Closing Stock as on {getLastDateOfMonth(selectedMonth, selectedYear)}:{(totals1.closingStock)?.toFixed(2)} KGS</p>
                    </b>
            </div>
            <div style={{ paddingLeft: "17px", paddingRight:"53px",paddingTop:"10px" }}>
                <table style={{
                    borderCollapse: 'collapse',
                    width: '120%',
                    marginTop: '0',
                    marginBottom: '0'
                }}>
                    <thead>
                        <tr>
                            <th style={{ textAlign: 'center', border: '1px solid #000' }}>
                                RAW MATERIAL INTAKE IN KGS
                            </th>
                            <td style={{ textAlign: 'center', border: '1px solid #000',width:"90px" }}>
                            {grnQuantity[0] ? grnQuantity[0]?.quantity : '-'}
                            </td>
                        </tr>
                    </thead>
                </table>
                <br />
                <table style={{
                    borderCollapse: 'collapse',
                    width: '120%',
                    marginTop: '0',
                    marginBottom: '0'
                }}>
                    <thead>
                        <tr>
                            <th style={{ textAlign: 'center', border: '1px solid #000' }} colSpan={2}>
                                SHIPMENT IN CONTAINERS
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        {shippedData.map((rec,indx)=>(
                            <>
                            <tr key={indx}>
                                <td style={{ textAlign: 'center', border: '1px solid #000' }}>{rec.UnitName}</td>
                                <td style={{ textAlign: 'center', border: '1px solid #000',width:"90px"  }}>{rec.shippedStatusCount}</td>
                            </tr>
                            </>
                        ))}
                    </tbody>
                    <tfoot>
                        <tr>
                            <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                                Total
                            </td>
                            <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                            {totalShippedStatusCount}
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
        {g1Data.length > 0 ?
        <div>
                <table style={{ borderCollapse: 'collapse', width: '100%',paddingLeft:"50px",paddingRight:"50px",
                  marginTop: '0',
                  marginBottom: '0' }}>
                    <thead>
                    <tr>
                        <th rowSpan={2} style={{ textAlign: 'center', border: '1px solid #000' }}>PRODUCT DESCRIPTION</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>OPENING STOCK</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>FRESH PRODUCTION</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>RE-PRODUCTION</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>TOTAL PRODUCTION</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>TOTAL</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>SHIPMENTS</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>RE-PROCESS ISSUES</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>LAB SAMPLES/COMPLIMENTS</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>SHIFTINGS/SALES</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>CLOSING STOCK</th>
                    </tr>
                    <tr>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>KGS</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>KGS</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>KGS</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>KGS</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>KGS</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>KGS</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>KGS</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>KGS</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>KGS</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>KGS</th>
                    </tr>
                    </thead>
                    <tbody>
                    {g1Data.map((rec, idx) => { 
              const openingStock = rec.openingStockKgs !== null ? parseFloat(rec.openingStockKgs) : 0;
              const totalProduction = rec.totalProductionKgs !== null ? parseFloat(rec.totalProductionKgs) : 0;
              const total = openingStock + totalProduction;
              
              const shipments = rec.shipmentQuantity !== null ? parseFloat(rec.shipmentQuantity) : 0;
              const reprocessIssues = rec.reprocessQtyKg !== null ? parseFloat(rec.reprocessQtyKg) : 0;
              const labSamples = rec.labSampleQtyKg !== null ? parseFloat(rec.labSampleQtyKg) : 0;
              const shiftings = rec.domesticSaleQty !== null ? parseFloat(rec.domesticSaleQty) : 0;
              const difference = total - (shipments + reprocessIssues + labSamples + shiftings);
              
              const totalFixed = total.toFixed(2);
              const differenceFixed = difference.toFixed(2);
               

                return (
                  <tr key={idx}>
                    <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                      {rec.productDescription !== null ? rec.productDescription : '-'}
                    </td>
                    <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                      {rec.openingStockKgs !== null ? rec.openingStockKgs : '-'}
                    </td>
                    <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                      {rec.freshProductionKgs !== null ? rec.freshProductionKgs : '-'}
                    </td>
                    <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                      {rec.reproductionKgs !== null ? rec.reproductionKgs : '-'}
                    </td>
                    <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                      {rec.totalProductionKgs !== null ? rec.totalProductionKgs : '-'}
                    </td>
                    <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                      {totalFixed}
                    </td>
                    <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                      {rec.shipmentQuantity !== null ? rec.shipmentQuantity : '-'}
                    </td>
                    <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                      {rec.reprocessQtyKg !== null ? rec.reprocessQtyKg : '-'}
                    </td>
                    <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                      {rec.labSampleQtyKg !== null ? rec.labSampleQtyKg : '-'}
                    </td>
                    <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                      {rec.domesticSaleQty !== null ? rec.domesticSaleQty : '-'}
                    </td>
                    <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                      {differenceFixed}
                    </td>
                  </tr>
                );
              })}
                    </tbody>
                    <tfoot>
            <tr>
                <td style={{ textAlign: 'center', border: '1px solid #000' }}>TOTAL</td>
                <td style={{ textAlign: 'center', border: '1px solid #000' }}>{(totals1.openingStock).toFixed(3)}</td>
                <td style={{ textAlign: 'center', border: '1px solid #000' }}>{(totals1.freshProduction).toFixed(3)}</td>
                <td style={{ textAlign: 'center', border: '1px solid #000' }}>{(totals1.reproduction).toFixed(3)}</td>
                <td style={{ textAlign: 'center', border: '1px solid #000' }}>{(totals1.totalProduction).toFixed(3)}</td>
                <td style={{ textAlign: 'center', border: '1px solid #000' }}>{(totals1.total).toFixed(3)}</td>
                <td style={{ textAlign: 'center', border: '1px solid #000' }}>{(totals1.shipments).toFixed(3)}</td>
                <td style={{ textAlign: 'center', border: '1px solid #000' }}>{(totals1.reprocessIssues).toFixed(3)}</td>
                <td style={{ textAlign: 'center', border: '1px solid #000' }}>{(totals1.labSamples).toFixed(3)}</td>
                <td style={{ textAlign: 'center', border: '1px solid #000' }}>{(totals1.shiftings).toFixed(3)}</td>
                <td style={{ textAlign: 'center', border: '1px solid #000' }}>{(totals1.closingStock).toFixed(3)}</td>
            </tr>
        </tfoot>
                    </table>
                    </div>:""}
                    <br /><br />
                    {jumbleData.length > 0 ?
                    <div>
                        <p><h3><b><u>JUMBLE PRODUCTS</u></b></h3></p>
                <table style={{ borderCollapse: 'collapse', width: '100%',paddingLeft:"50px",paddingRight:"50px",
                  marginTop: '0',
                  marginBottom: '0' }}>
                    <thead>
                    <tr>
                        <th rowSpan={2} style={{ textAlign: 'center', border: '1px solid #000' }}>PRODUCT DESCRIPTION</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>OPENING STOCK</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>FRESH PRODUCTION</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>RE-PRODUCTION</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>TOTAL PRODUCTION</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>TOTAL</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>SHIPMENTS</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>RE-PROCESS ISSUES</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>LAB SAMPLES/COMPLIMENTS</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>SHIFTINGS/SALES</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>CLOSING STOCK</th>
                    </tr>
                    <tr>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>KGS</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>KGS</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>KGS</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>KGS</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>KGS</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>KGS</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>KGS</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>KGS</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>KGS</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>KGS</th>
                    </tr>
                    </thead>
                    <tbody>
                    {jumbleData.map((rec, idx) => { 
              const openingStock = rec.openingStockKgs !== null ? parseFloat(rec.openingStockKgs) : 0;
              const totalProduction = rec.totalProductionKgs !== null ? parseFloat(rec.totalProductionKgs) : 0;
              const total = openingStock + totalProduction;
              
              const shipments = rec.shipmentQuantity !== null ? parseFloat(rec.shipmentQuantity) : 0;
              const reprocessIssues = rec.reprocessQtyKg !== null ? parseFloat(rec.reprocessQtyKg) : 0;
              const labSamples = rec.labSampleQtyKg !== null ? parseFloat(rec.labSampleQtyKg) : 0;
              const shiftings = rec.domesticSaleQty !== null ? parseFloat(rec.domesticSaleQty) : 0;
              const difference = total - (shipments + reprocessIssues + labSamples + shiftings);
              
              const totalFixed = total.toFixed(2);
              const differenceFixed = difference.toFixed(2);

                return (
                  <tr key={idx}>
                    <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                      {rec.productDescription !== null ? rec.productDescription : '-'}
                    </td>
                    <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                      {rec.openingStockKgs !== null ? rec.openingStockKgs : '-'}
                    </td>
                    <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                      {rec.freshProductionKgs !== null ? rec.freshProductionKgs : '-'}
                    </td>
                    <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                      {rec.reproductionKgs !== null ? rec.reproductionKgs : '-'}
                    </td>
                    <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                      {rec.totalProductionKgs !== null ? rec.totalProductionKgs : '-'}
                    </td>
                    <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                      {totalFixed}
                    </td>
                    <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                      {rec.shipmentQuantity !== null ? rec.shipmentQuantity : '-'}
                    </td>
                    <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                      {rec.reprocessQtyKg !== null ? rec.reprocessQtyKg : '-'}
                    </td>
                    <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                      {rec.labSampleQtyKg !== null ? rec.labSampleQtyKg : '-'}
                    </td>
                    <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                      {rec.domesticSaleQty !== null ? rec.domesticSaleQty : '-'}
                    </td>
                    <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                      {differenceFixed}
                    </td>
                  </tr>
                );
              })}
                    </tbody>
                    <tfoot>
            <tr>
                <td style={{ textAlign: 'center', border: '1px solid #000' }}>TOTAL</td>
                <td style={{ textAlign: 'center', border: '1px solid #000' }}>{(totals2.openingStock).toFixed(3)}</td>
                <td style={{ textAlign: 'center', border: '1px solid #000' }}>{(totals2.freshProduction).toFixed(3)}</td>
                <td style={{ textAlign: 'center', border: '1px solid #000' }}>{(totals2.reproduction).toFixed(3)}</td>
                <td style={{ textAlign: 'center', border: '1px solid #000' }}>{(totals2.totalProduction).toFixed(3)}</td>
                <td style={{ textAlign: 'center', border: '1px solid #000' }}>{(totals2.total).toFixed(3)}</td>
                <td style={{ textAlign: 'center', border: '1px solid #000' }}>{(totals2.shipments).toFixed(3)}</td>
                <td style={{ textAlign: 'center', border: '1px solid #000' }}>{(totals2.reprocessIssues).toFixed(3)}</td>
                <td style={{ textAlign: 'center', border: '1px solid #000' }}>{(totals2.labSamples).toFixed(3)}</td>
                <td style={{ textAlign: 'center', border: '1px solid #000' }}>{(totals2.shiftings).toFixed(3)}</td>
                <td style={{ textAlign: 'center', border: '1px solid #000' }}>{(totals2.closingStock).toFixed(3)}</td>
            </tr>
        </tfoot>
                    </table>
                    </div>:" "
                     }
                    <br /><br />
                    {otherData.length > 0 ?
                    <div>
                        <p><h3><b><u>OTHER PRODUCTS</u></b></h3></p>
                <table style={{ borderCollapse: 'collapse', width: '100%',paddingLeft:"50px",paddingRight:"50px",
                  marginTop: '0',
                  marginBottom: '0' }}>
                    <thead>
                    <tr>
                        <th rowSpan={2} style={{ textAlign: 'center', border: '1px solid #000' }}>PRODUCT DESCRIPTION</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>OPENING STOCK</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>FRESH PRODUCTION</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>RE-PRODUCTION</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>TOTAL PRODUCTION</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>TOTAL</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>SHIPMENTS</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>RE-PROCESS ISSUES</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>LAB SAMPLES/COMPLIMENTS</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>SHIFTINGS/SALES</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>CLOSING STOCK</th>
                    </tr>
                    <tr>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>KGS</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>KGS</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>KGS</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>KGS</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>KGS</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>KGS</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>KGS</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>KGS</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>KGS</th>
                        <th style={{ textAlign: 'center', border: '1px solid #000' }}>KGS</th>
                    </tr>
                    </thead>
                    <tbody>
                    {otherData.map((rec, idx) => { 
              const openingStock = rec.openingStockKgs !== null ? parseFloat(rec.openingStockKgs) : 0;
              const totalProduction = rec.totalProductionKgs !== null ? parseFloat(rec.totalProductionKgs) : 0;
              const total = openingStock + totalProduction;
              
              const shipments = rec.shipmentQuantity !== null ? parseFloat(rec.shipmentQuantity) : 0;
              const reprocessIssues = rec.reprocessQtyKg !== null ? parseFloat(rec.reprocessQtyKg) : 0;
              const labSamples = rec.labSampleQtyKg !== null ? parseFloat(rec.labSampleQtyKg) : 0;
              const shiftings = rec.domesticSaleQty !== null ? parseFloat(rec.domesticSaleQty) : 0;
              const difference = total - (shipments + reprocessIssues + labSamples + shiftings);
              
              const totalFixed = total.toFixed(2);
              const differenceFixed = difference.toFixed(2);

                return (
                  <tr key={idx}>
                    <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                      {rec.productDescription !== null ? rec.productDescription : '-'}
                    </td>
                    <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                      {rec.openingStockKgs !== null ? rec.openingStockKgs : '-'}
                    </td>
                    <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                      {rec.freshProductionKgs !== null ? rec.freshProductionKgs : '-'}
                    </td>
                    <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                      {rec.reproductionKgs !== null ? rec.reproductionKgs : '-'}
                    </td>
                    <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                      {rec.totalProductionKgs !== null ? rec.totalProductionKgs : '-'}
                    </td>
                    <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                      {totalFixed}
                    </td>
                    <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                      {rec.shipmentQuantity !== null ? rec.shipmentQuantity : '-'}
                    </td>
                    <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                      {rec.reprocessQtyKg !== null ? rec.reprocessQtyKg : '-'}
                    </td>
                    <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                      {rec.labSampleQtyKg !== null ? rec.labSampleQtyKg : '-'}
                    </td>
                    <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                      {rec.domesticSaleQty !== null ? rec.domesticSaleQty : '-'}
                    </td>
                    <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                      {differenceFixed}
                    </td>
                  </tr>
                );
              })}
                    </tbody>
                    <tfoot>
            <tr>
                <td style={{ textAlign: 'center', border: '1px solid #000' }}>TOTAL</td>
                <td style={{ textAlign: 'center', border: '1px solid #000' }}>{(totals3.openingStock).toFixed(3)}</td>
                <td style={{ textAlign: 'center', border: '1px solid #000' }}>{(totals3.freshProduction).toFixed(3)}</td>
                <td style={{ textAlign: 'center', border: '1px solid #000' }}>{(totals3.reproduction).toFixed(3)}</td>
                <td style={{ textAlign: 'center', border: '1px solid #000' }}>{(totals3.totalProduction).toFixed(3)}</td>
                <td style={{ textAlign: 'center', border: '1px solid #000' }}>{(totals3.total).toFixed(3)}</td>
                <td style={{ textAlign: 'center', border: '1px solid #000' }}>{(totals3.shipments).toFixed(3)}</td>
                <td style={{ textAlign: 'center', border: '1px solid #000' }}>{(totals3.reprocessIssues).toFixed(3)}</td>
                <td style={{ textAlign: 'center', border: '1px solid #000' }}>{(totals3.labSamples).toFixed(3)}</td>
                <td style={{ textAlign: 'center', border: '1px solid #000' }}>{(totals3.shiftings).toFixed(3)}</td>
                <td style={{ textAlign: 'center', border: '1px solid #000' }}>{(totals3.closingStock).toFixed(3)}</td>
            </tr>
        </tfoot>
                    </table>
                    </div>:" "
                    } 
                    <br /><br />
                    <div>
                    <table style={{ borderCollapse: 'collapse', width: '100%',paddingLeft:"50px",paddingRight:"50px",
                  marginTop: '0px',
                  marginBottom: '0' }}>
                        <tfoot>
                        <tr>
                <td style={{ textAlign: 'center', border: '1px solid #000',width:"22px" }}>TOTAL</td>
                <td style={{ textAlign: 'center', border: '1px solid #000',width:"20px" }}>{(totals4.openingStock).toFixed(3)}</td>
                <td style={{ textAlign: 'center', border: '1px solid #000',width:"20px" }}>{(totals4.freshProduction).toFixed(3)}</td>
                <td style={{ textAlign: 'center', border: '1px solid #000',width:"20px" }}>{(totals4.reproduction).toFixed(3)}</td>
                <td style={{ textAlign: 'center', border: '1px solid #000',width:"20px" }}>{(totals4.totalProduction).toFixed(3)}</td>
                <td style={{ textAlign: 'center', border: '1px solid #000',width:"14px" }}>{(totals4.total).toFixed(3)}</td>
                <td style={{ textAlign: 'center', border: '1px solid #000',width:"20px" }}>{(totals4.shipments).toFixed(3)}</td>
                <td style={{ textAlign: 'center', border: '1px solid #000',width:"20px" }}>{(totals4.reprocessIssues).toFixed(3)}</td>
                <td style={{ textAlign: 'center', border: '1px solid #000',width:"20px" }}>{(totals4.labSamples).toFixed(3)}</td>
                <td style={{ textAlign: 'center', border: '1px solid #000',width:"20px" }}>{(totals4.shiftings).toFixed(3)}</td>
                <td style={{ textAlign: 'center', border: '1px solid #000',width:"20px" }}>{(totals4.closingStock).toFixed(3)}</td>
            </tr>
                        </tfoot>
                    </table>
                    </div>
                </body>
            </html>
            </div>
            </table>
           ) }
        </Card>
    </div>
  )
}

export default MonthlyWiseShrimpReport