"use client";

import type { Hydrology, HydrologyNearest } from "@/types/site-finder";

interface Props {
  hydrology: Hydrology;
}

const SUBTYPE_ICON: Record<string, string> = {
  river: "🏞",
  stream: "💦",
  lake_or_pond: "🪷",
  canal: "🚣",
};

function subtypeLabel(subtype: HydrologyNearest["subtype"]): string {
  switch (subtype) {
    case "river":
      return "река";
    case "stream":
      return "ручей";
    case "lake_or_pond":
      return "озеро/пруд";
    case "canal":
      return "канал";
    default:
      return "водоём";
  }
}

export function HydrologyBlock({ hydrology }: Props) {
  const top5 = hydrology.nearest.slice(0, 5);

  return (
    <div
      style={{
        borderRadius: 10,
        padding: "14px 16px",
        background: "#f0f9ff",
        border: "1px solid #bae6fd",
        display: "flex",
        flexDirection: "column",
        gap: 10,
      }}
    >
      <div style={{ fontSize: 13, fontWeight: 700, color: "#0369a1" }}>
        Гидрология
      </div>

      {/* Flood risk banner */}
      {hydrology.flood_risk_flag && (
        <div
          style={{
            borderRadius: 8,
            padding: "10px 14px",
            background: "#fecaca",
            border: "1px solid #f87171",
            fontSize: 13,
            fontWeight: 600,
            color: "#b91c1c",
            display: "flex",
            alignItems: "center",
            gap: 6,
          }}
        >
          <span>⚠</span>
          <span>Возможная пойма — река/канал в &lt;200м</span>
        </div>
      )}

      {/* Nearest water bodies */}
      {top5.length === 0 ? (
        <div style={{ fontSize: 13, color: "#6b7280" }}>
          Поблизости водных объектов нет
        </div>
      ) : (
        <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
          {top5.map((item, i) => {
            const icon = SUBTYPE_ICON[item.subtype ?? ""] ?? "💧";
            const label = subtypeLabel(item.subtype);
            const name = item.name ?? "б/н";
            return (
              <div
                key={i}
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: 6,
                  fontSize: 13,
                  color: "#374151",
                }}
              >
                <span>{icon}</span>
                <span>
                  {name} {label} — {Math.round(item.distance_m)} м
                </span>
              </div>
            );
          })}
        </div>
      )}

      {/* Note */}
      {hydrology.note && (
        <div style={{ fontSize: 11, color: "#9ca3af" }}>{hydrology.note}</div>
      )}
    </div>
  );
}