// Pixel icons · 16x16 grid, drawn as SVG rects.
// Palette indices: 0 ink, 1 electric, 2 hotpink, 3 orange, 4 yellow, 5 violet
function rows(strs) {
  const cells = [];
  strs.forEach((row, y) => {
    [...row].forEach((ch, x) => {
      if (ch !== '.' && ch !== ' ') cells.push([x, y, parseInt(ch, 36)]);
    });
  });
  return cells;
}

const BASE_ICONS = {
  home: rows([
    '................',
    '.......12.......',
    '......1..2......',
    '.....1....2.....',
    '....1......2....',
    '...1........2...',
    '...1........2...',
    '...1...33...2...',
    '...1...33...2...',
    '...1...33...2...',
    '...1...33...2...',
    '...1111331112...',
    '................',
    '................',
    '................',
    '................',
  ]),
  search: rows([
    '................',
    '.....11111......',
    '....1.....1.....',
    '...1.......1....',
    '...1.......1....',
    '...1.......1....',
    '...1.......1....',
    '...1.......1....',
    '....1.....1.....',
    '.....11111......',
    '.........33.....',
    '..........33....',
    '...........33...',
    '............33..',
    '................',
    '................',
  ]),
  community: rows([
    '................',
    '.......11.......',
    '......1111......',
    '...33..11..55...',
    '..3333....5555..',
    '...33..4444..55.',
    '..3333.4444.5555',
    '......444444....',
    '.....44444444...',
    '.....44444444...',
    '.....44444444...',
    '......444444....',
    '................',
    '................',
    '................',
    '................',
  ]),
  learn: rows([
    '................',
    '...11.2222.11...',
    '..11......11....',
    '..11......11....',
    '..11......11....',
    '..11......11....',
    '..11......11....',
    '..11......11....',
    '..11......11....',
    '..11......11....',
    '..11......11....',
    '..11..33..11....',
    '..1113333111....',
    '................',
    '................',
    '................',
  ]),
  insights: rows([
    '................',
    '............33..',
    '............33..',
    '.........11.33..',
    '.........11.33..',
    '.........11.33..',
    '......55.11.33..',
    '......55.11.33..',
    '......55.11.33..',
    '...33.55.11.33..',
    '...33.55.11.33..',
    '...33.55.11.33..',
    '................',
    '................',
    '................',
    '................',
  ]),
  events: rows([
    '................',
    '....3......3....',
    '...5555555555...',
    '...5........5...',
    '...5.3.3.3..5...',
    '...5........5...',
    '...5.3.3.3..5...',
    '...5........5...',
    '...5.3.3.3..5...',
    '...5........5...',
    '...5555555555...',
    '................',
    '................',
    '................',
    '................',
    '................',
  ]),
  heart: rows([
    '................',
    '....22..22......',
    '...2222222222...',
    '..222222222222..',
    '..222222222222..',
    '...2222222222...',
    '....22222222....',
    '.....222222.....',
    '......2222......',
    '.......22.......',
    '................',
    '................',
    '................',
    '................',
    '................',
    '................',
  ]),
  bell: rows([
    '................',
    '......5555......',
    '.....555555.....',
    '....55555555....',
    '....55555555....',
    '....55555555....',
    '....55555555....',
    '....55555555....',
    '...5555555555...',
    '...5555555555...',
    '......2222......',
    '.......22.......',
    '................',
    '................',
    '................',
    '................',
  ]),
  msg: rows([
    '................',
    '...11111111.....',
    '...1......1.....',
    '...1......133...',
    '...1......133...',
    '...1.....33.3...',
    '...1111.33..3...',
    '......133...3...',
    '......1333333...',
    '......111111....',
    '........11......',
    '.......11.......',
    '................',
    '................',
    '................',
    '................',
  ]),
  resources: rows([
    '................',
    '.....55555......',
    '.....5...55.....',
    '.....5....5.....',
    '.....5....5.....',
    '.....5.33.5.....',
    '.....5.22.5.....',
    '.....5.33.5.....',
    '.....5....5.....',
    '.....555555.....',
    '................',
    '................',
    '................',
    '................',
    '................',
    '................',
  ]),
  download: rows([
    '................',
    '.......11.......',
    '.......11.......',
    '.......11.......',
    '.......11.......',
    '....1..11..1....',
    '.....1.11.1.....',
    '......1111......',
    '.......11.......',
    '...3333333333...',
    '...3........3...',
    '...3333333333...',
    '................',
    '................',
    '................',
    '................',
  ]),
  filter: rows([
    '................',
    '...5555555522...',
    '....55555522....',
    '.....555522.....',
    '......5522......',
    '.......44.......',
    '.......44.......',
    '................',
    '................',
    '................',
    '................',
    '................',
    '................',
    '................',
    '................',
    '................',
  ]),
  profile: rows([
    '................',
    '......1111......',
    '.....111111.....',
    '.....111111.....',
    '......1111......',
    '................',
    '....22222222....',
    '...2222222222...',
    '...2222222222...',
    '................',
    '................',
    '................',
    '................',
    '................',
    '................',
    '................',
  ]),
  settings: rows([
    '................',
    '......55.55.....',
    '.....5554555....',
    '....55.444.55...',
    '....5.44444.5...',
    '...55.44344.55..',
    '....5.44444.5...',
    '....55.444.55...',
    '.....5554555....',
    '......55.55.....',
    '................',
    '................',
    '................',
    '................',
    '................',
    '................',
  ]),
  logout: rows([
    '................',
    '....1111........',
    '....11.....3....',
    '....11....333...',
    '....11...33333..',
    '....11....333...',
    '....11.....3....',
    '....1111........',
    '....11..........',
    '....11..........',
    '....11..........',
    '................',
    '................',
    '................',
    '................',
    '................',
  ]),
  explore: rows([
    '................',
    '......5555......',
    '....55....55....',
    '...55......55...',
    '...5....33..5...',
    '..55...3322.55..',
    '..55..3322..55..',
    '..55..2233..55..',
    '..55.2233...55..',
    '...5..33....5...',
    '...55......55...',
    '....55....55....',
    '......5555......',
    '................',
    '................',
    '................',
  ]),
  bookmark: rows([
    '................',
    '.....222222.....',
    '.....222222.....',
    '.....222222.....',
    '.....555555.....',
    '.....555555.....',
    '.....555555.....',
    '.....555555.....',
    '.....555555.....',
    '.....555555.....',
    '.....55..55.....',
    '.....5....5.....',
    '................',
    '................',
    '................',
    '................',
  ]),
  share: rows([
    '................',
    '.........22.....',
    '........2222....',
    '........2222....',
    '...33.....55....',
    '..3333...55.55..',
    '..3333..55...55.',
    '...33..55.......',
    '.....55..11.....',
    '....55..1111....',
    '....5...1111....',
    '........11......',
    '................',
    '................',
    '................',
    '................',
  ]),
  like: rows([
    '................',
    '........11......',
    '.......111......',
    '..3...11111.....',
    '..3..111111.....',
    '..3.1111111.....',
    '..3.1111111.....',
    '..3.111111111...',
    '..3.111111111...',
    '..3.111111111...',
    '..3.111111111...',
    '....11111111....',
    '................',
    '................',
    '................',
    '................',
  ]),
  close: rows([
    '................',
    '..55......22....',
    '...55....22.....',
    '....55..22......',
    '.....5522.......',
    '......33........',
    '.....3311.......',
    '....33..11......',
    '...33....11.....',
    '..33......11....',
    '................',
    '................',
    '................',
    '................',
    '................',
    '................',
  ]),
  themes: rows([
    '................',
    '....55555555....',
    '....55555555....',
    '.........33.....',
    '........333.....',
    '.......333......',
    '.......33.......',
    '.......33.......',
    '................',
    '................',
    '................',
    '................',
    '................',
    '................',
    '................',
    '................',
  ]),
  dark: rows([
    '................',
    '.....5555.......',
    '....555555......',
    '...555....4.....',
    '...55....444....',
    '...55.....4.....',
    '...55...........',
    '...55...........',
    '...55...........',
    '...555..........',
    '....555555......',
    '.....55555......',
    '...........4....',
    '..........44....',
    '................',
    '................',
  ]),
  security: rows([
    '................',
    '......5555......',
    '.....55..55.....',
    '....55....55....',
    '....54....25....',
    '....544..225....',
    '....54444225....',
    '.....5444225....',
    '......544225....',
    '.......5445.....',
    '........55......',
    '................',
    '................',
    '................',
    '................',
    '................',
  ]),
  help: rows([
    '................',
    '.....111111.....',
    '....11....11....',
    '...11......11...',
    '...11....1111...',
    '........1111....',
    '.......1111.....',
    '.......11.......',
    '................',
    '.......11.......',
    '......1111......',
    '................',
    '................',
    '................',
    '................',
    '................',
  ]),
};

