// icons.jsx — Pixel-art SVG icon library for Astral Project / Win95

// Each icon renders at a 16/24/32-grid. Uses inline SVG with <rect>s for true
// pixel feel. Pass `size` prop to scale.

function PixelIcon({ size = 32, children, viewBox = '0 0 16 16' }) {
  return (
    <svg width={size} height={size} viewBox={viewBox}
         shapeRendering="crispEdges" style={{ imageRendering: 'pixelated' }}>
      {children}
    </svg>
  );
}

// Helper to build a pixel grid from a row-based string array
// '.' = transparent, other chars map via palette
function pixelGrid(rows, palette) {
  const out = [];
  rows.forEach((row, y) => {
    [...row].forEach((ch, x) => {
      if (ch === '.' || ch === ' ') return;
      const fill = palette[ch];
      if (!fill) return;
      out.push(<rect key={`${x}-${y}`} x={x} y={y} width="1" height="1" fill={fill} />);
    });
  });
  return out;
}

// ── Folder / collection icons ──────────────────────────────────────────────
function IconFolder({ size = 32, color = '#ffd24d' }) {
  const rows = [
    '................',
    '..XXXX..........',
    '.XYYYYX.........',
    'XYYYYYYXXXXXXX..',
    'XYYYYYYYYYYYYX..',
    'XYYYYYYYYYYYYX..',
    'XYWWWWWWWWWWWX..',
    'XYWYYYYYYYYYWX..',
    'XYWYYYYYYYYYWX..',
    'XYWYYYYYYYYYWX..',
    'XYWYYYYYYYYYWX..',
    'XYWWWWWWWWWWWX..',
    'XYYYYYYYYYYYYX..',
    'XXXXXXXXXXXXXX..',
    '................',
    '................',
  ];
  return <PixelIcon size={size}>{pixelGrid(rows, { X: '#000', Y: color, W: '#fff8c4' })}</PixelIcon>;
}

function IconShop({ size = 32 }) {
  // shopping bag with star
  const rows = [
    '................',
    '....XX....XX....',
    '...X..X..X..X...',
    '...X..X..X..X...',
    '..XXXXXXXXXXXX..',
    '..XPPPPPPPPPPX..',
    '..XPP.SS..PPPX..',
    '..XPSSSSS.PPPX..',
    '..XPPSSS..PPPX..',
    '..XPSSSSS.PPPX..',
    '..XPP.S.S.PPPX..',
    '..XPPPPPPPPPPX..',
    '..XPPPPPPPPPPX..',
    '..XPPPPPPPPPPX..',
    '..XXXXXXXXXXXX..',
    '................',
  ];
  return <PixelIcon size={size}>{pixelGrid(rows, { X: '#000', P: '#ff7ad9', S: '#ffe14d' })}</PixelIcon>;
}

function IconRecycleEmpty({ size = 32 }) {
  const rows = [
    '................',
    '....XXXXXXXX....',
    '...X.B.B.B.X....',
    '..XXXXXXXXXXX...',
    '..XBBBBBBBBBX...',
    '..XB.B.B.B.BX...',
    '..XB.B.B.B.BX...',
    '..XB.B.B.B.BX...',
    '..XB.B.B.B.BX...',
    '..XB.B.B.B.BX...',
    '..XB.B.B.B.BX...',
    '..XB.B.B.B.BX...',
    '..XBBBBBBBBBX...',
    '..XXXXXXXXXXX...',
    '................',
    '................',
  ];
  return <PixelIcon size={size}>{pixelGrid(rows, { X: '#000', B: '#9d9da1' })}</PixelIcon>;
}

