import { useEffect, useState, useContext, useMemo } from 'react'
import { Card, Spin, Segmented, Flex } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import { Column } from '@ant-design/charts'
import PropTypes from 'prop-types'
import { getModelByName } from '../../../database/ObjectModels'
import { ApiServerContext } from '../context/ApiServerContext'
import { AuthContext } from '../context/AuthContext'
import dayjs from 'dayjs'
import { useThemeContext } from '../context/ThemeContext'

const HistoryDisplay = ({ objectType, startDate, endDate, styles }) => {
  const { getModelHistory, connected } = useContext(ApiServerContext)
  const { token } = useContext(AuthContext)
  const [historyData, setHistoryData] = useState([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)
  const [timeRange, setTimeRange] = useState('4hrs')
  const { isDarkMode, getColors } = useThemeContext()
  // Calculate dates based on selected time range or provided props
  const { defaultStartDate, defaultEndDate } = useMemo(() => {
    const now = new Date()

    // If startDate/endDate props are provided, use them (ignore time range)
    if (startDate || endDate) {
      return {
        defaultStartDate:
          startDate || new Date(now.getTime() - 24 * 60 * 60 * 1000),
        defaultEndDate: endDate || now
      }
    }

    // Otherwise, calculate based on selected time range
    const hoursMap = {
      '8hrs': 8,
      '12hrs': 12,
      '24hrs': 24,
      '4hrs': 4,
      '1hrs': 1
    }
    const hours = hoursMap[timeRange] || 1
    return {
      defaultStartDate: new Date(now.getTime() - hours * 60 * 60 * 1000),
      defaultEndDate: now
    }
  }, [startDate, endDate, timeRange])

  useEffect(() => {
    if (!objectType || !getModelHistory || !token || !connected) {
      return
    }

    const fetchHistory = async () => {
      try {
        setLoading(true)
        setError(null)
        const fetchedHistory = await getModelHistory(
          objectType,
          defaultStartDate,
          defaultEndDate
        )
        if (fetchedHistory) {
          setHistoryData(fetchedHistory)
        } else {
          setError('Failed to fetch history')
        }
      } catch (err) {
        console.error('Error fetching history:', err)
        setError('Failed to fetch history')
      } finally {
        setLoading(false)
      }
    }

    fetchHistory()
  }, [
    objectType,
    getModelHistory,
    token,
    connected,
    defaultStartDate,
    defaultEndDate
  ])

  if (!objectType) {
    return null
  }

  const model = getModelByName(objectType)

  if (!model) {
    return null
  }

  const modelStats = model.stats || []

  if (modelStats.length === 0) {
    return null
  }

  if (error || !Array.isArray(historyData)) {
    return null
  }

  /**
   * Extracts the stat key from history data based on stat definition name
   * e.g., "states.standby.count" -> "standby", "standbyPrinters" -> "standby"
   * The history data keys are the rollup names (like "standby", "printing")
   */
  const extractStatKey = (statName) => {
    // Handle dot notation paths like "states.standby.count"
    if (statName.includes('.')) {
      const parts = statName.split('.')
      // Extract the middle part (e.g., "standby" from "states.standby.count")
      // Skip first part (usually "states") and last part (usually "count")
      if (parts.length >= 2) {
        return parts[parts.length - 2] // Get second-to-last part
      }
      return parts[parts.length - 1] // Fallback to last part
    }
    // Remove common suffixes
    return statName
      .replace(/Printers?$/i, '')
      .replace(/Jobs?$/i, '')
      .toLowerCase()
  }

  /**
   * Gets a nested value from an object using dot notation
   */
  const getNestedValue = (obj, path) => {
    if (!obj || !path) return undefined
    const keys = path.split('.')
    let value = obj
    for (const key of keys) {
      if (value === null || value === undefined) return undefined
      value = value[key]
    }
    return value
  }

  /**
   * Extracts numeric value from a rollup object
   * Handles both old format (number) and new format ({count: 0}, {sum: 100}, {avg: 5.5})
   */
  const extractValue = (value, preferredOperation) => {
    if (typeof value === 'number') {
      return value
    }
    if (value && typeof value === 'object') {
      // If a preferred operation is specified and exists, use it
      if (preferredOperation && value[preferredOperation] !== undefined) {
        return value[preferredOperation]
      }

      // Handle new format: {count: 0}, {sum: 100}, {avg: 5.5}
      const operationKeys = ['count', 'sum', 'avg']
      for (const key of operationKeys) {
        if (value[key] !== undefined) {
          return value[key]
        }
      }
      // Fallback: return first numeric value found
      const firstValue = Object.values(value)[0]
      return typeof firstValue === 'number' ? firstValue : 0
    }
    return 0
  }

  /**
   * Gets the stat value from history data point
   */
  const getStatValueFromPoint = (point, statDef) => {
    // Handle special combined stats (support both 'combine' and 'sum' properties)
    const combineList = statDef.combine || statDef.sum
    if (combineList) {
      return combineList.reduce((sum, statName) => {
        const tempStatDef = { name: statName }
        const value = getStatValueFromPoint(point, tempStatDef)
        return sum + (value || 0)
      }, 0)
    }

    const statName = statDef.name

    // Determine operation from stat name
    let operation
    if (statName.endsWith('.count')) operation = 'count'
    else if (statName.endsWith('.sum')) operation = 'sum'
    else if (statName.endsWith('.avg')) operation = 'avg'

    let value

    // Extract the key that matches the history data structure
    // History data has keys like "standby", "printing" (the rollup names)
    const statKey = extractStatKey(statName)
    value = point[statKey]

    // If not found with extracted key, try direct access with full path
    if (value === undefined && statName.includes('.')) {
      value = getNestedValue(point, statName)
    }

    // If still not found, try with original stat name
    if (value === undefined) {
      value = point[statName]
    }

    return extractValue(value, operation)
  }

  // Transform data for the chart using model stats configuration
  // Each data point has: { date: '2024-01-01', standby: {count: 0}, printing: {count: 0}, ... }
  // We need to transform to: [{ date: '2024-01-01', category: 'Ready', value: 0 }, ...]
  const chartData = historyData.flatMap((point) => {
    return modelStats.map((statDef) => {
      const statValue = getStatValueFromPoint(point, statDef)
      const label = statDef.label || statDef.name
      return {
        date: point.date,
        dateFormatted: dayjs(point.date).format('DD/MM HH:mm'),
        category: label,
        value: statValue || 0
      }
    })
  })

  // Sort by date
  chartData.sort((a, b) => {
    return new Date(a.date) - new Date(b.date)
  })

  const themeColors = getColors()

  // Create color mapping from model stats
  const colors = {
    success: themeColors.colorSuccess,
    info: themeColors.colorInfo,
    error: themeColors.colorError,
    warning: themeColors.colorWarning,
    default: '#8c8c8c'
  }

  // Build color range array based on model stats order
  const colorRange = modelStats.map((stat) => {
    if (stat.color) {
      return colors[stat.color] || stat.color
    }
    return colors.default
  })

  const config = {
    data: chartData,
    xField: 'dateFormatted',
    yField: 'value',
    theme: {
      type: isDarkMode ? 'dark' : 'light',
      fontFamily: '"DM Sans", -apple-system, BlinkMacSystemFont, sans-serif'
    },
    stack: true,
    colorField: 'category',
    columnWidthRatio: 1,
    scale: {
      color: {
        range: colorRange
      }
    },
    smooth: true,
    interaction: {
      tooltip: {
        marker: false
      }
    },
    legend: {
      position: 'top'
    },
    animation: {
      appear: {
        animation: 'wave-in',
        duration: 1000
      }
    }
  }

  return (
    <Spin spinning={loading} indicator={<LoadingOutlined spin />}>
      <Card
        style={{ width: '100%' }}
        styles={{ body: { padding: '12px', ...styles } }}
      >
        {!startDate && !endDate && (
          <Flex justify='flex-end'>
            <Segmented
              size='small'
              options={[
                { label: '24hr', value: '24hrs' },
                { label: '12hr', value: '12hrs' },
                { label: '8hr', value: '8hrs' },
                { label: '4hr', value: '4hrs' },
                { label: '1hr', value: '1hrs' }
              ]}
              value={timeRange}
              onChange={setTimeRange}
            />
          </Flex>
        )}
        <Column {...config} />
      </Card>
    </Spin>
  )
}

HistoryDisplay.propTypes = {
  objectType: PropTypes.string.isRequired,
  startDate: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.instanceOf(Date)
  ]),
  styles: PropTypes.object,
  endDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)])
}

export default HistoryDisplay