"use client";

import type { ParcelAnalysis } from "@/types/site-finder";
import { SectionLabel } from "@/components/ui/SectionLabel";
import { EmptyState } from "@/components/ui/EmptyState";
import { MarketTrendBlock } from "./MarketTrendBlock";
import { BestLayoutsBlock } from "./BestLayoutsBlock";
import { CompetitorTable } from "./CompetitorTable";
import { Pipeline24moBlock } from "./Pipeline24moBlock";
import { SuccessRecommendationBlock } from "./SuccessRecommendationBlock";
import { VelocityBlock } from "./VelocityBlock";

interface Props {
  data: ParcelAnalysis;
}

/** Derive radius_km from available nested fields. */
function getRadiusKm(data: ParcelAnalysis): number {
  return data.market_trend?.radius_km ?? data.pipeline_24mo?.radius_km ?? 3;
}

/**
 * Max success score (%) from success_recommendation ranking.
 * Returns null when recommendation is absent or ranking is empty.
 */
function getMaxMixPct(data: ParcelAnalysis): number | null {
  const ranking = data.success_recommendation?.ranking;
  if (!ranking || ranking.length === 0) return null;
  const maxScore = Math.max(...ranking.map((r) => r.success_score));
  return Math.round(maxScore * 100);
}

/**
 * Estimated sales period in months (supply / flats_per_month).
 * Uses pipeline_24mo.flats_total as supply proxy, velocity for rate.
 * Assumes ~50 m² avg flat for unit conversion.
 */
function getSalesPeriodMonths(data: ParcelAnalysis): number | null {
  const supply = data.pipeline_24mo?.flats_total;
  const velocitySqm = data.velocity?.monthly_velocity_sqm;
  if (!supply || !velocitySqm || velocitySqm <= 0) return null;
  const flatsPerMonth = velocitySqm / 50;
  return Math.round(supply / flatsPerMonth);
}

