admin/src/components/charts/SimpleLineChart.tsx

"use client"

import { useMemo, useState } from "react"

interface SimpleLineChartProps {
  data: Record<string, string | number>[]
  dataKey: string
  xAxisKey: string
  stroke?: string
  height?: number
}

export function SimpleLineChart({
  data,
  dataKey,
  xAxisKey,
  stroke = "#3b82f6",
  height = 250,
}: SimpleLineChartProps) {
  const [tooltip, setTooltip] = useState<{
    x: number
    y: number
    label: string
    value: number
  } | null>(null)

  const padding = { top: 20, right: 20, bottom: 40, left: 50 }
  const chartWidth = 600
  const chartHeight = height
  const innerWidth = chartWidth - padding.left - padding.right
  const innerHeight = chartHeight - padding.top - padding.bottom

  const { points, xLabels, yLabels } = useMemo(() => {
    if (data.length === 0) return { points: [], xLabels: [], yLabels: [] }

    const values = data.map(d => Number(d[dataKey]) || 0)
    const maxVal = Math.max(...values, 1)
    const yMax = Math.ceil(maxVal * 1.2)

    const step = innerWidth / Math.max(data.length - 1, 1)

    const pts = data.map((d, i) => ({
      x: padding.left + i * step,
      y: padding.top + innerHeight - (Number(d[dataKey]) / yMax) * innerHeight,
    }))

    const xLbls = data.map((d, i) => ({
      x: padding.left + i * step,
      label: String(d[xAxisKey] ?? ""),
    }))

    const yTickCount = 5
    const yLbls = Array.from({ length: yTickCount + 1 }, (_, i) => {
      const val = Math.round((yMax / yTickCount) * i)
      return {
        y: padding.top + innerHeight - (val / yMax) * innerHeight,
        label: String(val),
      }
    })

    return { points: pts, xLabels: xLbls, yLabels: yLbls }
  }, [data, dataKey, xAxisKey, innerWidth, innerHeight])

  if (data.length === 0) {
    return (
      <div
        className="flex items-center justify-center text-muted-foreground text-sm"
        style={{ height }}
      >
        暂无数据
      </div>
    )
  }

  const linePath = points
    .map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`)
    .join(" ")
  const areaPath =
    points.length > 0
      ? `${linePath} L ${points[points.length - 1].x} ${padding.top + innerHeight} L ${points[0].x} ${padding.top + innerHeight} Z`
      : ""

  return (
    <div className="relative" style={{ height }}>
      <svg
        viewBox={`0 0 ${chartWidth} ${chartHeight}`}
        className="w-full h-full"
        preserveAspectRatio="xMidYMid meet"
      >
        <defs>
          <linearGradient
            id={`area-${stroke.replace("#", "")}`}
            x1="0"
            y1="0"
            x2="0"
            y2="1"
          >
            <stop offset="0%" stopColor={stroke} stopOpacity={0.2} />
            <stop offset="100%" stopColor={stroke} stopOpacity={0} />
          </linearGradient>
        </defs>

        {yLabels.map((yl, i) => (
          <g key={i}>
            <line
              x1={padding.left}
              y1={yl.y}
              x2={padding.left + innerWidth}
              y2={yl.y}
              stroke="hsl(var(--border))"
              strokeDasharray="4 4"
              strokeWidth={0.5}
            />
            <text
              x={padding.left - 8}
              y={yl.y + 4}
              textAnchor="end"
              className="fill-muted-foreground"
              fontSize={11}
            >
              {yl.label}
            </text>
          </g>
        ))}

        <path d={areaPath} fill={`url(#area-${stroke.replace("#", "")})`} />

        <path
          d={linePath}
          fill="none"
          stroke={stroke}
          strokeWidth={2}
          strokeLinecap="round"
          strokeLinejoin="round"
        />

        {points.map((p, i) => (
          <circle
            key={i}
            cx={p.x}
            cy={p.y}
            r={3}
            fill="#fff"
            stroke={stroke}
            strokeWidth={2}
            role="button"
            aria-label={`${String(data[i]?.[xAxisKey] ?? "")}: ${Number(data[i]?.[dataKey]) || 0}`}
            className="cursor-pointer"
            onMouseEnter={() =>
              setTooltip({
                x: p.x,
                y: p.y,
                label: String(data[i]?.[xAxisKey] ?? ""),
                value: Number(data[i]?.[dataKey]) || 0,
              })
            }
            onMouseLeave={() => setTooltip(null)}
          />
        ))}

        {xLabels.map((xl, i) =>
          i % Math.ceil(xLabels.length / 7) === 0 ||
          i === xLabels.length - 1 ? (
            <text
              key={i}
              x={xl.x}
              y={padding.top + innerHeight + 20}
              textAnchor="middle"
              className="fill-muted-foreground"
              fontSize={11}
            >
              {xl.label}
            </text>
          ) : null,
        )}
      </svg>

      {tooltip && (
        <div
          className="absolute pointer-events-none bg-popover border rounded-md px-2 py-1 text-xs shadow-sm"
          style={{
            left: `${((tooltip.x / chartWidth) * 100).toFixed(1)}%`,
            top: tooltip.y - 30,
            transform: "translate(-50%, -100%)",
          }}
        >
          <div className="text-muted-foreground">{tooltip.label}</div>
          <div className="font-semibold">{tooltip.value}</div>
        </div>
      )}
    </div>
  )
}