"use client";

import { useMemo } from "react";

import { ChartShell } from "./ChartShell";

interface Props {
  bucketLabels: string[];
  recommended: number[];
  current: number[];
}

export function RecommendBucketsChart({
  bucketLabels,
  recommended,
  current,
}: Props) {
  const option = useMemo(
    () => ({
      tooltip: {
        trigger: "axis",
        axisPointer: { type: "shadow" },
        valueFormatter: (v: unknown) =>
          typeof v === "number" ? `${v.toFixed(1)}%` : "—",
      },
      legend: { data: ["Рекомендация", "Ваше распределение"], top: 0 },
      grid: { left: 100, right: 24, top: 32, bottom: 32 },
      xAxis: {
        type: "value",
        max: 100,
        axisLabel: { formatter: "{value}%" },
      },
      yAxis: { type: "category", data: bucketLabels, inverse: true },
      series: [
        {
          name: "Рекомендация",
          type: "bar",
          data: recommended,
          itemStyle: { color: "#cbd5e1" },
          barGap: "-100%",
          z: 1,
        },
        {
          name: "Ваше распределение",
          type: "bar",
          data: current,
          itemStyle: { color: "#1d4ed8" },
          z: 2,
          label: {
            show: true,
            position: "right",
            formatter: (p: { value: number }) =>
              p.value > 0 ? `${p.value.toFixed(1)}%` : "",
            fontSize: 11,
          },
        },
      ],
    }),
    [bucketLabels, recommended, current],
  );

  return <ChartShell option={option} height={280} notMerge />;
}