import type { LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";
import {
  MAP_ICON_CELL_RADIUS_CLASS_NAME,
  MAP_MAJOR_PANEL_RADIUS_CLASS_NAME,
  MAP_READABLE_RADIUS_CLASS_NAME,
  MAP_READABLE_SURFACE_CLASS_NAME,
  MAP_TOOL_PANEL_SURFACE_CLASS_NAME
} from "./map-control-styles";

export type MapLegendItem = {
  id: string;
  label: string;
  description?: string;
  color: string;
  icon?: LucideIcon;
  imageSrc?: string;
  shape?: "line" | "dashed-line" | "dash-dot-line" | "dot" | "ring" | "square";
};

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;
  showStatusDot?: boolean;
};

export function MapLegendList({ items, className = "", showStatusDot = false }: MapLegendListProps) {
  return (
    <ul className={cn("space-y-1.5", className)}>
      {items.map((item) => {
        const Icon = item.icon;

        return (
          <li
            key={item.id}
            className={cn("flex min-h-10 items-center gap-2.5 px-2.5 py-2 text-sm text-slate-700", MAP_READABLE_RADIUS_CLASS_NAME, MAP_READABLE_SURFACE_CLASS_NAME)}
          >
            <span className={cn("grid h-7 w-7 shrink-0 place-items-center bg-slate-50", MAP_ICON_CELL_RADIUS_CLASS_NAME)} aria-hidden="true">
              {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} />}
            </span>
            <span className="min-w-0 flex-1">
              <span className="block truncate font-semibold">{item.label}</span>
              {item.description ? <span className="block truncate text-xs text-slate-500">{item.description}</span> : null}
            </span>
            {showStatusDot ? <span className="h-2 w-2 rounded-full bg-emerald-500" aria-hidden="true" /> : null}
          </li>
        );
      })}
    </ul>
  );
}

export function MapLegendSwatch({ color, shape = "dot" }: Pick<MapLegendItem, "color" | "shape">) {
  if (shape === "line") {
    return <span className="h-1 w-6 rounded-full" style={{ backgroundColor: color }} />;
  }

  if (shape === "dashed-line" || shape === "dash-dot-line") {
    return (
      <svg width="24" height="8" viewBox="0 0 24 8" aria-hidden="true">
        <line x1="1" y1="4" x2="23" y2="4" stroke={color} strokeWidth="3" strokeDasharray={shape === "dashed-line" ? "5 3" : "8 3 2 3"} />
      </svg>
    );
  }

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