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

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

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 RMPayblesDashboard = (props?: RMPayablesProps) => {
  const [rmPayablesData, setRmPayablesdata] = useState<any>()
  const rawmaterialService = new RMGrnService()

  useEffect(() => {
    if (props?.fromDate && props?.toDate ) {
      getTotalRMPayablesDashboard();
    }
  }, [props?.fromDate, props?.toDate, props?.unit,props?.supplier,props?.vendor,props?.company,props?.year,props?.month]);

  const getTotalRMPayablesDashboard = () => {
    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
    rawmaterialService.getTotalRMPayablesDashboard(req).then((res) => {
      if (res.status) {
        setRmPayablesdata(res.data)
      } else {
        setRmPayablesdata([])
      }
    })
  }

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

  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 RM 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(rmPayablesData?.[0]?.quantity ?? 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(rmPayablesData?.[0]?.amount ?? 0))}</p>
          </Card>
        </div>
      </Card>
    </div>
  )
}

export default RMPayblesDashboard