"use client";

import { useMemo } from "react";

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

import { ChartShell } from "./ChartShell";

export function PrinzipGapBar() {
  const { data, isLoading } = usePrinzipInsights();

  const option = useMemo(() => {
    const rows = data?.key_gaps ?? [];

    // Метраж (м²) и доли (%) несравнимы по длине бара на общей шкале, поэтому
    // строки разносятся по единице измерения на отдельные value-оси/гриды —
    // длины баров сопоставимы только внутри своей единицы. Сохраняем исходный
    // порядок строк внутри каждой группы.
    const units = Array.from(new Set(rows.map((r) => r.unit)));
    const groups = units.map((unit) => ({
      unit,
      rows: rows.filter((r) => r.unit === unit),
    }));

    const developers = [
      { key: "prinzip" as const, name: "PRINZIP", color: "#1d4ed8" },
      { key: "market" as const, name: "Рынок Свердл", color: "#94a3b8" },
      { key: "brusnika" as const, name: "Брусника", color: "#0a7a3a" },
      { key: "forum" as const, name: "Форум-групп", color: "#c2410c" },
    ];

    // Вертикальная раскладка гридов: верхний отступ под легенду, нижний под ось,
    // высота гридов пропорциональна числу строк в группе.
    const TOP = 56;
    const BOTTOM = 16;
    const GAP = 48;
    const totalRows = rows.length || 1;
    const span = 100 - TOP - BOTTOM - GAP * Math.max(groups.length - 1, 0);

    let cursor = TOP;
    const grids: Record<string, unknown>[] = [];
    const xAxes: Record<string, unknown>[] = [];
    const yAxes: Record<string, unknown>[] = [];
    const groupBounds = groups.map((g) => {
      const height = (g.rows.length / totalRows) * span;
      const top = cursor;
      const bottom = 100 - (top + height);
      cursor = top + height + GAP;
      return { top, bottom };
    });

    groups.forEach((g, i) => {
      const { top, bottom } = groupBounds[i];
      grids.push({
        left: 120,
        right: 32,
        top: `${top}%`,
        bottom: `${bottom}%`,
        containLabel: false,
      });
      xAxes.push({
        type: "value",
        gridIndex: i,
        name: g.unit,
        nameLocation: "end",
        nameGap: 8,
      });
      yAxes.push({
        type: "category",
        gridIndex: i,
        data: g.rows.map((r) => r.label),
      });
    });

    const series = groups.flatMap((g, i) =>
      developers.map((dev) => ({
        name: dev.name,
        type: "bar",
        xAxisIndex: i,
        yAxisIndex: i,
        data: g.rows.map((r) => r[dev.key]),
        itemStyle: { color: dev.color },
      })),
    );

    return {
      tooltip: {
        trigger: "axis",
        axisPointer: { type: "shadow" },
        formatter: (
          params: {
            axisValueLabel: string;
            marker: string;
            seriesName: string;
            value: number;
          }[],
        ) => {
          const label = params[0]?.axisValueLabel ?? "";
          const unit = rows.find((r) => r.label === label)?.unit ?? "";
          return [
            `<b>${label}</b>`,
            ...params.map(
              (p) => `${p.marker}${p.seriesName}: ${p.value}${unit}`,
            ),
          ].join("<br/>");
        },
      },
      legend: { data: developers.map((d) => d.name) },
      grid: grids,
      xAxis: xAxes,
      yAxis: yAxes,
      series,
    };
  }, [data]);

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