function IconRecycleFull({ size = 32 }) {
  const rows = [
    '................',
    '....G.GGG.G.....',
    '...XXXXXXXXX....',
    '..XGGGGGGGGGX...',
    '..XBBBBBBBBBX...',
    '..XBYBPBGBYBX...',
    '..XBPBYBPBGBX...',
    '..XBYBGBYBPBX...',
    '..XBGBPBGBYBX...',
    '..XBYBGBPBYBX...',
    '..XBGBYBGBPBX...',
    '..XBPBGBYBGBX...',
    '..XBBBBBBBBBX...',
    '..XXXXXXXXXXX...',
    '................',
    '................',
  ];
  return <PixelIcon size={size}>{pixelGrid(rows, {
    X: '#000', B: '#9d9da1', G: '#7dc94f', Y: '#ffe14d', P: '#ff7ad9'
  })}</PixelIcon>;
}

function IconMyComputer({ size = 32 }) {
  const rows = [
    '................',
    '.XXXXXXXXXXXX...',
    '.XGCCCCCCCCGX...',
    '.XCBBBBBBBBCX...',
    '.XCBSSSSSSBCX...',
    '.XCBSPPPPSBCX...',
    '.XCBSPCCPSBCX...',
    '.XCBSSSSSSBCX...',
    '.XCBBBBBBBBCX...',
    '.XGCCCCCCCCGX...',
    '.XXXXXXXXXXXX...',
    '..XGGGGGGGGX....',
    '.XXXXXXXXXXXX...',
    '.XGGYYYYYYGGX...',
    '.XXXXXXXXXXXX...',
    '................',
  ];
  return <PixelIcon size={size}>{pixelGrid(rows, {
    X: '#000', G: '#a8a8a8', C: '#dcdcdc', B: '#404040', S: '#5fafff', P: '#fff', Y: '#7dc94f'
  })}</PixelIcon>;
}

function IconCD({ size = 32 }) {
  const rows = [
    '................',
    '......XXXX......',
    '....XXBBBBXX....',
    '...XBCCCCCCBX...',
    '..XBCCPPPPCCBX..',
    '..XCCPWWWWPCCX..',
    '.XBCPWWXXWWPCBX.',
    '.XBCPWXOOXWPCBX.',
    '.XBCPWXOOXWPCBX.',
    '.XBCPWWXXWWPCBX.',
    '..XCCPWWWWPCCX..',
    '..XBCCPPPPCCBX..',
    '...XBCCCCCCBX...',
    '....XXBBBBXX....',
    '......XXXX......',
    '................',
  ];
  return <PixelIcon size={size}>{pixelGrid(rows, {
    X: '#000', B: '#1a1a1a', C: '#c9c9c9', P: '#ff7ad9', W: '#fff', O: '#000080'
  })}</PixelIcon>;
}

function IconMail({ size = 32 }) {
  const rows = [
    '................',
    '................',
    '..XXXXXXXXXXXX..',
    '..XWWWWWWWWWWX..',
    '..XWXWWWWWWXWX..',
    '..XWWXWWWWXWWX..',
    '..XWWWXWWXWWWX..',
    '..XWWWWXXWWWWX..',
    '..XWWWWWWWWWWX..',
    '..XWWWWWWWWWWX..',
    '..XWWWWWWWWWWX..',
    '..XWWWWWWWWWWX..',
    '..XXXXXXXXXXXX..',
    '................',
    '................',
    '................',
  ];
  return <PixelIcon size={size}>{pixelGrid(rows, { X: '#000', W: '#fff' })}</PixelIcon>;
}

function IconMusic({ size = 32 }) {
  const rows = [
    '................',
    '......XXXXXX....',
    '......XPPPPX....',
    '......XPPPPX....',
    '......XPPPPX....',
    '...X..XPPPPX....',
    '..XXX.XPPPPX....',
    '.XXXXXXXXXXX....',
    '.XBBBBBXPPPX....',
    '.XBBBBBXPPPX....',
    '..XBBBXXXXXX....',
    '...XXX..........',
    '................',
    '................',
    '................',
    '................',
  ];
  return <PixelIcon size={size}>{pixelGrid(rows, { X: '#000', B: '#000', P: '#ff7ad9' })}</PixelIcon>;
}

