import type { LucideIcon } from 'lucide-react'
import type { CSSProperties, ReactElement } from 'react'
import type { BlockConcept, KindIconName } from './types'
import {
  Activity,
  Anchor,
  Atom,
  Box,
  Braces,
  CalendarClock,
  Code,
  Copy,
  CornerDownLeft,
  CornerDownRight,
  Database,
  Download,
  Globe,
  Import,
  Layers,
  LayoutTemplate,
  ListOrdered,
  Lock,
  MessageSquareText,
  MousePointerClick,
  Network,
  Package,
  Play,
  Repeat,
  ServerCog,
  Shield,
  ShieldAlert,
  ShieldCheck,
  Sigma,
  Signpost,
  SlidersHorizontal,
  Split,
  SquareFunction,
  SquareTerminal,
  Tag,
  Terminal,
  ToggleRight,
  TriangleAlert,
  Variable,
  Zap,
} from 'lucide-react'

/** 插件定义的这组种类图标，每个名字一个 lucide 图标（逐个 import，打包只带这些）。 */
export const KIND_ICON_COMPONENTS: Record<KindIconName, LucideIcon> = {
  'import': Import,
  'square-function': SquareFunction,
  'box': Box,
  'braces': Braces,
  'list-ordered': ListOrdered,
  'triangle-alert': TriangleAlert,
  'tag': Tag,
  'lock': Lock,
  'variable': Variable,
  'split': Split,
  'corner-down-right': CornerDownRight,
  'repeat': Repeat,
  'shield': Shield,
  'shield-alert': ShieldAlert,
  'shield-check': ShieldCheck,
  'corner-down-left': CornerDownLeft,
  'code': Code,
  'message-square-text': MessageSquareText,
  'terminal': Terminal,
  'sliders-horizontal': SlidersHorizontal,
  'signpost': Signpost,
  'square-terminal': SquareTerminal,
  'layers': Layers,
  'copy': Copy,
  'activity': Activity,
  'play': Play,
  'database': Database,
  'package': Package,
  'server-cog': ServerCog,
  'calendar-clock': CalendarClock,
  'globe': Globe,
  'network': Network,
  'atom': Atom,
  'zap': Zap,
  'mouse-pointer-click': MousePointerClick,
  'toggle-right': ToggleRight,
  'anchor': Anchor,
  'download': Download,
  'sigma': Sigma,
  'layout-template': LayoutTemplate,
}

/**
 * 卡片左边的概念图标，横排，各 20px，间距紧。图标名由宿主放进概念列表，这里只按名字画。
 * 没有颜色的是语言的种类，按 id 用 CSS 的种类色；有颜色的只给这个图标上色。
 * 每个图标悬停自己的名字（data-tooltip，见 components/ui/tooltip.tsx）；读屏把名字连起来念。
 */
export function KindIcon({ concepts }: { concepts: readonly BlockConcept[] }): ReactElement {
  return (
    <span className="flex shrink-0 items-center gap-0.5" role="img" aria-label={concepts.map(concept => concept.label).join('，')}>
      {concepts.map((concept) => {
        const Icon = KIND_ICON_COMPONENTS[concept.icon]
        const tint = concept.color
          ? { 'data-badge': '' as const, 'style': { '--kind-dark': concept.color.dark, '--kind-light': concept.color.light } as CSSProperties }
          : { 'data-kind': concept.id }
        return (
          <span key={concept.id} className="cr-kind flex size-5 shrink-0 items-center justify-center" data-tooltip={concept.label} aria-hidden {...tint}>
            <Icon size={16} strokeWidth={2.2} aria-hidden />
          </span>
        )
      })}
    </span>
  )
}