export function MarketTab({ data }: Props) {
  const hasTrend = "market_trend" in data;
  const hasRecommendation = "success_recommendation" in data;
  const hasPipeline = data.pipeline_24mo !== undefined;
  const hasVelocity = "velocity" in data;
  const hasAny =
    hasTrend ||
    hasRecommendation ||
    hasPipeline ||
    hasVelocity ||
    data.competitors.length > 0;

  // ── Above-the-fold values ────────────────────────────────────────────────
  // Maxim's spec: «ЖК старше года → не конкурент». Filter active competitors:
  //   - site_status === 'Строящиеся' → активен
  //   - либо ready_dt в будущем → активен (готовность ещё не наступила)
  //   - либо ready_dt в пределах последнего года → активен (свежие продажи)
  //   - иначе (Сданные >1y назад) → не конкурент, скрыт
  const REL_MS = 365 * 24 * 60 * 60 * 1000;
  const yearAgoTs = Date.now() - REL_MS;
  const relevantCompetitors = data.competitors.filter((c) => {
    if (c.site_status === "Строящиеся") return true;
    if (!c.ready_dt) return false;
    const ts = new Date(c.ready_dt).getTime();
    if (Number.isNaN(ts)) return false;
    return ts >= yearAgoTs;
  });
  const activeCount = relevantCompetitors.length;
  const radiusKm = getRadiusKm(data);
  // Treat zero velocity as "no data" — backend returns 0 when competitors
  // are unmapped to Objective ground truth (OBJ-3). Showing "0.0 м²/мес"
  // is misleading; "—" makes it clear data is unavailable.
  const velocityRaw = data.velocity?.monthly_velocity_sqm;
  const velocityPerMonth =
    velocityRaw != null && velocityRaw > 0 ? velocityRaw : null;
  const maxMixPct = getMaxMixPct(data);
  const salesPeriodMonths = getSalesPeriodMonths(data);

  const showHeadlineBar = activeCount > 0 || velocityPerMonth !== null;

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
      {/* ── Above-the-fold: Headline-bar + 3 KPI ─────────────────────────── */}
      {showHeadlineBar && (
        <>
          {/* Headline-bar — one sentence verdict */}
          <div
            style={{
              background: "var(--bg-headline, #0F172A)",
              color: "var(--fg-on-dark, #E2E8F0)",
              borderRadius: 12,
              padding: "14px 18px",
              fontSize: 15,
              fontWeight: 500,
              lineHeight: 1.4,
            }}
          >
            <strong>
              {activeCount} активных в {radiusKm}км
            </strong>
            {" · велосити "}
            <strong>
              {velocityPerMonth !== null
                ? `${velocityPerMonth.toFixed(1)} м²/мес`
                : "—"}
            </strong>
            {" · рекомендуемый mix "}
            <strong>{maxMixPct !== null ? `${maxMixPct}%` : "—"}</strong>
          </div>

          {/* 3 KPI cards */}
          <div className="grid grid-cols-3 gap-3 mb-4">
            {/* KPI 1: Активные ЖК */}
            <div
              style={{
                background: "#fff",
                border: "1px solid #e6e8ec",
                borderRadius: 12,
                padding: "12px 16px",
              }}
            >
              <div
                style={{
                  fontSize: 11,
                  textTransform: "uppercase" as const,
                  letterSpacing: "0.04em",
                  color: "#5b6066",
                  fontWeight: 500,
                }}
              >
                Активные ЖК
              </div>
              <div
                style={{
                  marginTop: 6,
                  fontSize: 28,
                  fontWeight: 600,
                  color: "#111",
                  fontVariantNumeric: "tabular-nums",
                }}
              >
                {activeCount}
              </div>
              <div style={{ marginTop: 4, fontSize: 12, color: "#73767e" }}>
                строящихся и недавно сданных в радиусе {radiusKm}км
              </div>
            </div>

            {/* KPI 2: Велосити */}
            <div
              style={{
                background: "#fff",
                border: "1px solid #e6e8ec",
                borderRadius: 12,
                padding: "12px 16px",
              }}
            >
              <div
                style={{
                  fontSize: 11,
                  textTransform: "uppercase" as const,
                  letterSpacing: "0.04em",
                  color: "#5b6066",
                  fontWeight: 500,
                }}
              >
                Велосити
              </div>
              <div
                style={{
                  marginTop: 6,
                  display: "flex",
                  alignItems: "baseline",
                  gap: 4,
                }}
              >
                <span
                  style={{
                    fontSize: 28,
                    fontWeight: 600,
                    color: "#111",
                    fontVariantNumeric: "tabular-nums",
                  }}
                >
                  {velocityPerMonth !== null
                    ? velocityPerMonth.toFixed(1)
                    : "—"}
                </span>
                {velocityPerMonth !== null && (
                  <span style={{ fontSize: 13, color: "#5b6066" }}>м²/мес</span>
                )}
              </div>
              <div style={{ marginTop: 4, fontSize: 12, color: "#73767e" }}>
                ср. темп продаж конкурентов
              </div>
            </div>

            {/* KPI 3: Срок продаж */}
            <div
              style={{
                background: "#fff",
                border: "1px solid #e6e8ec",
                borderRadius: 12,
                padding: "12px 16px",
              }}
            >
              <div
                style={{
                  fontSize: 11,
                  textTransform: "uppercase" as const,
                  letterSpacing: "0.04em",
                  color: "#5b6066",
                  fontWeight: 500,
                }}
              >
                Срок продаж
              </div>
              <div
                style={{
                  marginTop: 6,
                  display: "flex",
                  alignItems: "baseline",
                  gap: 4,
                }}
              >
                <span
                  style={{
                    fontSize: 28,
                    fontWeight: 600,
                    color: "#111",
                    fontVariantNumeric: "tabular-nums",
                  }}
                >
                  {salesPeriodMonths !== null ? salesPeriodMonths : "—"}
                </span>
                {salesPeriodMonths !== null && (
                  <span style={{ fontSize: 13, color: "#5b6066" }}>мес</span>
                )}
              </div>
              <div style={{ marginTop: 4, fontSize: 12, color: "#73767e" }}>
                supply / велосити (оценка)
              </div>
            </div>
          </div>
        </>
      )}

      {/* ── Main content blocks ───────────────────────────────────────────── */}

      {/* Competitors */}
      {relevantCompetitors.length > 0 && (
        <div>
          <SectionLabel style={{ marginBottom: 12 }}>
            Конкуренты ({relevantCompetitors.length} из{" "}
            {data.competitors.length}
            {" — фильтр: строящиеся или сданы ≤1 года)"}
          </SectionLabel>
          <CompetitorTable
            competitors={relevantCompetitors}
            districtName={data.district?.district_name}
          />
        </div>
      )}

      {/* Issue #113 — data-driven ТЗ на проектирование */}
      <BestLayoutsBlock cadNum={data.cad_num} />

      {/* D2 (#34) — Velocity-score */}
      {hasVelocity && (
        <div
          style={{
            border: "1px solid #e5e7eb",
            borderRadius: 10,
            padding: "14px 18px",
            background: "#fff",
          }}
        >
          <VelocityBlock velocity={data.velocity} />
        </div>
      )}

      {/* Market trend */}
      {hasTrend && (
        <div
          style={{
            border: "1px solid #e5e7eb",
            borderRadius: 10,
            padding: "14px 18px",
            background: "#fff",
          }}
        >
          <MarketTrendBlock trend={data.market_trend} />
        </div>
      )}

      {/* D4 (#36) — Pipeline 24mo */}
      {data.pipeline_24mo && <Pipeline24moBlock data={data.pipeline_24mo} />}

      {/* Success recommendation */}
      {hasRecommendation && (
        <div>
          <SectionLabel style={{ marginBottom: 12 }}>
            Что хорошо продаётся
          </SectionLabel>
          <SuccessRecommendationBlock
            recommendation={data.success_recommendation}
          />
        </div>
      )}

      {!hasAny && <EmptyState message="Рыночные данные недоступны" />}
    </div>
  );
}