"use client";

/**
 * ConceptVariantsResult — variant tabs + per-variant placement map, ТЭП KPIs,
 * financial model, and export controls. Driven by the ConceptOutput returned
 * from POST /concepts. The map is lazy-mounted (Leaflet uses `window`).
 */

import dynamic from "next/dynamic";
import { useState } from "react";

import { KpiCard } from "@/components/analytics/KpiCard";
import { Section } from "@/components/analytics/Section";
import { Badge } from "@/components/ui/Badge";
import {
  STRATEGY_HINTS,
  STRATEGY_LABELS,
  type ConceptVariant,
} from "@/lib/concept-api";
import type { Polygon } from "geojson";

import { ConceptExportButtons } from "./ConceptExportButtons";

const ConceptResultMap = dynamic(
  () =>
    import("./ConceptResultMap").then((m) => ({ default: m.ConceptResultMap })),
  {
    ssr: false,
    loading: () => (
      <div
        style={{
          height: 360,
          background: "var(--bg-card-alt)",
          border: "1px solid var(--border-card)",
          borderRadius: 12,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          color: "var(--fg-tertiary)",
          fontSize: 13,
        }}
      >
        Загрузка карты…
      </div>
    ),
  },
);

// ── Formatters (ru microcopy) ─────────────────────────────────────────────────

const nf = new Intl.NumberFormat("ru-RU", { maximumFractionDigits: 0 });

/** Compact ₽ for headline figures: "2.4 млрд ₽", "145 млн ₽". */
function formatMoneyCompact(rub: number): string {
  const abs = Math.abs(rub);
  if (abs >= 1e9) return `${(rub / 1e9).toFixed(1)} млрд ₽`;
  if (abs >= 1e6) return `${(rub / 1e6).toFixed(0)} млн ₽`;
  return `${nf.format(Math.round(rub))} ₽`;
}

function formatInt(n: number): string {
  return nf.format(Math.round(n));
}

function formatPct(fraction: number): string {
  return `${(fraction * 100).toFixed(1)}%`;
}

// ── Variant panel ─────────────────────────────────────────────────────────────

interface PanelProps {
  parcel: Polygon;
  variant: ConceptVariant;
}

