// Overlay 04 "ПРОДАЖИ В ДОМЕ" body for the /trade-in/v2 "МЕРА Оценка" port.
// Faithful markup port of the design's showHistory block (МЕРА Оценка.dc.html,
// lines 457-489): "История продаж в этом доме" card (house sales) +
// "ДКП-сделки на улице" card (3 KPI + dealine table + footer count).
// Static markup — data comes from fixtures, no fetch / no local state.

import { tokens } from "./tokens";
import { history, dkpRows } from "./fixtures";

// Shared grid templates (kept verbatim from the design column tracks).
const houseGrid = "2fr 1.4fr 1fr 1fr";
const dkpGrid = "2.2fr 1fr 1.3fr 1fr .9fr 2fr";

export default function HistoryView() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "22px" }}>
      {/* ── История продаж в этом доме ───────────────────────────── */}
      <div
        style={{
          background: tokens.surface.w55,
          border: `1px solid ${tokens.line2}`,
          borderRadius: "8px",
          overflow: "hidden",
        }}
      >
        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            padding: "14px 18px",
            borderBottom: `1px solid ${tokens.lineSoft}`,
          }}
        >
          <span
            style={{
              fontSize: "12px",
              fontWeight: 600,
              letterSpacing: "1px",
              color: tokens.ink2,
            }}
          >
            История продаж в этом доме
          </span>
          <span
            style={{
              fontSize: "10px",
              letterSpacing: "1px",
              color: tokens.muted2,
            }}
          >
            {history.houseSales.length} ЛОТА
          </span>
        </div>

        <div
          style={{
            display: "grid",
            gridTemplateColumns: houseGrid,
            gap: "12px",
            padding: "9px 18px",
            fontSize: "9px",
            letterSpacing: "1.2px",
            color: tokens.muted2,
            borderBottom: `1px solid ${tokens.lineSoft2}`,
          }}
        >
          <span>ЛОТ</span>
          <span>ЦЕНА НАЧ. → ПОСЛ.</span>
          <span>ДАТА</span>
          <span>ЭКСПОЗИЦИЯ</span>
        </div>

        {history.houseSales.map((row, i) => (
          <div
            key={i}
            style={{
              display: "grid",
              gridTemplateColumns: houseGrid,
              gap: "12px",
              padding: "13px 18px",
              fontSize: "12px",
              borderBottom:
                i < history.houseSales.length - 1
                  ? `1px solid ${tokens.lineSoft4}`
                  : undefined,
            }}
          >
            <span style={{ color: tokens.body }}>{row.lot}</span>
            <span style={{ fontFamily: tokens.font.mono, color: tokens.muted }}>
              {row.priceFrom} →{" "}
              <b style={{ color: tokens.ink2 }}>{row.priceTo}</b>
            </span>
            <span style={{ fontFamily: tokens.font.mono, color: tokens.muted }}>
              {row.date}
            </span>
            <span style={{ fontFamily: tokens.font.mono, color: tokens.muted }}>
              {row.exposure}
            </span>
          </div>
        ))}
      </div>

      {/* ── ДКП-сделки на улице ──────────────────────────────────── */}
      <div
        style={{
          background: tokens.surface.w55,
          border: `1px solid ${tokens.line2}`,
          borderRadius: "8px",
          overflow: "hidden",
        }}
      >
        <div
          style={{
            padding: "14px 18px",
            borderBottom: `1px solid ${tokens.lineSoft}`,
          }}
        >
          <div
            style={{
              display: "flex",
              alignItems: "flex-start",
              justifyContent: "space-between",
            }}
          >
            <div>
              <div
                style={{
                  fontSize: "8.5px",
                  letterSpacing: "2px",
                  color: tokens.muted2,
                  marginBottom: "5px",
                }}
              >
                ПОХОЖИЕ КВАРТИРЫ · ПО ВАШЕЙ УЛИЦЕ
              </div>
              <div
                style={{
                  fontSize: "12px",
                  fontWeight: 600,
                  letterSpacing: ".5px",
                  color: tokens.ink2,
                }}
              >
                {history.dkpHeader.title}
              </div>
            </div>
            <div
              style={{
                textAlign: "right",
                fontSize: "9.5px",
                color: tokens.muted2,
                lineHeight: 1.6,
              }}
            >
              Период:{" "}
              <b style={{ color: tokens.muted }}>{history.dkpHeader.period}</b>
              <br />
              Источник: Росреестр + объявления
            </div>
          </div>
          <div
            style={{
              fontSize: "10px",
              color: tokens.hint,
              marginTop: "8px",
            }}
          >
            {history.dkpHeader.note}
          </div>
        </div>

        {/* KPI band */}
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(3,1fr)",
            borderBottom: `1px solid ${tokens.lineSoft}`,
            background: tokens.surfaceTint,
          }}
        >
          <div
            style={{
              padding: "12px 18px",
              borderRight: `1px solid ${tokens.lineSoft2}`,
            }}
          >
            <div
              style={{
                fontSize: "9px",
                letterSpacing: "1.5px",
                color: tokens.muted2,
              }}
            >
              СДЕЛОК ЗА 24 МЕС
            </div>
            <div
              style={{
                fontFamily: tokens.font.mono,
                fontSize: "22px",
                fontWeight: 300,
                color: tokens.ink2,
                marginTop: "4px",
              }}
            >
              {history.dkpKpi.count}
            </div>
          </div>
          <div
            style={{
              padding: "12px 18px",
              borderRight: `1px solid ${tokens.lineSoft2}`,
            }}
          >
            <div
              style={{
                fontSize: "9px",
                letterSpacing: "1.5px",
                color: tokens.muted2,
              }}
            >
              МЕДИАНА
            </div>
            <div
              style={{
                fontFamily: tokens.font.mono,
                fontSize: "22px",
                fontWeight: 300,
                color: tokens.ink2,
                marginTop: "4px",
              }}
            >
              {history.dkpKpi.median}{" "}
              <span style={{ fontSize: "11px", color: tokens.muted }}>
                ₽/м²
              </span>
            </div>
          </div>
          <div style={{ padding: "12px 18px" }}>
            <div
              style={{
                fontSize: "9px",
                letterSpacing: "1.5px",
                color: tokens.muted2,
              }}
            >
              ДИАПАЗОН
            </div>
            <div
              style={{
                fontFamily: tokens.font.mono,
                fontSize: "22px",
                fontWeight: 300,
                color: tokens.accent,
                marginTop: "4px",
              }}
            >
              {history.dkpKpi.range}{" "}
              <span style={{ fontSize: "11px", color: tokens.muted }}>
                млн ₽
              </span>
            </div>
          </div>
        </div>

        {/* Table header */}
        <div
          style={{
            display: "grid",
            gridTemplateColumns: dkpGrid,
            gap: "10px",
            padding: "9px 18px",
            fontSize: "9px",
            letterSpacing: "1px",
            color: tokens.muted2,
            borderBottom: `1px solid ${tokens.lineSoft2}`,
          }}
        >
          <span>АДРЕС</span>
          <span>ПЛОЩАДЬ</span>
          <span>ЦЕНА СДЕЛКИ</span>
          <span>₽/М²</span>
          <span>ДАТА</span>
          <span>ОБЪЯВЛЕНИЕ ДО СДЕЛКИ</span>
        </div>

        {dkpRows.map((r, i) => (
          <div
            key={i}
            style={{
              display: "grid",
              gridTemplateColumns: dkpGrid,
              gap: "10px",
              padding: "11px 18px",
              fontSize: "11px",
              borderBottom: `1px solid ${tokens.lineSoft3}`,
              alignItems: "center",
            }}
          >
            <span style={{ color: tokens.body }}>
              Екатеринбург, Академика Ландау
            </span>
            <span style={{ fontFamily: tokens.font.mono, color: tokens.muted }}>
              {r.area}
            </span>
            <span style={{ fontFamily: tokens.font.mono, color: tokens.ink2 }}>
              {r.price}
            </span>
            <span style={{ fontFamily: tokens.font.mono, color: tokens.muted }}>
              {r.ppm}
            </span>
            <span
              style={{ fontFamily: tokens.font.mono, color: tokens.muted2 }}
            >
              01.01.26
            </span>
            <span
              style={{
                display: "flex",
                alignItems: "center",
                gap: "7px",
                fontFamily: tokens.font.mono,
                fontSize: "10px",
                color: tokens.muted,
              }}
            >
              <span
                style={{
                  fontSize: "8px",
                  letterSpacing: ".5px",
                  background: tokens.badgeTint,
                  border: `1px solid ${tokens.line2}`,
                  borderRadius: "3px",
                  padding: "1px 5px",
                  color: tokens.accent,
                }}
              >
                Яндекс
              </span>
              {r.ask}
              <span style={{ color: r.deltaColor }}>{r.delta}</span>
            </span>
          </div>
        ))}

        <div
          style={{
            padding: "11px 18px",
            fontSize: "10px",
            color: tokens.hint,
            background: tokens.surfaceTint,
          }}
        >
          Показано {dkpRows.length} из {history.dkpKpi.count} сделок
        </div>
      </div>
    </div>
  );
}