const ICON_LIBRARY_STORAGE_KEY = 'aix-icon-library-v1';
const ICON_PALETTE_STORAGE_KEY = 'aix-icon-palette-v1';
const DEFAULT_PIXEL_PALETTE = [TOKENS.ink, TOKENS.electric, TOKENS.hotpink, TOKENS.orange, TOKENS.yellow, TOKENS.violet];

function loadStoredIconLibrary() {
  try {
    if (typeof window === 'undefined' || !window.localStorage) return null;
    const raw = window.localStorage.getItem(ICON_LIBRARY_STORAGE_KEY);
    if (!raw) return null;
    const parsed = JSON.parse(raw);
    if (!parsed || typeof parsed !== 'object') return null;

    const icons = {};
    Object.entries(parsed).forEach(([name, rowDefs]) => {
      if (!Array.isArray(rowDefs) || rowDefs.length !== 16) return;
      const sanitized = rowDefs.map((row) => {
        if (typeof row !== 'string' || row.length !== 16) return null;
        return row.replace(/[^0-5.]/g, '.');
      });
      if (sanitized.some((row) => row == null)) return;
      icons[name] = rows(sanitized);
    });

    return Object.keys(icons).length ? icons : null;
  } catch (error) {
    return null;
  }
}

function loadStoredPalette() {
  try {
    if (typeof window === 'undefined' || !window.localStorage) return null;
    const raw = window.localStorage.getItem(ICON_PALETTE_STORAGE_KEY);
    if (!raw) return null;
    const parsed = JSON.parse(raw);
    if (!Array.isArray(parsed) || parsed.length < 6) return null;
    const palette = parsed.slice(0, 6).map((value, index) => (
      typeof value === 'string' && /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(value)
        ? value
        : DEFAULT_PIXEL_PALETTE[index]
    ));
    return palette;
  } catch (error) {
    return null;
  }
}

