import type { SVGProps } from 'react'

import { cn } from '@/lib/cn'

/**
 * A small hand-drawn icon set.
 *
 * Bundled as components rather than pulled from an icon package: the whole app has to
 * work with no network access, the set needed here is small, and every glyph is
 * `currentColor` so it inherits state colour without a second variant.
 */

type IconProps = SVGProps<SVGSVGElement> & { className?: string }

function Icon({ className, children, ...props }: IconProps & { children: React.ReactNode }) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.6"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
      className={cn('size-4 shrink-0', className)}
      {...props}
    >
      {children}
    </svg>
  )
}

export const IconCommand = (p: IconProps) => (
  <Icon {...p}>
    <path d="M3 12h4l2-7 4 14 2.5-7H21" />
  </Icon>
)

export const IconExecutive = (p: IconProps) => (
  <Icon {...p}>
    <path d="M4 19V9m5 10V5m5 14v-7m5 7V8" />
  </Icon>
)

export const IconGrid = (p: IconProps) => (
  <Icon {...p}>
    <path d="M4 4h16v16H4z" />
    <path d="M4 10h16M4 15h16M10 4v16M15 4v16" />
  </Icon>
)

export const IconMap = (p: IconProps) => (
  <Icon {...p}>
    <path d="M9 4 4 6v14l5-2 6 2 5-2V4l-5 2-6-2Z" />
    <path d="M9 4v14M15 6v14" />
  </Icon>
)

export const IconAlert = (p: IconProps) => (
  <Icon {...p}>
    <path d="M12 4 3 19h18L12 4Z" />
    <path d="M12 10v4M12 17h.01" />
  </Icon>
)

export const IconIncident = (p: IconProps) => (
  <Icon {...p}>
    <path d="M3 12h4l2.5-6 3.5 12 2.5-6h5.5" />
    <circle cx="12" cy="12" r="9" />
  </Icon>
)

export const IconPrediction = (p: IconProps) => (
  <Icon {...p}>
    <path d="M3 17l5-6 4 3 5-8" />
    <path d="M17 6h4v4" />
  </Icon>
)

export const IconDna = (p: IconProps) => (
  <Icon {...p}>
    <path d="M7 4c0 5 10 6 10 11M17 4c0 5-10 6-10 11" />
    <path d="M7 20c0-2 10-2 10 0M8.5 8h7M8.5 16h7" />
  </Icon>
)

export const IconClock = (p: IconProps) => (
  <Icon {...p}>
    <circle cx="12" cy="12" r="8.5" />
    <path d="M12 7v5l3.5 2" />
  </Icon>
)

export const IconScenario = (p: IconProps) => (
  <Icon {...p}>
    <path d="M4 6h6M4 12h10M4 18h6" />
    <path d="M16 15l3 3 3-6" />
  </Icon>
)

export const IconSimulation = (p: IconProps) => (
  <Icon {...p}>
    <circle cx="12" cy="12" r="3" />
    <ellipse cx="12" cy="12" rx="9.5" ry="4" />
    <ellipse cx="12" cy="12" rx="9.5" ry="4" transform="rotate(60 12 12)" />
  </Icon>
)

export const IconForecast = (p: IconProps) => (
  <Icon {...p}>
    <path d="M3 16l4-5 4 3 4-7 6 4" />
    <path d="M3 20h18" />
  </Icon>
)

export const IconRenewable = (p: IconProps) => (
  <Icon {...p}>
    <circle cx="12" cy="12" r="3.2" />
    <path d="M12 3v2.4M12 18.6V21M3 12h2.4M18.6 12H21M5.6 5.6l1.7 1.7M16.7 16.7l1.7 1.7M18.4 5.6l-1.7 1.7M7.3 16.7l-1.7 1.7" />
  </Icon>
)

export const IconCopilot = (p: IconProps) => (
  <Icon {...p}>
    <path d="M4 6h16v10H9l-5 4V6Z" />
    <path d="M9 11h.01M12 11h.01M15 11h.01" />
  </Icon>
)

export const IconAsset = (p: IconProps) => (
  <Icon {...p}>
    <path d="M4 8l8-4 8 4-8 4-8-4Z" />
    <path d="M4 12l8 4 8-4M4 16l8 4 8-4" />
  </Icon>
)

export const IconMaintenance = (p: IconProps) => (
  <Icon {...p}>
    <path d="M14.5 5.5a4 4 0 0 0 5 5L15 15l-6 6-3-3 6-6 3.5-6.5Z" />
  </Icon>
)

export const IconModel = (p: IconProps) => (
  <Icon {...p}>
    <circle cx="6" cy="7" r="2.2" />
    <circle cx="6" cy="17" r="2.2" />
    <circle cx="18" cy="12" r="2.2" />
    <path d="M8.2 8.1 15.8 11M8.2 15.9 15.8 13" />
  </Icon>
)

