// 03 СВОДКА ОБЪЕКТА — right-rail summary card for the /trade-in/v2 "МЕРА Оценка"
// design port. Faithful markup port of МЕРА Оценка.dc.html lines 397-422:
// address + "В РАСЧЁТЕ" badge, four clickable per-section totals, and a
// "КАЧЕСТВО ДАННЫХ" block with a donut. Data from fixtures; clicks fire
// onNavigate(row.nav) only — no API, no fetching.

"use client";

import { tokens } from "./tokens";
import { object, summary } from "./fixtures";
import type { ObjectSummaryData } from "./mappers";

// Default presentation data (unwired usage): the existing design fixtures.
const OBJECT_SUMMARY_FIXTURE: ObjectSummaryData = { object, summary };

interface ObjectSummaryProps {
  data?: ObjectSummaryData;
  onNavigate: (i: number) => void;
}

// Audit M11 — name the unnamed «N · XX,XX млн» numbers. Each summary row value
// is built in mappers.mapSummary as "count · metric"; the metric is different
// per row. This caption labels each ·-separated token token-for-token. Keyed by
// label content so it matches both the mapper labels ("Продажи рядом") and the
// older fixture labels ("Продажи в доме"). Sources in mappers.mapSummary:
//   Продажи рядом : houseSold · kpi.median_exposure_days
//   Аналоги       : e.n_analogs · e.median_price_rub (H3 — SAME field as the
//                   02-РЕЗУЛЬТАТ hero «медиана объявлений», not the raw analog
//                   listing-price median which read far higher over the same set)
//   Сделки        : dealCount · streetDeals.median_price_rub ?? median(deals)
//   Аналитика     : kpi.median_exposure_days · -kpi.median_bargain_pct
function rowHint(label: string): string {
  if (label.startsWith("Продажи")) return "кол-во · медиана экспозиции";
  if (label === "Аналоги") return "кол-во · медиана объявлений";
  if (label === "Сделки") return "кол-во · медиана сделок";
  if (label === "Аналитика") return "экспозиция · торг";
  return "";
}

