/* global React */
// Brush sphere icons — ZBrush matcap-style placeholders, OR PNG images via brushAssets.
// To replace with real PNGs, drop files in /brushes/ folder and update window.brushAssets.
//
//   window.brushAssets = ['brushes/standard.png', 'brushes/clay.png', ...]
//
// Any variant index with a registered asset will render the PNG; others fall back to SVG.

// Brush registry — { src, name } per variant.
// First 8 entries map to the INNER ring; entries 8-19 map to the OUTER ring.
// Add/swap entries here to change what appears in each slot and what the tooltip says.
window.brushRegistry = window.brushRegistry || [
  // Inner ring
  { src: window.__resources['brush-standard'],    name: 'Standard' },
  { src: window.__resources['brush-claybuildup'], name: 'Clay Buildup' },
  { src: window.__resources['brush-move'],        name: 'Move' },
  { src: window.__resources['brush-damstandard'], name: 'Dam Standard' },
  { src: window.__resources['brush-hpolish'],     name: 'hPolish' },
  { src: window.__resources['brush-inflate'],     name: 'Inflate' },
  { src: window.__resources['brush-pinch'],       name: 'Pinch' },
  { src: window.__resources['brush-snakehook'],   name: 'Spiral' },
  // Outer ring
  { src: window.__resources['brush-trimdynamic'], name: 'Knife' },
  { src: window.__resources['brush-claytubes'],   name: 'Clay Tubes' },
  { src: window.__resources['brush-smooth'],      name: 'Smooth' },
  { src: window.__resources['brush-clay'],        name: 'Clay' },
  { src: window.__resources['brush-imm-parts'],   name: 'IMM Parts' },
  { src: window.__resources['brush-zmodeler'],    name: 'ZModeler' },
  { src: window.__resources['brush-movetopo'],    name: 'Move Topo' },
  { src: window.__resources['brush-morph'],       name: 'Morph' },
  { src: window.__resources['brush-rake'],        name: 'Rake' },
  { src: window.__resources['brush-trim-curve'],  name: 'Trim Curve' },
  { src: window.__resources['brush-clip-curve'],  name: 'Clip Curve' },
  { src: window.__resources['brush-mask-pen'],    name: 'Mask Pen' },
];
// Legacy compatibility — older code reads brushAssets[i] for the source URL.
window.brushAssets = window.brushAssets || window.brushRegistry.map(b => b && b.src);

const BrushIcon = React.memo(({ variant = 0, size = 84, hue = 0 }) => {
  // If a PNG asset is registered for this variant, render the image
  const src = window.brushAssets?.[variant];
  if (src) {
    return (
      <img
        src={src}
        alt=""
        width={size}
        height={size}
        style={{
          display: 'block',
          width: size, height: size,
          objectFit: 'contain',
          filter: 'drop-shadow(0 4px 12px rgba(0,0,0,0.45))',
          pointerEvents: 'none',
          userSelect: 'none',
        }}
        draggable={false}
      />
    );
  }

  // Stable ID per (variant) — no randomization, so SVG defs are reused
  const id = `bv${variant}`;
  // variants: 0 standard, 1 clay, 2 move, 3 dam, 4 hpolish, 5 inflate, 6 pinch, 7 snakehook
  const variants = [
    { // 0 standard smooth
      grad: [
        { o: '0%', c: '#d8d8d8' },
        { o: '25%', c: '#6a6a6c' },
        { o: '60%', c: '#26262a' },
        { o: '100%', c: '#0a0a0c' },
      ],
      detail: null,
    },
    { // 1 clay buildup (rougher, banded)
      grad: [
        { o: '0%', c: '#c8c8c8' },
        { o: '35%', c: '#5a5a5e' },
        { o: '75%', c: '#1c1c20' },
        { o: '100%', c: '#06060a' },
      ],
      detail: (
        <g opacity="0.4">
          <ellipse cx="50" cy="38" rx="38" ry="3" fill="rgba(255,255,255,0.08)"/>
          <ellipse cx="50" cy="55" rx="42" ry="3" fill="rgba(255,255,255,0.05)"/>
          <ellipse cx="50" cy="70" rx="34" ry="3" fill="rgba(255,255,255,0.04)"/>
        </g>
      ),
    },
    { // 2 move (directional sheen)
      grad: [
        { o: '0%', c: '#e2e2e2' },
        { o: '40%', c: '#5e5e62' },
        { o: '100%', c: '#0a0a0c' },
      ],
      detail: (
        <ellipse cx="38" cy="38" rx="14" ry="20" fill="rgba(255,255,255,0.18)" transform="rotate(-25 38 38)"/>
      ),
    },
    { // 3 DamStandard (sharp highlight, deep shadow)
      grad: [
        { o: '0%', c: '#ffffff' },
        { o: '15%', c: '#a8a8aa' },
        { o: '45%', c: '#2a2a2e' },
        { o: '100%', c: '#020204' },
      ],
      detail: (
        <path d="M 30 50 Q 50 30 70 50" stroke="rgba(255,255,255,0.15)" strokeWidth="1" fill="none"/>
      ),
    },
    { // 4 HPolish (flatter top)
      grad: [
        { o: '0%', c: '#cccccc' },
        { o: '35%', c: '#666669' },
        { o: '70%', c: '#1a1a1d' },
        { o: '100%', c: '#040406' },
      ],
      detail: (
        <ellipse cx="50" cy="30" rx="34" ry="6" fill="rgba(255,255,255,0.12)"/>
      ),
    },
    { // 5 Inflate (soft glow inside)
      grad: [
        { o: '0%', c: '#d4d4d4' },
        { o: '30%', c: '#727275' },
        { o: '100%', c: '#161618' },
      ],
      detail: (
        <circle cx="50" cy="55" r="22" fill="rgba(255,255,255,0.06)"/>
      ),
    },
    { // 6 Pinch (concave look — dark center)
      grad: [
        { o: '0%', c: '#a0a0a3' },
        { o: '30%', c: '#48484c' },
        { o: '55%', c: '#1e1e22' },
        { o: '100%', c: '#0a0a0c' },
      ],
      detail: (
        <radialGradient id={`p_${id}`} cx="50%" cy="50%" r="30%">
          <stop offset="0%" stopColor="rgba(0,0,0,0.6)"/>
          <stop offset="100%" stopColor="rgba(0,0,0,0)"/>
        </radialGradient>
      ),
    },
    { // 7 SnakeHook (spiral hint)
      grad: [
        { o: '0%', c: '#dadadc' },
        { o: '40%', c: '#5c5c60' },
        { o: '100%', c: '#08080a' },
      ],
      detail: (
        <path d="M 50 50 m -18 0 a 18 18 0 1 0 36 0 a 14 14 0 1 1 -28 0 a 10 10 0 1 0 20 0 a 6 6 0 1 1 -12 0" 
              stroke="rgba(255,255,255,0.1)" strokeWidth="1" fill="none"/>
      ),
    },
  ];
  const v = variants[variant % variants.length];

  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ overflow: 'visible' }}>
      <defs>
        <radialGradient id={`bg_${id}`} cx="35%" cy="28%" r="75%">
          {v.grad.map((g, i) => (
            <stop key={i} offset={g.o} stopColor={g.c} />
          ))}
        </radialGradient>
        <radialGradient id={`rim_${id}`} cx="50%" cy="50%" r="50%">
          <stop offset="88%" stopColor="rgba(0,0,0,0)"/>
          <stop offset="98%" stopColor="rgba(255,255,255,0.15)"/>
          <stop offset="100%" stopColor="rgba(0,0,0,0)"/>
        </radialGradient>
        <radialGradient id={`shadow_${id}`} cx="50%" cy="100%" r="50%">
          <stop offset="0%" stopColor="rgba(0,0,0,0.6)"/>
          <stop offset="100%" stopColor="rgba(0,0,0,0)"/>
        </radialGradient>
        <radialGradient id={`spec_${id}`} cx="35%" cy="25%" r="20%">
          <stop offset="0%" stopColor="rgba(255,255,255,0.9)"/>
          <stop offset="50%" stopColor="rgba(255,255,255,0.4)"/>
          <stop offset="100%" stopColor="rgba(255,255,255,0)"/>
        </radialGradient>
      </defs>
      {/* contact shadow */}
      <ellipse cx="50" cy="96" rx="38" ry="3" fill="url(#shadow_${id})" opacity="0.45"/>
      {/* main sphere */}
      <circle cx="50" cy="50" r="46" fill={`url(#bg_${id})`} />
      {/* details */}
      {v.detail}
      {/* rim */}
      <circle cx="50" cy="50" r="46" fill={`url(#rim_${id})`} />
      {/* specular highlight */}
      <circle cx="50" cy="50" r="46" fill={`url(#spec_${id})`} />
    </svg>
  );
});

