import React from "react"
import { ResponsiveLine } from "@nivo/line"
import { Box, Typography, useTheme, useMediaQuery } from "@mui/material"
import { useTranslation } from "react-i18next"
import { formatTime } from "../utils/chartDataTransform"
import { getAccessibleColors } from "../../../../../../../../../../utils/accessibleColors.ts"

export interface PositionDataPoint {
  x: string
  y: number
  runnerName: string
  splitTime: number
  timeLost: number
  controlName?: string
}

export interface PositionChartData {
  id: string
  color: string
  data: PositionDataPoint[]
}

interface PositionChartProps {
  data: PositionChartData[]
  height?: number
}

const PositionChart: React.FC<PositionChartProps> = ({ data, height = 400 }) => {
  const theme = useTheme()
  const isMobile = useMediaQuery(theme.breakpoints.down("md"))
  const { t } = useTranslation()

  if (!data || data.length === 0) {
    return (
      <Box
        sx={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height,
          bgcolor: "grey.50",
          borderRadius: 1,
        }}
      >
        <Typography variant="h6" color="text.secondary">
          {t("positionChart.noData")}
        </Typography>
      </Box>
    )
  }

  const accessibleColors = getAccessibleColors(data.length)
  const dataWithColors = data.map((series, index) => ({
    ...series,
    color: accessibleColors[index],
  }))

  const dataWithCustomX: PositionChartData[] = dataWithColors.map((runner) => {
    const n = runner.data.length
    return {
      ...runner,
      data: runner.data.map((point, idx) => {
        let xLabel: string
        if (idx === 0) xLabel = t("Graphs.Start")
        else if (idx === n - 1) xLabel = t("Graphs.Finish")
        else xLabel = idx.toString()

        return {
          ...point,
          controlName: point.x,
          x: xLabel,
        }
      }),
    }
  })

  const allYValues = dataWithCustomX.flatMap((runner) => runner.data.map((point) => point.y))
  const dynamicMaxY = Math.max(...allYValues)

  // Tick step logic
  const tickStep = dynamicMaxY <= 10 ? 1 : dynamicMaxY <= 20 ? 2 : 5

  const yTickValues = []
  for (let i = 1; i <= dynamicMaxY; i += tickStep) {
    yTickValues.push(i)
  }
  if (yTickValues[yTickValues.length - 1] !== dynamicMaxY) {
    yTickValues.push(dynamicMaxY)
  }

  return (
    <Box sx={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
      <Box sx={{ height, width: "100%" }}>
        <ResponsiveLine
          data={dataWithCustomX}
          margin={{
            top: 50,
            right: isMobile ? 20 : 40,
            bottom: isMobile ? 120 : 50,
            left: 80,
          }}
          xScale={{ type: "point" }}
          yScale={{
            type: "linear",
            min: 1,
            max: dynamicMaxY,
            reverse: true,
            nice: false,
          }}
          axisTop={null}
          axisRight={{
            tickSize: 5,
            tickPadding: 5,
            tickRotation: 0,
            legend: t("positionChart.yAxisLabel"),
            legendOffset: 60,
            legendPosition: "middle",
            format: (value) => `${Math.round(Number(value))}°`,
            tickValues: yTickValues,
          }}
          axisBottom={{
            tickSize: 5,
            tickPadding: 5,
            tickRotation: -45,
            legend: t("positionChart.xAxisLabel"),
            legendOffset: 36,
            legendPosition: "middle",
          }}
          axisLeft={{
            tickSize: 5,
            tickPadding: 5,
            tickRotation: 0,
            legend: t("positionChart.yAxisLabel"),
            legendOffset: -60,
            legendPosition: "middle",
            format: (value) => `${Math.round(Number(value))}°`,
            tickValues: yTickValues,
          }}
          pointSize={8}
          pointColor={{ theme: "background" }}
          pointBorderWidth={2}
          pointBorderColor={{ from: "serieColor" }}
          pointLabelYOffset={-12}
          enableArea={false}
          colors={(d) => d.color}
          lineWidth={3}
          useMesh={true}
          legends={[]}
          tooltip={({ point }) => {
            const data = point.data as PositionDataPoint
            if (data.x === "START" || data.x === "FINISH") return null

            return (
              <Box
                sx={{
                  background: "white",
                  padding: 2,
                  border: "1px solid #ccc",
                  borderRadius: 1,
                  boxShadow: 2,
                  minWidth: 250,
                }}
              >
                <Typography variant="subtitle2" sx={{ fontWeight: "bold", mb: 1 }}>
                  {data.runnerName}
                </Typography>

                <Typography variant="body2" sx={{ mb: 0.5 }}>
                  {t("positionChart.tooltip.control")}: {data.controlName}
                </Typography>

                <Typography variant="body2" sx={{ mb: 0.5 }}>
                  {t("positionChart.tooltip.position")}: {Math.round(data.y)}°
                </Typography>

                {data.splitTime > 0 && (
                  <Typography
                    variant="body2"
                    sx={{ mb: 0.5, fontWeight: data.timeLost <= 0 ? "bold" : "normal" }}
                  >
                    {t("positionChart.tooltip.splitTime")}: {formatTime(data.splitTime)}
                  </Typography>
                )}

                {data.timeLost > 0 && (
                  <Typography variant="body2" sx={{ mb: 0.5 }}>
                    {t("positionChart.tooltip.timeLost", {
                      timeLost: `+${formatTime(data.timeLost)}`,
                    })}
                  </Typography>
                )}
              </Box>
            )
          }}
          theme={{
            axis: {
              domain: {
                line: {
                  stroke: "#777777",
                  strokeWidth: 1,
                },
              },
              legend: {
                text: {
                  fontSize: 12,
                  fill: "#333333",
                },
              },
              ticks: {
                line: {
                  stroke: "#777777",
                  strokeWidth: 1,
                },
                text: {
                  fontSize: 11,
                  fill: "#333333",
                },
              },
            },
            legends: {
              text: {
                fontSize: 11,
                fill: "#333333",
              },
            },
            grid: {
              line: {
                stroke: "#dddddd",
                strokeWidth: 1,
              },
            },
          }}
        />
      </Box>

      <Box
        sx={{
          mt: 2,
          display: "flex",
          flexWrap: "wrap",
          justifyContent: "center",
          rowGap: 1,
          columnGap: 2,
        }}
      >
        {dataWithColors.map((series) => (
          <Box key={series.id} sx={{ display: "flex", alignItems: "center", minWidth: 100 }}>
            <Box
              sx={{
                width: 12,
                height: 12,
                borderRadius: "50%",
                backgroundColor: series.color,
                marginRight: 1,
              }}
            />
            <Typography variant="body2">{series.id}</Typography>
          </Box>
        ))}
      </Box>

      <Box sx={{ mt: 1 }}>
        <Typography variant="caption" color="text.secondary" sx={{ textAlign: "center" }}>
          {t("positionChart.caption")}
        </Typography>
      </Box>
      <Box sx={{ height: 40 }} />
    </Box>
  )
}

export default PositionChart
