"use client"

import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"
import { Frame, FramePanel } from "@/components/reui/frame"
import { ChartContainer, ChartTooltip, type ChartConfig } from "@/components/ui/chart"
import { fmtRate, formatRangeAgo, TRAFFIC_RANGE_MINUTES } from "@/lib/fmt-rate"

/**
 * История RX/TX — adapt ReUI PRO chart-23 (multi-line + tooltip).
 * @see https://reui.io/preview/base/chart-23
 * @see https://reui.io/blocks
 */

const chartConfig = {
  rx: { label: "RX", color: "var(--chart-rx)" },
  tx: { label: "TX", color: "var(--chart-tx)" },
} satisfies ChartConfig

function ChartLegendItem({ label, color }: { label: string; color: string }) {
  return (
    <div className="flex items-center gap-2">
      <div className="size-2 rounded-full" style={{ backgroundColor: color }} />
      <span className="text-muted-foreground text-xs font-medium">{label}</span>
    </div>
  )
}

function CustomTooltip({
  active,
  payload,
}: {
  active?: boolean
  payload?: {
    dataKey: string
    color: string
    value: number
  }[]
}) {
  if (!active || !payload?.length) return null
  return (
    <div className="min-w-[120px] flex flex-col gap-1.5 rounded-lg bg-popover p-3 text-popover-foreground shadow-lg ring-1 ring-foreground/10">
      {payload.map((item) => (
        <div key={item.dataKey}>
          <div className="text-[10px] font-medium tracking-wider uppercase opacity-70">
            {item.dataKey === "rx" ? "RX" : "TX"}:
          </div>
          <div className="text-sm font-semibold tabular-nums">
            {fmtRate(item.value)}
          </div>
        </div>
      ))}
    </div>
  )
}

function toChartData(rx: number[], tx: number[], rangeMinutes: number) {
  const n = Math.max(rx.length, tx.length, 1)
  const denom = Math.max(n - 1, 1)
  return Array.from({ length: n }, (_, i) => {
    const minutesAgo = Math.round((1 - i / denom) * rangeMinutes)
    return {
      time: formatRangeAgo(minutesAgo),
      rx: rx[i] ?? 0,
      tx: tx[i] ?? 0,
    }
  })
}

export function TrafficRxTxChart({
  rx,
  tx,
  range = "1h",
}: {
  rx: number[]
  tx: number[]
  range?: string
}) {
  const rangeMinutes = TRAFFIC_RANGE_MINUTES[range] ?? 60
  const data = toChartData(rx, tx, rangeMinutes)
  const tickEvery = Math.max(1, Math.ceil(data.length / 6))

  return (
    <Frame className="w-full">
      <FramePanel className="flex flex-col gap-6">
        <ChartContainer config={chartConfig} className="-ms-4 aspect-auto h-[220px] w-full">
          <LineChart data={data} margin={{ top: 5, right: 5, left: 5, bottom: 5 }}>
            <CartesianGrid
              strokeDasharray="4 8"
              vertical={false}
              stroke="var(--border)"
            />
            <XAxis
              dataKey="time"
              axisLine={false}
              tickLine={false}
              tick={{ fontSize: 11 }}
              tickMargin={10}
              interval={tickEvery - 1}
            />
            <YAxis
              axisLine={false}
              tickLine={false}
              tick={{ fontSize: 11 }}
              tickFormatter={(v: number) => fmtRate(Number(v))}
              tickMargin={8}
              width={72}
            />
            <ChartTooltip content={<CustomTooltip />} />
            <Line
              dataKey="rx"
              type="monotone"
              stroke="var(--chart-rx)"
              strokeWidth={2}
              dot={false}
            />
            <Line
              dataKey="tx"
              type="monotone"
              stroke="var(--chart-tx)"
              strokeWidth={2}
              dot={false}
            />
          </LineChart>
        </ChartContainer>
        <div className="mb-1 flex items-center justify-center gap-6">
          <ChartLegendItem label="RX (входящий)" color="var(--chart-rx)" />
          <ChartLegendItem label="TX (исходящий)" color="var(--chart-tx)" />
        </div>
      </FramePanel>
    </Frame>
  )
}
