"use client";

import { useMemo } from "react";

import {
  useQuartirographyDeals,
  useQuartirographyPortfolio,
} from "@/lib/analytics-api";

import { ChartShell } from "./ChartShell";

export function QuartirographyChart() {
  const portfolio = useQuartirographyPortfolio();
  const deals = useQuartirographyDeals();

  const option = useMemo(() => {
    const portfolioRows = portfolio.data ?? [];
    const dealsRows = deals.data ?? [];
    const buckets = [
      "Студии 15-30",
      "1-к 30-45",
      "2-к 45-60",
      "3-к 60-80",
      "80+ м²",
    ];
    // DOM.РФ portfolio source (domrf_region_aggregates) has no studio segment
    // (room_count_type only ONE/TWO/THREE/FOUR), so "Студии 15-30" has no
    // counterpart here. Map it to null → ECharts draws no bar (N/A) instead of
    // a misleading 0% grey bar.
    const portfolioMap: Record<string, number | null> = {
      "Студии 15-30": null,
      "1-к 30-45": portfolioRows.find((r) => r.bucket === "1-к")?.percent ?? 0,
      "2-к 45-60": portfolioRows.find((r) => r.bucket === "2-к")?.percent ?? 0,
      "3-к 60-80": portfolioRows.find((r) => r.bucket === "3-к")?.percent ?? 0,
      "80+ м²": portfolioRows.find((r) => r.bucket === "4+")?.percent ?? 0,
    };
    const dealsPercents = buckets.map(
      (b) => dealsRows.find((r) => r.bucket === b)?.percent ?? 0,
    );
    const portfolioPercents = buckets.map((b) => portfolioMap[b] ?? null);

    return {
      tooltip: {
        trigger: "axis",
        axisPointer: { type: "shadow" },
        valueFormatter: (v: number | null) => (v == null ? "нет данных" : `${v}%`),
      },
      legend: { data: ["Что строится (портфель)", "Что покупают (ДДУ)"] },
      grid: { left: 110, right: 32, top: 40, bottom: 28 },
      xAxis: { type: "value", axisLabel: { formatter: "{value}%" } },
      yAxis: { type: "category", data: buckets, inverse: true },
      series: [
        {
          name: "Что строится (портфель)",
          type: "bar",
          data: portfolioPercents,
          itemStyle: { color: "#94a3b8" },
        },
        {
          name: "Что покупают (ДДУ)",
          type: "bar",
          data: dealsPercents,
          itemStyle: { color: "#0a7a3a" },
        },
      ],
    };
  }, [portfolio.data, deals.data]);

  return (
    <ChartShell
      option={option}
      loading={portfolio.isLoading || deals.isLoading}
      height={320}
    />
  );
}