"use client";

import { useMemo, useState } from "react";

type AdminAnalyticsChartProps = {
  labels: string[];
  values: number[];
};

export function AdminAnalyticsChart({ labels, values }: AdminAnalyticsChartProps) {
  const [hoverIndex, setHoverIndex] = useState<number | null>(null);

  const { linePath, areaPath, points } = useMemo(() => {
    const width = 640;
    const height = 220;
    const padding = 16;
    const max = Math.max(...values, 1);
    const min = Math.min(...values, 0);
    const range = Math.max(max - min, 1);

    const coords = values.map((value, index) => {
      const x = padding + (index / Math.max(values.length - 1, 1)) * (width - padding * 2);
      const y = height - padding - ((value - min) / range) * (height - padding * 2);
      return { x, y, value };
    });

    const line = coords.map((point, index) => `${index === 0 ? "M" : "L"}${point.x.toFixed(1)} ${point.y.toFixed(1)}`).join(" ");
    const area = `${line} L${width - padding} ${height - padding} L${padding} ${height - padding} Z`;

    return { linePath: line, areaPath: area, points: coords };
  }, [values]);

  const active = hoverIndex !== null ? points[hoverIndex] : null;
  const activeLabel = hoverIndex !== null ? labels[hoverIndex] : null;

  return (
    <div
      className="admin-chart admin-analytics-chart"
      onMouseLeave={() => setHoverIndex(null)}
      role="img"
      aria-label="Website activity line chart"
    >
      <div className="admin-chart-grid" />
      <svg className="admin-analytics-chart" viewBox="0 0 640 220">
        <defs>
          <linearGradient id="adminNeonChartFill" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="rgba(34, 211, 238, 0.35)" />
            <stop offset="100%" stopColor="rgba(34, 211, 238, 0)" />
          </linearGradient>
        </defs>
        <path d={areaPath} fill="url(#adminNeonChartFill)" />
        <path
          d={linePath}
          fill="none"
          stroke="#22d3ee"
          strokeLinecap="round"
          strokeWidth="3"
          style={{ filter: "drop-shadow(0 0 8px rgba(34, 211, 238, 0.65))" }}
        />
        {points.map((point, index) => (
          <g key={labels[index] ?? index}>
            <rect
              fill="transparent"
              height={220}
              onMouseEnter={() => setHoverIndex(index)}
              width={640 / Math.max(values.length, 1)}
              x={index * (640 / Math.max(values.length, 1))}
              y={0}
            />
            <circle
              cx={point.x}
              cy={point.y}
              fill={hoverIndex === index ? "#00d4ff" : "#22d3ee"}
              opacity={hoverIndex === index ? 1 : 0.85}
              r={hoverIndex === index ? 6 : 4}
              stroke="#0b0f14"
              strokeWidth="2"
            />
          </g>
        ))}
        {active ? (
          <line stroke="rgba(34, 211, 238, 0.35)" strokeDasharray="4 4" x1={active.x} x2={active.x} y1={16} y2={204} />
        ) : null}
      </svg>
      {active && activeLabel ? (
        <div className="admin-chart-tooltip" style={{ left: `${(active.x / 640) * 100}%`, top: `${(active.y / 220) * 100}%` }}>
          <strong>{activeLabel}</strong>
          <span style={{ display: "block", marginTop: 4, opacity: 0.85 }}>{active.value} items</span>
        </div>
      ) : null}
    </div>
  );
}