"use client";

import { Fragment } from "react";
import type { Ref } from "react";
import { tokens } from "./tokens";
import {
  ranges,
  resultCards,
  resultMeta,
  scatterMini,
  sources,
} from "./fixtures";
import type { ResultPanelData } from "./mappers";

const {
  accent,
  accentDeep,
  onAccent,
  ink,
  body,
  body2,
  muted,
  muted2,
  muted3,
  line,
  line2,
  lineSoft,
  bracket,
  barLo,
  barMid,
  track,
  success,
  hint,
  disabledBorder,
  disabledValue,
  disabledLabel,
  infoSoftBg,
  surface,
  font,
} = tokens;

// Default presentation data (unwired usage): the existing design fixtures.
const RESULT_FIXTURE: ResultPanelData = {
  cards: resultCards,
  meta: resultMeta,
  ranges,
  scatterMini,
  sources,
};

interface ResultPanelProps {
  data?: ResultPanelData;
  onNavigate: (i: number) => void;
  // #2264 C7: after a successful estimate the page moves focus here (a labelled,
  // programmatically-focusable region) so keyboard/SR users land on the result
  // instead of the <body>. tabIndex={-1} makes it focus()-able without adding a
  // Tab stop.
  regionRef?: Ref<HTMLDivElement>;
}

// Mini-histogram column tint: peak column = accent, its neighbours = mid, rest = lo.
function barColor(i: number, bars: number[]): string {
  const peak = bars.indexOf(Math.max(...bars));
  if (i === peak) return accent;
  if (i === peak - 1 || i === peak + 1) return barMid;
  return barLo;
}

// Render a string[] with <br/> between lines (faithful to the design line breaks).
function lines(parts: string[]) {
  return parts.map((part, i) => (
    <Fragment key={i}>
      {i > 0 && <br />}
      {part}
    </Fragment>
  ));
}

// Split a source name on its parenthetical so the design's forced
// "РОСРЕЕСТР / (ВНУТР.)" two-line break (line-height 1.3) is reproduced; plain
// names without " (" stay on a single line.
function sourceName(name: string) {
  const idx = name.indexOf(" (");
  if (idx === -1) return name;
  return (
    <>
      {name.slice(0, idx)}
      <br />
      {name.slice(idx + 1)}
    </>
  );
}

