// Icon library — line-style SVG glyphs for the D&D tracker.
// All icons are 24×24 viewBox, stroke-based, currentColor.

const ICON_PATHS = {
  // Identity / nav
  character: <g><circle cx="12" cy="8" r="4"/><path d="M4 21c1-5 6-7 8-7s7 2 8 7"/></g>,
  sword: <g><path d="M14 4 L20 4 L20 10 L8.5 21.5 L4 21.5 L4 17 Z"/><path d="M7 17 L13 11 M4 17 L7 14"/></g>,
  skill: <g><path d="M3 6 H21 M3 12 H15 M3 18 H21"/><circle cx="19" cy="12" r="1.5" fill="currentColor" stroke="none"/></g>,
  spell: <g><path d="M12 3 L13.5 9 L20 10.5 L13.5 12 L12 21 L10.5 12 L4 10.5 L10.5 9 Z"/></g>,
  bag: <g><path d="M5 8 H19 L20 21 H4 Z"/><path d="M8 8 V5 A4 4 0 0 1 16 5 V8"/></g>,
  star: <g><path d="M12 3 L14.5 9.5 L21 10 L16 14.5 L17.5 21 L12 17.5 L6.5 21 L8 14.5 L3 10 L9.5 9.5 Z"/></g>,
  book: <g><path d="M4 4 L12 6 L20 4 V20 L12 22 L4 20 Z"/><path d="M12 6 V22"/></g>,
  dice: <g><path d="M4 6 L12 3 L20 6 L12 9 Z"/><path d="M4 6 V17 L12 20 V9 M20 6 V17 L12 20"/><circle cx="8" cy="9" r=".8" fill="currentColor" stroke="none"/><circle cx="16" cy="13" r=".8" fill="currentColor" stroke="none"/><circle cx="12" cy="15" r=".8" fill="currentColor" stroke="none"/></g>,

  // Combat / HP
  heart: <g><path d="M12 20 C 4 14 3 9 5 6 C 7 3 11 4 12 7 C 13 4 17 3 19 6 C 21 9 20 14 12 20 Z"/></g>,
  heartFill: <g><path d="M12 20 C 4 14 3 9 5 6 C 7 3 11 4 12 7 C 13 4 17 3 19 6 C 21 9 20 14 12 20 Z" fill="currentColor"/></g>,
  shield: <g><path d="M12 3 L20 6 V12 C 20 16 16 19 12 21 C 8 19 4 16 4 12 V6 Z"/></g>,
  flame: <g><path d="M12 21 C 6 19 5 13 9 8 C 9 11 11 11 11 8 C 11 5 15 5 16 9 C 17 11 18 14 17 17 C 16 19 14 20.5 12 21 Z"/></g>,
  skull: <g><path d="M5 11 C 5 6 8 4 12 4 C 16 4 19 6 19 11 C 19 13 18 15 17 16 V20 H14 V18 H10 V20 H7 V16 C 6 15 5 13 5 11 Z"/><circle cx="9" cy="12" r="1.4" fill="currentColor" stroke="none"/><circle cx="15" cy="12" r="1.4" fill="currentColor" stroke="none"/></g>,
  bolt: <g><path d="M13 3 L5 14 H11 L9 21 L18 9 H13 Z"/></g>,
  swords: <g><path d="M4 4 H8 L18 14 L16 16 L6 6 Z M20 4 H16 L6 14 L8 16 L18 6 Z"/></g>,

  // Magic
  scroll: <g><path d="M5 5 H17 V19 H7 A2 2 0 0 1 5 17 V5 Z"/><path d="M17 5 H19 V17 A2 2 0 0 1 17 19"/><path d="M8 9 H14 M8 12 H14 M8 15 H12"/></g>,
  rune: <g><circle cx="12" cy="12" r="9"/><path d="M12 5 V12 L8 19 M12 12 L16 19 M9 8 L15 8"/></g>,
  feather: <g><path d="M5 19 C 5 12 12 5 19 5 C 19 12 12 19 5 19 Z M5 19 L12 12"/></g>,

  // Inventory
  coin: <g><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="6"/></g>,
  potion: <g><path d="M10 3 H14 V5 L17 11 V19 A2 2 0 0 1 15 21 H9 A2 2 0 0 1 7 19 V11 L10 5 Z"/><path d="M7 14 H17"/></g>,
  helmet: <g><path d="M5 13 C 5 7 8 4 12 4 C 16 4 19 7 19 13 V17 H5 Z M5 13 H19 M9 17 V20"/></g>,
  ring: <g><circle cx="12" cy="14" r="6"/><path d="M9 8 L12 4 L15 8"/></g>,

  // Actions / Utilities
  plus: <g><path d="M12 4 V20 M4 12 H20"/></g>,
  minus: <g><path d="M4 12 H20"/></g>,
  check: <g><path d="M4 12 L10 18 L20 6"/></g>,
  x: <g><path d="M5 5 L19 19 M19 5 L5 19"/></g>,
  search: <g><circle cx="10" cy="10" r="6"/><path d="M14.5 14.5 L20 20"/></g>,
  filter: <g><path d="M3 5 H21 L14 13 V19 L10 17 V13 Z"/></g>,
  sort: <g><path d="M5 7 L9 3 L13 7 M9 3 V17 M11 17 L15 21 L19 17 M15 7 V21"/></g>,
  gear: <g><circle cx="12" cy="12" r="3.5"/><path d="M12 3 V6 M12 18 V21 M3 12 H6 M18 12 H21 M5 5 L7 7 M17 17 L19 19 M5 19 L7 17 M17 7 L19 5"/></g>,
  edit: <g><path d="M5 19 H8 L19 8 L16 5 L5 16 Z M14 7 L17 10"/></g>,
  trash: <g><path d="M5 7 H19 M9 7 V5 A1 1 0 0 1 10 4 H14 A1 1 0 0 1 15 5 V7 M7 7 L8 20 H16 L17 7"/></g>,
  more: <g><circle cx="6" cy="12" r="1.5" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none"/><circle cx="18" cy="12" r="1.5" fill="currentColor" stroke="none"/></g>,
  chevronR: <g><path d="M9 5 L16 12 L9 19"/></g>,
  chevronD: <g><path d="M5 9 L12 16 L19 9"/></g>,

  // Save / IO
  save: <g><path d="M5 5 H17 L19 7 V19 H5 Z M7 5 V11 H15 V5 M7 15 H15"/></g>,
  download: <g><path d="M12 4 V15 M7 11 L12 16 L17 11 M5 20 H19"/></g>,
  upload: <g><path d="M12 16 V5 M7 9 L12 4 L17 9 M5 20 H19"/></g>,

  // Time / rest
  sun: <g><circle cx="12" cy="12" r="4"/><path d="M12 2 V5 M12 19 V22 M2 12 H5 M19 12 H22 M5 5 L7 7 M17 17 L19 19 M5 19 L7 17 M17 7 L19 5"/></g>,
  moon: <g><path d="M20 13 A 8 8 0 1 1 11 4 A 6 6 0 0 0 20 13 Z"/></g>,
  hourglass: <g><path d="M6 3 H18 V7 L12 12 L18 17 V21 H6 V17 L12 12 L6 7 Z"/></g>,

  // Misc
  eye: <g><path d="M2 12 C 5 7 19 7 22 12 C 19 17 5 17 2 12 Z"/><circle cx="12" cy="12" r="3"/></g>,
  fire: <g><path d="M12 21 C 6 19 5 13 9 8 C 9 11 11 11 11 8 C 11 5 15 5 16 9 C 17 11 18 14 17 17 C 16 19 14 20.5 12 21 Z"/><path d="M12 17 C 10 16 10 14 11 13 C 11 14 12 14 12 13 C 13 13 13 15 12 17 Z" fill="currentColor"/></g>,
  command: <g><circle cx="6" cy="6" r="2.5"/><circle cx="18" cy="6" r="2.5"/><circle cx="6" cy="18" r="2.5"/><circle cx="18" cy="18" r="2.5"/><path d="M8.5 6 H15.5 M8.5 18 H15.5 M6 8.5 V15.5 M18 8.5 V15.5"/></g>,
  arrowR: <g><path d="M5 12 H19 M14 7 L19 12 L14 17"/></g>,
};

