import { DualAxes, DualAxesConfig } from '@ant-design/plots';
import React, { useEffect, useState } from 'react';
import { Card, DatePicker, Typography, Spin, message } from 'antd';
import moment from 'moment';
import axios from 'axios';

const { Title } = Typography;
const { RangePicker } = DatePicker;

interface YieldData {
  count: number;
  actualYield: number;
  sampleYield: number;
  honQnt: string;
  gradingHlsoQnt: string;
  deHeadingHlsoQty: string;
}

const HonHlsoYieldDashboard = () => {
  const aquaticColors = {
    primary: '#1E88E5',
    secondary: '#4DB6AC',
    accent: '#FF7043',
    lightBlue: '#E1F5FE',
    darkBlue: '#0D47A1',
    sand: '#FFF3E0',
    success: '#81C784',
    danger: '#EF5350',
    tableHeader: '#B3E5FC'
  };

  const [data, setData] = useState<YieldData[]>([]);
  const [loading, setLoading] = useState(false);
  const [selectedDate, setSelectedDate] = useState(moment().format('YYYY-MM-DD'));

  const fetchYieldData = async (date: string) => {
    setLoading(true);
    try {
      const response = await axios.post(
        'http://localhost:6013/erpx/mainDashboard/getYieldProductionReport',
        { date }
      );

      if (response.data?.status) {
        const apiData = response.data.data;
        const counts = apiData[0]?.['HON COUNT'] || [];
        const honQnts = apiData[1]?.['HON QNT'] || [];
        const gradingHlsoQnts = apiData[2]?.['GRADEING HLSO QNT'] || [];
        const yieldPers = apiData[3]?.['YIELD PER'] || [];
        const sampleYields = apiData[4]?.['SAMPLE YIELD'] || [];
        const deHeadingHlsoQtys = apiData[5]?.['DE HEADING HLSO QTY'] || [];

        const transformedData = counts.map((count: string, index: number) => ({
          count: parseFloat(count) || 0,
          actualYield: parseFloat(yieldPers[index]) || 0,
          sampleYield: parseFloat(sampleYields[index]) || 0,
          honQnt: honQnts[index] || "0.000",
          gradingHlsoQnt: gradingHlsoQnts[index] || "0.000",
          deHeadingHlsoQty: deHeadingHlsoQtys[index] || "0.000"
        }));

        setData(transformedData);
      }
    } catch (error) {
      console.error('Error fetching yield data:', error);
      message.error('Failed to load yield data');
      setData([]);
    } finally {
      setLoading(false);
    }
  };

  const onDateChange = (date: moment.Moment | null, dateString: string) => {
    setSelectedDate(dateString);
    fetchYieldData(dateString);
  };

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

  const actualYieldData = data.map(item => ({
    count: item.count,
    type: 'actualYield',
    value: item.actualYield
  }));

  const sampleYieldData = data.map(item => ({
    count: item.count,
    type: 'sampleYield',
    value: item.sampleYield
  }));

  const config: DualAxesConfig = {
    data: [actualYieldData, sampleYieldData],
    xField: 'count',
    yField: ['value', 'value'],
    legend: { 
      position: 'top',
      itemName: {
        formatter: (text: string) => {
          return text === 'actualYield' ? 'Actual Yield %' : 'Sample Yield %';
        }
      }
    },
    geometryOptions: [
      {
        geometry: 'line',
        seriesField: 'type',
        color: aquaticColors.primary,
        lineStyle: {
          lineWidth: 2,
          lineDash: [4, 4],
        },
        point: {
          shape: 'circle',
          size: 3,
        },
      },
      {
        geometry: 'line',
        seriesField: 'type',
        color: aquaticColors.success,
        lineStyle: {
          lineWidth: 2,
        },
        point: {
          shape: 'diamond',
          size: 4,
        },
      },
    ],
    yAxis: {
      value: {
        min: -100,
        max: 100,
        title: { 
          text: 'Yield Percentage (%)', 
          style: { fill: '#666' } 
        },
        label: {
          formatter: (val: string) => `${val}%`,
        },
        tickInterval: 20,
        grid: {
          line: {
            style: {
              stroke: '#eee',
              lineDash: [4, 4],
            },
          },
        },
      },
    },
    xAxis: {
      title: {
        text: 'Count',
        style: { fill: '#666' }
      }
    },
    tooltip: {
      shared: true,
      showCrosshairs: true,
      customContent: (title: string, items: any[]) => {
        const count = parseInt(title);
        const pointData = data.find(item => item.count === count);
        if (!pointData) return null;
        
        const formatPercentage = (value: number) => 
          value < 0 ? `-${Math.abs(value)}%` : `${value}%`;
        
        return (
            <div style={{ padding: '8px', background: '#fff' }}>
            <div style={{ fontWeight: 'bold', marginBottom: '8px' }}>Count: {title}</div>
            <div style={{ color: aquaticColors.primary }}>
              Actual Yield: {formatPercentage(pointData.actualYield)}
            </div>
            <div style={{ color: aquaticColors.success }}>
              Sample Yield: {formatPercentage(pointData.sampleYield)}
            </div>
            <div>HON Quantity: {pointData.honQnt} KG</div>
            <div>Grading HLSO Quantity: {pointData.gradingHlsoQnt} KG</div>
            <div>De-heading HLSO Quantity: {pointData.deHeadingHlsoQty} KG</div>
            {pointData.actualYield === pointData.sampleYield && (
              <div style={{ color: aquaticColors.accent, marginTop: '4px' }}>
                Yields match at this point
              </div>
            )}
          </div>
        );
      }
    },
  };

  return (
    <div style={{
      width: '100%',
      padding: '16px',
      boxSizing: 'border-box',
      display: 'flex',
      flexDirection: 'column',
      gap: '16px',
      background: aquaticColors.lightBlue,
      borderRadius: '8px',
      border: `1px solid ${aquaticColors.secondary}`
    }}>
      <Spin spinning={loading}>
        {/* <Title
          level={3}
          style={{
            margin: 0,
            color: aquaticColors.darkBlue,
            textAlign: 'center',
            padding: '4px',
            backgroundColor: aquaticColors.tableHeader,
            borderRadius: '4px',
            fontSize: '18px'
          }}
        >
          HON TO HLSO YIELD
        </Title> */}

        <div style={{
          display: "flex",
          justifyContent: "flex-end",
          backgroundColor: aquaticColors.tableHeader,
          padding: '8px',
          borderRadius: '4px'
        }}>
          <DatePicker
            onChange={onDateChange}
            style={{ borderColor: aquaticColors.primary, width: '200px' }}
            defaultValue={moment(selectedDate)}
            format="YYYY-MM-DD"
          />
        </div>

        <Card
          title="Yield Overview"
          headStyle={{
            backgroundColor: aquaticColors.secondary,
            color: 'white',
            borderTopLeftRadius: '8px',
            borderTopRightRadius: '8px',
            padding: '0 12px'
          }}
          bodyStyle={{
            padding: '12px',
            height: '500px',
          }}
          style={{
            borderRadius: '8px',
            borderColor: aquaticColors.secondary,
            boxShadow: '0 4px 8px rgba(0,0,0,0.1)',
            flex: 1
          }}
        >
          {data.length > 0 ? (
            <DualAxes {...config} />
          ) : (
            <div style={{ 
              display: 'flex', 
              justifyContent: 'center', 
              alignItems: 'center', 
              height: '100%',
              color: aquaticColors.darkBlue
            }}>
              {loading ? 'Loading...' : 'No yield data available'}
            </div>
          )}
        </Card>
      </Spin>
    </div>
  );
};

export default HonHlsoYieldDashboard;