export default function ResultPanel({
  data = RESULT_FIXTURE,
  onNavigate,
  regionRef,
}: ResultPanelProps) {
  return (
    <div
      ref={regionRef}
      role="region"
      aria-labelledby="v2-result-heading"
      tabIndex={-1}
      style={{
        display: "flex",
        flexDirection: "column",
        gap: 14,
        minWidth: 0,
        outline: "none",
      }}
    >
      <style>{`
        .rp-more { transition: opacity 120ms ease; }
        .rp-more:hover { opacity: .6; }
      `}</style>

      {/* header */}
      <div
        style={{
          display: "flex",
          alignItems: "baseline",
          justifyContent: "space-between",
        }}
      >
        <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
          <span style={{ fontFamily: font.mono, fontSize: 15, color: accent }}>
            02
          </span>
          {/* Panel heading — real <h2> + the region's accessible name
              (aria-labelledby). Preflight not loaded → reset UA margin inline. */}
          <h2
            id="v2-result-heading"
            style={{
              margin: 0,
              fontSize: 13,
              fontWeight: 600,
              letterSpacing: 2,
            }}
          >
            РЕЗУЛЬТАТ ОЦЕНКИ
          </h2>
        </div>
        <div
          style={{
            display: "flex",
            alignItems: "center",
            gap: 22,
            fontSize: 10,
            letterSpacing: 1,
            color: muted,
          }}
        >
          <span>
            ИСТОЧНИКОВ:{" "}
            <b style={{ color: ink, fontFamily: font.mono }}>
              {data.meta.sources}
            </b>
          </span>
          <span>
            ДОСТОВЕРНОСТЬ: <b style={{ color: ink }}>{data.meta.confidence}</b>
          </span>
          <span>
            РАЗБРОС ЦЕН{" "}
            <b style={{ color: accent, fontFamily: font.mono }}>
              {data.meta.cv}
            </b>
          </span>
        </div>
      </div>

      {/* result cards */}
      <div
        style={{
          display: "grid",
          // #1991 — the registry (ДКП) tile is an external anchor, not a peer
          // of the two prices that actually matter (asking / expected). Equal
          // 1fr columns still read as "three equivalent options" even with
          // the demoted colors/type-scale below, so the two primary cards get
          // ~50% more width and the registry tile narrows into a visibly
          // secondary, reference-only column (closer to a convergence strip
          // than a full-size card, per audit acceptance criteria).
          gridTemplateColumns: "1.3fr 1.3fr 0.85fr",
          gap: 14,
          flex: "0 0 auto",
        }}
      >
        {data.cards.map((card, ci) => {
          // Price hierarchy (audit H2 + M1). The three cards are NOT equal weight:
          //   ci 0 — РЕКОМЕНДОВАННАЯ ЦЕНА В ОБЪЯВЛЕНИИ (market asking, baseline)
          //   ci 1 — ОЖИДАЕМАЯ ЦЕНА СДЕЛКИ (the real answer → headline)
          //   ci 2 — ДКП · РОСРЕЕСТР (registry reference, ~−43% → demoted)
          // The headline gets an accent border + tint + glow + a larger accent
          // value so the user can't confuse it with the registry figure; the
          // registry card is demoted to a softer, smaller, muted "СПРАВОЧНО"
          // tile. Value scale reads expected(40) ≫ asking(30) > ДКП(28).
          // #1991 — column width above is the third, independent axis: asking
          // and expected visually dominate the row, ДКП is narrow/secondary.
          //
          // H1 — when the expected card has no prediction (emptyNote), it drops
          // to an honest empty-state and the accent frame moves onto the asking
          // card (ci 0) so the panel always has ONE clear headline, never a hole.
          const expectedEmpty = Boolean(data.cards[1]?.emptyNote);
          const isEmptyCard = Boolean(card.emptyNote);
          const isRegistry = ci === 2;
          const headlineIndex = expectedEmpty ? 0 : 1;
          const isHeadline = !isEmptyCard && ci === headlineIndex;
          const isAsking = ci === 0;
          return (
          <div
            key={ci}
            style={{
              position: "relative",
              background: isHeadline
                ? infoSoftBg
                : isRegistry
                  ? surface.w40
                  : surface.w55,
              backdropFilter: "blur(6px)",
              border: isHeadline
                ? `1.5px solid ${accent}`
                : isRegistry
                  ? `1px solid ${lineSoft}`
                  : `1px solid ${line2}`,
              borderRadius: 8,
              padding: "15px 16px 13px",
              boxShadow: isHeadline
                ? "0 6px 22px rgba(46,139,255,.16)"
                : undefined,
            }}
          >
            <div
              style={{
                position: "absolute",
                left: -1,
                top: -1,
                width: 12,
                height: 12,
                borderLeft: `1.5px solid ${isHeadline ? accent : bracket}`,
                borderTop: `1.5px solid ${isHeadline ? accent : bracket}`,
              }}
            />
            <div
              style={{
                display: "flex",
                alignItems: "flex-start",
                justifyContent: "space-between",
                gap: 8,
              }}
            >
              <div
                style={{
                  fontSize: 9.5,
                  letterSpacing: 1.5,
                  // Contrast follow-up (audit #2266): accent (#2e8bff) on the
                  // headline card's pale infoSoftBg tint measured ≈2.87:1 — below
                  // even the AA "large text" floor (3:1). accentDeep is the same
                  // brand hue, darkened (existing token, not a one-off hex) — it
                  // clears ~4.2:1 here, so the label reads reliably too.
                  color: isHeadline ? accentDeep : isRegistry ? muted2 : body2,
                  fontWeight: isHeadline ? 600 : undefined,
                  lineHeight: 1.6,
                }}
              >
                {lines(card.title)}
              </div>
              {/* #1991 — explicit "this is the figure that goes into the offer"
                  mark on the headline card, so the two dominant prices are not
                  just visually bigger but literally labelled which one to quote. */}
              {isHeadline && !isEmptyCard && (
                <span
                  style={{
                    flex: "0 0 auto",
                    fontSize: 8,
                    fontWeight: 700,
                    letterSpacing: 1,
                    color: onAccent,
                    background: accentDeep,
                    borderRadius: 3,
                    padding: "3px 6px",
                    whiteSpace: "nowrap",
                  }}
                >
                  В ОФФЕР
                </span>
              )}
            </div>
            {isRegistry && (
              <div
                style={{
                  fontSize: 8,
                  letterSpacing: 1.2,
                  color: muted3,
                  marginTop: 3,
                }}
              >
                {/* §M8 — расшифровка «ДКП» один раз на секцию. */}
                СПРАВОЧНО · ДОГОВОРЫ КУПЛИ-ПРОДАЖИ
              </div>
            )}
            {/* H1 empty-state: no bare «—» / gauge / «· с учётом торга» — just an
                honest note pointing at the recommended asking price. */}
            {isEmptyCard ? (
              <div
                style={{
                  marginTop: 12,
                  fontSize: 11,
                  lineHeight: 1.5,
                  color: body,
                  maxWidth: "94%",
                }}
              >
                {card.emptyNote}
              </div>
            ) : (
              <>
                <div
                  style={{
                    marginTop: 14,
                    display: "flex",
                    alignItems: "baseline",
                    gap: 6,
                  }}
                >
                  <span
                    style={{
                      fontFamily: font.mono,
                      // M1 — asking (30) sits above the ДКП «справочно» tier (28)
                      // yet clearly below the accent headline (40).
                      fontSize: isHeadline ? 40 : isRegistry ? 28 : 30,
                      fontWeight: isHeadline ? 600 : 400,
                      letterSpacing: -1,
                      // Contrast follow-up (audit #2266) — accentDeep, not
                      // accent, for the same reason as the title label above.
                      color: isHeadline
                        ? accentDeep
                        : isRegistry
                          ? muted
                          : isAsking
                            ? ink
                            : undefined,
                    }}
                  >
                    {card.value}
                  </span>
                  <span
                    style={{
                      fontSize: 13,
                      color: muted,
                      letterSpacing: 1,
                      whiteSpace: "nowrap",
                    }}
                  >
                    {card.unit}
                  </span>
                </div>
                {card.range && (
                  <div
                    style={{
                      fontFamily: font.mono,
                      fontSize: 11,
                      color: muted,
                      marginTop: 10,
                    }}
                  >
                    {card.range}
                  </div>
                )}
                {card.ppm && (
                  <div
                    style={{
                      fontFamily: font.mono,
                      fontSize: 10,
                      color: muted2,
                      marginTop: 4,
                    }}
                  >
                    {card.ppm}
                  </div>
                )}
                {card.note && (
                  <div
                    style={{
                      fontSize: 9,
                      color: muted2,
                      marginTop: 4,
                      lineHeight: 1.4,
                      maxWidth: "82%",
                    }}
                  >
                    {card.note}
                  </div>
                )}
              </>
            )}

            {isEmptyCard ? (
              <button
                type="button"
                className="rp-more"
                onClick={() => onNavigate(card.nav)}
                aria-label={`Подробнее — ${card.title.join(" ")}`}
                style={{
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "flex-end",
                  gap: 4,
                  cursor: "pointer",
                  fontSize: 9,
                  letterSpacing: 0.3,
                  color: accent,
                  width: "100%",
                  background: "none",
                  border: "none",
                  padding: 0,
                  margin: 0,
                  marginTop: 16,
                  fontFamily: "inherit",
                }}
              >
                Подробнее <span>→</span>
              </button>
            ) : card.bars ? (
              <div
                style={{
                  display: "flex",
                  alignItems: "flex-end",
                  justifyContent: "space-between",
                  gap: 12,
                  marginTop: 12,
                }}
              >
                <div
                  style={{
                    display: "flex",
                    alignItems: "flex-end",
                    gap: 2,
                    height: 20,
                    flex: 1,
                  }}
                >
                  {card.bars.map((h, bi) => (
                    <span
                      key={bi}
                      style={{
                        flex: 1,
                        height: `${h}%`,
                        background: barColor(bi, card.bars as number[]),
                      }}
                    />
                  ))}
                </div>
                <button
                  type="button"
                  className="rp-more"
                  onClick={() => onNavigate(card.nav)}
                  aria-label={`Подробнее — ${card.title.join(" ")}`}
                  style={{
                    display: "flex",
                    alignItems: "center",
                    gap: 4,
                    cursor: "pointer",
                    fontSize: 9,
                    letterSpacing: 0.3,
                    color: accent,
                    whiteSpace: "nowrap",
                    background: "none",
                    border: "none",
                    padding: 0,
                    margin: 0,
                    fontFamily: "inherit",
                  }}
                >
                  Подробнее <span>→</span>
                </button>
              </div>
            ) : (
              // M2 — calm delta pill (was a 51px circular gauge that read like a
              // tech "занижение" indicator). Full text «−18% к цене объявления»,
              // neutral accentDeep on a soft-blue chip, tabular-nums.
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "space-between",
                  gap: 10,
                  marginTop: 14,
                }}
              >
                {card.delta ? (
                  <span
                    style={{
                      display: "inline-flex",
                      alignItems: "baseline",
                      gap: 5,
                      background: infoSoftBg,
                      border: `1px solid ${lineSoft}`,
                      borderRadius: 20,
                      padding: "3px 10px",
                      color: accentDeep,
                      fontFamily: font.sans,
                      fontVariantNumeric: "tabular-nums",
                      whiteSpace: "nowrap",
                    }}
                  >
                    <span
                      style={{
                        fontFamily: font.mono,
                        fontSize: 12,
                        fontWeight: 600,
                      }}
                    >
                      {card.delta}
                    </span>
                    <span style={{ fontSize: 9.5, letterSpacing: 0.2 }}>
                      {card.deltaLabel}
                    </span>
                  </span>
                ) : (
                  <span />
                )}
                <button
                  type="button"
                  className="rp-more"
                  onClick={() => onNavigate(card.nav)}
                  aria-label={`Подробнее — ${card.title.join(" ")}`}
                  style={{
                    display: "flex",
                    alignItems: "center",
                    gap: 4,
                    cursor: "pointer",
                    fontSize: 9,
                    letterSpacing: 0.3,
                    color: accent,
                    whiteSpace: "nowrap",
                    background: "none",
                    border: "none",
                    padding: 0,
                    margin: 0,
                    fontFamily: "inherit",
                  }}
                >
                  Подробнее <span>→</span>
                </button>
              </div>
            )}
          </div>
          );
        })}
      </div>

      {/* §1.2 честный разброс: диапазоны цен = рыночный спред, НЕ погрешность
          оценки. Ставим сразу под ценовыми карточками, чтобы широкий диапазон
          не читался как «неуверенность расчёта». */}
      <div
        style={{
          // M3 — было 10px muted-микропринт; повышено до 12px body, чтобы
          // ключевая honest-оговорка о разбросе читалась, а не терялась.
          fontSize: 12,
          lineHeight: 1.5,
          color: body,
          marginTop: -4,
        }}
      >
        Диапазоны показывают разброс цен на рынке, а не погрешность оценки.
      </div>

      {/* ranges + radar */}
      <div
        style={{
          position: "relative",
          background: surface.w50,
          backdropFilter: "blur(6px)",
          border: `1px solid ${line2}`,
          borderRadius: 8,
          padding: "18px 20px",
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 24,
          alignItems: "center",
          flex: "0 0 auto",
        }}
      >
        <div
          style={{
            position: "absolute",
            right: -1,
            bottom: -1,
            width: 13,
            height: 13,
            borderRight: `1.5px solid ${bracket}`,
            borderBottom: `1.5px solid ${bracket}`,
          }}
        />

        {/* left range — ads */}
        <div>
          <div
            style={{
              fontSize: 9,
              letterSpacing: 1.3,
              color: muted2,
              lineHeight: 1.5,
            }}
          >
            {lines(data.ranges.ads.label)}
          </div>
          <div
            style={{
              fontFamily: font.mono,
              fontSize: 11,
              color: muted,
              margin: "12px 0 16px",
            }}
          >
            медиана · <b style={{ color: ink }}>{data.ranges.ads.median}</b>
          </div>
          <div
            style={{
              position: "relative",
              height: 3,
              background: track,
              borderRadius: 2,
            }}
          >
            <div
              style={{
                position: "absolute",
                left: data.ranges.ads.marker.fillLeft,
                right: data.ranges.ads.marker.fillRight,
                top: 0,
                bottom: 0,
                background: `linear-gradient(90deg,${barMid},${accent})`,
                borderRadius: 2,
              }}
            />
            <div
              style={{
                position: "absolute",
                left: data.ranges.ads.marker.dotLeft,
                top: "50%",
                transform: "translate(-50%,-50%)",
                width: 3,
                height: 16,
                borderRadius: 1,
                background: accent,
              }}
            />
          </div>
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              fontFamily: font.mono,
              fontSize: 10,
              color: muted2,
              marginTop: 10,
            }}
          >
            <span>{data.ranges.ads.lo}</span>
            <span style={{ color: accent }}>{data.ranges.ads.median}</span>
            <span>{data.ranges.ads.hi}</span>
          </div>
        </div>

        {/* right range — deals */}
        <div>
          <div
            style={{
              fontSize: 9,
              letterSpacing: 1.3,
              color: muted2,
              lineHeight: 1.5,
            }}
          >
            {lines(data.ranges.deals.label)}
          </div>
          <div
            style={{
              fontFamily: font.mono,
              fontSize: 11,
              color: muted,
              margin: "12px 0 16px",
            }}
          >
            медиана · <b style={{ color: ink }}>{data.ranges.deals.median}</b>
          </div>
          <div
            style={{
              position: "relative",
              height: 3,
              background: track,
              borderRadius: 2,
            }}
          >
            <div
              style={{
                position: "absolute",
                left: data.ranges.deals.marker.fillLeft,
                right: data.ranges.deals.marker.fillRight,
                top: 0,
                bottom: 0,
                background: `linear-gradient(90deg,${barMid},${accent})`,
                borderRadius: 2,
              }}
            />
            <div
              style={{
                position: "absolute",
                left: data.ranges.deals.marker.dotLeft,
                top: "50%",
                transform: "translate(-50%,-50%)",
                width: 3,
                height: 16,
                borderRadius: 1,
                background: accent,
              }}
            />
          </div>
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              fontFamily: font.mono,
              fontSize: 10,
              color: muted2,
              marginTop: 10,
            }}
          >
            <span>{data.ranges.deals.lo}</span>
            <span style={{ color: accent }}>{data.ranges.deals.median}</span>
            <span>{data.ranges.deals.hi}</span>
          </div>
        </div>
      </div>

      {/* sources */}
      <div
        style={{
          background: surface.w50,
          backdropFilter: "blur(6px)",
          border: `1px solid ${line2}`,
          borderRadius: 8,
          padding: "14px 18px 13px",
          flex: 1,
          minHeight: 0,
          display: "flex",
          flexDirection: "column",
        }}
      >
        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            marginBottom: 11,
          }}
        >
          <span
            style={{
              fontSize: 11,
              fontWeight: 600,
              letterSpacing: 2,
              color: ink,
            }}
          >
            ИСТОЧНИКИ ДАННЫХ
          </span>
          <button
            type="button"
            className="rp-more"
            onClick={() => onNavigate(2)}
            aria-label="Подробнее — источники данных"
            style={{
              display: "flex",
              alignItems: "center",
              gap: 4,
              cursor: "pointer",
              fontSize: 9.5,
              letterSpacing: 0.3,
              color: accent,
              background: "none",
              border: "none",
              padding: 0,
              margin: 0,
              fontFamily: "inherit",
            }}
          >
            Подробнее <span>→</span>
          </button>
        </div>
        {/* Fix #1 (audit) — the tile counts below are summed from the top-10
            persisted sample, which can be less than builtOn's full n_analogs
            total (footer, below) for large result sets. */}
        {data.meta.sourcesNote && (
          <div style={{ fontSize: 9.5, color: hint, marginBottom: 8 }}>
            {data.meta.sourcesNote}
          </div>
        )}
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(7,1fr)",
            gap: 9,
            flex: 1,
            minHeight: 0,
            alignItems: "stretch",
            alignContent: "stretch",
          }}
        >
          {data.sources.map((s, si) =>
            s.active ? (
              <div
                key={si}
                style={{
                  border: `1px solid ${line}`,
                  borderRadius: 6,
                  padding: "10px 9px",
                  display: "flex",
                  flexDirection: "column",
                  background: surface.w50,
                }}
              >
                <div
                  style={{
                    fontSize: 9,
                    letterSpacing: 0.5,
                    color: ink,
                    fontWeight: 600,
                    ...(s.name.includes(" (") ? { lineHeight: 1.3 } : {}),
                  }}
                >
                  {sourceName(s.name)}
                </div>
                <div
                  style={{
                    fontFamily: font.mono,
                    fontSize: 26,
                    fontWeight: 300,
                    marginTop: "auto",
                  }}
                >
                  {s.count}
                </div>
                <div
                  style={{
                    display: "flex",
                    alignItems: "center",
                    gap: 5,
                    fontSize: 9,
                    color: muted,
                    marginTop: 3,
                  }}
                >
                  <span
                    style={{
                      width: 6,
                      height: 6,
                      borderRadius: "50%",
                      background: success,
                    }}
                  />
                  {s.label}
                </div>
              </div>
            ) : (
              <div
                key={si}
                style={{
                  border: `1px solid ${disabledBorder}`,
                  borderRadius: 6,
                  padding: "10px 9px",
                  display: "flex",
                  flexDirection: "column",
                  background: surface.w25,
                }}
              >
                <div
                  style={{
                    fontSize: 9,
                    letterSpacing: 0.5,
                    color: muted3,
                    fontWeight: 600,
                  }}
                >
                  {s.name}
                </div>
                <div
                  style={{
                    fontFamily: font.mono,
                    fontSize: 22,
                    fontWeight: 300,
                    marginTop: "auto",
                    color: disabledValue,
                  }}
                >
                  {s.count}
                </div>
                <div
                  style={{ fontSize: 9, color: disabledLabel, marginTop: 3 }}
                >
                  {s.label}
                </div>
              </div>
            ),
          )}
        </div>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            marginTop: 11,
          }}
        >
          <span style={{ fontSize: 10, color: hint }}>
            При недоступности источника частичный результат не блокируется
          </span>
          <span style={{ fontSize: 9.5, letterSpacing: 1.5, color: muted2 }}>
            {data.meta.builtOn ?? "—"}
          </span>
        </div>
      </div>
    </div>
  );
}