function VariantPanel({ parcel, variant }: PanelProps) {
  const { teap, financial } = variant;
  const marginPositive =
    financial.gross_margin_rub > 0
      ? true
      : financial.gross_margin_rub < 0
        ? false
        : null;

  return (
    <div>
      {/* Headline-bar — one-sentence JTBD verdict for the variant. */}
      <div
        style={{
          background: "var(--bg-headline)",
          color: "var(--fg-on-dark)",
          borderRadius: 12,
          padding: "14px 18px",
        }}
      >
        <div style={{ fontSize: 15, fontWeight: 600 }}>
          {STRATEGY_LABELS[variant.strategy]}:{" "}
          {formatInt(teap.total_floor_area_sqm)} м² надземной площади ·{" "}
          {formatInt(teap.apartments_count)} квартир · валовая прибыль{" "}
          {formatMoneyCompact(financial.gross_margin_rub)}
        </div>
        <div
          style={{
            marginTop: 8,
            paddingTop: 8,
            borderTop: "1px solid rgba(255,255,255,0.12)",
            fontSize: 12,
            color: "var(--fg-on-dark-muted)",
          }}
        >
          {STRATEGY_HINTS[variant.strategy]} IRR-proxy{" "}
          {formatPct(financial.irr)} · плотность (FAR){" "}
          {teap.density.toLocaleString("ru-RU", {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2,
          })}
          .
        </div>
      </div>

      {/* Placement map */}
      <Section
        title="Размещение застройки"
        subtitle="Полигон участка (пунктир) и сгенерированные корпуса (заливка)."
      >
        <ConceptResultMap
          parcel={parcel}
          buildings={variant.buildings_geojson}
          variantKey={variant.strategy}
        />
      </Section>

      {/* ТЭП — KPI grid */}
      <Section
        title="ТЭП — технико-экономические показатели"
        subtitle="Расчёт движка генерации по выбранной стратегии размещения."
      >
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
            gap: 12,
          }}
        >
          <KpiCard
            label="Площадь застройки"
            value={formatInt(teap.built_area_sqm)}
            unit="м²"
          />
          <KpiCard
            label="Общая площадь"
            value={formatInt(teap.total_floor_area_sqm)}
            unit="м²"
          />
          <KpiCard
            label="Жилая площадь"
            value={formatInt(teap.residential_area_sqm)}
            unit="м²"
          />
          <KpiCard
            label="Квартир"
            value={formatInt(teap.apartments_count)}
            unit="шт"
          />
          <KpiCard
            label="Плотность (FAR)"
            value={teap.density.toLocaleString("ru-RU", {
              minimumFractionDigits: 2,
              maximumFractionDigits: 2,
            })}
          />
          <KpiCard
            label="Машино-мест"
            value={formatInt(teap.parking_spaces)}
            unit="шт"
          />
        </div>
      </Section>

      {/* Финмодель */}
      <Section
        title="Финансовая модель"
        subtitle="Оценка выручки и доходности по ценам класса жилья и стоимости участка."
        right={<ConceptExportButtons variant={variant} />}
      >
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
            gap: 12,
          }}
        >
          <KpiCard
            label="Выручка"
            value={formatMoneyCompact(financial.revenue_rub)}
          />
          <KpiCard
            label="Затраты"
            value={formatMoneyCompact(financial.cost_rub)}
          />
          <KpiCard
            label="Валовая прибыль"
            value={formatMoneyCompact(financial.gross_margin_rub)}
            delta={{
              value:
                marginPositive === true
                  ? "Положительная маржа"
                  : marginPositive === false
                    ? "Отрицательная маржа"
                    : "Нулевая маржа",
              positive: marginPositive,
            }}
          />
          <KpiCard
            label="IRR-proxy"
            value={formatPct(financial.irr)}
            delta={{
              value: "Упрощённая оценка: маржа на затраты, без дисконтирования",
              positive: null,
            }}
          />
        </div>
      </Section>
    </div>
  );
}

// ── Component ─────────────────────────────────────────────────────────────────

interface Props {
  parcel: Polygon;
  variants: ConceptVariant[];
}

export function ConceptVariantsResult({ parcel, variants }: Props) {
  const [active, setActive] = useState(0);

  if (variants.length === 0) {
    return (
      <p style={{ fontSize: 14, color: "var(--fg-secondary)" }}>
        Движок не вернул ни одного варианта застройки.
      </p>
    );
  }

  const activeVariant = variants[Math.min(active, variants.length - 1)];

  return (
    <div>
      {/* Variant tabs */}
      <div
        role="tablist"
        aria-label="Варианты застройки"
        style={{
          display: "flex",
          gap: 8,
          borderBottom: "1px solid var(--border-card)",
          marginBottom: 4,
          overflowX: "auto",
        }}
      >
        {variants.map((v, i) => {
          const isActive = i === active;
          return (
            <button
              key={v.strategy}
              type="button"
              role="tab"
              aria-selected={isActive}
              onClick={() => setActive(i)}
              style={{
                display: "inline-flex",
                alignItems: "center",
                gap: 8,
                padding: "10px 14px",
                background: "transparent",
                border: "none",
                borderBottom: isActive
                  ? "2px solid var(--accent)"
                  : "2px solid transparent",
                color: isActive ? "var(--accent)" : "var(--fg-secondary)",
                fontSize: 14,
                fontWeight: isActive ? 600 : 500,
                cursor: "pointer",
                whiteSpace: "nowrap",
              }}
            >
              {STRATEGY_LABELS[v.strategy]}
              <Badge variant={isActive ? "info" : "neutral"} size="sm">
                {v.teap.apartments_count > 0
                  ? `${formatInt(v.teap.apartments_count)} кв.`
                  : "—"}
              </Badge>
            </button>
          );
        })}
      </div>

      <VariantPanel parcel={parcel} variant={activeVariant} />
    </div>
  );
}