const ICONS = loadStoredIconLibrary() || BASE_ICONS;
const STORED_PIXEL_PALETTE = loadStoredPalette() || DEFAULT_PIXEL_PALETTE;

function PixelIcon({ name, size = 56, palette, style, cellGap = 0, cellRadius = 0 }) {
  const cells = ICONS[name];
  if (!cells) return null;
  const pal = palette || STORED_PIXEL_PALETTE;
  const gap = Math.max(0, Math.min(0.9, cellGap));
  const inset = gap / 2;
  const unit = 1 - gap;
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" style={{ display: 'block', ...style }}>
      {cells.map(([x, y, c], i) => (
        <rect
          key={i}
          x={x + inset}
          y={y + inset}
          width={unit}
          height={unit}
          rx={cellRadius}
          fill={pal[c % pal.length]}
        />
      ))}
    </svg>
  );
}

const VECTOR_ICON_COLORS = {
  home: [TOKENS.electric, TOKENS.hotpink, TOKENS.orange],
  search: [TOKENS.electric, TOKENS.orange, TOKENS.violet],
  community: [TOKENS.yellow, TOKENS.electric, TOKENS.violet],
  learn: [TOKENS.electric, TOKENS.hotpink, TOKENS.yellow],
  insights: [TOKENS.electric, TOKENS.orange, TOKENS.violet],
  events: [TOKENS.violet, TOKENS.orange, TOKENS.hotpink],
  heart: [TOKENS.hotpink, TOKENS.orange, TOKENS.yellow],
  bell: [TOKENS.violet, TOKENS.hotpink, TOKENS.orange],
  msg: [TOKENS.electric, TOKENS.orange, TOKENS.hotpink],
  resources: [TOKENS.violet, TOKENS.orange, TOKENS.hotpink],
  download: [TOKENS.electric, TOKENS.orange, TOKENS.yellow],
  filter: [TOKENS.violet, TOKENS.hotpink, TOKENS.yellow],
  profile: [TOKENS.electric, TOKENS.violet, TOKENS.hotpink],
  settings: [TOKENS.violet, TOKENS.yellow, TOKENS.orange],
  logout: [TOKENS.electric, TOKENS.orange, TOKENS.hotpink],
  explore: [TOKENS.violet, TOKENS.orange, TOKENS.hotpink],
  security: [TOKENS.violet, TOKENS.hotpink, TOKENS.yellow],
  help: [TOKENS.electric, TOKENS.violet, TOKENS.orange],
  themes: [TOKENS.orange, TOKENS.violet, TOKENS.hotpink],
  dark: [TOKENS.violet, TOKENS.yellow, TOKENS.hotpink],
  bookmark: [TOKENS.hotpink, TOKENS.violet, TOKENS.orange],
  share: [TOKENS.violet, TOKENS.hotpink, TOKENS.electric],
  like: [TOKENS.electric, TOKENS.orange, TOKENS.violet],
  close: [TOKENS.violet, TOKENS.hotpink, TOKENS.orange],
};

