gendesign/frontend/src/components/site-finder/EnvironmentTab.tsx

"use client";

import type {
  ParcelAnalysis,
  ParcelAnalysisNoise,
  ParcelAnalysisAirQuality,
  ParcelAnalysisWind,
  ParcelAnalysisWeather,
} from "@/types/site-finder";
import { SectionLabel } from "@/components/ui/SectionLabel";
import { EmptyState } from "@/components/ui/EmptyState";
import { SeasonalWeatherBlock } from "./SeasonalWeatherBlock";
import { HydrologyBlock } from "./HydrologyBlock";

interface Props {
  data: ParcelAnalysis;
}

// ── helpers ──────────────────────────────────────────────────────────────────

const SOURCE_TYPE_LABELS: Record<string, string> = {
  highway: "Магистраль",
  railway: "Ж/д",
  industrial: "Производство",
  aerodrome: "Аэродром",
};

function noiseBg(score: number): string {
  if (score >= 0.7) return "#dcfce7";
  if (score >= 0.4) return "#fef3c7";
  return "#fecaca";
}

function pm25Color(v: number): string {
  if (v < 10) return "#16a34a";
  if (v < 25) return "#d97706";
  if (v < 50) return "#ea580c";
  return "#dc2626";
}

function pm10Color(v: number): string {
  if (v < 20) return "#16a34a";
  if (v < 50) return "#d97706";
  if (v < 100) return "#ea580c";
  return "#dc2626";
}

function no2Color(v: number): string {
  if (v < 40) return "#16a34a";
  if (v < 100) return "#d97706";
  return "#dc2626";
}

function formatTs(iso: string): string {
  try {
    return new Date(iso).toLocaleDateString("ru-RU", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    });
  } catch {
    return iso;
  }
}

function uvColor(uv: number): string {
  if (uv < 3) return "#16a34a";
  if (uv < 6) return "#d97706";
  if (uv < 8) return "#ea580c";
  return "#dc2626";
}

// ── WindArrow SVG ─────────────────────────────────────────────────────────────

function WindArrow({ deg }: { deg: number }) {
  return (
    <svg
      width="44"
      height="44"
      viewBox="0 0 52 52"
      style={{ display: "block", flexShrink: 0 }}
      aria-label={`Направление ветра ${deg}°`}
    >
      <circle cx="26" cy="26" r="24" fill="#e5e7eb" />
      <g transform={`rotate(${deg}, 26, 26)`}>
        <rect x="24.5" y="10" width="3" height="24" rx="1.5" fill="#374151" />
        <polygon points="26,6 21,16 31,16" fill="#374151" />
        <polygon points="26,34 22,44 30,44" fill="#9ca3af" />
      </g>
    </svg>
  );
}

// ── Noise ─────────────────────────────────────────────────────────────────────

