import type { Metadata } from "next";
import Link from "next/link";
import { Database, ExternalLink, MapPin } from "lucide-react";

export const metadata: Metadata = {
  title: "Источники данных и атрибуция · GenDesign",
  description:
    "Перечень внешних источников данных GenDesign, их лицензии и требования к атрибуции: OpenStreetMap, ДОМ.РФ, Объектив, Open-Meteo, Росреестр, НСПД.",
};

// ── Source registry ───────────────────────────────────────────────────────────
// Перечень источников + лицензия + строка атрибуции. Содержит фактическую
// атрибуцию; юридическая интерпретация ToS ведётся отдельно (vault
// decisions/Data_Licenses_Audit.md). Эта страница — публичная attribution-
// поверхность, требуемая лицензиями (в первую очередь OSM ODbL).

interface DataSource {
  name: string;
  /** Что именно используется из источника. */
  usage: string;
  /** Короткое имя лицензии / режима использования. */
  license: string;
  /** Строка атрибуции в том виде, как её требует источник. */
  attribution: string;
  /** Канонический URL источника / условий. */
  href: string;
  hrefLabel: string;
}

const SOURCES: DataSource[] = [
  {
    name: "OpenStreetMap",
    usage:
      "Базовая картографическая подложка (тайлы) на всех картах Leaflet, геокодирование точек интереса.",
    license: "ODbL 1.0 (данные) · CC BY-SA (картография)",
    attribution: "© участники OpenStreetMap",
    href: "https://www.openstreetmap.org/copyright",
    hrefLabel: "openstreetmap.org/copyright",
  },
  {
    name: "ДОМ.РФ",
    usage:
      "Реестр строящегося жилья (портфель новостроек, площади, sold %, сроки ввода), сведения ПЗЗ.",
    license: "Публичные данные · по условиям наш.дом.рф",
    attribution:
      "Источник: Единая информационная система жилищного строительства (наш.дом.рф)",
    href: "https://наш.дом.рф",
    hrefLabel: "наш.дом.рф",
  },
  {
    name: "Объектив",
    usage:
      "Цены предложения и скорость продаж по жилым комплексам (sale-graph, velocity).",
    license: "Коммерческий доступ по договору (платный тариф)",
    attribution: "Данные о ценах предложения предоставлены сервисом «Объектив»",
    href: "https://objced.ru",
    hrefLabel: "objced.ru",
  },
  {
    name: "Open-Meteo",
    usage:
      "Сезонная погода и климатические нормали для оценки строительного сезона участка.",
    license: "CC BY 4.0 · коммерческое использование по платному тарифу",
    attribution: "Погодные данные © Open-Meteo.com",
    href: "https://open-meteo.com/en/license",
    hrefLabel: "open-meteo.com/license",
  },
  {
    name: "Росреестр / ЕГРН",
    usage:
      "Сведения ЕГРН по участку (категория, ВРИ, площадь), ДДУ-сделки (Rosreestr deals) для рыночной аналитики.",
    license: "Сведения ЕГРН · по условиям предоставления Росреестра",
    attribution: "Источник: Росреестр (ЕГРН), Публичная кадастровая карта",
    href: "https://rosreestr.gov.ru",
    hrefLabel: "rosreestr.gov.ru",
  },
  {
    name: "НСПД",
    usage:
      "Национальная система пространственных данных: зонирование, красные линии, ЗОУИТ, инженерные сети рядом с участком.",
    license: "Публичные пространственные данные · по условиям nspd.gov.ru",
    attribution:
      "Источник: Национальная система пространственных данных (НСПД)",
    href: "https://nspd.gov.ru",
    hrefLabel: "nspd.gov.ru",
  },
];

// ── Cell styles ────────────────────────────────────────────────────────────────

const thStyle: React.CSSProperties = {
  textAlign: "left",
  padding: "10px 12px",
  fontSize: 11,
  fontWeight: 600,
  textTransform: "uppercase",
  letterSpacing: "0.04em",
  color: "var(--fg-secondary)",
  borderBottom: "1px solid var(--border-card)",
  whiteSpace: "nowrap",
};

const tdStyle: React.CSSProperties = {
  padding: "12px 12px",
  fontSize: 13,
  color: "var(--fg-primary)",
  borderBottom: "1px solid var(--border-soft)",
  verticalAlign: "top",
  lineHeight: 1.5,
};