const Icon = ({ name, size = 18, strokeWidth = 1.5, className = '', style }) => {
  const path = ICON_PATHS[name];
  if (!path) return null;
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={strokeWidth}
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
      style={style}
      aria-hidden="true"
    >
      {path}
    </svg>
  );
};

// Polyhedral die icons (stylized outlines).
const DIE_SHAPES = {
  4:   "M12 3 L21 19 L3 19 Z",
  6:   "M5 5 H19 V19 H5 Z",
  8:   "M12 3 L20 12 L12 21 L4 12 Z",
  10:  "M12 3 L20 9 L18 19 L6 19 L4 9 Z",
  12:  "M12 3 L19 8 L18 18 L6 18 L5 8 Z",
  20:  "M12 3 L20 8 L20 16 L12 21 L4 16 L4 8 Z",
  100: null,
};

const Die = ({ sides = 20, size = 32, label = true, color }) => {
  const s = size;
  if (sides === 100) {
    return (
      <svg viewBox="0 0 24 24" width={s} height={s} fill="none"
        stroke={color || 'currentColor'} strokeWidth="1.4" strokeLinejoin="round">
        <circle cx="12" cy="12" r="9"/>
        <circle cx="12" cy="12" r="5"/>
        {label && <text x="12" y="14" textAnchor="middle" fontSize="6" fill={color || 'currentColor'} stroke="none"
          fontFamily="var(--font-display)">d%</text>}
      </svg>
    );
  }
  return (
    <svg viewBox="0 0 24 24" width={s} height={s} fill="none"
      stroke={color || 'currentColor'} strokeWidth="1.4" strokeLinejoin="round" strokeLinecap="round">
      <path d={DIE_SHAPES[sides] || DIE_SHAPES[20]}/>
      {label && (
        <text x="12" y={sides === 4 ? 16 : 14} textAnchor="middle" fontSize="7"
          fill={color || 'currentColor'} stroke="none"
          fontFamily="var(--font-display)" fontWeight="600">d{sides}</text>
      )}
    </svg>
  );
};

// Filigree corner ornament — decorative SVG for card corners.
// Render 4× in a card with rotations.
const Filigree = ({ size = 22, color = 'currentColor' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
    stroke={color} strokeWidth="1.1" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M1 1 L8 1 M1 1 L1 8 M1 1 C 5 5 5 5 9 5 M1 1 C 5 5 5 5 5 9"/>
  </svg>
);

Object.assign(window, { Icon, Die, Filigree });