function IconCamera({ size = 32 }) {
  const rows = [
    '................',
    '................',
    '....XX..XX......',
    '..XXXXXXXXXXXX..',
    '..XGGGGGGGGGGX..',
    '..XGGXXXXXXGGX..',
    '..XGXBBBBBBXGX..',
    '..XGXBWWWWBXGX..',
    '..XGXBWPPWBXGX..',
    '..XGXBWWWWBXGX..',
    '..XGXBBBBBBXGX..',
    '..XGGXXXXXXGGX..',
    '..XGGGGGGGGGGX..',
    '..XXXXXXXXXXXX..',
    '................',
    '................',
  ];
  return <PixelIcon size={size}>{pixelGrid(rows, {
    X: '#000', G: '#5a5a5a', B: '#1a1a1a', W: '#c0e8ff', P: '#ff7ad9'
  })}</PixelIcon>;
}

function IconPhone({ size = 32 }) {
  const rows = [
    '................',
    '....XXXXXXXX....',
    '....XGGGGGGX....',
    '....XBBBBBBX....',
    '....XBSSSSBX....',
    '....XBSCCCBX....',
    '....XBSCCCBX....',
    '....XBSCCCBX....',
    '....XBSCCCBX....',
    '....XBBBBBBX....',
    '....XGOOOOGX....',
    '....XGOXOOGX....',
    '....XGOOOOGX....',
    '....XXXXXXXX....',
    '................',
    '................',
  ];
  return <PixelIcon size={size}>{pixelGrid(rows, {
    X: '#000', G: '#888', B: '#1a1a1a', S: '#0080ff', C: '#a0d0ff', O: '#444'
  })}</PixelIcon>;
}

function IconTshirt({ size = 32 }) {
  const rows = [
    '................',
    '..XXX......XXX..',
    '.XPPPX....XPPPX.',
    'XPPPPPXXXXPPPPPX',
    'XPPPPPPPPPPPPPPX',
    'XPPPPPPPPPPPPPPX',
    '.XPPPPPPPPPPPPX.',
    '..XPPPPPPPPPPX..',
    '..XPPSSSSSPPPX..',
    '..XPPS.S.SPPPX..',
    '..XPPSSSSSPPPX..',
    '..XPPS.S.SPPPX..',
    '..XPPPPPPPPPPX..',
    '..XPPPPPPPPPPX..',
    '..XXXXXXXXXXXX..',
    '................',
  ];
  return <PixelIcon size={size}>{pixelGrid(rows, { X: '#000', P: '#ff7ad9', S: '#ffe14d' })}</PixelIcon>;
}

function IconStar({ size = 32, color = '#ffe14d' }) {
  const rows = [
    '................',
    '................',
    '.......XX.......',
    '......XYYX......',
    '......XYYX......',
    '..XXXXXYYXXXXX..',
    '.XYYYYYYYYYYYYX.',
    '..XYYYYYYYYYYX..',
    '...XYYYYYYYYX...',
    '....XYYYYYYX....',
    '...XYYYYYYYYX...',
    '..XYYYXXXXYYYX..',
    '..XYYXX..XXYYX..',
    '..XXX......XXX..',
    '................',
    '................',
  ];
  return <PixelIcon size={size}>{pixelGrid(rows, { X: '#000', Y: color })}</PixelIcon>;
}

function IconHeart({ size = 32 }) {
  const rows = [
    '................',
    '................',
    '..XXX....XXX....',
    '.XPPPX..XPPPX...',
    'XPPRPXXXPPRPX...',
    'XPRRPPPPPRRPX...',
    'XPRRPPPPPRRPX...',
    '.XPRRPPPRRPX....',
    '..XPRRPRRPX.....',
    '...XPRRRPX......',
    '....XPRPX.......',
    '.....XPX........',
    '......X.........',
    '................',
    '................',
    '................',
  ];
  return <PixelIcon size={size}>{pixelGrid(rows, { X: '#000', P: '#ff5e8a', R: '#ffadc4' })}</PixelIcon>;
}

