import { PayablesDashboardReq } from '@gtpl/shared-models/raw-material-procurement';
import { CollectionsService } from '@gtpl/shared-services/finance';
import { Card } from 'antd'
import React, { useEffect, useState } from 'react'

export interface TotalIncentiveCollectionProps {
  fromDate?: string;
  toDate?: string;
  unit?: number;
  buyer?: number;
  company?:number
}
const TotalIncentiveCollection = (props?:TotalIncentiveCollectionProps) => {
            const [totalIncentiveCollection,settotalIncentiveCollection]=useState<any>()
            const [totalOverdueIncentiveCollection,settotalOverdueIncentiveCollection]=useState<any>()
            const collectionService=new CollectionsService()

             useEffect(() => {
                if (props?.fromDate && props?.toDate) {
                  getTotalReceivedIncentiveAmount();
                  getTotalOverDueIncentiveAmount()
                }
              }, [props?.fromDate, props?.toDate,props?.unit,props?.buyer,props?.company]);
        
            // useEffect(()=>{
            //     getTotalReceivedIncentiveAmount()
            //     getTotalOverDueIncentiveAmount()
            // },[])
        
            const getTotalReceivedIncentiveAmount=(req?:PayablesDashboardReq)=>{
              req = req || {};
              req.fromDate=props?.fromDate
              req.toDate=props?.toDate
              req.unitId=props?.unit
              // req.buyerId=props?.buyer
              req.company=props?.company
              if(props?.buyer > 0){
                req.buyerId = props?.buyer
            }
              collectionService.getTotalReceivedIncentiveAmount(req).then((res)=>{
                    if(res.status){
                        settotalIncentiveCollection(res.data)
                    }else{
                        settotalIncentiveCollection([])
                    }
                })
            }

            const getTotalOverDueIncentiveAmount=(req?:PayablesDashboardReq)=>{
              req = req || {};
                req.fromDate=props?.fromDate
                req.toDate=props?.toDate
                req.unitId=props?.unit
                // req.buyerId=props?.buyer
                req.company=props?.company
                if(props?.buyer > 0){
                req.buyerId = props?.buyer
            }
                collectionService.getTotalOverDueIncentiveAmount(req).then((res)=>{
                      if(res.status){
                          settotalOverdueIncentiveCollection(res.data)
                      }else{
                          settotalOverdueIncentiveCollection([])
                      }
                  })
              }
              const formatIndianNumber = (num: number | string): string => {
  const number = Number(num);
  if (isNaN(number)) return '₹0.00';
  const [integer, decimal = '00'] = number.toFixed(2).split('.');
  const lastThree = integer.slice(-3);
  const otherDigits = integer.slice(0, -3);
  const formattedInteger = otherDigits
    ? otherDigits.replace(/\B(?=(\d{2})+(?!\d))/g, ',') + ',' + lastThree
    : lastThree;
  return `${formattedInteger}.${decimal}`;
};
 const formatToCrOrLakh = (amount: number): string => {
    if (amount >= 1e7) {
      return `${(amount / 1e7).toFixed(2)} Cr`;
    } else if (amount >= 1e5) {
      return `${(amount / 1e5).toFixed(2)} L`;
    } else if (amount >= 1e3) {
    return `${(amount / 1e3).toFixed(2)} K`;
  } else {
    return formatIndianNumber(amount);
  }
  };    
  return (
   <div><Card
           title={<span style={{ color: 'white', fontSize: '16px' }}>Total Incentive Collection/Receivables</span>}
           style={{
             textAlign: 'center',
             width: '100%',
             maxWidth: '400px',
             margin: '0 auto',
             borderRadius: '8px',
           }}
           headStyle={{
             backgroundColor: '#587b9b',
             border: 0,
             padding: '2px 2px',
             minHeight: '10px',
           }}
           bodyStyle={{ padding: '12px' }}
         >
           <div style={{ display: 'flex', gap: '12px', justifyContent: 'center' }}>
             <Card
               style={{
                 flex: 1,
                 padding: '8px',
                 textAlign: 'center',
                 borderRadius: '6px',
                 boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
                 transition: 'transform 0.2s, box-shadow 0.2s',
                 
               }}
               bodyStyle={{ padding: '8px' }}
               hoverable
             >
               <p style={{ margin: 0, fontSize: '16px',fontWeight: 'bold', color: '#05539a' }}>Received</p>
               <p style={{ margin: 0, fontWeight: 'bold',fontSize: '16px' }}>{formatToCrOrLakh(totalIncentiveCollection?.[0]?.totalAmount ?? 0)}</p>
             </Card>
             <Card
               style={{
                 flex: 1,
                 padding: '8px',
                 textAlign: 'center',
                 borderRadius: '6px',
                 boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
                 transition: 'transform 0.2s, box-shadow 0.2s',
               }}
               bodyStyle={{ padding: '8px' }}
               hoverable
             >
               <p style={{ margin: 0, fontSize: '16px',fontWeight: 'bold', color: '#f69026' }}>OverDue</p>
               <p style={{ margin: 0, fontWeight: 'bold',fontSize: '16px' }}>₹{formatToCrOrLakh(totalOverdueIncentiveCollection?.[0]?.totalDueAmount ?? 0)}</p>
             </Card>
           </div>
         </Card></div>
  )
}

export default TotalIncentiveCollection