"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+ м²",
    ];
    const portfolioMap: Record<string, number> = {
      "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] ?? 0);

    return {
      tooltip: {
        trigger: "axis",
        axisPointer: { type: "shadow" },
        valueFormatter: (v: number) => `${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}
    />
  );
}