"use client";
import type { Velocity } from "@/types/site-finder";
import { SectionLabel } from "@/components/ui/SectionLabel";
import { EmptyState } from "@/components/ui/EmptyState";

const BUCKET_ORDER = ["студия", "1", "2", "3", "4", "5+"] as const;
type KnownBucket = (typeof BUCKET_ORDER)[number];

const BUCKET_LABEL: Record<KnownBucket, string> = {
  студия: "Студия",
  "1": "1-к",
  "2": "2-к",
  "3": "3-к",
  "4": "4-к",
  "5+": "5+",
};

interface VelocityBlockProps {
  velocity: Velocity | null | undefined;
}

const CONFIDENCE_COLOR: Record<
  Velocity["confidence"],
  { bg: string; fg: string }
> = {
  high: { bg: "#dcfce7", fg: "#166534" },
  medium: { bg: "#fef3c7", fg: "#854d0e" },
  low: { bg: "#fee2e2", fg: "#991b1b" },
};

const CONFIDENCE_LABEL: Record<Velocity["confidence"], string> = {
  high: "Высокая",
  medium: "Средняя",
  low: "Низкая",
};

// Нейтральный fallback для нераспознанного velocity.confidence (schema drift /
// partial deploy — backend отдал значение вне TS-union "high"|"medium"|"low").
const NEUTRAL_CONFIDENCE_COLOR = { bg: "#f3f4f6", fg: "#73767E" };

function formatPercent(score: number): string {
  return `${Math.round(score * 100)}%`;
}

/**
 * P2 (#1871) / honesty (#1926): провенанс объёма velocity — откуда взяты данные.
 * Делит на два уровня честности:
 *  - `caveat` (видимый --warn-soft баннер) — когда объём НЕ прямые Objective-продажи:
 *    rosreestr_fallback (кадастровый квартал) или proxy_used (оценка по м²/сделка).
 *  - `caption` (приглушённый caption) — когда объём грунтуется на прямых Objective-данных,
 *    показываем долю покрытия без тревоги.
 * Любое поле None/undefined → опускаем (не выдумываем числа). Если показывать
 * нечего — оба null.
 */
interface VelocityProvenance {
  caveat: string | null;
  caption: string | null;
}

function velocityProvenance(velocity: Velocity): VelocityProvenance {
  const isRosreestrFallback = velocity.velocity_source === "rosreestr_fallback";
  const isProxy = velocity.proxy_used === true;

  // Не прямые продажи Objective → честный caveat полным предложением.
  if (isRosreestrFallback || isProxy) {
    const parts: string[] = [];
    if (isProxy && velocity.proxy_sqm_per_deal != null) {
      parts.push(
        `прокси ${velocity.proxy_sqm_per_deal.toLocaleString("ru")} м²/сделка`,
      );
    }
    if (velocity.objective_coverage_pct != null) {
      parts.push(
        `прямые данные Objective: ${Math.round(velocity.objective_coverage_pct)}%`,
      );
    }
    const detail = parts.length > 0 ? ` (${parts.join("; ")})` : "";
    const reason = isRosreestrFallback
      ? "Объём оценён по сделкам кадастрового квартала, а не по прямым продажам Objective"
      : "Объём оценён по прокси-метрике (м² на сделку), а не по прямым продажам Objective";
    return { caveat: `${reason}${detail}.`, caption: null };
  }

  // Прямые Objective-данные → спокойный caption о покрытии.
  if (velocity.objective_coverage_pct != null) {
    return {
      caveat: null,
      caption: `Источник: прямые продажи Objective — покрытие ${Math.round(velocity.objective_coverage_pct)}%.`,
    };
  }
  return { caveat: null, caption: null };
}

/** Словесный диапазон темпа: 0–33 «медленно» / 33–66 «средне» / 66–100 «быстро». */
function paceBand(score: number): { label: string; color: string } {
  if (score >= 0.66)
    return { label: "быстро", color: "var(--success, #0A7A3A)" };
  if (score >= 0.33) return { label: "средне", color: "var(--warn, #9A6700)" };
  return { label: "медленно", color: "var(--danger, #B3261E)" };
}

