frontend/components/organisms/analytics/BarChart.tsx

"use client";

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

interface BarChartProps {
  current: RevenueDataPoint[];
  previous: RevenueDataPoint[];
  height?: number;
}

/**
 * Pure-SVG grouped bar chart comparing current vs previous period revenue.
 * Hover bars show tooltip with label, revenue, and order count.
 * Tooltip auto-flips above/below bar top to stay inside the viewBox.
 */
export function BarChart({ current, previous, height = 200 }: BarChartProps) {
  const [hovered, setHovered] = useState<{ set: "cur" | "prev"; idx: 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 n = current.length;
  const maxVal =
    Math.max(
      ...current.map((d) => d.revenue),
      ...previous.map((d) => d.revenue),
    ) || 1;
  const groupW = chartW / n;
  const barW = groupW * 0.35;
  const gap = groupW * 0.05;

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

  const step = Math.ceil(n / 8);

  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)}
      >
        {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>
        ))}

        {current.map((d, i) => {
          const groupX = padL + i * groupW;
          const curH = (d.revenue / maxVal) * chartH;
          const prevH = ((previous[i]?.revenue ?? 0) / maxVal) * chartH;
          const curX = groupX + gap;
          const prevX = curX + barW + gap;
          const isHovCur = hovered?.set === "cur" && hovered.idx === i;
          const isHovPrev = hovered?.set === "prev" && hovered.idx === i;
          return (
            <g key={i}>
              <rect
                x={prevX}
                y={padT + chartH - prevH}
                width={barW}
                height={prevH}
                rx="3"
                fill={isHovPrev ? "#A0785A" : "#E2C9A8"}
                style={{ cursor: "pointer", transition: "fill 150ms" }}
                onMouseEnter={() => setHovered({ set: "prev", idx: i })}
              />
              <rect
                x={curX}
                y={padT + chartH - curH}
                width={barW}
                height={curH}
                rx="3"
                fill={isHovCur ? "#4A3728" : "#6F4E37"}
                style={{ cursor: "pointer", transition: "fill 150ms" }}
                onMouseEnter={() => setHovered({ set: "cur", idx: i })}
              />
              {i % step === 0 && (
                <text
                  x={groupX + groupW / 2}
                  y={H - 8}
                  textAnchor="middle"
                  fontSize="10"
                  fill="#A08060"
                >
                  {d.label}
                </text>
              )}
            </g>
          );
        })}

        {hovered !== null &&
          (() => {
            const d =
              hovered.set === "cur"
                ? current[hovered.idx]
                : previous[hovered.idx];
            if (!d) return null;
            const groupX = padL + hovered.idx * groupW;
            const tipW = 130,
              tipH = 50;
            const tipX = Math.min(
              Math.max(groupX - tipW / 2, padL),
              W - padR - tipW,
            );
            const barH = (d.revenue / maxVal) * chartH;
            const barTopY = padT + chartH - barH;
            const aboveY = barTopY - tipH - 8;
            const tipY = Math.min(
              Math.max(aboveY >= padT ? aboveY : barTopY + 8, 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 + 15}
                  textAnchor="middle"
                  fontSize="10"
                  fill="#F0D9A8"
                >
                  {d.label} ({hovered.set === "cur" ? "Hiện tại" : "Trước"})
                </text>
                <text
                  x={tipX + tipW / 2}
                  y={tipY + 30}
                  textAnchor="middle"
                  fontSize="11"
                  fontWeight="600"
                  fill="#C8973A"
                >
                  {formatCurrency(d.revenue)}
                </text>
                <text
                  x={tipX + tipW / 2}
                  y={tipY + 44}
                  textAnchor="middle"
                  fontSize="10"
                  fill="#A08060"
                >
                  {d.orders} đơn hàng
                </text>
              </g>
            );
          })()}

        {/* Legend */}
        <rect x={padL} y={4} width={10} height={10} rx="2" fill="#6F4E37" />
        <text x={padL + 13} y={13} fontSize="10" fill="#6F4E37">
          Hiện tại
        </text>
        <rect
          x={padL + 65}
          y={4}
          width={10}
          height={10}
          rx="2"
          fill="#E2C9A8"
        />
        <text x={padL + 78} y={13} fontSize="10" fill="#A08060">
          Kỳ trước
        </text>
      </svg>
    </div>
  );
}