next-tjwater-frontend/src/features/map/core/components/legend.tsx

import type { LucideIcon } from "lucide-react";
import { cn } from "@/shared/ui/cn";
import {
  MAP_ICON_CELL_RADIUS_CLASS_NAME,
  MAP_MAJOR_PANEL_RADIUS_CLASS_NAME,
  MAP_TOOL_PANEL_SURFACE_CLASS_NAME
} from "./map-control-styles";

export type MapLegendItem = {
  id: string;
  label: string;
  description?: string;
  color: string;
  layerControlId?: string;
  group?: string;
  groupLabel?: string;
  groupDescription?: string;
  groupLayout?: "list" | "grid";
  icon?: LucideIcon;
  imageSrc?: string;
  lineWidth?: number;
  shape?: "line" | "dashed-line" | "dash-dot-line" | "dot" | "ring" | "square" | "area";
};

type MapLegendProps = {
  title?: string;
  items: MapLegendItem[];
  className?: string;
};

export function MapLegend({ title = "图例", items, className = "" }: MapLegendProps) {
  return (
    <section
      aria-label={title}
      className={cn(
        "pointer-events-auto w-[236px] p-3",
        MAP_MAJOR_PANEL_RADIUS_CLASS_NAME,
        MAP_TOOL_PANEL_SURFACE_CLASS_NAME,
        className
      )}
    >
      <h2 className="px-1 text-sm font-semibold leading-tight text-slate-950">{title}</h2>
      <p className="mt-0.5 px-1 text-xs text-slate-500">当前地图符号与分级</p>
      <MapLegendList items={items} className="mt-3" />
    </section>
  );
}

type MapLegendListProps = {
  items: MapLegendItem[];
  className?: string;
};

export function MapLegendList({ items, className = "" }: MapLegendListProps) {
  const groups = groupLegendItems(items);

  if (groups.length === 0) {
    return (
      <div className={cn("surface-well rounded-xl border px-3 py-4 text-center", className)}>
        <p className="text-xs font-semibold text-slate-700">暂无可见业务图层</p>
        <p className="mt-1 text-[11px] leading-relaxed text-slate-500">请先在图层面板中打开需要查看的内容。</p>
      </div>
    );
  }

  return (
    <div className={cn("space-y-2", className)}>
      {groups.map((group) => (
        <section
          key={group.id}
          aria-label={group.label}
          className="surface-well overflow-hidden rounded-xl border"
        >
          <div className="flex min-h-10 items-center gap-2 px-2.5 py-1.5">
            <span className="min-w-0 flex-1">
              <span className="block truncate text-xs font-semibold text-slate-700">{group.label}</span>
              {group.description ? (
                <span className="mt-0.5 block truncate text-[10px] leading-tight text-slate-500">
                  {group.description}
                </span>
              ) : null}
            </span>
            <span className="shrink-0 rounded-full bg-white/75 px-2 py-0.5 text-[10px] font-medium tabular-nums text-slate-500 shadow-xs shadow-slate-950/5">
              {group.items.length} 类
            </span>
          </div>
          <ul
            className={cn(
              "border-t border-slate-200/70",
              group.layout === "grid"
                ? "grid grid-cols-2 gap-px bg-slate-200/70"
                : "divide-y divide-slate-200/70 bg-white/45"
            )}
          >
            {group.items.map((item) => (
              <LegendItem key={item.id} item={item} compact={group.layout === "grid"} />
            ))}
          </ul>
        </section>
      ))}
    </div>
  );
}

function groupLegendItems(items: MapLegendItem[]) {
  const groups = new Map<string, {
    id: string;
    label: string;
    description?: string;
    layout: "list" | "grid";
    items: MapLegendItem[];
  }>();
  items.forEach((item) => {
    const id = item.group ?? "legend";
    const existing = groups.get(id);
    if (existing) {
      existing.items.push(item);
      return;
    }
    groups.set(id, {
      id,
      label: item.groupLabel ?? "地图符号",
      description: item.groupDescription,
      layout: item.groupLayout ?? "list",
      items: [item]
    });
  });
  return [...groups.values()];
}

function LegendItem({ item, compact }: { item: MapLegendItem; compact: boolean }) {
  const Icon = item.icon;
  return (
    <li
      className={cn(
        "flex items-center text-slate-700",
        compact ? "min-h-11 gap-2 bg-white/70 px-2 py-1.5" : "min-h-9 gap-2.5 px-2.5 py-1.5"
      )}
    >
      <span
        aria-hidden="true"
        className={cn(
          "grid shrink-0 place-items-center bg-slate-50 shadow-inner shadow-slate-950/5",
          MAP_ICON_CELL_RADIUS_CLASS_NAME,
          compact ? "h-7 w-7" : "h-7 w-9"
        )}
      >
        {item.imageSrc ? (
          <img src={item.imageSrc} alt="" width={24} height={24} />
        ) : Icon ? (
          <Icon size={15} style={{ color: item.color }} />
        ) : (
          <MapLegendSwatch color={item.color} shape={item.shape} lineWidth={item.lineWidth} />
        )}
      </span>
      <span className="min-w-0 flex-1">
        <span className="block truncate text-[11px] font-semibold leading-tight">{item.label}</span>
        {compact && item.description ? (
          <span className="mt-0.5 block truncate text-[10px] leading-tight text-slate-500">{item.description}</span>
        ) : null}
      </span>
      {!compact && item.description ? (
        <span className="shrink-0 text-[10px] text-slate-500">{item.description}</span>
      ) : null}
    </li>
  );
}

export function MapLegendSwatch({
  color,
  shape = "dot",
  lineWidth = 3
}: Pick<MapLegendItem, "color" | "shape" | "lineWidth">) {
  if (shape === "line" || shape === "dashed-line" || shape === "dash-dot-line") {
    const dashArray = shape === "dashed-line" ? "5 3" : shape === "dash-dot-line" ? "8 3 2 3" : undefined;
    return (
      <svg width="28" height="12" viewBox="0 0 28 12" aria-hidden="true">
        <line x1="2" y1="6" x2="26" y2="6" stroke="white" strokeWidth={lineWidth + 3} strokeLinecap="round" strokeDasharray={dashArray} />
        <line x1="2" y1="6" x2="26" y2="6" stroke={color} strokeWidth={lineWidth} strokeLinecap="round" strokeDasharray={dashArray} />
      </svg>
    );
  }

  if (shape === "square") {
    return <span className="h-4 w-4 rounded-sm" style={{ backgroundColor: color }} />;
  }

  if (shape === "area") {
    return (
      <span
        className="h-4 w-5 rounded-[4px] border"
        style={{ backgroundColor: `${color}24`, borderColor: color }}
      />
    );
  }

  if (shape === "ring") {
    return <span className="h-4 w-4 rounded-full border-[3px] bg-white" style={{ borderColor: color }} />;
  }

  return <span className="h-4 w-4 rounded-full ring-2 ring-white" style={{ backgroundColor: color }} />;
}