/**
 * EgrnPropertyTable — 2-column key-value table of 10 EGRN properties.
 * Server component (no "use client") — pure display.
 * monospace for cad_num and area_m2.
 */

import type { ParcelEgrn } from "@/lib/site-finder-api";

interface Props {
  data: ParcelEgrn;
}

interface Row {
  label: string;
  value: string;
  mono?: boolean;
}

function formatDate(raw: string | null): string {
  if (!raw) return "—";
  try {
    return new Date(raw).toLocaleDateString("ru-RU");
  } catch {
    return raw;
  }
}

function buildRows(data: ParcelEgrn): Row[] {
  return [
    { label: "Кадастровый номер", value: data.cad_num, mono: true },
    { label: "Адрес", value: data.address },
    {
      label: "Площадь",
      value:
        Number.isFinite(data.area_m2) && data.area_m2 > 0
          ? `${data.area_m2.toLocaleString("ru")} м²`
          : "—",
      mono: true,
    },
    { label: "ВРИ", value: data.vri },
    { label: "Категория", value: data.category },
    {
      label: "Дата регистрации",
      value: formatDate(data.registration_date),
    },
    { label: "Форма собственности", value: data.owner_type },
    { label: "Обременения", value: data.encumbrance },
    { label: "Статус", value: data.status },
    { label: "Обновлено", value: formatDate(data.last_updated) },
  ];
}

export function EgrnPropertyTable({ data }: Props) {
  const rows = buildRows(data);

  return (
    <div
      style={{
        border: "1px solid var(--border-card)",
        borderRadius: 12,
        overflow: "hidden",
        background: "var(--bg-card)",
      }}
    >
      <div
        style={{
          padding: "10px 16px",
          borderBottom: "1px solid var(--border-soft)",
          fontSize: 12,
          fontWeight: 500,
          textTransform: "uppercase",
          letterSpacing: "0.04em",
          color: "var(--fg-tertiary)",
        }}
      >
        ЕГРН
      </div>

      <table
        style={{
          width: "100%",
          borderCollapse: "collapse",
          fontSize: 13,
        }}
      >
        <tbody>
          {rows.map((row, i) => (
            <tr
              key={row.label}
              style={{
                background:
                  i % 2 === 0 ? "var(--bg-card)" : "var(--bg-card-alt)",
              }}
            >
              <td
                style={{
                  padding: "8px 16px",
                  color: "var(--fg-secondary)",
                  fontWeight: 400,
                  width: "45%",
                  verticalAlign: "top",
                  borderBottom:
                    i < rows.length - 1
                      ? "1px solid var(--border-soft)"
                      : "none",
                }}
              >
                {row.label}
              </td>
              <td
                style={{
                  padding: "8px 16px",
                  color: "var(--fg-primary)",
                  fontWeight: 500,
                  fontVariantNumeric: "tabular-nums",
                  fontFamily: row.mono
                    ? "'JetBrains Mono', 'Fira Code', monospace"
                    : "inherit",
                  fontSize: row.mono ? 12 : 13,
                  verticalAlign: "top",
                  wordBreak: "break-word",
                  borderBottom:
                    i < rows.length - 1
                      ? "1px solid var(--border-soft)"
                      : "none",
                }}
              >
                {row.value}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}