import React, { useState, useEffect } from 'react';
import { Table, DatePicker, Card, Spin, message, Row, Typography, Radio, Alert, Empty } from 'antd';
import axios from 'axios';
import moment from 'moment';
import appSettings from 'apps/services/config';
import { Bar, Column } from '@ant-design/plots';
import { fontWeight } from 'html2canvas/dist/types/css/property-descriptors/font-weight';

const colors = {
  primary: '#2D3A4B',
  secondary: '#4A90E2',
  background: '#F8F9FA',
  headerBg: '#4A90E2',
  headerText: '#FFFFFF',
  tableBorder: '#B3E5FC',
  danger: '#EF5350',
  success: '#28A745'
};

interface RMDeviationData {
  count: string;
  rmQty: number | null;
  opBal: string;
  total: string;
  deviation?: number;
  deviationPercentage?: number;
}

interface RMDeviationProps {
  cardHeight?: string;
  tableHeight?: string;
}

const RMDeviation: React.FC<RMDeviationProps> = ({ 
  cardHeight = '500px', 
  tableHeight = 'calc(360px - 15px)' 
}) => {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<RMDeviationData[]>([]);
  const [mode, setMode] = useState<'month' | 'day'>('month');
  const [selectedDate, setSelectedDate] = useState<string>(
    moment().startOf('month').format('YYYY-MM-DD')
  );

  const calculateDeviations = (data: RMDeviationData[]): RMDeviationData[] => {
    return data.map(item => {
      const rmQty = item.rmQty || 0;
      const total = parseFloat(item.total) || 0;
      const deviation = total - rmQty;
      const deviationPercentage = rmQty !== 0 ? ((deviation / rmQty) * 100) : 0;

      return {
        ...item,
        deviation: parseFloat(deviation.toFixed(2)),
        deviationPercentage: parseFloat(deviationPercentage.toFixed(2))
      };
    });
  };

  const fetchData = async (date: string) => {
    setLoading(true);
    try {
      const response = await axios.post(
        `${appSettings.anlytics_url}/mainDashboard/getRmReceivingReportSummary`,
        { grnDate: date, type: mode },
        { timeout: 5000, headers: { 'Content-Type': 'application/json' } }
      );

      if (response.data?.status) {
        const simplifiedData = response.data.data.map((item: any) => ({
          count: item.count,
          rmQty: item.rmQty,
          opBal: item.opBal,
          total: item.total
        }));
        setData(calculateDeviations(simplifiedData));
      } else {
        setData([])
        message.error(response.data?.internalMessage || 'Failed to load data');
      }
    } catch (error) {
      console.error('API Error:', error);
      message.error('An unexpected error occurred');
      setData([]);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData(selectedDate);
  }, []);

  useEffect(() => {
    if (mode === 'day') {
      const today = moment().format('YYYY-MM-DD');
      setSelectedDate(today);
      fetchData(today);
    } else if (mode === 'month') {
      const startOfMonth = moment().startOf('month').format('YYYY-MM');
      setSelectedDate(startOfMonth);
      fetchData(startOfMonth);
    }
  }, [mode]);
  

  const columns : any =[
    {
      title: <div style={{ textAlign: 'center' }}>Count</div>,
      dataIndex: 'count',
      key: 'count',
      align: 'center',
      width: 100,
    },
    {
      title: <div style={{ textAlign: 'center' }}>Month Requirement Qty (MT)</div>,
      dataIndex: 'rmQty',
      key: 'rmQty',
      align: 'right',
      width: 180,
      render: (value: number | null) =>
        value !== null
          ? value.toLocaleString(undefined, { minimumFractionDigits: 1, maximumFractionDigits: 1 })
          : 'N/A',
    },
    {
      title: <div style={{ textAlign: 'center' }}>OP Balance</div>,
      dataIndex: 'opBal',
      key: 'opBal',
      align: 'right',
      width: 130,
      render: (value: number | null) =>
        value !== null
          ? value.toLocaleString(undefined, { minimumFractionDigits: 1, maximumFractionDigits: 1 })
          : 'N/A',
    },
    {
      title: <div style={{ textAlign: 'center' }}>Total</div>,
      dataIndex: 'total',
      key: 'total',
      align: 'right',
      width: 150,
      render: (value: number | null) =>
        value !== null
          ? value.toLocaleString(undefined, { minimumFractionDigits: 1, maximumFractionDigits: 1 })
          : 'N/A',
    },
    {
      title: <div style={{ textAlign: 'center' }}>Deviation</div>,
      dataIndex: 'deviation',
      key: 'deviation',
      align: 'right',
      width: 160,
      render: (value: number | undefined) => (
        <span
          style={{
            color: value !== undefined && value < 0 ? colors.danger : colors.success,
            fontWeight: 600,
          }}
        >
          {value !== undefined
            ? value.toLocaleString(undefined, { minimumFractionDigits: 1, maximumFractionDigits: 1 })
            : 'N/A'}
        </span>
      ),
    },
    {
      title: <div style={{ textAlign: 'center' }}>Deviation %</div>,
      dataIndex: 'deviationPercentage',
      key: 'deviationPercentage',
      align: 'right',
      width: 140,
      render: (value: number | undefined) => (
        <span
          style={{
            color: value !== undefined && value < 0 ? colors.danger : colors.success,
            fontWeight: 600,
          }}
        >
          {value !== undefined
            ? `${value.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}%`
            : 'N/A'}
        </span>
      ),
    },
  ]

  const transformedData = [];

    data?.forEach(item => {
      transformedData.push({
        count: item.count,
        type: 'Target',
        value: parseFloat(String(item.rmQty))
      });
      transformedData.push({
        count: item.count,
        type: 'Actual',
        value: parseFloat(item?.total?.replace(/,/g, ''))
      });
    });

    const config = {
      data: transformedData,
      xField: 'value',
      yField: 'count',
      seriesField: 'type',
      isGroup: true,
      columnStyle: {
        radius: [20, 20, 0, 0],
      },
      color: ({ type, count }) => {
        if (type === 'Target') return '#5B8FF9';
        const actual = transformedData.find(d => d.count === count && d.type === 'Actual');
        const target = transformedData.find(d => d.count === count && d.type === 'Target');
        return actual && target && actual.value >= target.value ? '#3f8600' : '#cf1322';
      },
      label: {
        formatter: (datum) => `${datum.value.toLocaleString()}`,
        style: {
          fontWeight: 'bolder'
        }
      },
      tooltip: {
        customContent: (title, items) => {
          return `<div style="padding: 4px 8px;">
            <div style="margin-bottom: 4px; font-weight: bold;">${title}</div>
            ${items.map(item => {
              const formattedValue = Number(item.value).toLocaleString(undefined, {
                minimumFractionDigits: 1,
                maximumFractionDigits: 1
              });
              return `
                <div style="margin: 2px 0; font-weight: bold; color: ${item.color};">
                  ${item.name}: ${formattedValue}
                </div>
              `;
            }).join('')}
          </div>`;
        }
      }         
    };


  return (
    <Card
      title={'Budget Analysis'}
      bordered={false}
      headStyle={{background: 'powderblue', color: 'black', fontWeight: 600, borderRadius: '12px 12px 0 0', padding: '3px 12px', lineHeight: '0.2px', borderBottom:0 }}
      style={{
        borderRadius: '8px',
        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
        background: colors.background,
        height: cardHeight,
        display: 'flex',
        flexDirection: 'column'
      }}
      bodyStyle={{ padding: 0, height: '100%', display: 'flex', flexDirection: 'column' }}
      extra={
        <div style={{ display: 'flex', gap: 8 }}>
          <Radio.Group
            value={mode}
            onChange={(e) => setMode(e.target.value)}
            buttonStyle="solid"
          >
            <Radio.Button value="month">Month</Radio.Button>
            <Radio.Button value="day">Day</Radio.Button>
          </Radio.Group>
          <DatePicker
             onChange={(date) => {
              if (date) {
                const formatted = mode === 'month'
                  ? moment(date).format('YYYY-MM')
                  : moment(date).format('YYYY-MM-DD');
                setSelectedDate(formatted);
                fetchData(formatted);
              }
            }}
            value={moment(selectedDate)}
            picker={mode === 'month' ? 'month' : 'date'}
            disabledDate={(current) => 
              mode === 'month'
                ? current && current > moment().endOf('month')
                : current && current > moment().endOf('day')
            }
            style={{ width: 200 }}
          />
        </div>
      }
    >
      <Spin spinning={loading}>
        <div style={{ position: 'relative', height: '100%' }}>
          {transformedData.length > 0 ? (<Bar {...config}/>
         ) : (
          // <Alert message='No data available☹️' type='info' showIcon style={{width: '181px', margin: 'auto'}}/>
          <Empty description="No records found" />
        )}
        </div>
      </Spin>
    </Card>
  );
};
export default RMDeviation;