"use client";

import { useState } from "react";

import type {
  ConnectionPointsResponse,
  EngineeringStructure,
} from "@/types/nspd";
import {
  CP_ALL_CATEGORIES,
  CP_CATEGORY_STYLES,
  type CpCategory,
} from "@/components/site-finder/ConnectionPointsLayer";
import { MARKET_COLORS } from "@/components/site-finder/MarketLayers";
import type { MarketLayerKey } from "@/components/site-finder/SiteMap";

// #999 (958-B4) — конфиг рыночных слоёв для тумблеров. count = число объектов
// с координатами (без них точка не рисуется), поэтому показываем именно его.
export interface MarketLayerToggle {
  key: MarketLayerKey;
  label: string;
  color: string;
  count: number;
}

interface Props {
  data: ConnectionPointsResponse | null;
  grouped: Map<CpCategory, EngineeringStructure[]>;
  visibleCategories: Set<CpCategory>;
  onToggleCategory: (cat: CpCategory) => void;
  onToggleAll: () => void;
  // #999 — рыночные слои (опциональны: панель работает и без них).
  marketLayers?: MarketLayerToggle[];
  visibleMarketLayers?: Set<MarketLayerKey>;
  onToggleMarketLayer?: (key: MarketLayerKey) => void;
}

export function CpLayerControlPanel({
  data,
  grouped,
  visibleCategories,
  onToggleCategory,
  onToggleAll,
  marketLayers,
  visibleMarketLayers,
  onToggleMarketLayer,
}: Props) {
  const [collapsed, setCollapsed] = useState(false);

  const totalCount = data?.engineering_structures.length ?? 0;
  // #1459 — чекбоксы рендерятся только для непустых категорий, поэтому
  // «Показать все» должен отражать состояние именно доступных пользователю
  // (непустых) категорий, а не всех CP_ALL_CATEGORIES (включая пустые).
  const togglableCategories = CP_ALL_CATEGORIES.filter(
    (cat) => (grouped.get(cat)?.length ?? 0) > 0,
  );
  const allVisible =
    togglableCategories.length > 0 &&
    togglableCategories.every((cat) => visibleCategories.has(cat));
  const hasMarketLayers = (marketLayers?.length ?? 0) > 0;

  return (
    <div
      style={{
        background: "#fff",
        border: "1px solid #e5e7eb",
        borderRadius: 10,
        marginTop: 10,
        fontSize: 12,
      }}
    >
      {/* Header */}
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          padding: "8px 12px",
          cursor: "pointer",
          userSelect: "none",
          borderBottom: collapsed ? "none" : "1px solid #f3f4f6",
        }}
        onClick={() => setCollapsed((v) => !v)}
      >
        <span style={{ fontWeight: 700, color: "#1f2937" }}>
          {data ? "Слои карты" : "Слои рынка"}
        </span>
        <span style={{ color: "#6b7280", fontSize: 11 }}>
          {data ? `${totalCount} тчк ` : ""}
          {collapsed ? "▲" : "▼"}
        </span>
      </div>

      {!collapsed && (
        <div style={{ padding: "8px 12px 10px" }}>
          {/* ── Точки подключения (CP) ─────────────────────────────── */}
          {data && (
            <>
          {/* No dump */}
          {!data.dump_available && (
            <div
              style={{
                background: "#fef3c7",
                color: "#92400e",
                borderRadius: 6,
                padding: "4px 8px",
                fontSize: 11,
                marginBottom: 8,
              }}
            >
              Дамп квартала не загружен — 0 точек подключения
            </div>
          )}

          {/* Empty state */}
          {data.dump_available && totalCount === 0 && (
            <div style={{ color: "#6b7280", fontSize: 11, marginBottom: 6 }}>
              0 точек подключения в этом квартале
            </div>
          )}

          {/* Toggle-all */}
          {totalCount > 0 && (
            <label
              style={{
                display: "flex",
                alignItems: "center",
                gap: 6,
                marginBottom: 6,
                cursor: "pointer",
                fontWeight: 600,
                color: "#374151",
              }}
            >
              <input
                type="checkbox"
                checked={allVisible}
                onChange={onToggleAll}
                style={{ cursor: "pointer" }}
              />
              Показать все ({totalCount})
            </label>
          )}

          {/* Per-category */}
          <div
            style={{
              display: "flex",
              flexWrap: "wrap",
              gap: "4px 14px",
            }}
          >
            {CP_ALL_CATEGORIES.map((cat) => {
              const structs = grouped.get(cat) ?? [];
              const style = CP_CATEGORY_STYLES[cat];
              if (structs.length === 0) return null;
              const active = visibleCategories.has(cat);
              return (
                <label
                  key={cat}
                  style={{
                    display: "flex",
                    alignItems: "center",
                    gap: 5,
                    cursor: "pointer",
                    color: "#374151",
                    opacity: active ? 1 : 0.45,
                    transition: "opacity 0.15s",
                  }}
                >
                  <input
                    type="checkbox"
                    checked={active}
                    onChange={() => onToggleCategory(cat)}
                    style={{ cursor: "pointer" }}
                  />
                  <span
                    style={{
                      display: "inline-block",
                      width: 10,
                      height: 10,
                      borderRadius: "50%",
                      background: style.color,
                      flexShrink: 0,
                    }}
                  />
                  {style.label}
                  <span style={{ color: "#9ca3af" }}>{structs.length}</span>
                </label>
              );
            })}
          </div>

          {/* Summary */}
          {data.dump_available && totalCount > 0 && (
            <div
              style={{
                marginTop: 8,
                paddingTop: 8,
                borderTop: "1px solid #f3f4f6",
                display: "flex",
                flexWrap: "wrap",
                gap: 6,
                alignItems: "center",
              }}
            >
              {data.summary.nearest_structure_distance_m !== null && (
                <span
                  style={{
                    background: "#f3f4f6",
                    color: "#374151",
                    borderRadius: 6,
                    padding: "2px 8px",
                    fontSize: 11,
                  }}
                >
                  Ближайший:{" "}
                  {Math.round(data.summary.nearest_structure_distance_m)} м
                </span>
              )}
              {data.summary.in_protection_zone && (
                <span
                  style={{
                    background: "#fee2e2",
                    color: "#991b1b",
                    borderRadius: 6,
                    padding: "2px 8px",
                    fontSize: 11,
                    fontWeight: 600,
                  }}
                >
                  В охранной зоне
                </span>
              )}
              {data.summary.protection_zones_intersecting > 0 &&
                !data.summary.in_protection_zone && (
                  <span
                    style={{
                      background: "#fef3c7",
                      color: "#92400e",
                      borderRadius: 6,
                      padding: "2px 8px",
                      fontSize: 11,
                    }}
                  >
                    Охранных зон: {data.summary.protection_zones_intersecting}
                  </span>
                )}
            </div>
          )}
            </>
          )}

          {/* ── Рыночные слои (#999, 958-B4) ───────────────────────── */}
          {hasMarketLayers && visibleMarketLayers && onToggleMarketLayer && (
            <div
              style={{
                marginTop: data ? 8 : 0,
                paddingTop: data ? 8 : 0,
                borderTop: data ? "1px solid #f3f4f6" : "none",
              }}
            >
              <div
                style={{
                  fontWeight: 600,
                  color: "#374151",
                  marginBottom: 6,
                }}
              >
                Рынок
              </div>
              <div
                style={{
                  display: "flex",
                  flexWrap: "wrap",
                  gap: "4px 14px",
                }}
              >
                {marketLayers!.map((ml) => {
                  const active = visibleMarketLayers.has(ml.key);
                  return (
                    <label
                      key={ml.key}
                      style={{
                        display: "flex",
                        alignItems: "center",
                        gap: 5,
                        cursor: "pointer",
                        color: "#374151",
                        opacity: active ? 1 : 0.45,
                        transition: "opacity 0.15s",
                      }}
                    >
                      <input
                        type="checkbox"
                        checked={active}
                        onChange={() => onToggleMarketLayer(ml.key)}
                        style={{ cursor: "pointer" }}
                      />
                      <span
                        style={{
                          display: "inline-block",
                          width: 10,
                          height: 10,
                          borderRadius: "50%",
                          background: ml.color,
                          flexShrink: 0,
                        }}
                      />
                      {ml.label}
                      <span style={{ color: "#9ca3af" }}>{ml.count}</span>
                    </label>
                  );
                })}
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
}