/** 八方旅人風格像素圖示（純 SVG，不用 emoji） */
import type { ComponentType, ReactNode } from "react";
import { ICON_ART } from "../lib/iconAssets";
import RpgIcon from "./RpgIcon";

type IconProps = { size?: number; className?: string };

function base({ size = 24, className, children }: IconProps & { children: ReactNode }) {
  return (
    <svg className={className} width={size} height={size} viewBox="0 0 32 32" aria-hidden>
      {children}
    </svg>
  );
}

export function IconCompass({ size = 24, className }: IconProps) {
  return base({
    size,
    className,
    children: (
      <>
        <rect x="1" y="1" width="30" height="30" fill="#161b34" stroke="#e7c66b" strokeWidth="2" />
        <polygon points="16,5 19,15 16,13 13,15" fill="#e7c66b" />
        <polygon points="16,27 19,17 16,19 13,17" fill="#6fe0d0" />
        <polygon points="5,16 15,13 13,16 15,19" fill="#8fb8ff" />
        <polygon points="27,16 17,19 19,16 17,13" fill="#e86a52" />
        <circle cx="16" cy="16" r="3" fill="#0a0d18" stroke="#e7c66b" strokeWidth="1.5" />
      </>
    ),
  });
}

export function IconMacro({ size = 24, className }: IconProps) {
  return base({
    size,
    className,
    children: (
      <>
        <rect x="2" y="6" width="28" height="22" fill="#161b34" stroke="#6fe0d0" strokeWidth="2" />
        <polyline points="6,22 12,16 17,19 26,9" fill="none" stroke="#e7c66b" strokeWidth="2.5" />
        <circle cx="26" cy="9" r="2.5" fill="#e7c66b" />
      </>
    ),
  });
}

export function IconFlow({ size = 24, className }: IconProps) {
  return base({
    size,
    className,
    children: (
      <>
        <rect x="3" y="8" width="10" height="16" fill="#1b2240" stroke="#6fcf97" strokeWidth="2" />
        <rect x="13" y="12" width="10" height="12" fill="#1b2240" stroke="#e7c66b" strokeWidth="2" />
        <rect x="23" y="6" width="6" height="18" fill="#1b2240" stroke="#8fb8ff" strokeWidth="2" />
      </>
    ),
  });
}

export function IconCalendar({ size = 24, className }: IconProps) {
  return base({
    size,
    className,
    children: (
      <>
        <rect x="4" y="7" width="24" height="22" fill="#161b34" stroke="#e7c66b" strokeWidth="2" />
        <rect x="4" y="7" width="24" height="7" fill="#242b50" />
        <rect x="9" y="4" width="3" height="6" fill="#e7c66b" />
        <rect x="20" y="4" width="3" height="6" fill="#e7c66b" />
        <rect x="8" y="18" width="4" height="4" fill="#6fcf97" />
        <rect x="14" y="18" width="4" height="4" fill="#e86a52" />
        <rect x="20" y="18" width="4" height="4" fill="#8fb8ff" />
      </>
    ),
  });
}

export function IconChart({ size = 24, className }: IconProps) {
  return base({
    size,
    className,
    children: (
      <>
        <rect x="2" y="4" width="28" height="24" fill="#161b34" stroke="#8fb8ff" strokeWidth="2" />
        <rect x="7" y="20" width="4" height="6" fill="#6fcf97" />
        <rect x="14" y="14" width="4" height="12" fill="#e7c66b" />
        <rect x="21" y="10" width="4" height="16" fill="#6fe0d0" />
      </>
    ),
  });
}