function NoiseBlock({ noise }: { noise: ParcelAnalysisNoise }) {
  return (
    <div
      style={{
        borderRadius: 10,
        padding: "14px 16px",
        background: noiseBg(noise.score),
        display: "flex",
        flexDirection: "column",
        gap: 8,
      }}
    >
      <div style={{ fontSize: 12, fontWeight: 700, color: "#374151" }}>Шум</div>
      <div
        style={{
          fontSize: 24,
          fontWeight: 800,
          color: "#111827",
          lineHeight: 1,
        }}
      >
        ~{Math.round(noise.estimated_db)} dB
      </div>
      <div style={{ fontSize: 13, color: "#374151" }}>{noise.level}</div>

      {noise.sources.length > 0 && (
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            gap: 4,
            marginTop: 4,
          }}
        >
          <div
            style={{
              fontSize: 11,
              fontWeight: 600,
              color: "#6b7280",
              textTransform: "uppercase",
            }}
          >
            Источники ({noise.sources.length})
          </div>
          {noise.sources.slice(0, 5).map((s, i) => (
            <div key={i} style={{ fontSize: 12, color: "#374151" }}>
              {SOURCE_TYPE_LABELS[s.source_type] ?? s.source_type}
              {s.name ? ` «${s.name}»` : ""} — {Math.round(s.distance_m)} м (
              {Math.round(s.estimated_db)} dB)
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// ── Air quality ───────────────────────────────────────────────────────────────

function AqBadge({
  label,
  value,
  unit,
  color,
}: {
  label: string;
  value: number;
  unit: string;
  color: string;
}) {
  return (
    <div
      style={{
        borderRadius: 8,
        padding: "6px 10px",
        background: `${color}18`,
        border: `1px solid ${color}55`,
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        minWidth: 62,
      }}
    >
      <div style={{ fontSize: 11, color: "#6b7280" }}>{label}</div>
      <div style={{ fontSize: 17, fontWeight: 700, color, lineHeight: 1.2 }}>
        {value.toFixed(1)}
      </div>
      <div style={{ fontSize: 10, color: "#9ca3af" }}>{unit}</div>
    </div>
  );
}

function AirQualityBlock({ aq }: { aq: ParcelAnalysisAirQuality | null }) {
  if (!aq) {
    return (
      <div
        style={{
          borderRadius: 10,
          padding: "14px 16px",
          background: "#f3f4f6",
        }}
      >
        <div style={{ fontSize: 12, fontWeight: 700, color: "#374151" }}>
          Воздух
        </div>
        <div style={{ fontSize: 13, color: "#9ca3af", marginTop: 8 }}>
          Данные недоступны
        </div>
      </div>
    );
  }

  return (
    <div
      style={{
        borderRadius: 10,
        padding: "14px 16px",
        background: "#f0fdf4",
        display: "flex",
        flexDirection: "column",
        gap: 10,
      }}
    >
      <div style={{ fontSize: 12, fontWeight: 700, color: "#374151" }}>
        Воздух
      </div>
      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
        <AqBadge
          label="PM2.5"
          value={aq.pm2_5}
          unit="мкг/м³"
          color={pm25Color(aq.pm2_5)}
        />
        <AqBadge
          label="PM10"
          value={aq.pm10}
          unit="мкг/м³"
          color={pm10Color(aq.pm10)}
        />
        <AqBadge
          label="NO₂"
          value={aq.no2}
          unit="мкг/м³"
          color={no2Color(aq.no2)}
        />
      </div>
      <div style={{ fontSize: 11, color: "#9ca3af" }}>
        {aq.source} · {formatTs(aq.ts)}
      </div>
    </div>
  );
}

// ── Wind ──────────────────────────────────────────────────────────────────────

function WindBlock({ wind }: { wind: ParcelAnalysisWind | null }) {
  if (!wind) {
    return (
      <div
        style={{
          borderRadius: 10,
          padding: "14px 16px",
          background: "#f3f4f6",
        }}
      >
        <div style={{ fontSize: 12, fontWeight: 700, color: "#374151" }}>
          Ветер
        </div>
        <div style={{ fontSize: 13, color: "#9ca3af", marginTop: 8 }}>
          Данные недоступны
        </div>
      </div>
    );
  }

  return (
    <div
      style={{
        borderRadius: 10,
        padding: "14px 16px",
        background: "#eff6ff",
        display: "flex",
        flexDirection: "column",
        gap: 8,
      }}
    >
      <div style={{ fontSize: 12, fontWeight: 700, color: "#374151" }}>
        Ветер
      </div>
      <WindArrow deg={wind.dominant_direction_deg} />
      <div style={{ fontSize: 13, color: "#374151" }}>
        {wind.dominant_direction_label}
        {wind.max_speed_m_s != null ? ` · до ${wind.max_speed_m_s} м/с` : ""}
      </div>
      <div style={{ fontSize: 11, color: "#9ca3af" }}>
        за {wind.forecast_days} дн.
      </div>
    </div>
  );
}

// ── Weather (7-day forecast) ──────────────────────────────────────────────────

function WeatherBlock({
  weather,
}: {
  weather: ParcelAnalysisWeather | null | undefined;
}) {
  if (!weather) {
    return (
      <div
        style={{
          borderRadius: 10,
          padding: "14px 16px",
          background: "#f3f4f6",
        }}
      >
        <div style={{ fontSize: 12, fontWeight: 700, color: "#374151" }}>
          Погода / Климат
        </div>
        <div style={{ fontSize: 13, color: "#9ca3af", marginTop: 8 }}>
          Прогноз недоступен
        </div>
      </div>
    );
  }

  const { temperature: t, wind } = weather;

  return (
    <div
      style={{
        borderRadius: 10,
        padding: "14px 16px",
        background: "#eff6ff",
        display: "flex",
        flexDirection: "column",
        gap: 10,
      }}
    >
      <div style={{ fontSize: 12, fontWeight: 700, color: "#374151" }}>
        Погода / Климат
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
        <div style={{ fontSize: 11, color: "#6b7280" }}>Температура</div>
        <div style={{ fontSize: 15, fontWeight: 700, color: "#111827" }}>
          {t.min_c != null && t.max_c != null
            ? `${t.min_c}…${t.max_c}°C`
            : t.min_c != null
              ? `от ${t.min_c}°C`
              : t.max_c != null
                ? `до ${t.max_c}°C`
                : "—"}
        </div>
        {(t.avg_min_c != null || t.avg_max_c != null) && (
          <div style={{ fontSize: 11, color: "#6b7280" }}>
            ср. {t.avg_min_c != null ? `${t.avg_min_c}` : "?"}
            {"/"}
            {t.avg_max_c != null ? `${t.avg_max_c}` : "?"}°C
          </div>
        )}
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
        <div style={{ fontSize: 11, color: "#6b7280" }}>Осадки</div>
        <div style={{ fontSize: 14, fontWeight: 600, color: "#374151" }}>
          {weather.precipitation_total_mm} мм
          <span style={{ fontSize: 11, fontWeight: 400, color: "#6b7280" }}>
            {" "}
            (за {weather.forecast_days} дн.)
          </span>
        </div>
        <div style={{ fontSize: 11, color: "#6b7280" }}>
          {weather.precipitation_days} дн. с осадками
        </div>
      </div>

      {weather.uv_index_max != null && (
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <div style={{ fontSize: 11, color: "#6b7280" }}>UV макс:</div>
          <div
            style={{
              fontSize: 14,
              fontWeight: 700,
              color: uvColor(weather.uv_index_max),
            }}
          >
            {weather.uv_index_max}
          </div>
        </div>
      )}

      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
        <WindArrow deg={wind.dominant_direction_deg} />
        <div style={{ fontSize: 13, color: "#374151" }}>
          {wind.dominant_direction_label}
          {wind.max_speed_m_s != null ? ` · до ${wind.max_speed_m_s} м/с` : ""}
        </div>
      </div>

      <div
        style={{
          fontSize: 11,
          color: "#9ca3af",
          overflow: "hidden",
          textOverflow: "ellipsis",
          whiteSpace: "nowrap",
        }}
        title={weather.note}
      >
        {weather.source} · 7 дн.
      </div>
    </div>
  );
}

// ── EnvironmentTab ────────────────────────────────────────────────────────────

export function EnvironmentTab({ data }: Props) {
  const hasEnv =
    data.noise !== undefined ||
    data.air_quality !== undefined ||
    data.wind !== undefined ||
    data.weather !== undefined;

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
      {/* Primary env grid */}
      {hasEnv && (
        <div>
          <SectionLabel style={{ marginBottom: 12 }}>
            Внешние факторы
          </SectionLabel>
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
              gap: 10,
            }}
          >
            {data.noise !== undefined ? (
              data.noise !== null ? (
                <NoiseBlock noise={data.noise} />
              ) : (
                <div
                  style={{
                    borderRadius: 10,
                    padding: "14px 16px",
                    background: "#f3f4f6",
                  }}
                >
                  <div
                    style={{ fontSize: 12, fontWeight: 700, color: "#374151" }}
                  >
                    Шум
                  </div>
                  <div style={{ fontSize: 13, color: "#9ca3af", marginTop: 8 }}>
                    Данные недоступны
                  </div>
                </div>
              )
            ) : null}

            <AirQualityBlock aq={data.air_quality ?? null} />

            {data.weather !== undefined ? (
              <WeatherBlock weather={data.weather} />
            ) : (
              <WindBlock wind={data.wind ?? null} />
            )}
          </div>
        </div>
      )}

      {/* Seasonal weather */}
      {"seasonal_weather" in data && (
        <div>
          <SectionLabel style={{ marginBottom: 12 }}>
            Климат (нормали 30 лет)
          </SectionLabel>
          <SeasonalWeatherBlock seasonal={data.seasonal_weather} />
        </div>
      )}

      {/* Hydrology */}
      {data.hydrology !== undefined && (
        <div>
          <SectionLabel style={{ marginBottom: 12 }}>Гидрология</SectionLabel>
          <HydrologyBlock hydrology={data.hydrology} />
        </div>
      )}

      {!hasEnv &&
        !("seasonal_weather" in data) &&
        data.hydrology === undefined && (
          <EmptyState message="Данные об окружающей среде недоступны" />
        )}
    </div>
  );
}