"use client";

/**
 * SaleShareList — сортируемый список домов: адрес, доля в продаже (акцент),
 * N из M квартир, медиана цены + ₽/м², срок экспозиции, год/тип/серия, бейджи.
 * Hover строки ↔ подсветка маркера на карте; клик → drawer с объявлениями.
 * Сортировка серверная — клик по заголовку меняет `sort` (драйвит query).
 */
import type { BuildingSaleShare, SaleShareSort } from "@/types/sale-share";
import {
  fmtDays,
  fmtPct,
  fmtRub,
  heatColor,
  houseTypeLabel,
} from "./saleShareUtils";

interface Props {
  buildings: BuildingSaleShare[];
  sort: SaleShareSort;
  onSort: (s: SaleShareSort) => void;
  selectedHouseId: number | null;
  hoveredHouseId: number | null;
  onSelect: (houseId: number) => void;
  onHover: (houseId: number | null) => void;
  isLoading: boolean;
  isError: boolean;
  minPct: number;
  window: "now" | "45d";
}

/** Стрелка-индикатор активной сортировки. */
function sortArrow(active: boolean, dir: "asc" | "desc"): string {
  if (!active) return "";
  return dir === "asc" ? " ↑" : " ↓";
}

export function SaleShareList({
  buildings,
  sort,
  onSort,
  selectedHouseId,
  hoveredHouseId,
  onSelect,
  onHover,
  isLoading,
  isError,
  minPct,
  window,
}: Props) {
  const togglePrice = () =>
    onSort(sort === "price_asc" ? "price_desc" : "price_asc");

  return (
    <article className="card">
      <div className="card-head">
        <div>
          <div className="section-kicker">Дома</div>
          <h2>Адреса с долей в продаже ≥ {minPct}%</h2>
        </div>
        {!isLoading && !isError && (
          <div className="card-meta">
            <div>
              Найдено: <b>{buildings.length}</b>
            </div>
          </div>
        )}
      </div>

      {isLoading ? (
        <div className="card-body">
          <p style={{ color: "var(--muted)", textAlign: "center", padding: "24px 0" }}>
            Загрузка домов…
          </p>
        </div>
      ) : isError ? (
        <div className="card-body">
          <p style={{ color: "var(--danger, #b3261e)", textAlign: "center", padding: "24px 0" }}>
            Не удалось загрузить список домов. Обновите страницу или попробуйте позже.
          </p>
        </div>
      ) : buildings.length === 0 ? (
        <div className="card-body">
          <p style={{ color: "var(--muted)", textAlign: "center", padding: "24px 0" }}>
            Нет домов с долей в продаже ≥ {minPct}% при текущих фильтрах.
          </p>
        </div>
      ) : (
        <div className="ss-table-scroll">
          <table className="dt ss-table" aria-label="Дома по доле квартир в продаже">
            <thead>
              <tr>
                <th>Адрес</th>
                <th className="num">
                  <button
                    type="button"
                    className="ss-th-btn"
                    onClick={() => onSort("share_desc")}
                  >
                    Доля{sortArrow(sort === "share_desc", "desc")}
                  </button>
                </th>
                <th className="num">
                  <button
                    type="button"
                    className="ss-th-btn"
                    onClick={() => onSort("active_desc")}
                  >
                    В продаже{sortArrow(sort === "active_desc", "desc")}
                  </button>
                </th>
                <th className="num">
                  <button
                    type="button"
                    className="ss-th-btn"
                    onClick={togglePrice}
                  >
                    Медиана
                    {sortArrow(
                      sort === "price_asc" || sort === "price_desc",
                      sort === "price_asc" ? "asc" : "desc",
                    )}
                  </button>
                </th>
                <th className="num">
                  <button
                    type="button"
                    className="ss-th-btn"
                    onClick={() => onSort("exposure_desc")}
                  >
                    Экспозиция{sortArrow(sort === "exposure_desc", "desc")}
                  </button>
                </th>
                <th>Дом</th>
                <th>
                  <span className="sr-only">Действия</span>
                </th>
              </tr>
            </thead>
            <tbody>
              {buildings.map((b) => (
                <BuildingRow
                  key={b.house_id}
                  b={b}
                  window={window}
                  selected={b.house_id === selectedHouseId}
                  hovered={b.house_id === hoveredHouseId}
                  onSelect={onSelect}
                  onHover={onHover}
                />
              ))}
            </tbody>
          </table>
        </div>
      )}
    </article>
  );
}

function BuildingRow({
  b,
  window,
  selected,
  hovered,
  onSelect,
  onHover,
}: {
  b: BuildingSaleShare;
  window: "now" | "45d";
  selected: boolean;
  hovered: boolean;
  onSelect: (houseId: number) => void;
  onHover: (houseId: number | null) => void;
}) {
  // Метрики окна: при «45 дней» — 45-дневные поля (с фолбэком на «сейчас»),
  // иначе текущие. Цвет/процент/бейдж «>100%» считаются по выбранному окну.
  const pct = window === "45d" ? (b.sale_share_pct_45d ?? b.sale_share_pct) : b.sale_share_pct;
  const count = window === "45d" ? b.listings_45d : b.active_secondary;
  const overHundred = pct !== null && pct > 100;

  const denom =
    count !== null && b.flat_count_effective !== null
      ? `${count} из ${b.flat_count_effective}`
      : count !== null
        ? `${count}`
        : "—";

  const houseMeta = [
    b.year_built !== null ? `${b.year_built}` : null,
    houseTypeLabel(b.house_type) !== "—" ? houseTypeLabel(b.house_type) : null,
    b.total_floors !== null ? `${b.total_floors} эт.` : null,
    b.series_name,
  ]
    .filter(Boolean)
    .join(" · ");

  return (
    <tr
      className={`ss-row${selected ? " is-selected" : ""}${hovered ? " is-hovered" : ""}`}
      onMouseEnter={() => onHover(b.house_id)}
      onMouseLeave={() => onHover(null)}
      onClick={() => onSelect(b.house_id)}
    >
      <td>
        <div className="addr">
          <span className="a-main">{b.address ?? "Адрес не указан"}</span>
          <span className="a-sub" style={{ display: "inline-flex", gap: 6, flexWrap: "wrap" }}>
            {b.is_emergency && <span className="ss-badge ss-badge--danger">аварийный</span>}
            {overHundred && (
              <span className="ss-badge ss-badge--warn">возможно, несколько корпусов</span>
            )}
          </span>
        </div>
      </td>
      <td className="num">
        <span
          className="ss-pct"
          style={{ color: "#fff", background: heatColor(pct) }}
        >
          {fmtPct(pct)}
        </span>
      </td>
      <td className="num">{denom}</td>
      <td className="num">
        {b.median_price_rub !== null ? (
          <>
            {fmtRub(b.median_price_rub)} ₽
            <div style={{ fontSize: 11, color: "var(--muted)" }}>
              {b.median_price_per_m2 !== null ? `${fmtRub(b.median_price_per_m2)} ₽/м²` : "—"}
            </div>
          </>
        ) : (
          "—"
        )}
      </td>
      <td className="num">{fmtDays(b.avg_days_on_market)}</td>
      <td style={{ fontSize: 12, color: "var(--fg-2)" }}>{houseMeta || "—"}</td>
      <td style={{ whiteSpace: "nowrap" }}>
        <button
          type="button"
          className="btn btn-ghost ss-row-btn"
          onClick={(e) => {
            e.stopPropagation();
            onSelect(b.house_id);
          }}
        >
          Объявления →
        </button>
      </td>
    </tr>
  );
}