export function IconWorld({ size = 24, className }: IconProps) {
  return base({
    size,
    className,
    children: (
      <>
        <circle cx="16" cy="16" r="13" fill="#161b34" stroke="#e7c66b" strokeWidth="2" />
        <ellipse cx="16" cy="16" rx="5" ry="13" fill="none" stroke="#6fe0d0" strokeWidth="1.5" />
        <line x1="3" y1="16" x2="29" y2="16" stroke="#6fe0d0" strokeWidth="1.5" />
        <path d="M5 11 Q16 8 27 11" fill="none" stroke="#8fb8ff" strokeWidth="1.2" />
        <path d="M5 21 Q16 24 27 21" fill="none" stroke="#8fb8ff" strokeWidth="1.2" />
      </>
    ),
  });
}

export function IconCastle({ size = 24, className }: IconProps) {
  return base({
    size,
    className,
    children: (
      <>
        <rect x="4" y="14" width="24" height="14" fill="#1b2240" stroke="#e7c66b" strokeWidth="2" />
        <rect x="8" y="8" width="6" height="8" fill="#242b50" stroke="#e7c66b" strokeWidth="1.5" />
        <rect x="18" y="8" width="6" height="8" fill="#242b50" stroke="#e7c66b" strokeWidth="1.5" />
        <rect x="13" y="18" width="6" height="10" fill="#0a0d18" stroke="#6fe0d0" strokeWidth="1.5" />
        <rect x="6" y="6" width="3" height="4" fill="#e7c66b" />
        <rect x="23" y="6" width="3" height="4" fill="#e7c66b" />
        <rect x="15" y="4" width="2" height="6" fill="#f3dd96" />
      </>
    ),
  });
}

export function IconSword({ size = 24, className }: IconProps) {
  return base({
    size,
    className,
    children: (
      <>
        <rect x="14" y="4" width="4" height="16" fill="#c8d4f0" stroke="#8fb8ff" strokeWidth="1.5" />
        <rect x="10" y="18" width="12" height="3" fill="#e7c66b" stroke="#b9912f" strokeWidth="1" />
        <rect x="15" y="21" width="2" height="7" fill="#8b5a2b" stroke="#5c3a18" strokeWidth="1" />
        <polygon points="16,2 19,6 13,6" fill="#f3dd96" />
      </>
    ),
  });
}

export function IconScroll({ size = 24, className }: IconProps) {
  return base({
    size,
    className,
    children: (
      <>
        <rect x="8" y="6" width="16" height="20" fill="#f0e2b8" stroke="#c9a227" strokeWidth="2" />
        <rect x="6" y="8" width="4" height="16" fill="#e7c66b" stroke="#b9912f" strokeWidth="1" />
        <rect x="22" y="8" width="4" height="16" fill="#e7c66b" stroke="#b9912f" strokeWidth="1" />
        <line x1="11" y1="12" x2="21" y2="12" stroke="#8b7355" strokeWidth="1.5" />
        <line x1="11" y1="16" x2="21" y2="16" stroke="#8b7355" strokeWidth="1.5" />
        <line x1="11" y1="20" x2="18" y2="20" stroke="#8b7355" strokeWidth="1.5" />
      </>
    ),
  });
}

export function IconCards({ size = 24, className }: IconProps) {
  return base({
    size,
    className,
    children: (
      <>
        <rect x="6" y="8" width="14" height="18" fill="#fff8ef" stroke="#e7c66b" strokeWidth="2" transform="rotate(-8 13 17)" />
        <rect x="12" y="6" width="14" height="18" fill="#161b34" stroke="#6fe0d0" strokeWidth="2" />
        <path d="M15 11 L23 11 M15 15 L21 15" stroke="#6fe0d0" strokeWidth="1.5" />
      </>
    ),
  });
}

export function IconFolder({ size = 24, className }: IconProps) {
  return base({
    size,
    className,
    children: (
      <>
        <path d="M4 10 H14 L17 7 H28 V26 H4 Z" fill="#242b50" stroke="#e7c66b" strokeWidth="2" />
        <rect x="6" y="14" width="20" height="10" fill="#1b2240" stroke="rgba(111,224,208,.5)" strokeWidth="1" />
        <rect x="8" y="16" width="8" height="2" fill="#6fe0d0" />
        <rect x="8" y="20" width="12" height="2" fill="#8fb8ff" />
      </>
    ),
  });
}

