frontend/components/organisms/analytics/LineChart.tsx

"use client";

import { formatCurrency } from "@/lib/analytics-utils";
import type { RevenueDataPoint } from "@/lib/types";
import { useState } from "react";

interface LineChartProps {
  data: RevenueDataPoint[];
  height?: number;
}

/**
 * Pure-SVG interactive line chart for revenue over time.
 * Hover dots show tooltip with label, revenue, and order count.
 * Tooltip auto-flips above/below the dot to stay inside the viewBox.
 */
export function LineChart({ data, height = 200 }: LineChartProps) {
  const [hovered, setHovered] = useState<number | null>(null);
  const W = 800;
  const H = height;
  const padL = 56,
    padR = 16,
    padT = 16,
    padB = 40;
  const chartW = W - padL - padR;
  const chartH = H - padT - padB;

  const maxRev = Math.max(...data.map((d) => d.revenue));
  const range = maxRev || 1;

  const points = data.map((d, i) => ({
    x: padL + (i / (data.length - 1)) * chartW,
    y: padT + chartH - (d.revenue / range) * chartH,
    data: d,
    index: i,
  }));

  const pathD = points
    .map((p, i) => `${i === 0 ? "M" : "L"} ${p.x.toFixed(1)} ${p.y.toFixed(1)}`)
    .join(" ");

  const areaD =
    pathD +
    ` L ${points[points.length - 1].x.toFixed(1)} ${(padT + chartH).toFixed(1)}` +
    ` L ${points[0].x.toFixed(1)} ${(padT + chartH).toFixed(1)} Z`;

  const yTicks = 5;
  const gridLines = Array.from({ length: yTicks + 1 }, (_, i) => ({
    val: (range / yTicks) * (yTicks - i),
    y: padT + (i / yTicks) * chartH,
  }));

  const step = Math.ceil(data.length / 10);

  return (
    <div className="relative w-full overflow-x-auto">
      <svg
        viewBox={`0 0 ${W} ${H}`}
        className="w-full"
        style={{ height: H, minWidth: 320 }}
        onMouseLeave={() => setHovered(null)}
      >
        <defs>
          <linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#6F4E37" stopOpacity="0.25" />
            <stop offset="100%" stopColor="#6F4E37" stopOpacity="0.02" />
          </linearGradient>
        </defs>

        {gridLines.map((g, i) => (
          <g key={i}>
            <line
              x1={padL}
              y1={g.y}
              x2={W - padR}
              y2={g.y}
              stroke="#E2C9A8"
              strokeWidth="1"
              strokeDasharray={i === yTicks ? "0" : "4 3"}
            />
            <text
              x={padL - 6}
              y={g.y + 4}
              textAnchor="end"
              fontSize="10"
              fill="#A08060"
            >
              {formatCurrency(g.val)}
            </text>
          </g>
        ))}

        <path d={areaD} fill="url(#areaGrad)" />
        <path
          d={pathD}
          fill="none"
          stroke="#6F4E37"
          strokeWidth="2.5"
          strokeLinejoin="round"
          strokeLinecap="round"
        />

        {points.map((p, i) =>
          i % step === 0 ? (
            <text
              key={i}
              x={p.x}
              y={H - 8}
              textAnchor="middle"
              fontSize="10"
              fill="#A08060"
            >
              {p.data.label}
            </text>
          ) : null,
        )}

        {points.map((p) => (
          <circle
            key={p.index}
            cx={p.x}
            cy={p.y}
            r={hovered === p.index ? 5 : 3}
            fill={hovered === p.index ? "#C8973A" : "#6F4E37"}
            stroke="#FDF6EC"
            strokeWidth="2"
            style={{ cursor: "pointer", transition: "r 150ms" }}
            onMouseEnter={() => setHovered(p.index)}
          />
        ))}

        {hovered !== null &&
          (() => {
            const p = points[hovered];
            const tipW = 120,
              tipH = 48;
            const tipX = Math.min(
              Math.max(p.x - tipW / 2, padL),
              W - padR - tipW,
            );
            const aboveY = p.y - tipH - 10;
            const tipY = Math.min(
              Math.max(aboveY >= padT ? aboveY : p.y + 10, padT),
              padT + chartH - tipH,
            );
            return (
              <g>
                <rect
                  x={tipX}
                  y={tipY}
                  width={tipW}
                  height={tipH}
                  rx="6"
                  fill="#3D2B1F"
                  opacity="0.92"
                />
                <text
                  x={tipX + tipW / 2}
                  y={tipY + 16}
                  textAnchor="middle"
                  fontSize="10"
                  fill="#F0D9A8"
                >
                  {p.data.label}
                </text>
                <text
                  x={tipX + tipW / 2}
                  y={tipY + 30}
                  textAnchor="middle"
                  fontSize="11"
                  fontWeight="600"
                  fill="#C8973A"
                >
                  {formatCurrency(p.data.revenue)}
                </text>
                <text
                  x={tipX + tipW / 2}
                  y={tipY + 44}
                  textAnchor="middle"
                  fontSize="10"
                  fill="#A08060"
                >
                  {p.data.orders} đơn
                </text>
              </g>
            );
          })()}
      </svg>
    </div>
  );
}