"use client";

import type { NspdZouitOverlap } from "@/types/nspd";

interface Props {
  overlaps: NspdZouitOverlap[];
}

// Group key → human-readable label
const GROUP_LABELS: Record<string, string> = {
  engineering: "Инженерные коммуникации",
  okn: "Объекты культурного наследия",
  natural: "Природные территории",
  protected: "Охраняемые зоны",
  other: "Прочие ЗОУИТ",
};

// Determine a color-coded severity badge from group_key
function getSeverityStyle(groupKey: string): {
  bg: string;
  color: string;
  label: string;
} {
  switch (groupKey) {
    case "engineering":
      return { bg: "#fef3c7", color: "#92400e", label: "warn" };
    case "okn":
      return { bg: "#fee2e2", color: "#991b1b", label: "block" };
    case "protected":
      return { bg: "#fee2e2", color: "#991b1b", label: "block" };
    case "natural":
      return { bg: "#dbeafe", color: "#1e40af", label: "low" };
    default:
      return { bg: "#f3f4f6", color: "#374151", label: "info" };
  }
}

export function NspdZouitOverlapsBlock({ overlaps }: Props) {
  if (overlaps.length === 0) {
    return (
      <div
        style={{
          display: "flex",
          alignItems: "center",
          gap: 8,
          background: "#f0fdf4",
          border: "1px solid #bbf7d0",
          borderRadius: 8,
          padding: "10px 14px",
        }}
      >
        <span
          style={{
            background: "#dcfce7",
            color: "#15803d",
            borderRadius: 6,
            padding: "2px 10px",
            fontSize: 12,
            fontWeight: 600,
          }}
        >
          Нет пересечений
        </span>
        <span style={{ fontSize: 13, color: "#15803d" }}>
          Охранных зон ЗОУИТ не обнаружено
        </span>
      </div>
    );
  }

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      {overlaps.map((overlap, idx) => {
        const style = getSeverityStyle(overlap.group_key);
        const label = GROUP_LABELS[overlap.group_key] ?? overlap.group_key;
        const detail =
          overlap.name ||
          (typeof overlap.subcategory === "string"
            ? overlap.subcategory
            : null);

        return (
          <div
            key={idx}
            style={{
              background: "#f9fafb",
              border: "1px solid #e5e7eb",
              borderRadius: 8,
              padding: "10px 14px",
              display: "flex",
              alignItems: "flex-start",
              gap: 10,
            }}
          >
            <span
              style={{
                background: style.bg,
                color: style.color,
                borderRadius: 5,
                padding: "2px 8px",
                fontSize: 11,
                fontWeight: 700,
                whiteSpace: "nowrap",
                flexShrink: 0,
              }}
            >
              {style.label.toUpperCase()}
            </span>
            <div>
              <div style={{ fontSize: 13, fontWeight: 500, color: "#1f2937" }}>
                {label}
              </div>
              {detail && (
                <div style={{ fontSize: 12, color: "#6b7280", marginTop: 2 }}>
                  {detail}
                </div>
              )}
            </div>
          </div>
        );
      })}
    </div>
  );
}
