/* global React, window */
// Vibramood · vibras.jsx — illustrated mood-creature SVG components.
// Each Vibra is a soft blob with simple eyes + an emotion-specific accessory.
// Renders crisp at any size; respects `tone` (color), `size`, `silhouette`.

const shade = (hex, amount = -10) => {
  // simple #rrggbb hue shift; amount is negative to darken, positive to lighten
  const c = hex.replace('#', '');
  const n = parseInt(c, 16);
  let r = (n >> 16) & 0xff;
  let g = (n >> 8) & 0xff;
  let b = n & 0xff;
  const k = amount / 100;
  const adj = (v) => Math.max(0, Math.min(255, Math.round(v + (k < 0 ? v * k : (255 - v) * k))));
  return '#' + [adj(r), adj(g), adj(b)].map((x) => x.toString(16).padStart(2, '0')).join('');
};

function VibraShell({ tone = '#4FB7C7', size = 96, silhouette = false, blob = 'round', accent = null, children }) {
  const dark = shade(tone, -28);
  const light = shade(tone, 22);
  const fillId = `vbg-${Math.round(size)}-${tone.replace('#','')}-${blob}`;
  // blob shape paths (viewBox 100x100)
  const blobs = {
    round:    'M50 6c20 0 38 12 42 30 4 18-6 38-22 46-12 6-28 8-40 0C16 74 6 56 8 38 12 18 30 6 50 6z',
    teardrop: 'M50 4c22 4 38 22 38 44 0 24-18 42-38 42S12 72 12 48 28 8 50 4z',
    pebble:   'M52 8c20-2 36 14 38 32 2 22-12 42-32 46-18 4-38-10-42-30S32 10 52 8z',
    cloud:    'M30 38c-12 0-18 12-12 22-4 10 4 22 16 22h36c14 0 22-12 18-24 6-10-2-22-14-22-2-10-14-16-24-12-6-2-16 2-20 14z',
    flame:    'M50 6c8 14 22 18 22 36s-10 30-22 30-22-12-22-30 14-22 22-36z',
    leafy:    'M22 56c0-26 14-50 32-50 16 18 24 36 24 56 0 22-14 32-30 32-14 0-26-10-26-38z',
  };
  const d = blobs[blob] || blobs.round;
  if (silhouette) {
    return (
      <svg viewBox="0 0 100 100" width={size} height={size} aria-hidden="true">
        <path d={d} fill="#d6d3d1" />
      </svg>
    );
  }
  return (
    <svg viewBox="0 0 100 100" width={size} height={size} aria-hidden="true">
      <defs>
        <radialGradient id={fillId} cx="40%" cy="32%" r="70%">
          <stop offset="0%"  stopColor={light}/>
          <stop offset="55%" stopColor={tone}/>
          <stop offset="100%" stopColor={dark}/>
        </radialGradient>
      </defs>
      {/* shadow */}
      <ellipse cx="50" cy="92" rx="28" ry="4" fill="#000" opacity=".08"/>
      {/* body */}
      <path d={d} fill={`url(#${fillId})`} />
      {/* gentle highlight */}
      <ellipse cx="36" cy="32" rx="14" ry="7" fill="#fff" opacity=".28"/>
      {/* accessory layer (per-mood) */}
      {accent}
      {/* eyes */}
      {children || (
        <>
          <ellipse cx="40" cy="56" rx="3" ry="4" fill="#2a3b47"/>
          <ellipse cx="60" cy="56" rx="3" ry="4" fill="#2a3b47"/>
          <circle cx="41" cy="54.5" r="1" fill="#fff"/>
          <circle cx="61" cy="54.5" r="1" fill="#fff"/>
          {/* smile */}
          <path d="M42 66 Q50 71 58 66" stroke="#2a3b47" strokeWidth="1.6" fill="none" strokeLinecap="round"/>
        </>
      )}
    </svg>
  );
}

function Tito({ size = 96, silhouette = false }) {
  // calm aqua, water drop with closed-content eyes
  return (
    <VibraShell tone="#4FB7C7" size={size} blob="teardrop" silhouette={silhouette}
      accent={<path d="M30 18 Q42 26 50 18" stroke="#fff" strokeWidth="1.4" fill="none" opacity=".5"/>}>
      <path d="M36 56 Q40 52 44 56" stroke="#2a3b47" strokeWidth="1.6" fill="none" strokeLinecap="round"/>
      <path d="M56 56 Q60 52 64 56" stroke="#2a3b47" strokeWidth="1.6" fill="none" strokeLinecap="round"/>
      <path d="M42 66 Q50 70 58 66" stroke="#2a3b47" strokeWidth="1.6" fill="none" strokeLinecap="round"/>
    </VibraShell>
  );
}

