/* global React */
// =========================================================================
// PIXEL ART — inline SVGs (path-based, snapped to grid) used across SOMNIA.
// Every icon is 16x16 logical pixels, rendered at any size via image-rendering: pixelated.
// =========================================================================

const px = (x, y, c) => <rect key={`${x}-${y}-${c}`} x={x} y={y} width="1" height="1" fill={c} />;

// Helper: build an icon from a string grid where each char maps to a color.
function buildPixels(rows, palette) {
  const out = [];
  rows.forEach((row, y) => {
    [...row].forEach((ch, x) => {
      if (ch !== '.' && palette[ch]) out.push(px(x, y, palette[ch]));
    });
  });
  return out;
}

const IconWrap = ({ children, size = 32 }) => (
  <svg viewBox="0 0 16 16" width={size} height={size} shapeRendering="crispEdges">{children}</svg>
);

// ── Sleep Tracker (moon + bed) ────────────────────────────────────────────
const IconTracker = ({ size }) => {
  const P = { M: '#ffe8a3', S: '#ff8fb8', B: '#4b3f8a', L: '#7de2d1', K: '#060818' };
  const rows = [
    '................',
    '.....MMMM.......',
    '....MMMMMM..K...',
    '....MMKMMM......',
    '....MMMMMM...K..',
    '.....MMMM.......',
    '................',
    '.K..............',
    '................',
    '...BBBBBBBBBB...',
    '..BLLLLLLLLLLB..',
    '..BLSSSSSSSSLB..',
    '..BLLLLLLLLLLB..',
    '..BBBBBBBBBBBB..',
    '...K..........K.',
    '................',
  ];
  return <IconWrap size={size}>{buildPixels(rows, P)}</IconWrap>;
};

// ── Cycle / Rhythm (sine wave) ────────────────────────────────────────────
const IconCycle = ({ size }) => {
  const P = { W: '#7de2d1', M: '#ffe8a3', d: '#c490e4' };
  const rows = [
    '................',
    '....M...........',
    '...MMM..........',
    '....M........d..',
    '.............ddd',
    '..........WW.d..',
    '.........W..W...',
    '........W....W..',
    '...WW..W.....WW.',
    '..W..WW.........',
    '.W..............',
    'W...............',
    '................',
    'd...d...d...d..d',
    '................',
    '................',
  ];
  return <IconWrap size={size}>{buildPixels(rows, P)}</IconWrap>;
};

// ── Disorders (alert + brain) ─────────────────────────────────────────────
const IconDisorders = ({ size }) => {
  const P = { R: '#ff5c7a', P: '#ff8fb8', W: '#f6ecd6', K: '#060818' };
  const rows = [
    '................',
    '.......RR.......',
    '......RRRR......',
    '.....RRRRRR.....',
    '....RRRWWRRR....',
    '....RRRWWRRR....',
    '...RRRRWWRRRR...',
    '...RRRRWWRRRR...',
    '..RRRRRWWRRRRR..',
    '..RRRRRWWRRRRR..',
    '.RRRRRRRRRRRRRR.',
    '.RRRRRRWWRRRRRR.',
    'RRRRRRRRRRRRRRRR',
    'RRRRRRRRRRRRRRRR',
    '.KKKKKKKKKKKKKK.',
    '................',
  ];
  return <IconWrap size={size}>{buildPixels(rows, P)}</IconWrap>;
};

// ── Quality (gauge) ───────────────────────────────────────────────────────
const IconQuality = ({ size }) => {
  const P = { G: '#82e6a4', M: '#ffe8a3', R: '#ff8fb8', W: '#f6ecd6', K: '#060818' };
  const rows = [
    '................',
    '................',
    '....KKKKKKKK....',
    '..KKGGGGMMRRRRK.',
    '.KGGGGGGMMMRRRRK',
    '.KGGG......RRRRK',
    'KGGG........RRRK',
    'KGG.....W....RRK',
    'KGG....WWW...RRK',
    'KGG...WW.....RRK',
    'KGG..........RRK',
    '.KGG........RRK.',
    '.KKGGGGGGGGRRRK.',
    '..KKKKKKKKKKKK..',
    '................',
    '................',
  ];
  return <IconWrap size={size}>{buildPixels(rows, P)}</IconWrap>;
};

// ── Myths (book) ──────────────────────────────────────────────────────────
const IconMyths = ({ size }) => {
  const P = { B: '#c490e4', V: '#8475d4', W: '#f6ecd6', M: '#ffe8a3', K: '#060818' };
  const rows = [
    '................',
    '..KKKKKKKKKKKK..',
    '..KBBBBBBBBBBK..',
    '..KBWWWWWWWMBK..',
    '..KBWMMMMWWWBK..',
    '..KBWWWWMWWWBK..',
    '..KBWMWWWWMWBK..',
    '..KBWWWWWWWWBK..',
    '..KBWWMWMWWWBK..',
    '..KBWWWWWWWWBK..',
    '..KBVVVVVVVVBK..',
    '..KBBBBBBBBBBK..',
    '..KKKKKKKKKKKK..',
    '...K..........K.',
    '................',
    '................',
  ];
  return <IconWrap size={size}>{buildPixels(rows, P)}</IconWrap>;
};