export function VelocityBlock({ velocity }: VelocityBlockProps) {
  if (!velocity) {
    return (
      <div>
        <SectionLabel style={{ marginBottom: 8 }}>
          Темп продаж конкурентов
        </SectionLabel>
        <EmptyState message="Данные о продажах не найдены (нет конкурентов в радиусе 3км или нет sale_graph данных)" />
      </div>
    );
  }

  const dataAvailable = velocity.velocity_data_available !== false;
  const isRosreestrFallback = velocity.velocity_source === "rosreestr_fallback";
  const isObjectiveSource = velocity.velocity_source === "objective";
  const confColor =
    CONFIDENCE_COLOR[velocity.confidence] ?? NEUTRAL_CONFIDENCE_COLOR;
  const confLabel = CONFIDENCE_LABEL[velocity.confidence] ?? "—";
  const scorePct = formatPercent(velocity.velocity_score);
  const ratio = velocity.monthly_velocity_sqm / velocity.ekb_median_sqm;
  const band = paceBand(velocity.velocity_score);
  const provenance = velocityProvenance(velocity);
  // Вердикт: «×1.4 к медиане ЕКБ — выше рынка» (краткое словесное «быстрее/
  // медленнее рынка» по соотношению, отдельно от шкалы 0–100%).
  const aboveMarket = ratio >= 1;
  const verdict = `×${ratio.toFixed(1)} к медиане ЕКБ — ${
    aboveMarket ? "выше рынка" : "ниже рынка"
  }`;
  const verdictColor = aboveMarket
    ? "var(--success, #0A7A3A)"
    : "var(--danger, #B3261E)";

  return (
    <div>
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          marginBottom: 8,
        }}
      >
        <SectionLabel>Темп продаж конкурентов</SectionLabel>
        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
          {!dataAvailable && (
            <span className="bg-slate-100 text-slate-500 text-xs px-2 py-0.5 rounded">
              нет данных о темпе продаж
            </span>
          )}
          {isObjectiveSource && (
            <span
              style={{
                padding: "2px 8px",
                background: "var(--accent-soft, #DBEAFE)",
                color: "var(--accent, #1D4ED8)",
                borderRadius: 4,
                fontSize: 11,
                fontWeight: 600,
              }}
              title="Объём посчитан по прямым продажам из базы Objective"
            >
              Источник: Objective
            </span>
          )}
          {isRosreestrFallback && (
            <span
              style={{
                padding: "2px 8px",
                background: "var(--warn-soft, #FEF3C7)",
                color: "var(--warn, #9A6700)",
                borderRadius: 4,
                fontSize: 11,
                fontWeight: 600,
              }}
              title="Прямых продаж Objective нет — объём оценён по сделкам кадастрового квартала"
            >
              Источник: квартальные сделки
            </span>
          )}
          <span
            style={{
              padding: "2px 8px",
              background: confColor.bg,
              color: confColor.fg,
              borderRadius: 4,
              fontSize: 11,
              fontWeight: 600,
            }}
            title={`Уверенность: ${confLabel}`}
          >
            {confLabel}
          </span>
        </div>
      </div>

      {/* Score gauge — показываем только если данные есть */}
      {dataAvailable && (
        <div style={{ marginBottom: 12 }}>
          {/* Крупный вердикт — главное число секции */}
          <div
            style={{
              fontSize: 18,
              fontWeight: 600,
              color: verdictColor,
              lineHeight: 1.2,
              marginBottom: 8,
            }}
            title="Соотношение темпа продаж конкурентов к медианному темпу по ЕКБ (м² в месяц)"
          >
            {verdict}
          </div>

          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "baseline",
              fontSize: 12,
              color: "var(--fg-secondary, #5B6066)",
              marginBottom: 4,
            }}
          >
            <span title="Шкала 0–100%: 0–33% медленно, 33–66% средне, 66–100% быстро">
              Темп продаж
            </span>
            <span
              style={{
                fontWeight: 600,
                color: "var(--fg-primary, #111111)",
                fontVariantNumeric: "tabular-nums",
              }}
            >
              {scorePct}
            </span>
          </div>
          <div
            style={{
              background: "var(--border-card, #E6E8EC)",
              borderRadius: 4,
              height: 8,
              overflow: "hidden",
            }}
          >
            <div
              style={{
                background: band.color,
                width: `${velocity.velocity_score * 100}%`,
                height: "100%",
              }}
            />
          </div>
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              fontSize: 11,
              color: "var(--fg-tertiary, #73767E)",
              marginTop: 4,
            }}
          >
            <span>выше — продаётся быстрее</span>
            <span style={{ fontWeight: 600, color: band.color }}>
              {band.label}
            </span>
          </div>

          {/* Сами м²/мес — мелкий caption под вердиктом */}
          <div
            style={{
              fontSize: 11,
              color: "var(--fg-tertiary, #73767E)",
              marginTop: 6,
              fontVariantNumeric: "tabular-nums",
            }}
          >
            {Math.round(velocity.monthly_velocity_sqm).toLocaleString("ru")}{" "}
            м²/мес против{" "}
            {Math.round(velocity.ekb_median_sqm).toLocaleString("ru")} м²/мес
            (медиана ЕКБ)
          </div>

          {/* Честность данных (#1871/#1926) — спокойный caption когда объём
              грунтуется на прямых продажах Objective. */}
          {provenance.caption && (
            <div
              style={{
                fontSize: 11,
                color: "var(--fg-tertiary, #73767E)",
                marginTop: 6,
              }}
            >
              {provenance.caption}
            </div>
          )}

          {/* Честность данных (#1871/#1926) — видимый caveat (паттерн --warn-soft)
              когда объём НЕ прямые продажи Objective (прокси / кадастровый квартал). */}
          {provenance.caveat && (
            <div
              role="note"
              style={{
                marginTop: 8,
                padding: "8px 12px",
                background: "var(--warn-soft, #FEF3C7)",
                borderRadius: 8,
                fontSize: 11,
                lineHeight: "16px",
                color: "var(--warn, #9A6700)",
              }}
            >
              {provenance.caveat}
            </div>
          )}
        </div>
      )}

      {/* Period + competitors meta */}
      <div style={{ fontSize: 12, color: "#6b7280", marginBottom: 8 }}>
        В радиусе 3 км: <b>{velocity.competitors_count}</b> ЖК
        {dataAvailable && (
          <>
            {" "}
            &middot; период{" "}
            <b>
              {velocity.period.start} &rarr; {velocity.period.end}
            </b>{" "}
            ({velocity.months_observed} мес)
          </>
        )}
      </div>

      {/* By room bucket aggregate */}
      {velocity.by_room_bucket && (
        <div style={{ marginBottom: 12 }}>
          <SectionLabel>По комнатности</SectionLabel>
          {/* Пустой объект / все бакеты отсутствуют → таблица отрисовывала
              голые заголовки без строк (выглядело сломанной, #1953). Показываем
              аккуратный empty-state вместо пустой шапки. */}
          {BUCKET_ORDER.every((b) => !velocity.by_room_bucket?.[b]) ? (
            <div style={{ marginTop: 4 }}>
              <EmptyState message="Нет данных по комнатности в радиусе" />
            </div>
          ) : (
            <table
              style={{
                width: "100%",
                fontSize: 12,
                borderCollapse: "collapse",
                marginTop: 4,
              }}
            >
              <thead>
                <tr
                  style={{
                    color: "#6b7280",
                    borderBottom: "1px solid #e5e7eb",
                  }}
                >
                  <th
                    style={{
                      textAlign: "left",
                      padding: "4px 8px",
                      fontWeight: 500,
                    }}
                  >
                    Комната
                  </th>
                  <th
                    style={{
                      textAlign: "right",
                      padding: "4px 8px",
                      fontWeight: 500,
                    }}
                  >
                    Сделок
                  </th>
                  <th
                    style={{
                      textAlign: "right",
                      padding: "4px 8px",
                      fontWeight: 500,
                    }}
                  >
                    м²
                  </th>
                  <th
                    style={{
                      textAlign: "right",
                      padding: "4px 8px",
                      fontWeight: 500,
                    }}
                  >
                    ЖК
                  </th>
                </tr>
              </thead>
              <tbody>
                {BUCKET_ORDER.map((b) => {
                  const stat = velocity.by_room_bucket?.[b];
                  if (!stat) return null;
                  return (
                    <tr key={b} style={{ borderBottom: "1px solid #f3f4f6" }}>
                      <td style={{ padding: "4px 8px" }}>{BUCKET_LABEL[b]}</td>
                      <td
                        style={{
                          padding: "4px 8px",
                          textAlign: "right",
                          fontWeight: 500,
                        }}
                      >
                        {stat.units.toLocaleString("ru")}
                      </td>
                      <td
                        style={{
                          padding: "4px 8px",
                          textAlign: "right",
                          color: "#6b7280",
                        }}
                      >
                        {Math.round(stat.sqm).toLocaleString("ru")}
                      </td>
                      <td
                        style={{
                          padding: "4px 8px",
                          textAlign: "right",
                          color: "#6b7280",
                        }}
                      >
                        {stat.complexes_count}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          )}
        </div>
      )}

      {/* Top competitors */}
      {dataAvailable && velocity.sample_competitors.length > 0 && (
        <div>
          <SectionLabel style={{ marginBottom: 6 }}>Топ продавцов</SectionLabel>
          <table
            style={{
              width: "100%",
              fontSize: 12,
              borderCollapse: "collapse",
              marginTop: 4,
            }}
          >
            <thead>
              <tr
                style={{
                  color: "#6b7280",
                  borderBottom: "1px solid #e5e7eb",
                }}
              >
                <th
                  style={{
                    textAlign: "left",
                    padding: "4px 8px",
                    fontWeight: 500,
                  }}
                >
                  Название
                </th>
                <th
                  style={{
                    textAlign: "right",
                    padding: "4px 8px",
                    fontWeight: 500,
                  }}
                >
                  Расст.
                </th>
                <th
                  style={{
                    textAlign: "right",
                    padding: "4px 8px",
                    fontWeight: 500,
                  }}
                >
                  Продано м²
                </th>
              </tr>
            </thead>
            <tbody>
              {velocity.sample_competitors.map((c) => (
                <tr
                  key={c.obj_id}
                  style={{ borderBottom: "1px solid #f3f4f6" }}
                >
                  <td style={{ padding: "4px 8px" }}>
                    {c.name ?? `obj#${c.obj_id}`}
                    {c.obj_class && (
                      <span
                        style={{
                          marginLeft: 6,
                          fontSize: 10,
                          color: "#9ca3af",
                        }}
                      >
                        {c.obj_class}
                      </span>
                    )}
                    {c.by_room_bucket && (
                      <div
                        style={{ fontSize: 10, color: "#9ca3af", marginTop: 2 }}
                      >
                        {BUCKET_ORDER.filter(
                          (b) => (c.by_room_bucket?.[b] ?? 0) > 0,
                        )
                          .map(
                            (b) => `${BUCKET_LABEL[b]} ${c.by_room_bucket![b]}`,
                          )
                          .join(" · ")}
                      </div>
                    )}
                  </td>
                  <td
                    style={{
                      padding: "4px 8px",
                      textAlign: "right",
                      color: "#6b7280",
                    }}
                  >
                    {Math.round(c.distance_m)}м
                  </td>
                  <td
                    style={{
                      padding: "4px 8px",
                      textAlign: "right",
                      fontWeight: 500,
                    }}
                  >
                    {Math.round(c.total_sqm_period).toLocaleString("ru")}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}
