webshop/shop/components/admin/revenue-chart.tsx

'use client'

import { useState } from 'react'

type ChartDataPoint = {
  name: string
  value: number
}

export function RevenueChart({ data }: { data: ChartDataPoint[] }) {
  const [hoveredIdx, setHoveredIdx] = useState<number | null>(null)

  if (!data || data.length === 0) {
    return (
      <div className="h-[200px] flex items-center justify-center text-slate-500 italic">
        Keine Umsatzdaten vorhanden.
      </div>
    )
  }

  const width = 500
  const height = 200
  const paddingLeft = 55
  const paddingRight = 15
  const paddingTop = 25
  const paddingBottom = 30

  const chartWidth = width - paddingLeft - paddingRight
  const chartHeight = height - paddingTop - paddingBottom

  const maxVal = Math.max(...data.map(d => d.value), 100)
  const maxValue = Math.ceil(maxVal * 1.15) // 15% headroom

  const points = data.map((d, i) => {
    const x = paddingLeft + (i / (data.length - 1)) * chartWidth
    const y = paddingTop + chartHeight - (d.value / maxValue) * chartHeight
    return { x, y, name: d.name, value: d.value }
  })

  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} ${paddingTop + chartHeight} L ${points[0].x} ${paddingTop + chartHeight} Z`
    : ''

  // 4 ticks for grid
  const yTicks = [0, 0.33, 0.66, 1].map(ratio => Math.round(maxValue * ratio))

  return (
    <div className="relative w-full">
      <svg viewBox={`0 0 ${width} ${height}`} className="w-full h-auto overflow-visible select-none">
        <defs>
          <linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#3b82f6" stopOpacity="0.25" />
            <stop offset="100%" stopColor="#3b82f6" stopOpacity="0.0" />
          </linearGradient>
        </defs>

        {/* Grid Lines */}
        {yTicks.map((val, idx) => {
          const y = paddingTop + chartHeight - (val / maxValue) * chartHeight
          return (
            <g key={idx} className="opacity-40">
              <line
                x1={paddingLeft}
                y1={y}
                x2={width - paddingRight}
                y2={y}
                stroke="white"
                strokeWidth={1}
                strokeDasharray="4 4"
                className="stroke-white/10"
              />
              <text
                x={paddingLeft - 8}
                y={y + 4}
                className="fill-slate-400 text-[9px] text-right font-mono"
                textAnchor="end"
              >
                {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }).format(val)}
              </text>
            </g>
          )
        })}

        {/* X Axis Labels */}
        {points.map((p, i) => (
          <text
            key={i}
            x={p.x}
            y={height - 8}
            className="fill-slate-400 text-[10px] font-semibold"
            textAnchor="middle"
          >
            {p.name}
          </text>
        ))}

        {/* Area under the line */}
        {areaPath && (
          <path d={areaPath} fill="url(#areaGrad)" />
        )}

        {/* Line */}
        {linePath && (
          <path
            d={linePath}
            fill="none"
            stroke="#3b82f6"
            strokeWidth={3}
            strokeLinecap="round"
            strokeLinejoin="round"
            className="drop-shadow-[0_2px_8px_rgba(59,130,246,0.4)]"
          />
        )}

        {/* Interactive Dots & Hover areas */}
        {points.map((p, i) => (
          <g key={i}>
            {/* Thick hover circle area */}
            <circle
              cx={p.x}
              cy={p.y}
              r={16}
              fill="transparent"
              className="cursor-pointer"
              onMouseEnter={() => setHoveredIdx(i)}
              onMouseLeave={() => setHoveredIdx(null)}
            />
            {/* Visual Point dot */}
            <circle
              cx={p.x}
              cy={p.y}
              r={hoveredIdx === i ? 6 : 4}
              className="transition-all duration-200 fill-primary stroke-[#0b0f19] stroke-2"
              pointerEvents="none"
            />
            {hoveredIdx === i && (
              <circle
                cx={p.x}
                cy={p.y}
                r={12}
                className="fill-primary/20 animate-ping"
                pointerEvents="none"
              />
            )}
          </g>
        ))}
      </svg>

      {/* HTML Tooltip overlay */}
      {hoveredIdx !== null && (
        <div
          className="absolute bg-slate-950/95 border border-white/10 rounded-lg p-2.5 text-xs text-white shadow-xl backdrop-blur-md pointer-events-none transition-all duration-150 font-sans"
          style={{
            left: `${((points[hoveredIdx].x - paddingLeft) / chartWidth) * 80 + 10}%`,
            top: `${(points[hoveredIdx].y / height) * 75 - 12}%`,
            transform: 'translateX(-50%) translateY(-100%)',
          }}
        >
          <p className="font-semibold text-slate-400">{points[hoveredIdx].name}</p>
          <p className="font-bold text-sm text-primary mt-0.5">
            {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(points[hoveredIdx].value)}
          </p>
        </div>
      )}
    </div>
  )
}