function IconNotepad({ size = 32 }) {
  const rows = [
    '................',
    '..XXXXXXXXXXX...',
    '..XWWWWWWWWWX...',
    '..XWBBBBBBBWX...',
    '..XWWWWWWWWWX...',
    '..XWBBBBBBBWX...',
    '..XWWWWWWWWWX...',
    '..XWBBBBBWWWX...',
    '..XWWWWWWWWWX...',
    '..XWBBBBBBBWX...',
    '..XWWWWWWWWWX...',
    '..XWBBBBWWWWX...',
    '..XWWWWWWWWWX...',
    '..XXXXXXXXXXX...',
    '................',
    '................',
  ];
  return <PixelIcon size={size}>{pixelGrid(rows, { X: '#000', W: '#fff', B: '#5fafff' })}</PixelIcon>;
}

function IconQuestion({ size = 32 }) {
  const rows = [
    '................',
    '..XXXXXXXXXXX...',
    '..XYYYYYYYYYX...',
    '..XYYXXXXXYYX...',
    '..XYXBBBBBXYX...',
    '..XYYYYXBBXYX...',
    '..XYYYXBBXYYX...',
    '..XYYXBBXYYYX...',
    '..XYYXBXYYYYX...',
    '..XYYYYYYYYYX...',
    '..XYYYXBXYYYX...',
    '..XYYYYYYYYYX...',
    '..XXXXXXXXXXX...',
    '................',
    '................',
    '................',
  ];
  return <PixelIcon size={size}>{pixelGrid(rows, { X: '#000', Y: '#ffe14d', B: '#000' })}</PixelIcon>;
}

function IconGlobe({ size = 32 }) {
  const rows = [
    '................',
    '................',
    '....XXXXXXXX....',
    '..XXBBBBBBBBXX..',
    '.XBBSSGGSSBBBBX.',
    '.XBSSSGGGSSGBBX.',
    'XBSSSSGGGSSGGBBX',
    'XBSSGSSGSSGGGBBX',
    'XBBSGGSSSSGGGBBX',
    'XBBSSGGSSGGSSBBX',
    '.XBBSSSGSSSSBBX.',
    '.XBBBSSSGSSBBBX.',
    '..XXBBSSSSBBXX..',
    '....XXBBBBXX....',
    '......XXXX......',
    '................',
  ];
  return <PixelIcon size={size}>{pixelGrid(rows, { X: '#000', B: '#0080ff', S: '#a0d0ff', G: '#7dc94f' })}</PixelIcon>;
}

function IconCart({ size = 32 }) {
  const rows = [
    '................',
    '..XX............',
    '..XXXX..........',
    '....XX..........',
    '....XXXXXXXXXX..',
    '....XPPPPPPPPX..',
    '....XPPYYYYPPX..',
    '....XPYYPPYYPX..',
    '....XPYPPPPYPX..',
    '....XPYYPPYYPX..',
    '....XPPYYYYPPX..',
    '....XXXXXXXXXX..',
    '......X......X..',
    '.....XXX....XXX.',
    '.....XXX....XXX.',
    '......X......X..',
  ];
  return <PixelIcon size={size}>{pixelGrid(rows, { X: '#000', P: '#ff7a18', Y: '#ffe14d' })}</PixelIcon>;
}

function IconCartLight({ size = 32 }) {
  // Crisp white-stroke shopping cart for use against the dark topbar.
  const s = size;
  return (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none"
         stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 4 H6 L7.5 14 H19 L21 7 H7" />
      <circle cx="9" cy="19" r="1.6" fill="#fff" />
      <circle cx="17" cy="19" r="1.6" fill="#fff" />
    </svg>
  );
}

function IconUser({ size = 32 }) {
  // White person silhouette for the topbar sign-in button.
  const s = size;
  return (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none"
         stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="8" r="3.5" fill="#fff" stroke="#fff" />
      <path d="M4.5 20 C5.5 15.5 8.5 13.5 12 13.5 C15.5 13.5 18.5 15.5 19.5 20" fill="#fff" stroke="#fff" />
    </svg>
  );
}