// A circular "active" brush ring with center glow + spokes (used in hero + reveal)
// `variants` lets callers override which brushes sit in each spoke (default 0..n-1).
const RadialMenuSVG = ({ size = 360, spokeCount = 8, brushSize = 56, scale = 1, glow = 1, variants = null }) => {
  const radius = size * 0.42;
  const spokeLen = radius - brushSize / 2 - 6;
  const items = Array.from({ length: spokeCount });
  const variantAt = (i) => (variants && variants[i] !== undefined) ? variants[i] : i;
  return (
    <div style={{
      position: 'relative',
      width: size, height: size,
      transform: `scale(${scale})`,
      transformOrigin: 'center',
    }}>
      {/* faint outer ring */}
      <div style={{
        position: 'absolute', inset: 0,
        border: '1px dashed rgba(248,107,51,0.18)',
        borderRadius: '50%',
        opacity: glow * 0.8,
      }} />
      {/* spokes */}
      {items.map((_, i) => {
        const angle = (i / spokeCount) * 360;
        return (
          <div key={`s${i}`} style={{
            position: 'absolute', left: '50%', top: '50%',
            width: 2, height: spokeLen,
            transformOrigin: 'top center',
            transform: `translate(-50%, 0) rotate(${angle + 180}deg)`,
            background: `linear-gradient(to bottom, rgba(248,107,51,${0.9*glow}), transparent)`,
            filter: `drop-shadow(0 0 ${6*glow}px rgba(248,107,51,${0.7*glow}))`,
          }} />
        );
      })}
      {/* center core */}
      <div style={{
        position: 'absolute', left: '50%', top: '50%',
        width: 10, height: 10, borderRadius: '50%',
        transform: 'translate(-50%, -50%)',
        background: '#f86b33',
        boxShadow: `0 0 ${24*glow}px ${4*glow}px #f86b33, 0 0 ${80*glow}px ${12*glow}px rgba(248,107,51,0.6)`,
      }} />
      {/* pellets */}
      {items.map((_, i) => {
        const angle = (i / spokeCount) * 360 - 90;
        const rad = (angle * Math.PI) / 180;
        const x = size/2 + Math.cos(rad) * radius;
        const y = size/2 + Math.sin(rad) * radius;
        return (
          <div key={`b${i}`} style={{
            position: 'absolute', left: x, top: y,
            transform: 'translate(-50%, -50%)',
            opacity: 0.7 + 0.3 * glow,
          }}>
            <BrushIcon variant={variantAt(i)} size={brushSize} />
          </div>);
      })}
    </div>
  );
};

window.BrushIcon = BrushIcon;
window.RadialMenuSVG = RadialMenuSVG;