gendesign/frontend/src/components/site-finder/analysis/PoiList2Gis.tsx

/**
 * PoiList2Gis — top-7 POI list with weighted score.
 * Category icons: Lucide Train / TreePine / GraduationCap / Baby /
 *                 ShoppingBag / Hospital / Banknote
 * Per row: icon + name + distance + weight badge.
 */

import {
  Train,
  TreePine,
  GraduationCap,
  Baby,
  ShoppingBag,
  Hospital,
  Banknote,
  MapPin,
} from "lucide-react";
import type { ReactNode } from "react";
import { Badge } from "@/components/ui/Badge";
import type { PoiScoreItem } from "@/lib/site-finder-api";

// ── Icon mapping ──────────────────────────────────────────────────────────────

const CATEGORY_ICONS: Record<string, ReactNode> = {
  metro_stop: <Train size={16} strokeWidth={1.5} />,
  tram_stop: <Train size={16} strokeWidth={1.5} />,
  bus_stop: <Train size={16} strokeWidth={1.5} />,
  park: <TreePine size={16} strokeWidth={1.5} />,
  school: <GraduationCap size={16} strokeWidth={1.5} />,
  kindergarten: <Baby size={16} strokeWidth={1.5} />,
  shop_mall: <ShoppingBag size={16} strokeWidth={1.5} />,
  shop_supermarket: <ShoppingBag size={16} strokeWidth={1.5} />,
  shop_small: <ShoppingBag size={16} strokeWidth={1.5} />,
  hospital: <Hospital size={16} strokeWidth={1.5} />,
  pharmacy: <Hospital size={16} strokeWidth={1.5} />,
  bank: <Banknote size={16} strokeWidth={1.5} />,
};

const CATEGORY_LABELS: Record<string, string> = {
  metro_stop: "Метро",
  tram_stop: "Трамвай",
  bus_stop: "Автобус",
  park: "Парк",
  school: "Школа",
  kindergarten: "Детский сад",
  shop_mall: "ТЦ",
  shop_supermarket: "Супермаркет",
  shop_small: "Магазин",
  hospital: "Больница",
  pharmacy: "Аптека",
  bank: "Банк",
};

function weightBadgeVariant(
  weight: number,
): "success" | "info" | "neutral" | "warning" {
  if (weight >= 0.2) return "success";
  if (weight >= 0.12) return "info";
  if (weight >= 0.08) return "neutral";
  return "warning";
}

// ── Props ─────────────────────────────────────────────────────────────────────

interface Props {
  items: PoiScoreItem[];
  totalScore: number;
}

// ── Component ─────────────────────────────────────────────────────────────────

export function PoiList2Gis({ items, totalScore }: Props) {
  // Top-7, sorted by score_contribution desc
  const top7 = [...items]
    .sort((a, b) => b.score_contribution - a.score_contribution)
    .slice(0, 7);

  if (top7.length === 0) {
    return (
      <div
        style={{
          padding: "20px 16px",
          color: "var(--fg-tertiary)",
          fontSize: 13,
          textAlign: "center",
          border: "1px solid var(--border-card)",
          borderRadius: 12,
        }}
      >
        POI данные недоступны
      </div>
    );
  }

  return (
    <div
      style={{
        border: "1px solid var(--border-card)",
        borderRadius: 12,
        overflow: "hidden",
        background: "var(--bg-card)",
      }}
    >
      {/* Header */}
      <div
        style={{
          padding: "10px 16px",
          borderBottom: "1px solid var(--border-soft)",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
        }}
      >
        <span
          style={{
            fontSize: 12,
            fontWeight: 500,
            textTransform: "uppercase",
            letterSpacing: "0.04em",
            color: "var(--fg-tertiary)",
          }}
        >
          POI · 2ГИС / OSM
        </span>
        <span
          style={{
            fontSize: 13,
            fontWeight: 700,
            color: "var(--accent)",
            fontVariantNumeric: "tabular-nums",
          }}
        >
          {totalScore.toFixed(0)} / 100
        </span>
      </div>

      {/* List */}
      <ul style={{ listStyle: "none", margin: 0, padding: 0 }}>
        {top7.map((item, i) => {
          const icon = CATEGORY_ICONS[item.category] ?? (
            <MapPin size={16} strokeWidth={1.5} />
          );
          const categoryLabel = CATEGORY_LABELS[item.category] ?? item.category;
          const isLast = i === top7.length - 1;

          return (
            <li
              key={`${item.category}-${i}`}
              style={{
                display: "flex",
                alignItems: "center",
                gap: 12,
                padding: "10px 16px",
                borderBottom: isLast ? "none" : "1px solid var(--border-soft)",
                background:
                  i % 2 === 0 ? "var(--bg-card)" : "var(--bg-card-alt)",
              }}
            >
              {/* Icon */}
              <span
                style={{
                  color: "var(--accent)",
                  flexShrink: 0,
                  display: "flex",
                  alignItems: "center",
                }}
                aria-label={categoryLabel}
              >
                {icon}
              </span>

              {/* Name + category */}
              <div style={{ flex: 1, minWidth: 0 }}>
                <div
                  style={{
                    fontSize: 13,
                    fontWeight: 500,
                    color: "var(--fg-primary)",
                    overflow: "hidden",
                    textOverflow: "ellipsis",
                    whiteSpace: "nowrap",
                  }}
                >
                  {item.name}
                </div>
                <div
                  style={{
                    fontSize: 11,
                    color: "var(--fg-tertiary)",
                    marginTop: 1,
                  }}
                >
                  {categoryLabel}
                </div>
              </div>

              {/* Distance */}
              <span
                style={{
                  fontSize: 12,
                  color: "var(--fg-secondary)",
                  fontVariantNumeric: "tabular-nums",
                  flexShrink: 0,
                  whiteSpace: "nowrap",
                }}
              >
                {item.distance_m < 1000
                  ? `${Math.round(item.distance_m)} м`
                  : `${(item.distance_m / 1000).toFixed(1)} км`}
              </span>

              {/* Weight badge */}
              <Badge variant={weightBadgeVariant(item.weight)} size="sm">
                ×{item.weight.toFixed(2)}
              </Badge>
            </li>
          );
        })}
      </ul>
    </div>
  );
}