export function IconWizard({ size = 24, className }: IconProps) {
  return base({
    size,
    className,
    children: (
      <>
        <polygon points="16,4 24,14 8,14" fill="#4a3f8c" stroke="#8fb8ff" strokeWidth="1.5" />
        <circle cx="16" cy="18" r="6" fill="#f0d0a8" stroke="#c9a227" strokeWidth="1.5" />
        <rect x="12" y="23" width="8" height="6" fill="#2a325c" stroke="#6fe0d0" strokeWidth="1.5" />
        <circle cx="14" cy="17" r="1" fill="#1a1228" />
        <circle cx="18" cy="17" r="1" fill="#1a1228" />
        <rect x="22" y="10" width="2" height="8" fill="#6fe0d0" transform="rotate(20 23 14)" />
      </>
    ),
  });
}

export function IconGear({ size = 24, className }: IconProps) {
  return base({
    size,
    className,
    children: (
      <>
        <circle cx="16" cy="16" r="6" fill="#1b2240" stroke="#e7c66b" strokeWidth="2" />
        {[0, 45, 90, 135].map((deg) => (
          <rect
            key={deg}
            x="14"
            y="3"
            width="4"
            height="6"
            fill="#e7c66b"
            transform={`rotate(${deg} 16 16)`}
          />
        ))}
        <circle cx="16" cy="16" r="2.5" fill="#6fe0d0" />
      </>
    ),
  });
}

export function IconMenu({ size = 24, className }: IconProps) {
  return base({
    size,
    className,
    children: (
      <>
        <rect x="5" y="8" width="22" height="3" fill="#e7c66b" />
        <rect x="5" y="14" width="22" height="3" fill="#6fe0d0" />
        <rect x="5" y="20" width="22" height="3" fill="#8fb8ff" />
      </>
    ),
  });
}

export function IconCoin({ size = 24, className }: IconProps) {
  return base({
    size,
    className,
    children: (
      <>
        <circle cx="16" cy="16" r="12" fill="#c9a227" stroke="#f8e6a8" strokeWidth="2.5" />
        <circle cx="16" cy="16" r="9" fill="#e7c66b" stroke="#b9912f" strokeWidth="1.5" />
        <text x="16" y="20" textAnchor="middle" fill="#1a1228" fontSize="11" fontWeight="bold" fontFamily="Pixelify Sans, monospace">
          G
        </text>
      </>
    ),
  });
}

export function IconMap({ size = 24, className }: IconProps) {
  return base({
    size,
    className,
    children: (
      <>
        <path d="M4 8 L12 5 L20 8 L28 5 V24 L20 21 L12 24 L4 21 Z" fill="#1b2240" stroke="#e7c66b" strokeWidth="2" />
        <line x1="12" y1="5" x2="12" y2="24" stroke="rgba(111,224,208,.6)" strokeWidth="1.5" />
        <line x1="20" y1="8" x2="20" y2="21" stroke="rgba(111,224,208,.6)" strokeWidth="1.5" />
        <circle cx="18" cy="14" r="2" fill="#e86a52" />
        <path d="M9 12 L11 10 L13 13" fill="none" stroke="#6fcf97" strokeWidth="1.5" />
      </>
    ),
  });
}

export function IconThermometer({ size = 24, className }: IconProps) {
  return base({
    size,
    className,
    children: (
      <>
        <rect x="13" y="4" width="6" height="18" fill="#161b34" stroke="#6fe0d0" strokeWidth="2" />
        <circle cx="16" cy="24" r="5" fill="#e86a52" stroke="#b84a38" strokeWidth="2" />
        <rect x="15" y="8" width="2" height="12" fill="#e7c66b" />
        <rect x="15" y="14" width="2" height="6" fill="#6fcf97" />
      </>
    ),
  });
}