function IconCloud({ size = 32 }) {
  const rows = [
    '................',
    '................',
    '......XXXX......',
    '....XXWWWWXX....',
    '...XWWWWWWWWX...',
    '..XWWWWWWWWWWX..',
    '.XWWWWWWWWWWWWX.',
    '.XWWWWWWWWWWWWX.',
    'XWWWWWWWWWWWWWWX',
    'XWWWWWWWWWWWWWWX',
    '.XWWWWWWWWWWWWX.',
    '..XXXXXXXXXXXX..',
    '................',
    '................',
    '................',
    '................',
  ];
  return <PixelIcon size={size}>{pixelGrid(rows, { X: '#000', W: '#fff' })}</PixelIcon>;
}

// Game cartridge with a star on the label — represents Portfolio.exe.
function IconPortfolio({ size = 32 }) {
  const rows = [
    '................',
    '...XXXXXXXXXX...',
    '..XPPPPPPPPPPX..',
    '..XPCCCCCCCCPX..',
    '..XPCYYYYYYCPX..',
    '..XPCYY..YYCPX..',
    '..XPCY.SS.YCPX..',
    '..XPCYSSSSYYCX..',
    '..XPCYY.SS.YCX..',
    '..XPCYYY..YYCX..',
    '..XPCYYYYYYCPX..',
    '..XPCCCCCCCCPX..',
    '..XPPPPPPPPPPX..',
    '..XX.XX.XX.XXX..',
    '..XX.XX.XX.XXX..',
    '................',
  ];
  return <PixelIcon size={size}>{pixelGrid(rows, {
    X: '#000', P: '#ff7ad9', C: '#6cf2ff', Y: '#ffe14d', S: '#ff7a18',
  })}</PixelIcon>;
}

function IconStartLogo({ size = 16 }) {
  // Mini Astral Project A* / star
  const rows = [
    '....X....',
    '...XYX...',
    '..XYYYX..',
    '.XYYYYYX.',
    'XXXXXXXXX',
    '..XYYYX..',
    '.XY.X.YX.',
    'XX..X..XX',
  ];
  return (
    <svg width={size} height={size * (8/9)} viewBox="0 0 9 8" shapeRendering="crispEdges">
      {pixelGrid(rows, { X: '#000', Y: '#ff7ad9' })}
    </svg>
  );
}

function IconPlay({ size = 12 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 8 8" shapeRendering="crispEdges">
      <path d="M2 1 L7 4 L2 7 Z" fill="#000" />
    </svg>
  );
}

function IconPause({ size = 12 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 8 8" shapeRendering="crispEdges">
      <rect x="2" y="1" width="2" height="6" fill="#000" />
      <rect x="5" y="1" width="2" height="6" fill="#000" />
    </svg>
  );
}

function IconClose({ size = 12 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 8 8" shapeRendering="crispEdges">
      <rect x="1" y="1" width="1" height="1" fill="#000"/>
      <rect x="2" y="2" width="1" height="1" fill="#000"/>
      <rect x="3" y="3" width="1" height="1" fill="#000"/>
      <rect x="4" y="3" width="1" height="1" fill="#000"/>
      <rect x="5" y="2" width="1" height="1" fill="#000"/>
      <rect x="6" y="1" width="1" height="1" fill="#000"/>
      <rect x="3" y="4" width="2" height="1" fill="#000"/>
      <rect x="2" y="5" width="1" height="1" fill="#000"/>
      <rect x="5" y="5" width="1" height="1" fill="#000"/>
      <rect x="1" y="6" width="1" height="1" fill="#000"/>
      <rect x="6" y="6" width="1" height="1" fill="#000"/>
    </svg>
  );
}