export const IconIntegration = (p: IconProps) => (
  <Icon {...p}>
    <path d="M10 4H6a2 2 0 0 0-2 2v4M14 4h4a2 2 0 0 1 2 2v4M10 20H6a2 2 0 0 1-2-2v-4M14 20h4a2 2 0 0 0 2-2v-4" />
    <circle cx="12" cy="12" r="2.5" />
  </Icon>
)

export const IconAudit = (p: IconProps) => (
  <Icon {...p}>
    <path d="M6 3h9l4 4v14H6z" />
    <path d="M9 12h7M9 16h5M14 3v4h5" />
  </Icon>
)

export const IconSettings = (p: IconProps) => (
  <Icon {...p}>
    <circle cx="12" cy="12" r="3" />
    <path d="M12 2.8v2.4M12 18.8v2.4M21.2 12h-2.4M5.2 12H2.8M18.5 5.5l-1.7 1.7M7.2 16.8l-1.7 1.7M18.5 18.5l-1.7-1.7M7.2 7.2 5.5 5.5" />
  </Icon>
)

export const IconUsers = (p: IconProps) => (
  <Icon {...p}>
    <circle cx="9" cy="8" r="3.2" />
    <path d="M3.5 19c0-3 2.5-5 5.5-5s5.5 2 5.5 5" />
    <path d="M16 5.5a3 3 0 0 1 0 5.6M17.5 19c0-2.3-.8-3.9-2-5" />
  </Icon>
)

export const IconRoles = (p: IconProps) => (
  <Icon {...p}>
    <path d="M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6l7-3Z" />
    <path d="M9.5 12l1.8 1.8 3.4-3.6" />
  </Icon>
)

export const IconDemo = (p: IconProps) => (
  <Icon {...p}>
    <path d="M8 5.5v13l10-6.5-10-6.5Z" />
  </Icon>
)

export const IconScreen = (p: IconProps) => (
  <Icon {...p}>
    <rect x="3" y="4" width="18" height="12.5" rx="1.6" />
    <path d="M9 20h6M12 16.5V20" />
  </Icon>
)

export const IconSpark = (p: IconProps) => (
  <Icon {...p}>
    <path d="M12 3l2.2 5.8L20 11l-5.8 2.2L12 19l-2.2-5.8L4 11l5.8-2.2L12 3Z" />
  </Icon>
)

export const IconChevron = (p: IconProps) => (
  <Icon {...p}>
    <path d="M9 5l7 7-7 7" />
  </Icon>
)

export const IconMenu = (p: IconProps) => (
  <Icon {...p}>
    <path d="M4 7h16M4 12h16M4 17h16" />
  </Icon>
)

export const IconClose = (p: IconProps) => (
  <Icon {...p}>
    <path d="M6 6l12 12M18 6L6 18" />
  </Icon>
)

export const IconSignOut = (p: IconProps) => (
  <Icon {...p}>
    <path d="M14 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-2" />
    <path d="M18 12H9m9 0-3-3m3 3-3 3" />
  </Icon>
)

export const IconSearch = (p: IconProps) => (
  <Icon {...p}>
    <circle cx="11" cy="11" r="6.5" />
    <path d="m16 16 4 4" />
  </Icon>
)

export const IconTemperature = (p: IconProps) => (
  <Icon {...p}>
    <path d="M10 13.5V5a2 2 0 1 1 4 0v8.5a4 4 0 1 1-4 0Z" />
  </Icon>
)

export const IconBolt = (p: IconProps) => (
  <Icon {...p}>
    <path d="M13 3 5 14h6l-1 7 8-11h-6l1-7Z" />
  </Icon>
)

export const IconShield = (p: IconProps) => (
  <Icon {...p}>
    <path d="M12 3l7.5 3v5.5c0 4.6-3.2 8.4-7.5 10-4.3-1.6-7.5-5.4-7.5-10V6L12 3Z" />
  </Icon>
)

/** Maps an asset type to its glyph, used by the map and asset tables. */
// ── Decision intelligence (2.0) ─────────────────────────────────────────────

/** Agents: a panel of separate observers reporting to one point. */
export const IconAgents = (p: IconProps) => (
  <Icon {...p}>
    <circle cx="12" cy="12" r="2.6" />
    <circle cx="5" cy="6" r="1.8" />
    <circle cx="19" cy="6" r="1.8" />
    <circle cx="5" cy="18" r="1.8" />
    <circle cx="19" cy="18" r="1.8" />
    <path d="M6.4 7.2 10 10.4M17.6 7.2 14 10.4M6.4 16.8 10 13.6M17.6 16.8 14 13.6" />
  </Icon>
)