export function IconWeatherFair({ size = 24, className }: IconProps) {
  return base({
    size,
    className,
    children: (
      <>
        <circle cx="12" cy="12" r="6" fill="#f3dd96" stroke="#e7c66b" strokeWidth="1.5" />
        <rect x="6" y="18" width="20" height="8" fill="#8fb8ff" stroke="#6fe0d0" strokeWidth="1.5" rx="2" />
      </>
    ),
  });
}

export function IconWeatherPartly({ size = 24, className }: IconProps) {
  return base({
    size,
    className,
    children: (
      <>
        <circle cx="11" cy="11" r="5" fill="#f3dd96" stroke="#e7c66b" strokeWidth="1.5" />
        <rect x="10" y="16" width="16" height="9" fill="#6fe0d0" stroke="#3a9e92" strokeWidth="1.5" rx="2" />
        <rect x="4" y="20" width="12" height="7" fill="#8fb8ff" stroke="#5a7ec4" strokeWidth="1.5" rx="2" />
      </>
    ),
  });
}

export function IconWeatherCloudy({ size = 24, className }: IconProps) {
  return base({
    size,
    className,
    children: (
      <>
        <rect x="4" y="14" width="24" height="10" fill="#8fb8ff" stroke="#5a7ec4" strokeWidth="2" rx="3" />
        <rect x="8" y="10" width="16" height="8" fill="#6fe0d0" stroke="#3a9e92" strokeWidth="1.5" rx="2" />
        <line x1="8" y1="26" x2="24" y2="26" stroke="#6fcf97" strokeWidth="2" strokeDasharray="3 3" />
      </>
    ),
  });
}

export function IconWeatherStorm({ size = 24, className }: IconProps) {
  return base({
    size,
    className,
    children: (
      <>
        <rect x="4" y="10" width="24" height="11" fill="#4a5578" stroke="#8fb8ff" strokeWidth="2" rx="3" />
        <polygon points="14,22 18,22 15,28 20,28 12,28 16,22" fill="#f3dd96" stroke="#e7c66b" strokeWidth="1" />
        <line x1="6" y1="8" x2="10" y2="12" stroke="#e7c66b" strokeWidth="1.5" />
        <line x1="22" y1="7" x2="26" y2="11" stroke="#6fe0d0" strokeWidth="1.5" />
      </>
    ),
  });
}

export function IconRates({ size = 24, className }: IconProps) {
  return base({
    size,
    className,
    children: (
      <>
        <rect x="6" y="8" width="20" height="16" fill="#161b34" stroke="#8fb8ff" strokeWidth="2" />
        <text x="16" y="20" textAnchor="middle" fill="#e7c66b" fontSize="12" fontFamily="Pixelify Sans, monospace">
          %
        </text>
      </>
    ),
  });
}

export function IconInflation({ size = 24, className }: IconProps) {
  return base({
    size,
    className,
    children: (
      <>
        <polyline points="6,24 14,14 20,18 26,6" fill="none" stroke="#e7c66b" strokeWidth="2.5" />
        <polygon points="26,6 22,10 28,10" fill="#e86a52" />
        <rect x="4" y="4" width="24" height="24" fill="none" stroke="#6fe0d0" strokeWidth="1.5" opacity=".4" />
      </>
    ),
  });
}

export function IconLabor({ size = 24, className }: IconProps) {
  return base({
    size,
    className,
    children: (
      <>
        <rect x="10" y="14" width="12" height="10" fill="#2a325c" stroke="#6fcf97" strokeWidth="2" />
        <rect x="8" y="10" width="16" height="6" fill="#1b2240" stroke="#e7c66b" strokeWidth="1.5" />
        <rect x="12" y="6" width="8" height="5" fill="#8b5a2b" stroke="#5c3a18" strokeWidth="1" />
      </>
    ),
  });
}

export function IconGrowth({ size = 24, className }: IconProps) {
  return base({
    size,
    className,
    children: (
      <>
        <rect x="5" y="22" width="22" height="4" fill="#242b50" />
        <rect x="7" y="14" width="5" height="8" fill="#6fcf97" />
        <rect x="14" y="10" width="5" height="12" fill="#e7c66b" />
        <rect x="21" y="6" width="5" height="16" fill="#6fe0d0" />
      </>
    ),
  });
}

