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 TotalIncentiveProps {
    fromDate?: string;
    toDate?: string;
    unit?: number;
    buyer?: number;
    company?:number
}
const IncentiveTotalDashboard = (props?:TotalIncentiveProps) => {

    const [totalIncentive,setTotalIncentive]=useState<any>()
    const collectionService=new CollectionsService()
        
    useEffect(()=>{
      if(props?.fromDate && props?.toDate){
        getTotalIncentiveAmount()
      }
    },[props?.fromDate, props?.toDate,props?.unit,props?.buyer,props?.company])           
        
    const getTotalIncentiveAmount=(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.getTotalIncentiveAmount(req).then((res)=>{
            if(res.status){
                setTotalIncentive(res.data)
            }else{
                setTotalIncentive([])
            }
        })
    }  
    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 Report</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: '13px',fontWeight: 'bold', color: '#05539a' }}>Amount</p> */}
            <p style={{ margin: 0, fontWeight: 'bold',fontSize: '16px'}}>{`₹${formatToCrOrLakh(totalIncentive?.[0]?.totalAmount ?? 0)}`}</p>
          </Card>
        </div>
      </Card></div>
  )
}

export default IncentiveTotalDashboard