/** War room: a situation under a single focused light. */
export const IconWarRoom = (p: IconProps) => (
  <Icon {...p}>
    <path d="M12 3v3M4.2 7.2l2.1 2.1M19.8 7.2l-2.1 2.1" />
    <circle cx="12" cy="13.5" r="3.2" />
    <path d="M5 20.5h14" />
  </Icon>
)

/** Cascade: one tile toppling into the next. */
export const IconCascade = (p: IconProps) => (
  <Icon {...p}>
    <rect x="3" y="5" width="4" height="14" rx="1" />
    <rect x="10" y="8" width="4" height="11" rx="1" transform="rotate(9 12 13.5)" />
    <rect x="17" y="11" width="4" height="8" rx="1" transform="rotate(18 19 15)" />
  </Icon>
)

/** Counterfactual: the smaller of two paths reaching the same point. */
export const IconCounterfactual = (p: IconProps) => (
  <Icon {...p}>
    <path d="M4 19c3.5 0 4.5-14 8-14s4.5 8 8 8" />
    <path d="M4 19h5" strokeDasharray="2 2" />
    <circle cx="20" cy="13" r="1.6" />
  </Icon>
)

/** Self-healing: a break closing itself. */
export const IconSelfHealing = (p: IconProps) => (
  <Icon {...p}>
    <path d="M8.5 5.5 5 9a4.2 4.2 0 0 0 6 6l1-1" />
    <path d="M15.5 18.5 19 15a4.2 4.2 0 0 0-6-6l-1 1" />
    <path d="M10.5 13.5 13.5 10.5" strokeDasharray="1.5 2" />
  </Icon>
)

/** Radar: concentric sweep. */
export const IconRadar = (p: IconProps) => (
  <Icon {...p}>
    <circle cx="12" cy="12" r="8.5" />
    <circle cx="12" cy="12" r="4.5" />
    <path d="M12 12 18 7.5" />
    <circle cx="15.5" cy="9" r="1" fill="currentColor" stroke="none" />
  </Icon>
)

/** Digital twin: the same object twice, one of them dashed. */
export const IconTwin = (p: IconProps) => (
  <Icon {...p}>
    <rect x="3.5" y="6" width="9" height="12" rx="1.5" />
    <rect x="11.5" y="6" width="9" height="12" rx="1.5" strokeDasharray="2.5 2" />
  </Icon>
)

/** Knowledge graph: nodes joined by named relations. */
export const IconKnowledge = (p: IconProps) => (
  <Icon {...p}>
    <circle cx="6" cy="7" r="2.2" />
    <circle cx="18" cy="9" r="2.2" />
    <circle cx="11" cy="18" r="2.2" />
    <path d="M8 8 15.9 8.6M7.2 9.1 9.9 15.9M16.7 10.9 12.4 16.2" />
  </Icon>
)

/** Decisions: a signed record. */
export const IconDecisions = (p: IconProps) => (
  <Icon {...p}>
    <path d="M6 3.5h9L19 7.5v13H6z" />
    <path d="M9 12.5h6M9 16h4" />
    <path d="M14.5 3.5V8H19" />
  </Icon>
)

/** Hackathon: the whole journey in one frame. */
export const IconHackathon = (p: IconProps) => (
  <Icon {...p}>
    <path d="M4 20V4h16v16z" />
    <path d="M7.5 15.5 10 12l2.5 2.5L16.5 8.5" />
  </Icon>
)

/** Resilience: a structure that bends and returns. */
export const IconResilience = (p: IconProps) => (
  <Icon {...p}>
    <path d="M4 18c2.5 0 3-9 8-9s5.5 5 8 5" />
    <path d="M4 21h16" />
    <circle cx="12" cy="9" r="1.4" />
  </Icon>
)

/** Trust: a mark inside a shield. */
export const IconTrust = (p: IconProps) => (
  <Icon {...p}>
    <path d="M12 3.5 19 6v6c0 4.2-2.9 7.2-7 8.5-4.1-1.3-7-4.3-7-8.5V6z" />
    <path d="m9 12 2 2 4-4" />
  </Icon>
)

/** Reports: a document with a chart on it. */
export const IconReports = (p: IconProps) => (
  <Icon {...p}>
    <path d="M6 3.5h12v17H6z" />
    <path d="M9 15.5v-3M12 15.5v-6M15 15.5v-4" />
  </Icon>
)

export const ASSET_TYPE_ICONS: Record<string, (p: IconProps) => React.ReactElement> = {
  power_plant: IconBolt,
  substation: IconGrid,
  transformer: IconCommand,
  transmission_line: IconForecast,
  battery_storage: IconShield,
  solar_farm: IconRenewable,
  wind_farm: IconSimulation,
  industrial_load: IconAsset,
  ev_hub: IconSpark,
}