export function IconMoney({ size = 24, className }: IconProps) {
  return base({
    size,
    className,
    children: (
      <>
        <rect x="5" y="10" width="22" height="16" fill="#1b2240" stroke="#e7c66b" strokeWidth="2" />
        <rect x="8" y="6" width="16" height="6" fill="#242b50" stroke="#e7c66b" strokeWidth="1.5" />
        <circle cx="16" cy="18" r="4" fill="#c9a227" stroke="#f8e6a8" strokeWidth="1.5" />
        <text x="16" y="20" textAnchor="middle" fill="#1a1228" fontSize="7" fontFamily="Pixelify Sans, monospace">
          $
        </text>
      </>
    ),
  });
}

export function IconSentiment({ size = 24, className }: IconProps) {
  return base({
    size,
    className,
    children: (
      <>
        <rect x="4" y="6" width="24" height="20" fill="#161b34" stroke="#e86a52" strokeWidth="2" />
        <polyline points="7,20 12,12 17,16 25,8" fill="none" stroke="#6fe0d0" strokeWidth="2" />
        <circle cx="25" cy="8" r="2" fill="#e7c66b" />
      </>
    ),
  });
}

export function IconWarning({ size = 24, className }: IconProps) {
  return base({
    size,
    className,
    children: (
      <>
        <polygon points="16,4 28,26 4,26" fill="#3d2a10" stroke="#e7c66b" strokeWidth="2" />
        <rect x="14.5" y="12" width="3" height="8" fill="#f3dd96" />
        <rect x="14.5" y="22" width="3" height="3" fill="#e86a52" />
      </>
    ),
  });
}

export function IconKey({ size = 24, className }: IconProps) {
  return base({
    size,
    className,
    children: (
      <>
        <circle cx="11" cy="11" r="6" fill="none" stroke="#e7c66b" strokeWidth="2.5" />
        <circle cx="11" cy="11" r="2.5" fill="#6fe0d0" />
        <rect x="15" y="10" width="12" height="3" fill="#e7c66b" />
        <rect x="22" y="10" width="3" height="6" fill="#e7c66b" />
        <rect x="18" y="10" width="3" height="5" fill="#e7c66b" />
      </>
    ),
  });
}

export function IconHammer({ size = 24, className }: IconProps) {
  return base({
    size,
    className,
    children: (
      <>
        <rect x="6" y="6" width="12" height="8" fill="#8b7355" stroke="#e7c66b" strokeWidth="1.5" transform="rotate(-25 12 10)" />
        <rect x="14" y="12" width="4" height="14" fill="#8b5a2b" stroke="#5c3a18" strokeWidth="1.5" transform="rotate(15 16 19)" />
        <rect x="4" y="22" width="10" height="3" fill="#6fe0d0" />
        <rect x="18" y="24" width="8" height="3" fill="#e86a52" />
      </>
    ),
  });
}

export function IconHourglass({ size = 24, className }: IconProps) {
  return base({
    size,
    className,
    children: (
      <>
        <rect x="9" y="4" width="14" height="4" fill="#e7c66b" />
        <rect x="9" y="24" width="14" height="4" fill="#e7c66b" />
        <polygon points="10,8 22,8 16,16" fill="#6fe0d0" stroke="#3a9e92" strokeWidth="1" />
        <polygon points="10,24 22,24 16,16" fill="#8fb8ff" stroke="#5a7ec4" strokeWidth="1" />
      </>
    ),
  });
}

