"use client";

import { useMemo } from "react";

import { useYandexListings } from "@/lib/analytics-api";

import { ChartShell } from "./ChartShell";

const CLASS_LABELS: Record<string, string> = {
  ECONOM: "Эконом",
  COMFORT: "Комфорт",
  COMFORT_PLUS: "Комфорт+",
  BUSINESS: "Бизнес",
  ELITE: "Элит",
};

export function YandexClassPie() {
  const { data, isLoading } = useYandexListings();

  const option = useMemo(() => {
    const rows = data?.by_class ?? [];
    return {
      tooltip: { trigger: "item" },
      legend: { bottom: 0 },
      series: [
        {
          type: "pie",
          radius: ["45%", "70%"],
          avoidLabelOverlap: false,
          label: { formatter: "{b}: {c}" },
          data: rows.map((r) => ({
            name: CLASS_LABELS[r.obj_class] ?? r.obj_class,
            value: r.count,
          })),
        },
      ],
    };
  }, [data]);

  return <ChartShell option={option} loading={isLoading} height={300} />;
}