export function ObjectSummary({
  data = OBJECT_SUMMARY_FIXTURE,
  onNavigate,
}: ObjectSummaryProps) {
  return (
    <div
      style={{
        position: "relative",
        background: tokens.surface.w50,
        backdropFilter: "blur(6px)",
        border: `1px solid ${tokens.line2}`,
        borderRadius: 8,
        padding: "15px 16px",
        flex: 1,
        display: "flex",
        flexDirection: "column",
        color: tokens.ink,
        fontFamily: tokens.font.sans,
      }}
    >
      <style>{`
        .os-row { background: none; border: none; transition: background .12s; }
        .os-row:hover { background: rgba(46,139,255,.07); }
      `}</style>

      {/* HUD corner bracket */}
      <div
        style={{
          position: "absolute",
          right: -1,
          top: -1,
          width: 12,
          height: 12,
          borderRight: `1.5px solid ${tokens.bracket}`,
          borderTop: `1.5px solid ${tokens.bracket}`,
        }}
      />

      {/* Header: 03 СВОДКА ОБЪЕКТА + В РАСЧЁТЕ badge */}
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          marginBottom: 5,
        }}
      >
        <div style={{ display: "flex", alignItems: "baseline", gap: 9 }}>
          <span
            style={{
              fontFamily: tokens.font.mono,
              fontSize: 14,
              color: tokens.accent,
            }}
          >
            03
          </span>
          {/* Panel heading — real <h2> (preflight not loaded → reset UA margin
              inline; visuals unchanged). */}
          <h2
            style={{
              margin: 0,
              fontSize: 12,
              fontWeight: 600,
              letterSpacing: 1.5,
            }}
          >
            СВОДКА ОБЪЕКТА
          </h2>
        </div>
        <span
          style={{
            display: "flex",
            alignItems: "center",
            gap: 4,
            fontSize: 8,
            letterSpacing: 0.8,
            color: tokens.success,
            border: `1px solid ${tokens.successBorder}`,
            borderRadius: 20,
            padding: "2px 7px",
            whiteSpace: "nowrap",
          }}
        >
          <span
            style={{
              width: 5,
              height: 5,
              borderRadius: "50%",
              background: tokens.success,
            }}
          />
          АКТУАЛЬНО
        </span>
      </div>

      <div
        style={{
          fontSize: 9,
          letterSpacing: 1.2,
          color: tokens.body2,
          marginBottom: 13,
        }}
      >
        ИТОГИ ПО РАЗДЕЛАМ
      </div>

      {/* Address */}
      <div
        style={{
          display: "flex",
          alignItems: "flex-start",
          gap: 9,
          marginBottom: 14,
        }}
      >
        <svg
          width="15"
          height="18"
          viewBox="0 0 15 18"
          fill="none"
          style={{ marginTop: 1 }}
          aria-hidden="true"
        >
          <path
            d="M7.5 17C7.5 17 14 11 14 6.5A6.5 6.5 0 1 0 1 6.5C1 11 7.5 17 7.5 17Z"
            stroke={tokens.accent}
            strokeWidth="1.2"
          />
          <circle cx="7.5" cy="6.5" r="2.3" fill={tokens.accent} />
        </svg>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13, fontWeight: 600 }}>
            {data.object.address}
          </div>
          <div style={{ fontSize: 11, color: tokens.muted, marginTop: 2 }}>
            {data.object.city}
          </div>
        </div>
        <svg width="13" height="13" viewBox="0 0 13 13" fill="none" aria-hidden="true">
          <path
            d="M5 1h7v7M12 1L6 7M9 8v4H1V4h4"
            stroke={tokens.muted2}
            strokeWidth="1"
          />
        </svg>
      </div>

      {/* Per-section totals (clickable) */}
      <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
        {data.summary.rows
          .filter((row) => row.value !== "—")
          .map((row, i, visible) => (
          <button
            key={row.label}
            type="button"
            className="os-row"
            onClick={() => onNavigate(row.nav)}
            aria-label={`${row.label} — подробнее`}
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
              padding: "9px 6px",
              cursor: "pointer",
              borderRadius: 5,
              width: "100%",
              fontFamily: "inherit",
              textAlign: "left",
              borderBottom:
                i < visible.length - 1
                  ? `1px dotted ${tokens.lineGradient}`
                  : undefined,
            }}
          >
            <span
              style={{
                fontSize: 10.5,
                color: tokens.body,
                display: "flex",
                alignItems: "center",
                gap: 6,
                whiteSpace: "nowrap",
                paddingRight: 12,
              }}
            >
              <span
                style={{
                  width: 5,
                  height: 5,
                  borderRadius: "50%",
                  background:
                    row.dot === "accent" ? tokens.accent : tokens.scatterDeal,
                }}
              />
              {row.label}
            </span>
            <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <span
                style={{
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "flex-end",
                  gap: 1,
                }}
              >
                <span
                  style={{
                    fontFamily: tokens.font.mono,
                    fontSize: 11,
                    color: tokens.ink2,
                    whiteSpace: "nowrap",
                  }}
                >
                  {row.value}
                </span>
                {rowHint(row.label) && (
                  <span
                    style={{
                      fontSize: 8,
                      letterSpacing: 0.2,
                      color: tokens.muted3,
                      whiteSpace: "nowrap",
                    }}
                  >
                    {rowHint(row.label)}
                  </span>
                )}
              </span>
              <span style={{ color: tokens.accent, fontSize: 11 }}>›</span>
            </span>
          </button>
        ))}
      </div>

      {/* КАЧЕСТВО ДАННЫХ */}
      <div
        style={{
          marginTop: 14,
          background: tokens.infoSoftBg,
          border: `1px solid ${tokens.infoSoftBorder}`,
          borderRadius: 6,
          padding: 12,
          display: "flex",
          gap: 12,
          alignItems: "center",
        }}
      >
        <svg width="50" height="50" viewBox="0 0 50 50" fill="none" aria-hidden="true">
          <circle
            cx="25"
            cy="25"
            r="20"
            stroke={tokens.track}
            strokeWidth="3"
          />
          <circle
            cx="25"
            cy="25"
            r="20"
            stroke={tokens.accent}
            strokeWidth="3"
            strokeLinecap="round"
            strokeDasharray="126"
            strokeDashoffset="72"
            transform="rotate(-90 25 25)"
          />
          <circle cx="25" cy="25" r="11" stroke="#cdddec" strokeWidth="1" />
          <circle cx="25" cy="25" r="1.6" fill={tokens.accent} />
        </svg>
        <div style={{ flex: 1 }}>
          <div
            style={{
              fontSize: 9.5,
              letterSpacing: 1.5,
              color: tokens.muted2,
              marginBottom: 7,
            }}
          >
            КАЧЕСТВО ДАННЫХ
          </div>
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              fontSize: 10,
              color: tokens.muted,
              lineHeight: 1.7,
            }}
          >
            <span>Источников</span>
            <span style={{ fontFamily: tokens.font.mono, color: tokens.ink }}>
              {data.summary.quality.sources}
            </span>
          </div>
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              fontSize: 10,
              color: tokens.muted,
              lineHeight: 1.7,
            }}
          >
            <span>Достоверность</span>
            <span style={{ color: tokens.ink }}>
              {data.summary.quality.confidence}
            </span>
          </div>
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              fontSize: 10,
              color: tokens.muted,
              lineHeight: 1.7,
            }}
          >
            <span>Разброс цен</span>
            <span
              style={{ fontFamily: tokens.font.mono, color: tokens.accent }}
            >
              {data.summary.quality.cv}
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}