export type IconName =
  | "compass"
  | "macro"
  | "flow"
  | "calendar"
  | "chart"
  | "world"
  | "castle"
  | "sword"
  | "scroll"
  | "cards"
  | "folder"
  | "wizard"
  | "gear"
  | "menu"
  | "coin"
  | "map"
  | "thermometer"
  | "weather-fair"
  | "weather-partly"
  | "weather-cloudy"
  | "weather-storm"
  | "rates"
  | "inflation"
  | "labor"
  | "growth"
  | "money"
  | "sentiment"
  | "warning"
  | "key"
  | "hammer"
  | "hourglass";

const ICON_MAP: Record<IconName, ComponentType<IconProps>> = {
  compass: IconCompass,
  macro: IconMacro,
  flow: IconFlow,
  calendar: IconCalendar,
  chart: IconChart,
  world: IconWorld,
  castle: IconCastle,
  sword: IconSword,
  scroll: IconScroll,
  cards: IconCards,
  folder: IconFolder,
  wizard: IconWizard,
  gear: IconGear,
  menu: IconMenu,
  coin: IconCoin,
  map: IconMap,
  thermometer: IconThermometer,
  "weather-fair": IconWeatherFair,
  "weather-partly": IconWeatherPartly,
  "weather-cloudy": IconWeatherCloudy,
  "weather-storm": IconWeatherStorm,
  rates: IconRates,
  inflation: IconInflation,
  labor: IconLabor,
  growth: IconGrowth,
  money: IconMoney,
  sentiment: IconSentiment,
  warning: IconWarning,
  key: IconKey,
  hammer: IconHammer,
  hourglass: IconHourglass,
};

export type WeatherIconKey = "fair" | "partly" | "cloudy" | "storm";

const WEATHER_MAP: Record<WeatherIconKey, IconName> = {
  fair: "weather-fair",
  partly: "weather-partly",
  cloudy: "weather-cloudy",
  storm: "weather-storm",
};

const GROUP_MAP: Record<string, IconName> = {
  rates: "rates",
  inflation: "inflation",
  labor: "labor",
  growth: "growth",
  money: "money",
  sentiment: "sentiment",
};

export const ROUTE_ICON: Record<string, IconName> = {
  "/": "castle",
  "/market": "world",
  "/research": "sword",
  "/skills": "scroll",
  "/patterns": "cards",
  "/journal": "folder",
  "/profile": "wizard",
  "/settings": "gear",
};

export function AppIcon({
  name,
  size = 22,
  framed = false,
  glow = false,
  variant = "default",
  className,
  preferArt = true,
}: {
  name: IconName;
  size?: number;
  framed?: boolean;
  glow?: boolean;
  variant?: "default" | "hero" | "nav";
  className?: string;
  /** 有 HD 插畫時優先使用（關閉則強制 SVG） */
  preferArt?: boolean;
}) {
  const artSrc = preferArt ? ICON_ART[name] : undefined;
  const Cmp = ICON_MAP[name];
  if (!Cmp && !artSrc) return null;

  if (framed) {
    return (
      <RpgIcon size={size} src={artSrc} glow={glow} variant={variant} className={className}>
        {Cmp ? <Cmp size={size} /> : null}
      </RpgIcon>
    );
  }

  if (artSrc) {
    return (
      <img
        src={artSrc}
        width={size}
        height={size}
        alt=""
        className={["game-icon-photo", className].filter(Boolean).join(" ")}
        draggable={false}
      />
    );
  }

  return <Cmp size={size} className={className} />;
}

export function WeatherBandIcon({ kind, size = 20 }: { kind: WeatherIconKey; size?: number }) {
  return <AppIcon name={WEATHER_MAP[kind]} size={size} framed variant="nav" />;
}

export function GroupIcon({ groupKey, size = 24 }: { groupKey: string; size?: number }) {
  const name = GROUP_MAP[groupKey] || "chart";
  return <AppIcon name={name} size={size} framed glow variant="hero" />;
}

export function RouteIcon({ to, size = 20, framed = true }: { to: string; size?: number; framed?: boolean }) {
  const name = ROUTE_ICON[to] || "compass";
  return <AppIcon name={name} size={size} framed={framed} variant="nav" />;
}