// ── Ambience (mountains + sun) ────────────────────────────────────────────
const IconAmbience = ({ size }) => {
  const P = { M: '#ffe8a3', m: '#4b3f8a', T: '#7de2d1', G: '#82e6a4', K: '#060818' };
  const rows = [
    '................',
    '................',
    '.....MMMM.......',
    '....MMMMMM......',
    '....MMMMMM......',
    '.....MMMM.......',
    '........mm......',
    '.......mmmm.....',
    '......mmTTmm....',
    '.....mmTTTTmm...',
    '....mmTTTTTTmm..',
    '...mmTTTTTTTTmm.',
    '..mmmmmmmmmmmmm.',
    '..GGGGGGGGGGGGG.',
    '..KKKKKKKKKKKK..',
    '................',
  ];
  return <IconWrap size={size}>{buildPixels(rows, P)}</IconWrap>;
};

// ── Drowsy / Coffee cup ───────────────────────────────────────────────────
const IconAlert = ({ size }) => {
  const P = { R: '#ff5c7a', W: '#f6ecd6', K: '#060818' };
  const rows = [
    '................',
    '.......RR.......',
    '......RWWR......',
    '......RWWR......',
    '.....RRWWRR.....',
    '.....RRWWRR.....',
    '....RRRWWRRR....',
    '....RRRWWRRR....',
    '...RRRRWWRRRR...',
    '...RRRRWWRRRR...',
    '..RRRRRRRRRRRR..',
    '..RRRRRRRRRRRR..',
    '...RR......RR...',
    '....RR....RR....',
    '......RRRR......',
    '................',
  ];
  return <IconWrap size={size}>{buildPixels(rows, P)}</IconWrap>;
};

// ── Desktop walker sprites (faces left, transparent PNG) ───────────────────
const sheepImg = (src, size) => (
  <img
    src={src}
    width={size}
    height={size}
    alt=""
    decoding="async"
    draggable={false}
    style={{ imageRendering: 'pixelated', display: 'block' }}
  />
);

const SheepProfile = ({ size = 78 }) => sheepImg('icons/sheep-profile.png', size);

const SheepProfileJump = ({ size = 84 }) => sheepImg('icons/sheep-profile-jump.png', size);

// ── Sheep (24×24, front-facing — matches favicon / share card art) ───────
const Sheep = ({ size = 56, showGround = false }) => {
  const P = {
    '.': null,
    B: '#b8ddd4', // mint background (optional)
    G: '#3d6b32', // grass
    g: '#5a9a48', // grass highlight
    W: '#ffffff', // wool
    w: '#e0e0e0', // wool highlight
    K: '#1a1a1a', // outline / eyes
    F: '#5a5a5a', // face
    L: '#4a4a4a', // legs
  };
  const rows = [
    '........................',
    '........................',
    '.........KKKKKK.........',
    '........KWWWWWWK........',
    '.......KWWWWWWWWK.......',
    '......KWWWWWWWWWWK......',
    '.....KWWWWWWWWWWWWK.....',
    '....KWWWWWWWWWWWWWWK....',
    '...KWWWWWWWWWWWWWWWWK...',
    '...KWWwWWWWWWWWwWWWK...',
    '..KWWWWWKFFFFKWWWWWWK..',
    '..KWWWWWKFKKKKWWWWWWK..',
    '..KWWWWWKFFFFKWWWWWWK..',
    '...KWWWWWWWWWWWWWWWK...',
    '....KWWWWWWWWWWWWWK....',
    '.....KWWWWWWWWWWWK.....',
    '......KKWWWWWWKK.......',
    '......KLK.....KLK......',
    '......KLK.....KLK......',
    '......KKK.....KKK......',
    '......GGG.....GGG......',
    '.......g.......g.......',
    '........................',
    '........................',
  ];
  const groundRows = showGround
    ? rows
    : rows.map((row) => row.replace(/[Gg]/g, '.'));
  const bg = showGround ? null : 'transparent';
  return (
    <svg
      viewBox="0 0 24 24"
      width={size}
      height={size}
      shapeRendering="crispEdges"
      style={{ imageRendering: 'pixelated' }}
    >
      {bg && <rect width="24" height="24" fill={P.B} />}
      {buildPixels(groundRows, P)}
    </svg>
  );
};

// App icon mark (mint tile + sheep) for README / inline branding
const SheepLogo = ({ size = 48 }) => <Sheep size={size} showGround />;

// ── Decorative moon + cloud + tree (used in scenes) ───────────────────────
const PixelTree = ({ x = 0, y = 0, color = '#306230', trunk = '#4b3f8a' }) => {
  const P = { T: color, B: trunk };
  const rows = [
    '....T...',
    '...TTT..',
    '..TTTTT.',
    '.TTTTTTT',
    'TTTTTTTT',
    '...BB...',
    '...BB...',
  ];
  return (
    <g transform={`translate(${x}, ${y})`}>
      {rows.flatMap((row, ry) =>
        [...row].map((ch, rx) => ch !== '.' ? <rect key={`${rx}-${ry}`} x={rx} y={ry} width="1" height="1" fill={P[ch]} /> : null)
      )}
    </g>
  );
};

// Expose globally for other Babel files
Object.assign(window, {
  IconTracker, IconCycle, IconDisorders, IconQuality, IconMyths, IconAmbience, IconAlert,
  Sheep, SheepProfile, SheepProfileJump, SheepLogo, PixelTree, buildPixels, IconWrap
});