/**
 * NspdRegulationCard — «Градрегламент (НСПД)» block for Раздел 1 (#1962).
 *
 * Surfaces the REAL ПЗЗ-градрегламент resolved into `nspd_zoning` (synth #1891):
 * тер.зона, КСИТ (max_far), пред. высота, этажность, коэф. застройки, ёмкость,
 * источник + the permitted-use (ВРИ) list of the zone. Previously the light
 * report only rendered the dead `zoning.data_available=false` (closed-PKK6 path)
 * and never showed the real regulation the user asked about («мы выгружали НСПД —
 * где они?»).
 *
 * Mirrors EgrnPropertyTable's card pattern (uppercase header + striped 2-col
 * table). Pure display — view-model built by `adaptNspdRegulation`. Graceful
 * empty-state when the resolver produced nothing (gap-зоны / не-ЕКБ).
 */

import { Landmark } from "lucide-react";
import type { NspdZoning } from "@/types/nspd";
import { adaptNspdRegulation } from "./nspd-regulation";

interface Props {
  zoning: NspdZoning | null | undefined;
  /** Parcel area in m² (ЕГРН) — drives the КСИТ-ёмкость / пятно rows. */
  areaM2: number | null;
}

const HEADER_STYLE: React.CSSProperties = {
  display: "flex",
  alignItems: "center",
  gap: 8,
  padding: "10px 16px",
  borderBottom: "1px solid var(--border-soft)",
  fontSize: 12,
  fontWeight: 500,
  textTransform: "uppercase",
  letterSpacing: "0.04em",
  color: "var(--fg-tertiary)",
};

export function NspdRegulationCard({ zoning, areaM2 }: Props) {
  const vm = adaptNspdRegulation(zoning, areaM2);

  return (
    <div
      style={{
        border: "1px solid var(--border-card)",
        borderRadius: 12,
        overflow: "hidden",
        background: "var(--bg-card)",
      }}
    >
      <div style={HEADER_STYLE}>
        <Landmark size={16} strokeWidth={1.5} aria-hidden="true" />
        Градрегламент (НСПД)
      </div>

      {vm.present ? (
        <>
          <table
            style={{
              width: "100%",
              borderCollapse: "collapse",
              fontSize: 13,
            }}
          >
            <tbody>
              {vm.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 < vm.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",
                      verticalAlign: "top",
                      wordBreak: "break-word",
                      borderBottom:
                        i < vm.rows.length - 1
                          ? "1px solid var(--border-soft)"
                          : "none",
                    }}
                  >
                    {row.value}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>

          {/* КСИТ microcopy — расшифровка жаргона на первой странице (ui-microcopy). */}
          <p
            style={{
              margin: 0,
              padding: "8px 16px",
              fontSize: 12,
              lineHeight: "16px",
              color: "var(--fg-tertiary)",
              borderTop: "1px solid var(--border-soft)",
            }}
          >
            КСИТ — коэффициент строительного использования: предельная надземная
            площадь застройки на участке (площадь участка × КСИТ).
          </p>

          {vm.permittedUses.length > 0 && (
            <div
              style={{
                padding: "10px 16px",
                borderTop: "1px solid var(--border-soft)",
              }}
            >
              <div
                style={{
                  fontSize: 12,
                  fontWeight: 500,
                  textTransform: "uppercase",
                  letterSpacing: "0.04em",
                  color: "var(--fg-tertiary)",
                  marginBottom: 8,
                }}
              >
                Разрешённые ВРИ зоны
              </div>
              <ul
                style={{
                  margin: 0,
                  paddingLeft: 16,
                  fontSize: 13,
                  lineHeight: "20px",
                  color: "var(--fg-secondary)",
                }}
              >
                {vm.permittedUses.map((use, i) => (
                  <li key={`${i}-${use}`}>{use}</li>
                ))}
              </ul>
            </div>
          )}
        </>
      ) : (
        <p
          style={{
            margin: 0,
            padding: "12px 16px",
            fontSize: 13,
            lineHeight: "20px",
            color: "var(--fg-secondary)",
          }}
        >
          Градрегламент не определён: территориальная зона ПЗЗ для участка не
          разрешена (вне ЕКБ или участок в разрыве зон).
        </p>
      )}
    </div>
  );
}