export default function DataSourcesPage() {
  return (
    <main style={{ background: "var(--bg-app)", minHeight: "100vh" }}>
      <div
        style={{
          maxWidth: 1024,
          margin: "0 auto",
          padding: "24px 24px 48px",
        }}
      >
        {/* Header */}
        <header style={{ marginBottom: 24 }}>
          <Link
            href="/"
            style={{
              fontSize: 13,
              color: "var(--fg-secondary)",
              textDecoration: "none",
            }}
          >
            ← GenDesign
          </Link>
          <h1
            style={{
              margin: "8px 0 0",
              fontSize: 22,
              fontWeight: 600,
              color: "var(--fg-primary)",
            }}
          >
            Источники данных и атрибуция
          </h1>
          <p
            style={{
              margin: "8px 0 0",
              maxWidth: 720,
              fontSize: 14,
              color: "var(--fg-secondary)",
              lineHeight: 1.6,
            }}
          >
            GenDesign объединяет открытые и лицензированные источники
            пространственных и рыночных данных. Ниже — перечень источников,
            режим их использования и требуемая атрибуция. Картографическая
            подложка предоставлена участниками OpenStreetMap по лицензии ODbL.
          </p>
        </header>

        {/* Sources table */}
        <section
          style={{
            background: "var(--bg-card)",
            border: "1px solid var(--border-card)",
            borderRadius: 12,
            padding: 20,
          }}
        >
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: 8,
              marginBottom: 12,
            }}
          >
            <Database
              size={20}
              strokeWidth={1.5}
              color="var(--fg-secondary)"
              aria-hidden="true"
            />
            <h2
              style={{
                margin: 0,
                fontSize: 18,
                fontWeight: 600,
                color: "var(--fg-primary)",
              }}
            >
              Перечень источников
            </h2>
          </div>

          {/* На узких экранах таблица скроллится горизонтально (issue #66). */}
          <div className="gd-table-scroll">
            <table
              style={{
                width: "100%",
                minWidth: 720,
                borderCollapse: "collapse",
              }}
            >
              <thead>
                <tr>
                  <th style={thStyle}>Источник</th>
                  <th style={thStyle}>Что используется</th>
                  <th style={thStyle}>Лицензия / режим</th>
                  <th style={thStyle}>Атрибуция</th>
                </tr>
              </thead>
              <tbody>
                {SOURCES.map((s) => (
                  <tr key={s.name}>
                    <td style={{ ...tdStyle, whiteSpace: "nowrap" }}>
                      <span
                        style={{ fontWeight: 600, color: "var(--fg-primary)" }}
                      >
                        {s.name}
                      </span>
                      <a
                        href={s.href}
                        target="_blank"
                        rel="noopener noreferrer"
                        style={{
                          display: "flex",
                          alignItems: "center",
                          gap: 4,
                          marginTop: 4,
                          fontSize: 12,
                          color: "var(--accent)",
                          textDecoration: "none",
                        }}
                      >
                        <ExternalLink size={12} strokeWidth={1.5} />
                        {s.hrefLabel}
                      </a>
                    </td>
                    <td style={{ ...tdStyle, minWidth: 240 }}>{s.usage}</td>
                    <td
                      style={{
                        ...tdStyle,
                        color: "var(--fg-secondary)",
                        minWidth: 180,
                      }}
                    >
                      {s.license}
                    </td>
                    <td
                      style={{
                        ...tdStyle,
                        color: "var(--fg-secondary)",
                        minWidth: 200,
                      }}
                    >
                      {s.attribution}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </section>

        {/* OSM attribution note */}
        <section
          style={{
            marginTop: 16,
            background: "var(--bg-card)",
            border: "1px solid var(--border-card)",
            borderRadius: 12,
            padding: 20,
            display: "flex",
            gap: 12,
            alignItems: "flex-start",
          }}
        >
          <MapPin
            size={20}
            strokeWidth={1.5}
            color="var(--fg-secondary)"
            aria-hidden="true"
            style={{ flexShrink: 0, marginTop: 2 }}
          />
          <div>
            <h2
              style={{
                margin: 0,
                fontSize: 16,
                fontWeight: 600,
                color: "var(--fg-primary)",
              }}
            >
              Картография OpenStreetMap
            </h2>
            <p
              style={{
                margin: "6px 0 0",
                fontSize: 13,
                color: "var(--fg-secondary)",
                lineHeight: 1.6,
              }}
            >
              Все интерактивные карты используют тайлы OpenStreetMap. Данные
              распространяются по лицензии{" "}
              <a
                href="https://opendatacommons.org/licenses/odbl/"
                target="_blank"
                rel="noopener noreferrer"
                style={{ color: "var(--accent)", textDecoration: "none" }}
              >
                Open Data Commons Open Database License (ODbL)
              </a>{" "}
              и сопровождаются строкой «© участники OpenStreetMap» в правом
              нижнем углу каждой карты.
            </p>
          </div>
        </section>

        {/* Legal caveat */}
        <p
          style={{
            marginTop: 16,
            fontSize: 12,
            color: "var(--fg-tertiary)",
            lineHeight: 1.6,
          }}
        >
          Перечень носит информационный характер и отражает текущий состав
          используемых источников. По вопросам условий использования и
          лицензирования данных — свяжитесь с командой GenDesign.
        </p>
      </div>
    </main>
  );
}