"use client"

import { useMemo } from "react"

interface SimpleHorizontalBarChartProps {
  data: Record<string, string | number>[]
  dataKey: string
  labelKey: string
  fill?: string
  width?: number
}

export function SimpleHorizontalBarChart({
  data,
  dataKey,
  labelKey,
  fill = "#6366f1",
  width = 300,
}: SimpleHorizontalBarChartProps) {
  const chartWidth = width
  const chartHeight = Math.max(data.length * 40 + 20, 120)
  const padding = { top: 10, right: 10, bottom: 10, left: 80 }
  const innerWidth = chartWidth - padding.left - padding.right

  const bars = useMemo(() => {
    if (data.length === 0) return []

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

    return data.map((d, i) => {
      const val = Number(d[dataKey]) || 0
      const barWidth = (val / maxVal) * innerWidth * 0.9
      const y =
        padding.top +
        (i * (chartHeight - padding.top - padding.bottom)) / data.length
      return {
        x: padding.left,
        y,
        width: barWidth,
        height: Math.min(
          24,
          (chartHeight - padding.top - padding.bottom) / data.length - 4,
        ),
        label: String(d[labelKey] ?? ""),
        value: val,
      }
    })
  }, [data, dataKey, labelKey, innerWidth, chartHeight])

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

  return (
    <svg
      viewBox={`0 0 ${chartWidth} ${chartHeight}`}
      className="w-full"
      preserveAspectRatio="xMidYMid meet"
      style={{ height: chartHeight }}
    >
      {bars.map((bar, i) => (
        <g key={i}>
          <text
            x={padding.left - 8}
            y={bar.y + bar.height / 2 + 4}
            textAnchor="end"
            className="fill-muted-foreground"
            fontSize={12}
          >
            {bar.label.length > 6 ? `${bar.label.slice(0, 6)}...` : bar.label}
          </text>
          <rect
            x={bar.x}
            y={bar.y}
            width={bar.width}
            height={bar.height}
            rx={4}
            fill={fill}
            opacity={0.8}
          />
          <text
            x={bar.x + bar.width + 6}
            y={bar.y + bar.height / 2 + 4}
            className="fill-muted-foreground"
            fontSize={11}
          >
            {bar.value}
          </text>
        </g>
      ))}
    </svg>
  )
}