function Lumi({ size = 96, silhouette = false }) {
  // sunny yellow, with little rays
  return (
    <VibraShell tone="#F5C26B" size={size} blob="round" silhouette={silhouette}
      accent={
        <g stroke="#fff" strokeWidth="2" strokeLinecap="round" opacity=".6">
          <path d="M14 24 L8 20"/>
          <path d="M86 24 L92 20"/>
          <path d="M50 4 L50 -2"/>
        </g>
      }>
      <ellipse cx="40" cy="56" rx="3" ry="3.5" fill="#2a3b47"/>
      <ellipse cx="60" cy="56" rx="3" ry="3.5" fill="#2a3b47"/>
      <circle cx="41" cy="55" r="1" fill="#fff"/>
      <circle cx="61" cy="55" r="1" fill="#fff"/>
      <path d="M40 66 Q50 75 60 66" stroke="#2a3b47" strokeWidth="1.8" fill="none" strokeLinecap="round"/>
      {/* cheeks */}
      <circle cx="32" cy="64" r="3" fill="#e08c7b" opacity=".5"/>
      <circle cx="68" cy="64" r="3" fill="#e08c7b" opacity=".5"/>
    </VibraShell>
  );
}

function Fern({ size = 96, silhouette = false }) {
  // green leafy worrywart with little leaf on top
  return (
    <VibraShell tone="#9CB58F" size={size} blob="leafy" silhouette={silhouette}
      accent={
        <g>
          <path d="M50 6 Q44 0 38 6 Q44 12 50 14 Q56 12 62 6 Q56 0 50 6z" fill="#7e9974"/>
          <path d="M50 6 L50 16" stroke="#5b7553" strokeWidth="1.2"/>
        </g>
      }>
      <ellipse cx="40" cy="56" rx="3" ry="4" fill="#2a3b47"/>
      <ellipse cx="60" cy="56" rx="3" ry="4" fill="#2a3b47"/>
      <circle cx="41" cy="54.5" r="1" fill="#fff"/>
      <circle cx="61" cy="54.5" r="1" fill="#fff"/>
      {/* gentle worried mouth */}
      <path d="M42 67 Q50 64 58 67" stroke="#2a3b47" strokeWidth="1.6" fill="none" strokeLinecap="round"/>
    </VibraShell>
  );
}

function Nimbo({ size = 96, silhouette = false }) {
  // sad cloud, droopy eyes + tear
  return (
    <VibraShell tone="#A7B6C2" size={size} blob="cloud" silhouette={silhouette}>
      <ellipse cx="40" cy="56" rx="3" ry="4" fill="#2a3b47"/>
      <ellipse cx="60" cy="56" rx="3" ry="4" fill="#2a3b47"/>
      <path d="M37 50 Q40 47 43 50" stroke="#2a3b47" strokeWidth="1.4" fill="none" strokeLinecap="round"/>
      <path d="M57 50 Q60 47 63 50" stroke="#2a3b47" strokeWidth="1.4" fill="none" strokeLinecap="round"/>
      {/* tear */}
      <path d="M64 60 Q66 66 64 70 Q62 66 64 60z" fill="#7fb7c7"/>
      <path d="M42 70 Q50 66 58 70" stroke="#2a3b47" strokeWidth="1.6" fill="none" strokeLinecap="round"/>
    </VibraShell>
  );
}

function Pyra({ size = 96, silhouette = false }) {
  // angry/warm coral with little flame on top
  return (
    <VibraShell tone="#E08C7B" size={size} blob="flame" silhouette={silhouette}
      accent={<path d="M50 4 Q44 10 48 14 Q52 12 52 8 Q54 14 56 12 Q56 6 50 4z" fill="#cf6655"/>}>
      <path d="M36 54 L44 58" stroke="#2a3b47" strokeWidth="1.8" fill="none" strokeLinecap="round"/>
      <path d="M64 54 L56 58" stroke="#2a3b47" strokeWidth="1.8" fill="none" strokeLinecap="round"/>
      <ellipse cx="40" cy="58" rx="2" ry="2.5" fill="#2a3b47"/>
      <ellipse cx="60" cy="58" rx="2" ry="2.5" fill="#2a3b47"/>
      <path d="M44 70 Q50 66 56 70" stroke="#2a3b47" strokeWidth="1.6" fill="none" strokeLinecap="round"/>
    </VibraShell>
  );
}

function Mossy({ size = 96, silhouette = false }) {
  // tired/sleepy lavender, eyes closed
  return (
    <VibraShell tone="#B9A6CC" size={size} blob="pebble" silhouette={silhouette}
      accent={
        <g>
          <text x="68" y="28" fontFamily="Quicksand, sans-serif" fontWeight="700" fontSize="14" fill="#fff" opacity=".75">z</text>
          <text x="76" y="36" fontFamily="Quicksand, sans-serif" fontWeight="700" fontSize="10" fill="#fff" opacity=".55">z</text>
        </g>
      }>
      <path d="M36 56 Q40 58 44 56" stroke="#2a3b47" strokeWidth="1.8" fill="none" strokeLinecap="round"/>
      <path d="M56 56 Q60 58 64 56" stroke="#2a3b47" strokeWidth="1.8" fill="none" strokeLinecap="round"/>
      <path d="M44 68 Q50 66 56 68" stroke="#2a3b47" strokeWidth="1.6" fill="none" strokeLinecap="round"/>
    </VibraShell>
  );
}

function Vibra({ which, size = 96, silhouette = false }) {
  const map = { tito: Tito, lumi: Lumi, fern: Fern, nimbo: Nimbo, pyra: Pyra, mossy: Mossy };
  const Cmp = map[which] || Tito;
  return <Cmp size={size} silhouette={silhouette}/>;
}

window.VMVibras = { Vibra, Tito, Lumi, Fern, Nimbo, Pyra, Mossy };