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

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}`;
};

export interface PackingPayablesProps {
  fromDate?: string;
  toDate?: string;
  unit?: number;
  supplier?: number;
  vendor?: number;
  company?:number;
  year?:number
  month?:number
}

const PackingPayablesDashboard = (props?:PackingPayablesProps) => {
        const [packingPayablesData,setpackingPayablesdata]=useState<any>()
        const grnService=new GrnService()

        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 {
            return formatIndianNumber(amount);
          }
        };
    
 useEffect(() => {
    if (props?.fromDate && props?.toDate) {
      getTotalPackingPayablesDashboard();
    }
  }, [props?.fromDate, props?.toDate,props?.unit,props?.supplier,props?.vendor,props?.company,props?.year,props?.month]);
    
        const getTotalPackingPayablesDashboard=()=>{
          const req = new PayablesDashboardReq()
          req.fromDate=props?.fromDate
          req.toDate=props?.toDate
          req.unitId=props?.unit
          req.supplierId=props?.supplier
          req.vendorId=props?.vendor
          req.company=props?.company
           req.year=props?.year
              req.month=props?.month
          console.log(req,"reqqqq")
            grnService.getTotalPackingPayablesDashboard(req).then((res)=>{
                if(res.status){
                    setpackingPayablesdata(res.data)
                }else{
                    setpackingPayablesdata([])
                }
            })
        }
  return (
    <div><Card
        title={<span style={{ color: 'white', fontSize: '16px' }}>Total Packing/General 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: '16px', color: '#05539a' }}>Quantity</p>
            <p style={{ margin: 0, fontWeight: 'bold',fontSize: '16px' }}>{formatIndianNumber(packingPayablesData?.[0]?.totalQuantity ?? 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', color: '#f69026' }}>Amount</p>
            <p style={{ margin: 0, fontWeight: 'bold',fontSize: '16px' }}>₹{formatToCrOrLakh(Number(packingPayablesData?.[0]?.totalAMount ?? 0))}</p>
          </Card>
        </div>
      </Card></div>
  )
}

export default PackingPayablesDashboard