import { Card } from 'antd'
import React, { useEffect, useState } from 'react'
import { PayablesDashboardReq } from '@gtpl/shared-models/raw-material-procurement'
import { SaleOrderService } from '@gtpl/shared-services/sale-management'
export interface props {
    fromDate?: string;
    toDate?: string;
    unit?: number;
    buyer?: number;
    company?:number
    
}
const SoPayablesDashboard = (props: props) => {
        const [soPayablesData,setsoPayablesdata]=useState<any>()
        const saleOrderService=new SaleOrderService()

        useEffect(() => {
                        if (props?.fromDate && props?.toDate) {
                         getTotalRMPayablesDashboard()
                        }
                      }, [props?.fromDate, props?.toDate,props?.unit,props?.buyer,props?.company]);
    
        // useEffect(()=>{
        //     getTotalRMPayablesDashboard()
        // },[])
    
        const getTotalRMPayablesDashboard=(requ?:PayablesDashboardReq)=>{
          requ = requ || {};
          requ.fromDate = props?.fromDate,
          requ.toDate = props?.toDate,
          requ.unitId = props?.unit,
          // requ.buyerId = props?.buyer,
          requ.company=props?.company
          if(props?.buyer > 0){
                          requ.buyerId = props?.buyer
                      }
            saleOrderService.getSoQuantityAndPayablesDashboard(requ).then((res)=>{
                if(res.status){
                    setsoPayablesdata(res.data)
                }else{
                    setsoPayablesdata([])
                }
            })
        }
        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);
  }
  };  
  
    const formatToTons = (kgs: number): string => {
    const tons = kgs / 1000;
    return `${tons.toFixed(2)} Ton`;
  };
  return (
    <div><Card
        title={<span style={{ color: 'white', fontSize: '16px' }}>Total SO 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', }}> {formatToTons(Number(soPayablesData?.[0]?.totalNetWeightInKg ?? 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(soPayablesData?.[0]?.totalInvAmtINR ?? 0)}
</p>

          </Card>
        </div>
      </Card></div>
  )
}

export default SoPayablesDashboard