"use client";

import { DistrictTreemap } from "@/components/analytics/DistrictTreemap";
import { KpiCard } from "@/components/analytics/KpiCard";
import { MarketPulseChart } from "@/components/analytics/MarketPulseChart";
import { PipelineChart } from "@/components/analytics/PipelineChart";
import { QuartirographyChart } from "@/components/analytics/QuartirographyChart";
import { Section } from "@/components/analytics/Section";
import { YandexClassPie } from "@/components/analytics/YandexClassPie";
import { useMarketPulse, useYandexListings } from "@/lib/analytics-api";

export default function SverdlMarketPage() {
  const pulse = useMarketPulse();
  const yandex = useYandexListings();

  const last = pulse.data?.[pulse.data.length - 1];
  const first = pulse.data?.[0];
  const totalDelta =
    last && first && first.total_square_th_sqm && last.total_square_th_sqm
      ? Math.round(
          ((last.total_square_th_sqm - first.total_square_th_sqm) /
            first.total_square_th_sqm) *
            100,
        )
      : null;
  const soldDelta =
    last && first && first.sold_perc != null && last.sold_perc != null
      ? Math.round(last.sold_perc - first.sold_perc)
      : null;
  const priceDelta =
    last && first && first.price_avg && last.price_avg
      ? Math.round(((last.price_avg - first.price_avg) / first.price_avg) * 100)
      : null;

  return (
    <>
      <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
        <KpiCard
          label="Объём строительства"
          value={last?.total_square_th_sqm?.toLocaleString("ru") ?? "—"}
          unit="тыс м²"
          delta={
            totalDelta != null
              ? {
                  value: `${totalDelta > 0 ? "+" : ""}${totalDelta}% за период`,
                  positive: totalDelta > 0,
                }
              : undefined
          }
          hint={last ? `${last.snapshot_date.slice(0, 7)} (DOM.РФ)` : undefined}
        />
        <KpiCard
          label="Sold %"
          value={last?.sold_perc?.toFixed(0) ?? "—"}
          unit="%"
          delta={
            soldDelta != null
              ? {
                  value: `${soldDelta > 0 ? "+" : ""}${soldDelta} пп`,
                  positive: soldDelta >= 0,
                }
              : undefined
          }
          hint="доля проданных площадей в стройке"
        />
        <KpiCard
          label="Средняя цена"
          value={
            last?.price_avg
              ? Math.round(last.price_avg).toLocaleString("ru")
              : "—"
          }
          unit="₽/м²"
          delta={
            priceDelta != null
              ? {
                  value: `${priceDelta > 0 ? "+" : ""}${priceDelta}% за период`,
                  positive: null,
                }
              : undefined
          }
        />
        <KpiCard
          label="Активных новостроек"
          value={yandex.data?.total?.toString() ?? "—"}
          hint={
            yandex.data?.snapshot_date
              ? `Снимок Я.Недв ${yandex.data.snapshot_date}`
              : undefined
          }
        />
      </div>

      <Section
        title="Динамика рынка Свердловской области"
        subtitle="DOM.РФ realization, ежемесячные снимки. Объём — bar (тыс м²), sold% и цена — линии."
      >
        <MarketPulseChart />
      </Section>

      <Section
        title="Парадокс портфеля: что строят vs что покупают"
        subtitle="Слева — текущий портфель строящегося жилья по сегментам (DOM.РФ). Справа — реальные ДДУ-сделки Q3 2025–Q1 2026 (Rosreestr)."
      >
        <QuartirographyChart />
        <p
          style={{
            margin: "12px 0 0",
            color: "#5b6066",
            fontSize: 13,
            lineHeight: 1.5,
          }}
        >
          Рынок голосует деньгами за семейные квартиры (37% сделок — 80+ м²), а
          предложение перекошено в сторону инвесторских студий и однушек (52%
          портфеля). Дефицит средне-большого жилья — ниша для входа.
        </p>
      </Section>

      <div
        className="gd-grid-sidebar"
        style={{
          display: "grid",
          gridTemplateColumns: "2fr 1fr",
          gap: 16,
          marginTop: 16,
        }}
      >
        <div>
          <Section
            title="Pipeline по году ввода"
            subtitle="Чем дальше год — тем выше доля «ещё не открыто к продаже» (красный). Окно инвестиций: ввод 2026–2027."
          >
            <PipelineChart />
          </Section>
        </div>
        <div>
          <Section
            title="Активные новостройки (Я.Недв)"
            subtitle="Распределение по классу"
          >
            <YandexClassPie />
          </Section>
        </div>
      </div>

      <Section
        title="Концентрация ЖК по районам ЕКБ"
        subtitle="ЖК-count из реестра DOM.РФ. Академический — лидер, Октябрьский — наименьшая конкуренция среди крупных."
      >
        <DistrictTreemap />
      </Section>
    </>
  );
}
