import type { ChartTokensType } from './chart.tokens'
import { ReactNode } from 'react'
import { TooltipProps } from 'recharts'
import {
    NameType,
    ValueType,
} from 'recharts/types/component/DefaultTooltipContent'
import type { ButtonProps } from '../Button/types'
import type { SkeletonVariant } from '../Skeleton/types'

export type DataPoint = {
    primary: {
        label: string
        val: number
    }
    aux?: {
        label: string
        val: number
        type?: AxisType
        dateOnly?: boolean
        smart?: boolean
        timeZone?: string
        hour12?: boolean
    }[]
    error?: {
        title: string
        errorData?: { label: string; value: string }[]
    }
}

export enum ChartLegendPosition {
    TOP = 'top',
    RIGHT = 'right',
}

export enum ChartType {
    LINE = 'line',
    BAR = 'bar',
    LINE_BAR = 'lineBar',
    PIE = 'pie',
    SCATTER = 'scatter',
    AREA = 'area',
    SANKEY = 'sankey',
    FUNNEL = 'funnel',
}

export enum LegendsChangeType {
    INCREASE = 'increase',
    DECREASE = 'decrease',
}

export enum AxisIntervalType {
    PRESERVE_START = 'preserveStart',
    PRESERVE_END = 'preserveEnd',
    PRESERVE_START_END = 'preserveStartEnd',
}

export enum AxisType {
    DATE_TIME = 'dateTime',
    CURRENCY = 'currency',
    PERCENTAGE = 'percentage',
    NUMBER = 'number',
}

export type TickProps = {
    x?: number
    y?: number
    payload?: {
        value: string | number
        index?: number
        coordinate?: number
    }
    [key: string]: unknown
}

export type NoDataProps = {
    title?: string
    subtitle?: string
    slot?: ReactNode
    button?: ButtonProps
}

export type AxisConfig = {
    label?: string
    showLabel?: boolean
    interval?: number | AxisIntervalType
    show?: boolean
    type?: AxisType
    tickFormatter?: (value: string | number) => string
    customTick?: React.ComponentType<TickProps>
    dateOnly?: boolean
    useUTC?: boolean
    formatString?: string
    timeOnly?: boolean
    showYear?: boolean
    ticks?: (number | string)[] // Custom tick values for consistent intervals
    autoConsistentTicks?: boolean // Automatically generate consistent ticks for DATE_TIME axes (default: true)
    maxTicks?: number // Maximum number of ticks to generate (default: 10)
    smartDateTimeFormat?: boolean // Alternates between showing date and time like Highcharts (default: true for DATE_TIME)
}

export type XAxisConfig = AxisConfig
export type YAxisConfig = AxisConfig

export type TooltipFormatterParams = {
    seriesName: NameType
    value: ValueType
    dataIndex: number
    color: string
    payload: unknown
}

export type TooltipFormatter = (params: TooltipFormatterParams) => ReactNode

export type FunnelConfig = {
    percentageBase?: 'previous' | 'first'
    showLabels?: boolean
}

export type TooltipContentProps = TooltipProps<ValueType, NameType> & {
    originalData: NewNestedDataPoint[]
    chartType: ChartType
    selectedKeys: string[]
    xAxis?: XAxisConfig
    yAxis?: YAxisConfig
}

export type TooltipConfig = {
    position?: { x?: number; y?: number }
    allowEscapeViewBox?: { x?: boolean; y?: boolean }
    content?: (props: TooltipContentProps) => ReactNode
    formatter?: TooltipFormatter
    labelFormatter?: (axisValue: string | number) => ReactNode
}

export type DotItemDotProps = {
    cx?: number
    cy?: number
    value?: number
    payload?: {
        name?: string
    }
}

export type NewNestedDataPoint = {
    name: string
    data: {
        [key: string]: DataPoint
    }
}

export type StackedLegendsDataPoint = {
    value: number
    delta: number
    changeType: LegendsChangeType
}

export type RenderChartProps = {
    chartName?: string
    flattenedData: FlattenedDataPoint[]
    chartType: ChartType
    hoveredKey: string | null
    lineKeys: string[]
    colors: { key: string; color: string }[]
    setHoveredKey: (key: string | null) => void
    data: NewNestedDataPoint[]
    selectedKeys: string[]
    isSmallScreen?: boolean
    barsize?: number
    xAxis?: XAxisConfig
    yAxis?: YAxisConfig
    tooltip?: TooltipConfig
    funnelConfig?: FunnelConfig
    noData?: NoDataProps
    height?: number | string
    CustomizedDot?: (props: DotItemDotProps) => React.ReactElement<SVGElement>
    lineSeriesKeys?: string[]
    onKeyClick?: (key: string) => void
    /** Resolved CHARTS tokens. renderChart is a plain function, not a
     *  component, so it cannot read them itself; without these the axis falls
     *  back to theme-neutral foundation greys and draws white rules on dark. */
    chartTokens?: ChartTokensType
}

