import { useSelector } from 'react-redux';
import {
  GlobalPritdummyData,
  GlobalSelectedPrintHeaderFontColor,
  GlobalSelectedTableHeaderColor,
  GlobalSelectedTableHeaderFontColor,
  GlobalSelectedTableBodyColor,
  GlobalSelectedTableBodyFontColor,
  GlobalRowType,
  GlobalSelectedFooterColor,
  GlobalSelectedFooterFontColor,
  GlobalSelectedNetAmountColor,
  GlobalSelectedNetAmountFontColor,
  GlobalSelectedPrintHeaderColor,
} from '../../../Features/ThemeChange/ThemeChange';
import { isMobile } from 'react-device-detect';
import { extractLastNumberOrderId } from '../../../Services/Others';
import moment from 'moment';

const PurPrintstyleInvoice = ({
  index,
  table2Data,
  Date1,
  totalQuantity,
  OrderDetailGST,
  OrderDetailIGST,
  PaymentStatus,
  printDatas,
  BankDetails
}) => {

  const GlobaldummyData = useSelector(GlobalPritdummyData);
  const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
  const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor);
  const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor);
  const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor);
  const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor);
  const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor);
  const SelectedRowType = useSelector(GlobalRowType);
  const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor);
  const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor);
  const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor);
  const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor);
  let BillName = printDatas?.PrintHdrName
  // Function to convert number to words
  const numberToWords = (num) => {
    const a = [
      "", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten",
      "Eleven", "Twelve", "Thirteen", "Fourteen", "Fifteen", "Sixteen", "Seventeen",
      "Eighteen", "Nineteen"
    ];
    const b = ["", "", "Twenty", "Thirty", "Forty", "Fifty", "Sixty", "Seventy", "Eighty", "Ninety"];

    if (num === 0) return "Zero";
    if (num < 20) return a[num];
    if (num < 100) return b[Math.floor(num / 10)] + (num % 10 ? " " + a[num % 10] : "");
    if (num < 1000)
      return a[Math.floor(num / 100)] + " Hundred" + (num % 100 ? " and " + numberToWords(num % 100) : "");
    if (num < 100000)
      return numberToWords(Math.floor(num / 1000)) + " Thousand" + (num % 1000 ? " " + numberToWords(num % 1000) : "");
    if (num < 10000000)
      return numberToWords(Math.floor(num / 100000)) + " Lakh" + (num % 100000 ? " " + numberToWords(num % 100000) : "");
    if (num < 1000000000)
      return numberToWords(Math.floor(num / 10000000)) + " Crore" + (num % 10000000 ? " " + numberToWords(num % 10000000) : "");

    return "Number too large";
  };
  const invoiceData = {
    // Company Details - mapped from A4Standard
    companyName: table2Data?.CompName || table2Data?.BranchName || "",
    companyspecname: table2Data?.AppSpecificName || "",
    companyAddress: {
      address1: table2Data?.AddressDetails?.[0]?.Address1 || "",
      address2: table2Data?.AddressDetails?.[0]?.Address2 || "",
      city: table2Data?.AddressDetails?.[0]?.City || "",
      state: table2Data?.AddressDetails?.[0]?.State || "",
      zip: table2Data?.AddressDetails?.[0]?.Zip || ""
    },
    companyGSTIN: table2Data?.CompGSTIN || table2Data?.GSTIN || "",
    companyEmail: table2Data?.CompanyEmail || table2Data?.BrEmail || "",
    companyMobile: table2Data?.BrMobile || "",
    companyMobile2: table2Data?.BrMobile2 || "",

    // Invoice Details - mapped from A4Standard
    invoiceNo: table2Data?.QuotationNo ?
      extractLastNumberOrderId(
        table2Data?.QuotationNo,
      ) : "",
    invoiceDate: moment(Date1).format('DD-MM-YYYY') || "",

    // Customer Details - mapped from A4Standard CustomerDetails array
    customerName: table2Data?.CustomerDetails?.[0]?.CustSuppName || table2Data?.CustName
      || "",
    customerMobile: table2Data?.CustomerDetails?.[0]?.MobileNo || table2Data?.CustMobile || "",
    customerGSTIN: table2Data?.CustomerDetails?.[0]?.CustGSTNo || table2Data?.CustGSTIN || "",
    customerAddress: {
      address1: table2Data?.CustomerDetails?.[0]?.Address1 || "",
      address2: table2Data?.CustomerDetails?.[0]?.Address2 || "",
      state: table2Data?.CustomerDetails?.[0]?.State || ""
    },

    // Product Details - mapped from A4Standard productDetails
    productDetails: table2Data?.ProductDetails || [],

    // Totals - mapped from A4Standard
    totalAmount: Number(table2Data?.BillAmount || table2Data?.TotalAmt),
    taxAmount: Number(OrderDetailGST),
    grandTotal: Number(table2Data?.NetAmount || table2Data?.GrandTotal),
    totalBillAmount: Number(table2Data?.BillAmount || table2Data?.NetAmount || 0),
    // Bank Details - mapped from A4Standard
    bankDetails: BankDetails?.[0] || null
  };

  console.log(table2Data, "Date1Date1", invoiceData,)

  let PageSize = printDatas?.PageSize

  let printColors = printDatas?.PrintColors;
  const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
  const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
  const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
  const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
  const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;

  const cgstTotal = OrderDetailGST && OrderDetailGST.length > 0
    ? Number(OrderDetailGST.reduce((sum, item) => sum + (item.CGST || 0), 0))?.toFixed(2)
    : 0;
  const sgstTotal = OrderDetailGST && OrderDetailGST.length > 0
    ? Number(OrderDetailGST.reduce((sum, item) => sum + (item.SGST || 0), 0))?.toFixed(2)
    : 0;
  const igstTotal = OrderDetailIGST && OrderDetailIGST.length > 0
    ? Number(OrderDetailIGST.reduce((sum, item) => sum + (item.IGST || 0), 0))?.toFixed(2)
    : 0;

  // Calculate round off value
  const roundOffValue = Number(invoiceData.grandTotal) - (
    Number(invoiceData.totalBillAmount) +
    Number(cgstTotal) +
    Number(sgstTotal) +
    Number(igstTotal)
  );
  console.log(Number(invoiceData.totalBillAmount), cgstTotal, sgstTotal, igstTotal, "roundoff vaules")
  function RoundOffFun(amount) {
    const roundedAmount = Math.round(amount);
    const roundOffValue = parseFloat((roundedAmount - amount).toFixed(2));
    // const symbol = roundOffValue > 0 ? '+' : ''; // Add "+" symbol for positive values ${symbol}
    console.log("Rounded Amount:", roundedAmount, "Round Off Value:", roundOffValue);
    return `${roundOffValue.toFixed(2)}`;

  }

  // Allow up to 10 items per page
  const chunkSize = isMobile ? 7 : PageSize == "A5" ? 9 : 8;
  let dataSource = [];

  // Simplified data source logic - always use all product details
  dataSource = table2Data?.ProductDetails || [];

  // Ensure dataSource is always an array
  if (!Array.isArray(dataSource)) {
    dataSource = [];
  }

  console.log("Final DataSource:", table2Data,);

  const paginatedChunks = [];

  // Always create at least one chunk, even if empty
  if (dataSource.length === 0) {
    paginatedChunks.push([]);
  } else {
    // Split data into chunks
    for (let i = 0; i < dataSource.length; i += chunkSize) {
      const chunk = dataSource.slice(i, i + chunkSize);
      paginatedChunks.push(chunk);
    }
  }

  const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0;
  // If last page has more than 6 items, move footer to new page
  const shouldFooterBeOnNewPage = lastChunkRows === chunkSize;

  // If footer should be on new page, add an empty chunk for footer-only page
  if (shouldFooterBeOnNewPage && paginatedChunks.length > 0) {
    paginatedChunks.push([]); // Empty chunk for footer-only page
  }
  const headerStyle = {
    backgroundColor: GlobaldummyData
      ? SelectedHeaderColor
      : headerColor?.background,

    color: GlobaldummyData
      ? SelectedHeaderFontColor
      : headerColor?.font,
  }
  const tableHeaderStyle = {
    backgroundColor: GlobaldummyData
      ? SelectedTableHeaderColor
      : tableHeaderColor?.background,

    color: GlobaldummyData
      ? SelectedTableHeaderFontColor
      : tableHeaderColor?.font,
  }
  const tableBodyStyle = {
    backgroundColor: GlobaldummyData
      ? SelectedTableBodyColor
      : tableBodyColor?.background,
    color: GlobaldummyData
      ? SelectedTableBodyFontColor
      : tableBodyColor?.font,
  }
  const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType;
  const footerColorStyle = {
    backgroundColor: GlobaldummyData
      ? SelectedTableFooterColor
      : footerColor?.background,

    color: GlobaldummyData
      ? SelectedTableFooterFontColor
      : footerColor?.font,
  }
  const netAmountStyle = {
    backgroundColor: GlobaldummyData
      ? SelectedNetAmountColor
      : netAmtColor?.background,

    color: GlobaldummyData
      ? SelectedNetAmountFontColor
      : netAmtColor?.font,
  }

  return (
    <div id={`TaxInvoice`} style={{
      fontFamily: 'Arial, sans-serif',
      fontSize: '12px',
      fontWeight: 'bold',
      lineHeight: '1.2',
      color: '#000',
      maxWidth: '210mm',
      margin: '0 auto',
      padding: '10mm',
      backgroundColor: 'white'
    }}>
      {paginatedChunks.map((dataChunk, chunkIndex) => (
        <div
          key={chunkIndex}
          className={isMobile ? `invoice-wrapper container pdf-page` : `invoice-wrapper container print-chunk${chunkIndex > 0 ? ' print-page-break' : ''}`}
          style={{
            display: "flex",
            flexDirection: "column",
            // justifyContent: ((chunkIndex === paginatedChunks.length - 1) && (!shouldFooterBeOnNewPage)) ? "space-between" : "",
            height: isMobile ? "275mm" : PageSize == "A5" ? '130mm' : "245mm",
            marginBottom: "0",
            pageBreakAfter: chunkIndex < paginatedChunks.length - 1 ? 'always' : 'auto'
          }}
        >
          {renderInvoiceContent(dataChunk, chunkIndex)}
        </div>
      ))}
    </div>
  );

  function renderInvoiceContent(dataChunk, chunkIndex) {
    console.log(`Rendering page ${chunkIndex + 1}, chunk has ${dataChunk.length} items:`, dataChunk);

    const isFirstPage = chunkIndex === 0;
    const isLastPage = chunkIndex === paginatedChunks.length - 1;
    const isFooterOnlyPage = isLastPage && dataChunk.length === 0 && shouldFooterBeOnNewPage;

    console.log(`Page ${chunkIndex + 1}: isFirstPage=${isFirstPage}, isLastPage=${isLastPage}, isFooterOnlyPage=${isFooterOnlyPage}`);

    return (
      <>
        {/* Header - Only on first page */}
        {isFirstPage && (
          <>
            <div style={{ textAlign: 'center', marginBottom: '10px', display: "flex", justifyContent: "space-between", alignItems: "center", }}>
              <div></div>
              <h2 style={{ margin: '0', fontSize: '20px', fontWeight: '700', }}>{table2Data?.OrderType === "E" ? "Estimate" : (BillName ? BillName : "Tax Invoice")}</h2>
              <div>
                <div style={{ fontSize: '10px', marginTop: '2px' }}>(ORIGINAL FOR RECIPIENT)</div>
              </div>
            </div>
          </>
        )}

        {/* Main Container - Always show */}
        <div style={{ border: '1px solid #000' }}>

          {/* Top Section - Company and Invoice Details - Only on first page */}
          {isFirstPage && (
            <div style={{ display: 'flex', width: "100%", }}>

              {/* Left - Company Details */}
              <div style={{ width: "50%", borderRight: '1px solid #000', display: 'flex', flexDirection: 'column' }}>
                <div style={{
                  // flex: '1',
                  padding: '10px',

                  fontSize: '11px',
                  textAlign: 'left'
                }}>

                  <div style={{ fontWeight: '700', fontSize: '15px', ...headerStyle }}>
                    {invoiceData.companyName}
                  </div>
                  <div style={{ fontWeight: '700', fontSize: '12px', }}>{invoiceData.companyspecname}</div>
                  <div >{invoiceData.companyAddress.address1}</div>
                  <div>{invoiceData.companyAddress.address2}</div>
                  <div>{invoiceData.companyAddress.city}  {invoiceData.companyAddress.zip ? ` - ${invoiceData.companyAddress.zip}` : ""}</div>
                  <div>{invoiceData.companyAddress.state}</div>
                  <div>GSTIN/UIN: {invoiceData.companyGSTIN}</div>
                  {/* <div>State Name: Tamil Nadu, Code: 33</div> */}
                  {invoiceData.companyEmail && <div>E-Mail: {invoiceData.companyEmail}</div>}
                  {invoiceData.companyMobile && <div>Mobile: +91 {invoiceData.companyMobile}{invoiceData.companyMobile2 ? `, ${invoiceData.companyMobile2}` : ""}</div>}
                </div>
                {/* Buyer Details */}
                <div style={{
                  padding: '10px',
                  borderTop: '1px solid #000',

                  fontSize: '11px',
                  minHeight: '60px',
                  textAlign: 'left'
                }}>
                  <div style={{ fontWeight: '700', marginBottom: '5px' }}>Buyer (Bill to)</div>
                  <div style={{ fontWeight: '700' }}>{invoiceData.customerName}</div>
                  {invoiceData.customerAddress.address1 && <div>{invoiceData.customerAddress.address1}</div>}
                  {invoiceData.customerAddress.address2 && <div>{invoiceData.customerAddress.address2}</div>}
                  {invoiceData.customerMobile && <div>Mobile: {invoiceData.customerMobile}</div>}
                  {invoiceData.customerGSTIN && <div>GSTIN/UIN: {invoiceData.customerGSTIN}</div>}
                  {invoiceData.customerAddress.state && <div>State Name: {invoiceData.customerAddress.state}</div>}
                </div>

              </div>

              {/* Right - Invoice Details */}
              <div style={{ flex: '1', fontSize: '10px' }}>

                {/* Invoice No and Date */}
                <div style={{ display: 'flex', borderBottom: '1px solid #000' }}>
                  <div style={{ flex: '1', paddingLeft: '3px', borderRight: '1px solid #000', textAlign: 'left' }}>
                    <div style={{ fontWeight: '700', fontSize: '9px' }}>Invoice No.</div>
                    <div style={{ fontWeight: '700', fontSize: '15px' }}>{invoiceData.invoiceNo}</div>
                  </div>
                  <div style={{ flex: '1', paddingLeft: '3px', textAlign: 'left' }} >
                    <div>Dated</div>
                    <div style={{ fontWeight: '700', fontSize: '15px' }}>{invoiceData.invoiceDate}</div>
                  </div>
                </div>

                {/* Delivery Note and Payment Terms */}
                <div style={{ display: 'flex', borderBottom: '1px solid #000', textAlign: 'left', minHeight: '25px' }}>
                  <div style={{ flex: '1', paddingLeft: '3px', borderRight: '1px solid #000' }}>
                    <div style={{ fontWeight: '700', fontSize: '9px' }}>Delivery Note</div>
                    <div></div>
                  </div>
                  <div style={{ flex: '1', paddingLeft: '3px', textAlign: 'left', minHeight: '25px' }}>
                    <div style={{ fontWeight: '700', fontSize: '9px' }}>Mode/Terms of Payment</div>
                    <div></div>
                  </div>
                </div>

                {/* Reference and Other References */}
                <div style={{ display: 'flex', borderBottom: '1px solid #000', textAlign: 'left', minHeight: '25px' }}>
                  <div style={{ flex: '1', paddingLeft: '3px', borderRight: '1px solid #000' }}>
                    <div style={{ fontWeight: '700', fontSize: '9px' }}>Reference No. & Date</div>
                    <div></div>
                  </div>
                  <div style={{ flex: '1', paddingLeft: '3px', textAlign: 'left', minHeight: '25px' }}>
                    <div style={{ fontWeight: '700', fontSize: '9px' }}>Other References</div>
                    <div></div>
                  </div>
                </div>

                {/* Buyer's Order */}
                <div style={{ display: 'flex', borderBottom: '1px solid #000', textAlign: 'left', minHeight: '25px' }}>
                  <div style={{ flex: '1', paddingLeft: '3px', borderRight: '1px solid #000' }}>
                    <div style={{ fontWeight: '700', fontSize: '9px' }}>Buyer's Order No.</div>
                    <div></div>
                  </div>
                  <div style={{ flex: '1', paddingLeft: '3px', textAlign: 'left', minHeight: '25px' }}>
                    <div style={{ fontWeight: '700', fontSize: '9px' }}>Dated</div>
                    <div></div>
                  </div>
                </div>

                {/* Dispatch Details */}
                <div style={{ display: 'flex', borderBottom: '1px solid #000', borderLeft: GlobaldummyData ? '1px solid #000' : "" }}>
                  <div style={{ flex: '1', paddingLeft: '3px', borderRight: '1px solid #000', textAlign: 'left', minHeight: '25px' }}>
                    <div style={{ fontWeight: '700', fontSize: '9px' }}>Dispatch Doc No.</div>
                    <div></div>
                  </div>
                  <div style={{ flex: '1', paddingLeft: '3px', textAlign: 'left', minHeight: '25px' }}>
                    <div style={{ fontWeight: '700', fontSize: '9px' }}>Delivery Note Date</div>
                    <div></div>
                  </div>
                </div>

                {/* Dispatched through and Destination */}
                <div style={{ display: 'flex', borderBottom: '1px solid #000', minHeight: '25px' }}>
                  <div style={{ flex: '1', paddingLeft: '3px', textAlign: 'left' }}>
                    <div style={{ fontWeight: '700', fontSize: '9px' }}>Dispatched through</div>
                    <div></div>
                  </div>
                  <div style={{ flex: '1', paddingLeft: '3px', borderLeft: "1px solid #000", minHeight: '25px' }}>
                    <div style={{ fontWeight: '700', fontSize: '9px', textAlign: 'left' }}>Destination</div>
                    <div></div>
                  </div>
                </div>

                {/* Terms of Delivery */}
                <div style={{ padding: '8px 6px', textAlign: 'left', minHeight: '35px' }}>
                  <div style={{ fontWeight: '700', fontSize: '9px' }}>Terms of Delivery</div>
                  <div></div>
                </div>

              </div>
            </div>
          )}

          {/* Continuation header for non-first pages */}
          {!isFirstPage && (
            <div style={{ textAlign: 'center', marginBottom: '10px', padding: '5px' }}>
              <h3 style={{ margin: '0', fontSize: '16px', fontWeight: '700' }}>
                {isFooterOnlyPage ? 'Tax Invoice' : 'Tax Invoice '}
              </h3>
              <div style={{ fontSize: '10px' }}>Invoice No: {invoiceData.invoiceNo}</div>
            </div>
          )}

          {/* Items Table - Show only if there are items or not a footer-only page */}
          {(dataChunk.length > 0 || !isFooterOnlyPage) && (
            <div style={{
              // borderBottom: isLastPage ? '1px solid #000' : 'none',
              minHeight: '250px'
            }}>
              {/* Table Header */}
              <div style={{
                display: 'grid',
                gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
                fontSize: '10px',
                // borderRight: '1px solid #000',
                borderBottom: '1px solid #000',
                borderTop: '1px solid #000',
                ...tableHeaderStyle
              }}>
                <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>SL.No</div>
                <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>Description of Goods</div>
                <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>HSN/SAC</div>
                <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>Quantity</div>
                <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>Rate</div>
                <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>per</div>
                <div style={{ padding: '8px 4px', textAlign: 'center' }}>Amount</div>
              </div>

              {/* Table Rows - Dynamic data from dataChunk */}
              {(dataChunk && dataChunk.length > 0) ? (
                <>
                  {dataChunk?.map((item, index) => (
                    <div key={index} style={{
                      display: 'grid',
                      gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
                      // borderRight: '1px solid #000',
                      ...(rowtypeStyle === (index % 2 === 0 ? "even" : "odd")
                        ? tableBodyStyle
                        : {}),

                    }}>
                      <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center', fontWeight: '700' }}>{chunkIndex * chunkSize + index + 1}</div>
                      <div style={{ padding: '8px 4px', borderRight: '1px solid #000' }}>
                        <div style={{ fontWeight: '700', marginBottom: '2px', textAlign: 'left', fontSize: '15px' }}>{item.ProdName || 'Product Name'}</div>
                        {item.BrandName && <div style={{ fontSize: '9px', color: '#666', textAlign: 'left' }}>{item.BrandName}</div>}
                      </div>
                      <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>{item.HSN || ''}</div>
                      <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center', fontWeight: '700', fontSize: '15px' }}>{item.Qty || 0} {item.UomName || 'NOS'}</div>
                      <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'right' }}>{Number(item.Price || 0)?.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
                      <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>{item.UomName || 'NOS'}</div>
                      <div style={{ padding: '8px 4px', textAlign: 'right', fontWeight: '700', fontSize: '15px' }}>{Number(item.WithoutTaxRate || 0)?.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
                    </div>
                  ))}
                  {/* Tax summary */}
                  {isLastPage &&
                    (
                      <>
                        {/* Total without tax amount */}
                        <div style={{
                          display: 'grid',
                          gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
                          // borderRight: '1px solid #000',
                          fontSize: '11px',
                          fontWeight: '700',
                          minHeight: '22px'
                        }}>
                          <div style={{ borderRight: '1px solid #000' }}></div>
                          <div style={{ padding: '6px 6px', textAlign: 'right', borderRight: '1px solid #000', }}></div>
                          <div style={{ borderRight: '1px solid #000' }}></div>
                          <div style={{ borderRight: '1px solid #000' }}></div>
                          <div style={{ borderRight: '1px solid #000' }}></div>
                          <div style={{ borderRight: '1px solid #000' }}></div>
                          <div style={{ padding: '6px 6px', textAlign: 'right', borderTop: '1px solid #000' }}>
                            ₹ {Number(invoiceData?.totalBillAmount).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                          </div>
                        </div>
                        {/* CGST */}
                        {OrderDetailGST[0]?.TaxTypeName === "WithTax" && <div style={{
                          display: 'grid',
                          gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
                          // borderRight: '1px solid #000',
                          fontSize: '11px',
                          fontWeight: '700',
                          minHeight: '22px'
                        }}>
                          <div style={{ borderRight: '1px solid #000' }}></div>
                          <div style={{ padding: '6px 6px', textAlign: 'right', borderRight: '1px solid #000', }}>CGST</div>
                          <div style={{ borderRight: '1px solid #000' }}></div>
                          <div style={{ borderRight: '1px solid #000' }}></div>
                          <div style={{ borderRight: '1px solid #000' }}></div>
                          <div style={{ borderRight: '1px solid #000' }}></div>
                          {<div style={{ padding: '6px 6px', textAlign: 'right', }}>
                            {OrderDetailGST && OrderDetailGST.length > 0
                              ? Number(OrderDetailGST.reduce((sum, item) => sum + (item.CGST || 0), 0)).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
                              : "0.00"}
                          </div>}
                        </div>}
                        {/* SGST */}
                        {OrderDetailGST[0]?.TaxTypeName === "WithTax" && <div style={{
                          display: 'grid',
                          gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
                          // borderRight: '1px solid #000',
                          fontSize: '11px',
                          fontWeight: '700',
                          minHeight: '22px'
                        }}>
                          <div style={{ borderRight: '1px solid #000' }}></div>
                          <div style={{ padding: '6px 6px', textAlign: 'right', borderRight: '1px solid #000', }}>SGST</div>
                          <div style={{ borderRight: '1px solid #000' }}></div>
                          <div style={{ borderRight: '1px solid #000' }}></div>
                          <div style={{ borderRight: '1px solid #000' }} ></div>
                          <div style={{ borderRight: '1px solid #000' }}></div>
                          <div style={{ padding: '6px 6px', textAlign: 'right', }}>
                            {OrderDetailGST && OrderDetailGST.length > 0
                              ? Number(OrderDetailGST.reduce((sum, item) => sum + (item.SGST || 0), 0)).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
                              : "0.00"}
                          </div>
                        </div>}
                        {/* IGST */}
                        {OrderDetailGST[0]?.TaxTypeName === "WithTax" && (
                          <div style={{
                            display: 'grid',
                            gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
                            // borderRight: '1px solid #000',
                            fontSize: '11px',
                            fontWeight: '700',
                            minHeight: '22px'
                          }}>
                            <div style={{ borderRight: '1px solid #000' }}></div>
                            <div style={{ padding: '6px 6px', textAlign: 'right', borderRight: '1px solid #000', }}>IGST</div>
                            <div style={{ borderRight: '1px solid #000' }}></div>
                            <div style={{ borderRight: '1px solid #000' }}></div>
                            <div style={{ borderRight: '1px solid #000' }}></div>
                            <div style={{ borderRight: '1px solid #000' }}></div>

                            <div style={{ padding: '6px 6px', textAlign: 'right', }}>
                              {OrderDetailIGST && OrderDetailIGST.length > 0
                                ? Number(OrderDetailIGST.reduce((sum, item) => sum + (item.IGST || 0), 0)).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
                                : "0.00"}
                            </div>
                          </div>
                        )}
                        {/* Rounding Off */}
                        <div style={{
                          display: 'grid',
                          gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
                          // borderRight: '1px solid #000',
                          // borderBottom: '1px solid #000', 
                          fontSize: '11px',
                          fontWeight: '700',
                          minHeight: '22px'
                        }}>
                          <div style={{ borderRight: '1px solid #000' }}></div>
                          <div style={{ padding: '6px 6px', textAlign: 'right', borderRight: '1px solid #000', }}>ROUNDING OFF</div>
                          <div style={{ borderRight: '1px solid #000' }}></div>
                          <div style={{ borderRight: '1px solid #000' }}></div>
                          <div style={{ borderRight: '1px solid #000' }}></div>
                          <div style={{ borderRight: '1px solid #000' }}></div>

                          <div style={{ padding: '6px 6px', textAlign: 'right', }}>
                            {RoundOffFun(roundOffValue)}
                          </div>
                        </div>
                        {Array.from({ length: chunkSize - dataChunk.length })?.map((_, idx) => (
                          <div key={`empty-${idx}`} style={{
                            display: 'grid',
                            gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
                            // borderRight: '1px solid #000',

                            minHeight: '32px', // Adjust height as needed for your design
                            fontSize: '10px'
                          }}>
                            <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>&nbsp;</div>
                            <div style={{ padding: '8px 4px', borderRight: '1px solid #000' }}>&nbsp;</div>
                            <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>&nbsp;</div>
                            <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>&nbsp;</div>
                            <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'right' }}>&nbsp;</div>
                            <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>&nbsp;</div>
                            <div style={{ padding: '8px 4px', textAlign: 'right' }}>&nbsp;</div>
                          </div>
                        ))}
                        {/* Total */}
                        <div style={{
                          display: 'grid',
                          gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
                          // borderRight: '1px solid #000',
                          borderBottom: '1px solid #000',
                          borderTop: '1px solid #000',

                          fontWeight: '700',
                          minHeight: '30px'
                        }}>
                          <div style={{ borderRight: '1px solid #000' }}></div>
                          <div style={{ padding: '8px 6px', textAlign: 'right', fontSize: '12px', borderRight: '1px solid #000' }}>Total</div>
                          <div style={{ borderRight: '1px solid #000' }}></div>
                          <div style={{ padding: '8px 3px', textAlign: 'center', borderRight: '1px solid #000' }}>
                            {totalQuantity ||
                              (invoiceData.productDetails?.reduce((sum, item) => sum + (item.SalesQty || 0), 0)) ||
                              0} NOS
                          </div>
                          <div style={{ borderRight: '1px solid #000' }}></div>
                          <div style={{ borderRight: '1px solid #000' }}></div>
                          <div style={{ padding: '8px 6px', textAlign: 'right',...netAmountStyle }}>
                            ₹ {Number(invoiceData.grandTotal).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                          </div>
                        </div>
                      </>
                    )}
                </>
              ) : (

                // Show empty row when no data
                <div style={{
                  display: 'grid',
                  gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
                  // borderBottom: '1px solid #000',
                  borderLeft: '1px solid #000',
                  borderRight: '1px solid #000',
                  fontSize: '10px',
                  minHeight: '40px'
                }}>
                  <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center', fontWeight: '700' }}>-</div>
                  <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>No items to display</div>
                  <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>-</div>
                  <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>-</div>
                  <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>-</div>
                  <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>-</div>
                  <div style={{ padding: '8px 4px', textAlign: 'center' }}>-</div>
                </div>
              )}
            </div>
          )}
          {/* Tax summary - Only on last page */}

          {/* Footer content - Only on last page */}
          {isLastPage && (
            <>
              {/* Amount in Words */}
              <div style={{
                padding: '8px 10px',
                borderBottom: '1px solid #000',
                fontSize: '11px',
                display: 'flex',
                justifyContent: 'space-between',
              }}>
                <div style={{

                  display: 'flex',
                  justifyContent: 'flex-start',
                  flexDirection: 'column',
                }}>
                  <div style={{ fontWeight: '700', marginBottom: '3px' }}>Amount Chargeable (in words)</div>
                  <div style={{ fontWeight: '700', fontSize: '16px' }}>INR {numberToWords(Math.floor(invoiceData.grandTotal))} Only</div>
                </div>
                <p>E. & O.E</p>
              </div>


              {/* Tax Breakdown Table */}
              {OrderDetailGST[0]?.TaxTypeName === "WithTax" && <div style={{ borderBottom: '1px solid #000' }}>

                {/* Tax Table Header - Main Headers */}
                <div style={{
                  display: 'grid',
                  gridTemplateColumns: '12% 15% 18% 18% 15% 22%',
                  borderBottom: '1px solid #000',
                  fontSize: '9px',
                  fontWeight: '700',
                }}>
                  <div style={{ padding: '6px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>HSN/SAC</div>
                  <div style={{ padding: '6px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>Taxable Value</div>
                  <div style={{ padding: '6px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>CGST</div>
                  <div style={{ padding: '6px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>SGST/UTGST</div>
                  <div style={{ padding: '6px 4px', textAlign: 'center' }}>Tax Amount</div>
                </div>

                {/* Tax Table Sub-Headers */}
                <div style={{
                  display: 'grid',
                  gridTemplateColumns: '12% 15% 9% 9% 9% 9% 15% 22%',
                  borderBottom: '1px solid #000',
                  fontSize: '8px',
                  fontWeight: '700',
                }}>
                  <div style={{ padding: '4px 2px', borderRight: '1px solid #000', textAlign: 'center' }}></div>
                  <div style={{ padding: '4px 2px', borderRight: '1px solid #000', textAlign: 'center' }}></div>
                  <div style={{ padding: '4px 2px', borderRight: '1px solid #000', textAlign: 'center' }}>Rate</div>
                  <div style={{ padding: '4px 2px', borderRight: '1px solid #000', textAlign: 'center' }}>Amount</div>
                  <div style={{ padding: '4px 2px', borderRight: '1px solid #000', textAlign: 'center' }}>Rate</div>
                  <div style={{ padding: '4px 2px', borderRight: '1px solid #000', textAlign: 'center' }}>Amount</div>
                  <div style={{ padding: '4px 2px', textAlign: 'center' }}></div>
                </div>

                {/* Tax Table Rows - Dynamic from OrderDetailGST */}
                {OrderDetailGST && OrderDetailGST.length > 0 ? (
                  OrderDetailGST?.map((taxItem, index) => (
                    <div key={index} style={{
                      display: 'grid',
                      gridTemplateColumns: '12% 15% 9% 9% 9% 9% 15% 22%',
                      borderBottom: '1px solid #000',
                      fontSize: '9px',
                      minHeight: '20px'
                    }}>
                      <div style={{ padding: '4px', borderRight: '1px solid #000', textAlign: 'center', fontWeight: '700' }}>{taxItem.HSN || ''}</div>
                      <div style={{ padding: '4px', borderRight: '1px solid #000', textAlign: 'right' }}>{Number(taxItem.WithoutTaxRate || 0).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
                      <div style={{ padding: '4px', borderRight: '1px solid #000', textAlign: 'center' }}>{taxItem.TaxPercentage ? (taxItem.TaxPercentage / 2) + '%' : '0%'}</div>
                      <div style={{ padding: '4px', borderRight: '1px solid #000', textAlign: 'right' }}>{Number(taxItem.CGST || 0).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
                      <div style={{ padding: '4px', borderRight: '1px solid #000', textAlign: 'center' }}>{taxItem.TaxPercentage ? (taxItem.TaxPercentage / 2) + '%' : '0%'}</div>
                      <div style={{ padding: '4px', borderRight: '1px solid #000', textAlign: 'right' }}>{Number(taxItem.SGST || 0).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
                      <div style={{ padding: '4px', textAlign: 'right' }}>{Number((taxItem.CGST || 0) + (taxItem.SGST || 0)).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
                    </div>
                  ))
                ) : (
                  // Show 0 values when no GST data
                  <div style={{
                    display: 'grid',
                    gridTemplateColumns: '12% 15% 9% 9% 9% 9% 15% 22%',
                    borderBottom: '1px solid #000',
                    fontSize: '9px',
                    minHeight: '20px'
                  }}>
                    <div style={{ padding: '4px', borderRight: '1px solid #000', textAlign: 'center', fontWeight: '700' }}>-</div>
                    <div style={{ padding: '4px', borderRight: '1px solid #000', textAlign: 'right' }}>0.00</div>
                    <div style={{ padding: '4px', borderRight: '1px solid #000', textAlign: 'center' }}>0%</div>
                    <div style={{ padding: '4px', borderRight: '1px solid #000', textAlign: 'right' }}>0.00</div>
                    <div style={{ padding: '4px', borderRight: '1px solid #000', textAlign: 'center' }}>0%</div>
                    <div style={{ padding: '4px', borderRight: '1px solid #000', textAlign: 'right' }}>0.00</div>
                    <div style={{ padding: '4px', textAlign: 'right' }}>0.00</div>
                  </div>
                )}

                {/* Tax Table Total */}
                <div style={{
                  display: 'grid',
                  gridTemplateColumns: '12% 15% 9% 9% 9% 9% 15% 22%',
                  fontSize: '9px',
                  fontWeight: '700',
                  minHeight: '22px',
                }}>
                  <div style={{ padding: '6px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>Total</div>
                  <div style={{ padding: '6px 4px', borderRight: '1px solid #000', textAlign: 'right' }}>
                    {OrderDetailGST && OrderDetailGST.length > 0
                      ? Number(OrderDetailGST.reduce((sum, item) => sum + (item.WithoutTaxRate || 0), 0)).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
                      : "0.00"
                    }
                  </div>
                  <div style={{ padding: '6px 4px', borderRight: '1px solid #000', textAlign: 'center' }}></div>
                  <div style={{ padding: '6px 4px', borderRight: '1px solid #000', textAlign: 'right' }}>
                    {OrderDetailGST && OrderDetailGST.length > 0
                      ? Number(OrderDetailGST.reduce((sum, item) => sum + (item.CGST || 0), 0)).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
                      : "0.00"
                    }
                  </div>
                  <div style={{ padding: '6px 4px', borderRight: '1px solid #000', textAlign: 'center' }}></div>
                  <div style={{ padding: '6px 4px', borderRight: '1px solid #000', textAlign: 'right' }}>
                    {OrderDetailGST && OrderDetailGST.length > 0
                      ? Number(OrderDetailGST.reduce((sum, item) => sum + (item.SGST || 0), 0)).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
                      : "0.00"
                    }
                  </div>
                  <div style={{ padding: '6px 4px', textAlign: 'right' }}>
                    {OrderDetailGST && OrderDetailGST.length > 0
                      ? Number(OrderDetailGST.reduce((sum, item) => sum + (item.CGST || 0) + (item.SGST || 0) + (item.WithoutTaxRate || 0), 0)).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
                      : "0.00"
                    }
                  </div>
                </div>
              </div>}

              {/* Tax Amount in Words */}
              {OrderDetailGST[0]?.TaxTypeName === "WithTax" && <div style={{
                padding: '3px 5px',
                fontSize: '11px'
              }}>
                <div style={{ fontWeight: '700' }}>
                  Tax Amount (in words): INR {numberToWords(Math.floor(invoiceData.taxAmount || (OrderDetailGST?.reduce((sum, item) => sum + (item.CGST || 0) + (item.SGST || 0), 0) || 0)))} Only
                </div>
              </div>}

              {/* Bank Details and Signature */}
              <div style={{ display: 'flex', minHeight: '120px', width: "100%" }}>
                {/* Declaration */}
                <div style={{ display: "flex", flexDirection: "column", justifyContent: "flex-end", width: "50%" }}>
                  <div style={{
                    padding: '8px 10px',
                    fontSize: '11px'
                  }}>
                    <div style={{ fontWeight: '700', marginBottom: '3px', fontSize: '12px', borderBottom: "1px solid #000", width: "max-content" }}>Declaration</div>
                    <div>We declare that this invoice shows the actual price of the goods described and that all particulars are true and correct.</div>
                  </div>
                </div>


                {/* Signature Section */}
                <div style={{
                  flex: '1',
                  display: 'flex',
                  flexDirection: 'column',
                  justifyContent: 'space-between',
                  alignItems: 'flex-start',
                  width: "50%",
                }}>
                  {/* Bank Details */}
                  <div style={{
                    flex: '1',
                    padding: '5px',
                    fontSize: '11px',
                    textAlign: "left"
                  }}>
                    <div style={{ fontWeight: '700', marginBottom: '3px', fontSize: '12px' }}>Company's Bank Details</div>
                    <div><span style={{ fontWeight: '700' }}>A/c Holder's Name:</span> {invoiceData.companyName}</div>
                    <div><span style={{ fontWeight: '700' }}>Bank Name:</span> {invoiceData.bankDetails?.BankName || ""}</div>
                    <div><span style={{ fontWeight: '700' }}>A/c No.:</span> {invoiceData.bankDetails?.AccountNo || ""}</div>
                    <div><span style={{ fontWeight: '700' }}>Branch & IFS Code:</span> {invoiceData.bankDetails?.BankBranch || ""} & {invoiceData.bankDetails?.IFSCCode || ""}</div>
                    {invoiceData.bankDetails?.SWIFTCode && <div><span style={{ fontWeight: '700' }}>SWIFT Code:</span> {invoiceData.bankDetails?.SWIFTCode || ""}</div>}
                  </div>
                  <div style={{ borderTop: "1px solid #000", borderLeft: "1px solid #000", width: isMobile ? "100%" : "92%", padding: "15px" }}>
                    <div style={{ fontSize: '11px', fontWeight: '700', marginBottom: '10px', textAlign: "right" }}>for {invoiceData.companyName}</div>
                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'right', marginBottom: '10px' }}>
                      <div style={{
                        width: '70px',
                        height: '30px',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        marginBottom: '5px',
                      }}>
                        <div style={{ fontSize: '8px', textAlign: 'center', fontWeight: '700', lineHeight: '1.1' }}>
                          {/* <div>DD</div>
                  <div>TECHNOLOGIES</div>
                  <div>ELECTRONICS</div> */}
                        </div>
                      </div>
                      <div style={{ fontSize: '10px', textAlign: 'right', fontWeight: '700' }}>Authorised Signatory</div>
                    </div>
                  </div>
                </div>
              </div>
            </>
          )}

        </div>

        {/* Footer - Only on last page */}
        {isLastPage && (
          <div style={{
            textAlign: 'center',
            fontSize: '10px',
            padding: '8px',
          }}>
            <div>This is a Computer Generated Invoice</div>
          </div>
        )}
      </>
    );
  }
};

export default PurPrintstyleInvoice;