// Icon resolver: name -> emoji or pixel art
function Icon({ name, size = 32, style = 'pixel' }) {
  if (style === 'emoji') {
    const emoji = ICON_EMOJI[name] || '📁';
    return <span style={{ fontSize: size * 0.85, lineHeight: 1 }}>{emoji}</span>;
  }
  if (style === 'flat') {
    return <FlatIcon name={name} size={size} />;
  }
  switch (name) {
    case 'shop': return <IconShop size={size} />;
    case 'recycle': return <IconRecycleEmpty size={size} />;
    case 'recycle-full': return <IconRecycleFull size={size} />;
    case 'computer': return <IconMyComputer size={size} />;
    case 'cd': return <IconCD size={size} />;
    case 'mail': return <IconMail size={size} />;
    case 'music': return <IconMusic size={size} />;
    case 'camera': return <IconCamera size={size} />;
    case 'phone': return <IconPhone size={size} />;
    case 'tshirt': return <IconTshirt size={size} />;
    case 'star': return <IconStar size={size} />;
    case 'heart': return <IconHeart size={size} />;
    case 'notepad': return <IconNotepad size={size} />;
    case 'help': return <IconQuestion size={size} />;
    case 'globe': return <IconGlobe size={size} />;
    case 'cart': return <IconCart size={size} />;
    case 'cart-light': return <IconCartLight size={size} />;
    case 'user': return <IconUser size={size} />;
    case 'cloud': return <IconCloud size={size} />;
    case 'portfolio': return <IconPortfolio size={size} />;
    case 'folder-pink': return <IconFolder size={size} color="#ff7ad9" />;
    case 'folder-cyan': return <IconFolder size={size} color="#6cf2ff" />;
    case 'folder-yellow': return <IconFolder size={size} color="#ffe14d" />;
    default: return <IconFolder size={size} />;
  }
}

const ICON_EMOJI = {
  shop: '🛍️', recycle: '🗑️', 'recycle-full': '🗑️', computer: '🖥️',
  cd: '💿', mail: '✉️', music: '🎵', camera: '📷', phone: '📱',
  tshirt: '👕', star: '⭐', heart: '💖', notepad: '📝', help: '❓',
  globe: '🌐', cart: '🛒', 'cart-light': '🛒', user: '👤', cloud: '☁️',
  'folder-pink': '📁', 'folder-cyan': '📁', 'folder-yellow': '📁',
  portfolio: '🎮',
};

function FlatIcon({ name, size = 32 }) {
  // Simple flat vector versions
  const c = {
    shop: '#ff3eb5', recycle: '#888', 'recycle-full': '#7dc94f',
    computer: '#888', cd: '#6cf2ff', mail: '#fff', music: '#ff7ad9',
    camera: '#444', phone: '#444', tshirt: '#ff7ad9', star: '#ffe14d',
    heart: '#ff5e8a', notepad: '#5fafff', help: '#ffe14d', globe: '#0080ff',
    cart: '#ff7a18', cloud: '#fff',
    'folder-pink': '#ff7ad9', 'folder-cyan': '#6cf2ff', 'folder-yellow': '#ffe14d',
    portfolio: '#ff7ad9',
  };
  const fill = c[name] || '#888';
  // simple shape per category
  if (name.includes('folder')) {
    return (
      <svg width={size} height={size} viewBox="0 0 32 32">
        <path d="M3 9 L13 9 L15 11 L29 11 L29 25 L3 25 Z" fill={fill} stroke="#000" strokeWidth="1.5" strokeLinejoin="round"/>
      </svg>
    );
  }
  return (
    <svg width={size} height={size} viewBox="0 0 32 32">
      <circle cx="16" cy="16" r="11" fill={fill} stroke="#000" strokeWidth="1.5"/>
      <text x="16" y="21" textAnchor="middle" fontSize="14" fontFamily="sans-serif" fill="#000">
        {name[0].toUpperCase()}
      </text>
    </svg>
  );
}

Object.assign(window, {
  Icon, IconFolder, IconShop, IconRecycleEmpty, IconRecycleFull,
  IconMyComputer, IconCD, IconMail, IconMusic, IconCamera, IconPhone,
  IconTshirt, IconStar, IconHeart, IconNotepad, IconQuestion, IconGlobe,
  IconCart, IconCloud, IconPortfolio, IconStartLogo, IconPlay, IconPause, IconClose,
});