export type CoreChartProps = {
    chartType?: ChartType
    data?: NewNestedDataPoint[] | null
    colors?: { key: string; color: string }[]
    barsize?: number
    xAxis?: XAxisConfig
    yAxis?: YAxisConfig
    tooltip?: TooltipConfig
    funnelConfig?: FunnelConfig
    height?: number | string
    width?: number | string
    isSmallScreen?: boolean

    hoveredKey?: string | null
    onHoveredKeyChange?: (key: string | null) => void
    selectedKeys?: string[]
    lineSeriesKeys?: string[]
    enableHover?: boolean
}

export type ChartsSkeletonProps = {
    show: boolean
    variant: SkeletonVariant
}

export type ChartsProps = {
    chartType?: ChartType
    data?: NewNestedDataPoint[] | null
    colors?: { key: string; color: string }[]
    slot1?: ReactNode
    slot2?: ReactNode
    slot3?: ReactNode
    legendPosition?: ChartLegendPosition
    chartHeaderSlot: ReactNode
    stackedLegends?: boolean
    stackedLegendsData?: StackedLegendsDataPoint[]
    showAllLegends?: boolean
    barsize?: number
    xAxis?: XAxisConfig
    yAxis?: YAxisConfig
    tooltip?: TooltipConfig
    funnelConfig?: FunnelConfig
    noData?: NoDataProps
    height?: number
    showHeader?: boolean
    showCollapseIcon?: boolean
    isExpanded?: boolean
    onExpandedChange?: (isExpanded: boolean) => void
    chartName?: string
    skeleton?: ChartsSkeletonProps
    legends?: { title: string; total?: string }[]
    CustomizedDot?: (props: DotItemDotProps) => React.ReactElement<SVGElement>
    lineSeriesKeys?: string[]
}

export type FlattenedDataPoint = {
    name: string
    [key: string]: number | string
}

export type ChartHeaderProps = {
    id?: string
    slot1: React.ReactNode
    slot2: React.ReactNode
    slot3: React.ReactNode
    chartHeaderSlot: ReactNode
    onFullscreen?: () => void
    onExitFullscreen?: () => void
    isFullscreen?: boolean
    isSmallScreen?: boolean
    isExpanded: boolean
    setIsExpanded: (isExpanded: boolean) => void
    showCollapseIcon?: boolean
}

export type ChartLegendsProps = {
    chartContainerRef: React.RefObject<HTMLDivElement>
    keys: string[]
    colors: { key: string; color: string }[]
    handleLegendClick: (key: string) => void
    handleLegendEnter: (key: string) => void
    handleLegendLeave: () => void
    selectedKeys: string[]
    setSelectedKeys: (keys: string[]) => void
    hoveredKey: string | null
    activeKeys: string[] | null
    stacked?: boolean
    isSmallScreen?: boolean
    stackedLegendsData?: StackedLegendsDataPoint[]
    legends?: { title: string; total?: string }[]
    showAllLegends?: boolean
}

export type CustomTooltipProps = Omit<
    TooltipProps<ValueType, NameType>,
    'formatter' | 'labelFormatter'
> & {
    hoveredKey: string | null
    originalData: NewNestedDataPoint[]
    setHoveredKey: (key: string) => void
    chartType: ChartType
    selectedKeys: string[]
    xAxis?: XAxisConfig
    yAxis?: YAxisConfig
    formatter?: TooltipFormatter
    labelFormatter?: (axisValue: string | number) => ReactNode
}

export type SankeyNode = {
    name: string
    id?: string
    color?: string
}

export type SankeyLink = {
    source: number | string
    target: number | string
    value: number
    color?: string
    hoverColor?: string
}

export type SankeyData = {
    nodes: SankeyNode[]
    links: SankeyLink[]
}

export type SankeyTooltipData = {
    payload: {
        name?: string
        value?: number
        source?: number | string
        target?: number | string
        sourceName?: string
        targetName?: string
        color?: string
        hoverColor?: string
    }
}

export type SankeyNodeProps = {
    x?: number
    y?: number
    width?: number
    height?: number
    index?: number
    payload?: SankeyNode & { value?: number }
    containerWidth?: number
    nodeColors?: (string | { key: string; color: string })[]
    onMouseEnter?: (data: SankeyTooltipData, event: React.MouseEvent) => void
    onMouseLeave?: () => void
}

export type SankeyLinkProps = {
    sourceX?: number
    targetX?: number
    sourceY?: number
    targetY?: number
    sourceControlX?: number
    targetControlX?: number
    linkWidth?: number
    index?: number
    payload?: SankeyLink
    linkColors?: (string | { key: string; color: string })[]
    onMouseEnter?: (data: SankeyTooltipData, event: React.MouseEvent) => void
    onMouseLeave?: () => void
}