"use client";

/**
 * PriceTrendCard — линия динамики ₽/м² по месяцам для здания/района.
 * Reuses recharts LineChart in the same style as PriceHistoryChart.tsx.
 * Рендерится только при ≥2 точках price_trend.
 */
import { useMemo } from "react";
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  Tooltip,
  ResponsiveContainer,
  CartesianGrid,
} from "recharts";

import type { AggregatedEstimate } from "@/types/trade-in";

interface Props {
  estimate: AggregatedEstimate;
}

const fmtK = (n: number) => `${Math.round(n / 1000)}k`;

/** "2025-03" → "мар ’25" (компактная подпись оси). */
const MONTHS_RU = [
  "янв", "фев", "мар", "апр", "май", "июн",
  "июл", "авг", "сен", "окт", "ноя", "дек",
];
function fmtMonth(ym: string): string {
  const [y, m] = ym.split("-");
  const idx = Number(m) - 1;
  const name = idx >= 0 && idx < 12 ? MONTHS_RU[idx] : m;
  return `${name} ’${(y ?? "").slice(2)}`;
}

export function PriceTrendCard({ estimate }: Props) {
  const data = useMemo(
    () =>
      (estimate.price_trend ?? [])
        .filter((p) => p && typeof p.ppm2 === "number" && p.ppm2 > 0 && p.month)
        .map((p) => ({ month: p.month, ppm2: p.ppm2, label: fmtMonth(p.month) }))
        .sort((a, b) => a.month.localeCompare(b.month)),
    [estimate.price_trend],
  );

  // Empty / degraded state: <2 точек — карточку не рендерим.
  if (data.length < 2) return null;

  const first = data[0].ppm2;
  const last = data[data.length - 1].ppm2;
  const changePct = first > 0 ? ((last - first) / first) * 100 : 0;
  const up = changePct >= 0;

  return (
    <article className="card">
      <div className="card-head">
        <div>
          <div className="section-kicker">Аналитика · Тренд рынка</div>
          <h2>Динамика ₽/м² по рынку района</h2>
        </div>
        <div className="card-meta">
          <div>
            За <b className="mono">{data.length}</b> мес.
          </div>
          {/* #834 a11y: viz-палитра (--viz-3 #36a558 3.14:1 / --accent-2) — bar-цвета,
              на белом тексте не проходят AA. Семантические токены: success/danger ≥4.9:1. */}
          <div style={{ marginTop: 4, color: up ? "var(--success)" : "var(--danger)" }}>
            {up ? "▲" : "▼"} {Math.abs(changePct).toFixed(1)}%
          </div>
        </div>
      </div>

      {/* #835: декоративный чарт — aria-hidden (данные в тексте/легенде карточки). */}
      <div aria-hidden="true" style={{ width: "100%", height: 240, padding: "12px 8px 0" }}>
        <ResponsiveContainer>
          <LineChart data={data} margin={{ top: 8, right: 16, left: 8, bottom: 8 }}>
            <CartesianGrid stroke="var(--border)" strokeDasharray="3 3" />
            <XAxis dataKey="label" tick={{ fontSize: 11 }} />
            <YAxis tickFormatter={fmtK} tick={{ fontSize: 11 }} domain={["auto", "auto"]} />
            <Tooltip
              formatter={(value: number) => [
                `${value.toLocaleString("ru-RU")} ₽/м²`,
                "Медиана",
              ]}
              labelFormatter={(label: string) => label}
            />
            <Line
              type="monotone"
              dataKey="ppm2"
              stroke="var(--accent)"
              strokeWidth={2}
              dot={{ r: 3 }}
              name="₽/м²"
            />
          </LineChart>
        </ResponsiveContainer>
      </div>

      <div className="table-foot">
        <span>
          Медиана ₽/м² по аналогам рынка · {fmtMonth(data[0].month)} →{" "}
          {fmtMonth(data[data.length - 1].month)}
        </span>
      </div>
    </article>
  );
}