const ICON_STROKE = {
  fill: 'none',
  strokeLinecap: 'round',
  strokeLinejoin: 'round',
  vectorEffect: 'non-scaling-stroke',
};

const VECTOR_ICONS = {
  home: ({ primary, accent, tertiary }) => (
    <>
      <path d="M4.5 10.5 12 4.75l7.5 5.75" stroke={accent} />
      <path d="M6.5 9.75V19h11V9.75" stroke={primary} />
      <path d="M10.25 19v-4.75h3.5V19" stroke={tertiary} />
    </>
  ),
  search: ({ primary, accent }) => (
    <>
      <circle cx="10.25" cy="10.25" r="5.25" stroke={primary} />
      <path d="m14.5 14.5 4 4" stroke={accent} />
    </>
  ),
  community: ({ primary, accent, tertiary }) => (
    <>
      <circle cx="8" cy="8" r="2.25" stroke={accent} />
      <circle cx="16" cy="8" r="2.25" stroke={tertiary} />
      <circle cx="12" cy="12.5" r="3" stroke={primary} />
      <path d="M4.75 18c.45-2.1 2.4-3.5 4.75-3.5" stroke={accent} />
      <path d="M14.5 14.5c2.35 0 4.3 1.4 4.75 3.5" stroke={tertiary} />
      <path d="M8 19c.6-2.55 2.55-4.25 4-4.25S15.4 16.45 16 19" stroke={primary} />
    </>
  ),
  learn: ({ primary, accent, tertiary }) => (
    <>
      <path d="M4.5 6.5h6c1.1 0 2 .9 2 2V18H7.5c-1.65 0-3-1.35-3-3Z" stroke={primary} />
      <path d="M19.5 6.5h-6c-1.1 0-2 .9-2 2V18h5c1.65 0 3-1.35 3-3Z" stroke={accent} />
      <path d="M12 8v10" stroke={tertiary} />
    </>
  ),
  insights: ({ primary, accent, tertiary }) => (
    <>
      <path d="M5 19V13" stroke={accent} />
      <path d="M10 19V9" stroke={tertiary} />
      <path d="M15 19V6" stroke={primary} />
      <path d="M20 19V4.5" stroke={accent} />
      <path d="M3.5 19h18" stroke={primary} />
    </>
  ),
  events: ({ primary, accent, tertiary }) => (
    <>
      <rect x="4.5" y="6.5" width="15" height="13" rx="2.5" stroke={primary} />
      <path d="M8 4.5v4M16 4.5v4" stroke={accent} />
      <path d="M4.5 10.5h15" stroke={tertiary} />
      <path d="M8 14h2M12 14h2M16 14h.01M8 17h2M13 17h2" stroke={accent} />
    </>
  ),
  heart: ({ primary, accent }) => (
    <>
      <path d="M12 19.25 5.65 12.9a4.45 4.45 0 0 1 0-6.3 4.36 4.36 0 0 1 6.16 0L12 6.8l.19-.2a4.36 4.36 0 0 1 6.16 0 4.45 4.45 0 0 1 0 6.3Z" fill={accent} fillOpacity="0.14" stroke={primary} />
      <path d="M12 19.25 5.65 12.9a4.45 4.45 0 0 1 0-6.3 4.36 4.36 0 0 1 6.16 0L12 6.8l.19-.2a4.36 4.36 0 0 1 6.16 0 4.45 4.45 0 0 1 0 6.3Z" stroke={accent} />
    </>
  ),
  bell: ({ primary, accent }) => (
    <>
      <path d="M8 17h8c1.1 0 2-.9 2-2v-3.1c0-2.85-1.55-5.25-4-6.15V5.5a2 2 0 0 0-4 0v.25c-2.45.9-4 3.3-4 6.15V15c0 1.1.9 2 2 2Z" stroke={primary} />
      <path d="M10 19c.5 1.1 1.1 1.65 2 1.65S13.5 20.1 14 19" stroke={accent} />
    </>
  ),
  msg: ({ primary, accent }) => (
    <>
      <path d="M5.25 6.25h13.5c.7 0 1.25.55 1.25 1.25v8.25c0 .7-.55 1.25-1.25 1.25H11l-4.5 3v-3H5.25C4.55 17 4 16.45 4 15.75V7.5c0-.7.55-1.25 1.25-1.25Z" stroke={primary} />
      <path d="M8 10.5h9M8 13.5h6" stroke={accent} />
    </>
  ),
  resources: ({ primary, accent, tertiary }) => (
    <>
      <path d="M7 4.5h7l4 4V19.5H7Z" stroke={primary} />
      <path d="M14 4.5v4h4" stroke={tertiary} />
      <path d="M9.5 11h6M9.5 14h6M9.5 17h4" stroke={accent} />
    </>
  ),
  download: ({ primary, accent }) => (
    <>
      <path d="M12 4.5v10.25" stroke={primary} />
      <path d="m8.5 11.5 3.5 3.5 3.5-3.5" stroke={accent} />
      <path d="M5 18.5h14" stroke={accent} />
      <path d="M5 15.5v3h14v-3" stroke={primary} />
    </>
  ),
  filter: ({ primary, accent, tertiary }) => (
    <>
      <path d="M5 6h14l-5.5 6v5l-3 1.5V12Z" stroke={primary} />
      <path d="M8.5 9.5h7" stroke={accent} />
      <path d="M10.5 13h3" stroke={tertiary} />
    </>
  ),
  profile: ({ primary, accent }) => (
    <>
      <circle cx="12" cy="8" r="3.25" stroke={primary} />
      <path d="M5.5 18.5c1.1-3 3.55-4.5 6.5-4.5s5.4 1.5 6.5 4.5" stroke={accent} />
      <path d="M4.5 19.5h15" stroke={primary} opacity="0.3" />
    </>
  ),
  settings: ({ primary, accent, tertiary }) => (
    <>
      <circle cx="12" cy="12" r="3" stroke={accent} />
      <path d="M12 4.5v2.25M12 17.25V19.5M19.5 12h-2.25M6.75 12H4.5M17.3 6.7l-1.6 1.6M8.3 15.7l-1.6 1.6M17.3 17.3l-1.6-1.6M8.3 8.3 6.7 6.7" stroke={primary} />
      <path d="M9.25 12h5.5M12 9.25v5.5" stroke={tertiary} />
    </>
  ),
  logout: ({ primary, accent }) => (
    <>
      <path d="M10 5H6.5A1.5 1.5 0 0 0 5 6.5v11A1.5 1.5 0 0 0 6.5 19H10" stroke={primary} />
      <path d="M12 12h7.5" stroke={accent} />
      <path d="m16.5 8.5 3.5 3.5-3.5 3.5" stroke={accent} />
    </>
  ),
  explore: ({ primary, accent }) => (
    <>
      <circle cx="12" cy="12" r="7.25" stroke={primary} />
      <path d="m9 15 2-6 4 1-2 5-4 1Z" stroke={accent} fill={accent} fillOpacity="0.14" />
      <circle cx="12" cy="12" r="1" fill={accent} stroke="none" />
    </>
  ),
  security: ({ primary, accent, tertiary }) => (
    <>
      <path d="M12 4.5c2.4 1.7 4.95 2.55 7.5 2.5V12c0 4.45-2.6 7.3-7.5 8.5C7.1 19.3 4.5 16.45 4.5 12V7c2.55.05 5.1-.8 7.5-2.5Z" stroke={primary} fill={accent} fillOpacity="0.1" />
      <path d="m9.25 12.25 1.9 1.9 3.6-4.15" stroke={tertiary} />
    </>
  ),
  help: ({ primary, accent }) => (
    <>
      <circle cx="12" cy="12" r="7.5" stroke={primary} />
      <path d="M9.5 9.5a2.6 2.6 0 1 1 4.55 1.7c-.8.85-1.8 1.35-1.8 2.8" stroke={accent} />
      <circle cx="12" cy="17" r=".9" fill={accent} stroke="none" />
    </>
  ),
  themes: ({ primary, accent, tertiary }) => (
    <>
      <path d="M6 7h10v4H6Z" stroke={primary} />
      <path d="M8 11h10v4H8Z" stroke={accent} />
      <path d="M10 15h8v4h-8Z" stroke={tertiary} />
    </>
  ),
  dark: ({ primary, accent, tertiary }) => (
    <>
      <path d="M14.75 5.5a6.75 6.75 0 1 0 3.75 12.35A7.5 7.5 0 1 1 14.75 5.5Z" stroke={primary} fill={primary} fillOpacity="0.08" />
      <circle cx="16.5" cy="8" r=".9" fill={accent} stroke="none" />
      <path d="m18.5 11 .6 1.2 1.2.6-1.2.6-.6 1.2-.6-1.2-1.2-.6 1.2-.6Z" fill={tertiary} stroke="none" />
    </>
  ),
  bookmark: ({ primary, accent }) => (
    <>
      <path d="M8 4.5h8v15l-4-2.75L8 19.5Z" stroke={primary} fill={accent} fillOpacity="0.12" />
      <path d="M8 4.5h8v4H8" stroke={accent} />
    </>
  ),
  share: ({ primary, accent, tertiary }) => (
    <>
      <circle cx="7" cy="12" r="2" stroke={accent} />
      <circle cx="16.5" cy="7.5" r="2" stroke={tertiary} />
      <circle cx="16.5" cy="16.5" r="2" stroke={primary} />
      <path d="m8.75 11 5.75-2.5M8.75 13l5.75 2.5" stroke={primary} />
    </>
  ),
  like: ({ primary, accent }) => (
    <>
      <path d="M10.25 10.5 12 6.5c.35-.75 1.1-1.25 1.95-1.25h.3c.95 0 1.7.8 1.6 1.75l-.55 3.5H19a1.75 1.75 0 0 1 1.7 2.2l-1.2 4.7A2 2 0 0 1 17.55 19H10.25Z" stroke={primary} />
      <path d="M5 10.5h3v8.5H5z" stroke={accent} />
    </>
  ),
  close: ({ primary, accent }) => (
    <>
      <path d="m7 7 10 10" stroke={primary} />
      <path d="M17 7 7 17" stroke={accent} />
    </>
  ),
};

function BrandIcon({ name, size = 56, palette, style, strokeWidth = 1.9 }) {
  const draw = VECTOR_ICONS[name];
  if (!draw) return null;
  const colors = palette || VECTOR_ICON_COLORS[name] || [TOKENS.electric, TOKENS.hotpink, TOKENS.orange];
  const [primary, accent, tertiary] = colors;
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={{ display: 'block', ...style }} aria-hidden="true">
      <g {...ICON_STROKE} strokeWidth={strokeWidth}>
        {draw({ primary, accent, tertiary })}
      </g>
    </svg>
  );
}

Object.assign(window, {
  BASE_ICONS,
  ICONS,
  PixelIcon,
  BrandIcon,
  VECTOR_ICONS,
  VECTOR_ICON_COLORS,
  ICON_LIBRARY_STORAGE_KEY,
  ICON_PALETTE_STORAGE_KEY,
  DEFAULT_PIXEL_PALETTE,
  STORED_PIXEL_PALETTE,
});