// hamster-shapes.jsx — Shared visual primitives for CheekPouch's hamster metaphor.
// Loaded before collections/home/app so they can use these components from window.*
//
// Provides:
//   <PouchShape />   — drawstring cloth pouch icon
//   <SeedShape />    — sunflower-seed icon (teardrop with stripe)
//   <SeedCluster />  — group of seeds in a natural pile/arc layout
//   <PouchWithSeeds /> — composed scene: pouch with seeds peeking from the top
//
// All components are pure SVG, sizeable, colorable.

// ─────────────────────────────────────────────────────────────
// SeedShape — single sunflower seed
// shape: teardrop with subtle inner stripe for that "sunflower seed" look.
// ─────────────────────────────────────────────────────────────
function SeedShape({
  size = 14,
  fill = '#5C3E1F',
  highlight,        // optional lighter inner stripe color
  stroke,           // optional outer stroke (use null for none)
  rotate = 0,
  style,
}) {
  const w = size;
  const h = Math.round(size * 1.32);
  const hl = highlight || 'rgba(255,255,255,0.32)';
  return (
    <svg width={w} height={h} viewBox="0 0 13 17"
         style={{ display: 'inline-block', transform: rotate ? `rotate(${rotate}deg)` : undefined, ...style }}
         aria-hidden="true">
      <path d="M6.5 1 C9.8 3.5 11 7 11 10 C11 13.5 9 16 6.5 16 C4 16 2 13.5 2 10 C2 7 3.2 3.5 6.5 1 Z"
            fill={fill}
            stroke={stroke || 'none'}
            strokeWidth={stroke ? 0.8 : 0} />
      {/* inner stripe — gives the sunflower-seed grain */}
      <path d="M6.5 3.8 C5.3 5.7 4.7 8.3 5 11.5"
            stroke={hl} strokeOpacity="0.9"
            strokeWidth={0.9} fill="none" strokeLinecap="round" />
      <path d="M7.5 4.5 C8.4 6.3 8.7 8.7 8.4 11.2"
            stroke={hl} strokeOpacity="0.5"
            strokeWidth={0.7} fill="none" strokeLinecap="round" />
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────
// PouchShape — drawstring cloth pouch
// Two-tone: body fill + slightly darker shadow side for dimension.
// Tied neck with two cord ends. Optionally show seeds peeking out.
// ─────────────────────────────────────────────────────────────
function PouchShape({
  size = 64,
  fill = '#8B6F47',        // pouch cloth color
  cord,                     // tie cord color (auto if omitted)
  shade,                    // shadow side color (auto if omitted)
  highlight,                // top highlight color (auto if omitted)
  seeds = 0,                // 0–6 seeds peeking from the neck
  seedFill = '#3D2410',
  style,
  className,
}) {
  const cordC  = cord      || _darken(fill, 0.32);
  const shadeC = shade     || _darken(fill, 0.20);
  const hiC    = highlight || _lighten(fill, 0.18);

  // viewBox 0 0 64 64. The pouch body sits roughly y=18 → y=60.
  // Neck cinch at y=18, tied bow at y=10–18.
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" fill="none"
         style={{ display: 'inline-block', ...style }} className={className}
         aria-hidden="true">
      {/* Pouch body — main rounded bag shape */}
      <path d="M22 19
               C12 22, 8 34, 11 46
               C13 55, 22 60, 32 60
               C42 60, 51 55, 53 46
               C56 34, 52 22, 42 19
               Z"
            fill={fill} />

      {/* Right-side shading — gives 3D fabric depth */}
      <path d="M42 19
               C52 22, 56 34, 53 46
               C51 55, 42 60, 32 60
               C36 60, 41 56, 44 49
               C48 39, 47 27, 42 19
               Z"
            fill={shadeC} opacity="0.85"/>

      {/* Top highlight — subtle sheen on the left/upper body */}
      <path d="M22 19
               C18 21, 14 26, 13 32
               C16 27, 21 24, 26 23
               Z"
            fill={hiC} opacity="0.55"/>

      {/* Cloth pleats — vertical lines for gathered-cloth feel */}
      <path d="M28 28 C26 38, 26 48, 28 57"
            stroke={shadeC} strokeWidth="1.1" strokeLinecap="round" opacity="0.55"/>
      <path d="M38 28 C40 38, 40 48, 38 57"
            stroke={shadeC} strokeWidth="1.1" strokeLinecap="round" opacity="0.55"/>

      {/* Neck cinch — gathered top of pouch */}
      <rect x="20" y="14" width="24" height="8" rx="3" fill={cordC} />
      <rect x="20" y="14" width="24" height="3.6" rx="2" fill={_darken(cordC, 0.20)} opacity="0.5"/>

      {/* Drawstring cord ends — two strings drooping from the cinch */}
      <path d="M24 14 C22 9, 18 8, 16 11"
            stroke={cordC} strokeWidth="1.8" strokeLinecap="round" fill="none"/>
      <path d="M40 14 C42 9, 46 8, 48 11"
            stroke={cordC} strokeWidth="1.8" strokeLinecap="round" fill="none"/>

      {/* Optional seeds peeking out the neck */}
      {seeds > 0 && _seedArc(seeds, seedFill, cordC)}
    </svg>
  );
}

// Arrange up to 6 seeds in an arc above the cinch, slightly varied
function _seedArc(n, fill, stroke) {
  const layout = [
    { x: 32, y: 11, r:   0, s: 1.0 },
    { x: 27, y: 13, r: -22, s: 0.92 },
    { x: 37, y: 13, r:  22, s: 0.92 },
    { x: 23, y: 16, r: -36, s: 0.82 },
    { x: 41, y: 16, r:  36, s: 0.82 },
    { x: 32, y: 16, r:  -6, s: 0.78 },
  ].slice(0, Math.min(6, n));
  return (
    <g>
      {layout.map((p, i) => (
        <g key={i} transform={`translate(${p.x} ${p.y}) rotate(${p.r}) scale(${p.s})`}>
          <path d="M0 -5.6 C2.7 -3.6, 3.7 -1, 3.7 1.6 C3.7 4.5, 2.1 6.6, 0 6.6 C-2.1 6.6, -3.7 4.5, -3.7 1.6 C-3.7 -1, -2.7 -3.6, 0 -5.6 Z"
                fill={fill}/>
          <path d="M0 -3.4 C-0.9 -1.8, -1.4 0.4, -1.2 3"
                stroke="rgba(255,255,255,0.42)" strokeWidth="0.65" strokeLinecap="round" fill="none"/>
        </g>
      ))}
    </g>
  );
}

// ─────────────────────────────────────────────────────────────
// SeedCluster — pile of seeds in a natural layout (used for backgrounds)
// ─────────────────────────────────────────────────────────────
function SeedCluster({
  count = 12,
  width = 200,
  height = 100,
  color = '#5C3E1F',
  opacity = 1,
  // 'scatter' (random across area), 'pile' (clustered at bottom), 'fan' (arc)
  layout = 'scatter',
  seed = 7,
  style,
}) {
  // Deterministic pseudo-random based on seed
  const rng = (i) => {
    const x = Math.sin(seed * 9301 + i * 49297) * 233280;
    return x - Math.floor(x);
  };
  const seeds = [];
  for (let i = 0; i < count; i++) {
    let x, y, rot, scale;
    if (layout === 'pile') {
      // Cluster toward bottom-center
      const a = rng(i * 3);
      const b = rng(i * 3 + 1);
      x = width * (0.15 + 0.7 * a);
      y = height * (0.45 + 0.5 * Math.pow(b, 0.6));
      rot = -40 + rng(i * 3 + 2) * 80;
      scale = 0.7 + rng(i * 3 + 7) * 0.5;
    } else if (layout === 'fan') {
      const t = i / Math.max(1, count - 1);
      const angle = -60 + t * 120;
      const r = height * 0.55;
      x = width / 2 + Math.sin(angle * Math.PI / 180) * r;
      y = height * 0.95 - Math.cos(angle * Math.PI / 180) * r * 0.6;
      rot = angle;
      scale = 0.85 + rng(i) * 0.25;
    } else {
      // scatter
      x = width  * (0.06 + rng(i * 3)     * 0.88);
      y = height * (0.06 + rng(i * 3 + 1) * 0.88);
      rot = rng(i * 3 + 2) * 360;
      scale = 0.75 + rng(i * 3 + 7) * 0.55;
    }
    seeds.push({ x, y, rot, scale });
  }
  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}
         style={{ display: 'block', overflow: 'visible', ...style }}
         aria-hidden="true">
      {seeds.map((s, i) => (
        <g key={i} transform={`translate(${s.x} ${s.y}) rotate(${s.rot}) scale(${s.scale})`} opacity={opacity}>
          <path d="M0 -7.5 C3.6 -4.8, 5 -1.4, 5 2.2 C5 6, 2.8 8.8, 0 8.8 C-2.8 8.8, -5 6, -5 2.2 C-5 -1.4, -3.6 -4.8, 0 -7.5 Z"
                fill={color}/>
          <path d="M0 -4.6 C-1.2 -2.4, -1.8 0.5, -1.6 4"
                stroke="rgba(255,255,255,0.35)" strokeWidth="0.8" strokeLinecap="round" fill="none"/>
        </g>
      ))}
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────
// PouchWithSeeds — composed scene used as hero illustration
// (pouch + a small drift of seeds around its base)
// ─────────────────────────────────────────────────────────────
function PouchWithSeeds({ size = 96, fill = '#8B6F47', seedFill, empty = false }) {
  const sf = seedFill || _darken(fill, 0.45);
  const seedsInPouch = empty ? 0 : 5;
  return (
    <div style={{
      position: 'relative',
      width: size, height: size,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    }}>
      {/* Seeds scattered around the base */}
      {!empty && (
        <div style={{ position: 'absolute',
          left: -size * 0.18, right: -size * 0.18,
          bottom: size * 0.04, height: size * 0.32,
          pointerEvents: 'none',
        }}>
          <SeedCluster count={6} width={size * 1.36} height={size * 0.32}
                       color={sf} opacity={0.85} layout="fan" />
        </div>
      )}
      <PouchShape size={size} fill={fill} seeds={seedsInPouch} seedFill={sf}/>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Color helpers — light tweaks to a hex color
// ─────────────────────────────────────────────────────────────
function _hexToRgb(h) {
  const s = h.replace('#', '');
  return [
    parseInt(s.slice(0, 2), 16),
    parseInt(s.slice(2, 4), 16),
    parseInt(s.slice(4, 6), 16),
  ];
}
function _rgbToHex(r, g, b) {
  const c = (n) => Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, '0');
  return '#' + c(r) + c(g) + c(b);
}
function _darken(hex, amt) {
  const [r, g, b] = _hexToRgb(hex);
  return _rgbToHex(r * (1 - amt), g * (1 - amt), b * (1 - amt));
}
function _lighten(hex, amt) {
  const [r, g, b] = _hexToRgb(hex);
  return _rgbToHex(r + (255 - r) * amt, g + (255 - g) * amt, b + (255 - b) * amt);
}

// Expose to window for cross-file use
Object.assign(window, {
  SeedShape,
  PouchShape,
  SeedCluster,
  PouchWithSeeds,
});