// Colleen — Option 2: SEA GLASS SUN
// A frosted sea-glass disc that glows like a small sun. Soft rays radiate.
//  • Sam speaking → long warm gold rays reach outward
//  • Listening    → rays soften and cool to teal, glass gathers her light
// Calm, smooth, tactile — like a polished piece of beach glass.

function SeaGlassOrb({ state, intensity = 1, motionLevel = 1, mood = 'sunset', ceremony = false }) {
  const t = clUseTime(true);
  const offline = state === 'offline';
  const muted = state === 'muted';
  const m = clMode(state);
  const who = CL_STATE_META[state].who;

  const stateAmp = (
    state === 'speaking'  ? 1.2 :
    state === 'listening' ? 0.7 :
    state === 'thinking'  ? 0.35 :
    state === 'connecting'? 0.4 :
    state === 'idle'      ? 0.16 :
    muted                 ? 0.1 :
    offline               ? 0.0 :
    0.3
  ) * intensity * motionLevel;

  const amp = clVoiceAmp(t, stateAmp);
  const breath = 1 + amp * 0.05 + Math.sin(t * 0.8) * 0.012;
  const rays = clSpectrum(t, 48, stateAmp);

  // Ray length multiplier: Sam reaches far, listening stays close
  const reach = who === 'sam' ? 1.0 : who === 'you' ? 0.55 : 0.4;

  return (
    <div style={{ position: 'absolute', inset: 0, background: '#06201f', overflow: 'hidden' }}>
      <CoastBg t={t} mood={mood} offline={offline} />

      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(70% 50% at 50% 42%, transparent 0%, rgba(4,24,23,0.45) 100%)',
        pointerEvents: 'none',
      }} />

      {/* CENTER STACK */}
      <div style={{
        position: 'absolute', left: '50%', top: 292,
        transform: `translate(-50%, -50%) scale(${breath})`,
        width: 340, height: 340,
        filter: muted ? 'grayscale(0.6) brightness(0.6)' : 'none',
        animation: ceremony ? 'ceremonyFade 1.6s cubic-bezier(0.2,0.8,0.2,1) both' : 'none',
      }}>
        {/* Warm sun halo — always present so it reads sunny */}
        <div style={{
          position: 'absolute', inset: 10, borderRadius: '50%',
          background: `radial-gradient(circle, ${COAST.goldHi}44 0%, ${COAST.gold}22 30%, transparent 62%)`,
          filter: 'blur(34px)',
          opacity: offline ? 0.3 : 0.7 + amp * 0.2,
        }} />
        {/* Mode-colored glow */}
        <div style={{
          position: 'absolute', inset: 44, borderRadius: '50%',
          background: `radial-gradient(circle, ${m.base}77 0%, ${m.lo}22 45%, transparent 72%)`,
          filter: 'blur(30px)',
          opacity: offline ? 0.3 : 0.9 + amp * 0.3,
          transition: 'background 0.8s ease',
        }} />

        {/* Soft sun rays — radiate from the glass edge */}
        <svg style={{ position: 'absolute', inset: 0, width: 340, height: 340, overflow: 'visible' }}
             viewBox="0 0 340 340">
          {rays.map((v, i) => {
            const angle = (i / rays.length) * Math.PI * 2 - Math.PI / 2;
            const inner = 90;
            const outer = 90 + (20 + v * 74) * reach;
            const x1 = 170 + Math.cos(angle) * inner;
            const y1 = 170 + Math.sin(angle) * inner;
            const x2 = 170 + Math.cos(angle) * outer;
            const y2 = 170 + Math.sin(angle) * outer;
            return (
              <line key={i} x1={x1} y1={y1} x2={x2} y2={y2}
                stroke={i % 3 === 0 ? m.hi : m.mid}
                strokeWidth={2.4 + v * 2.4} strokeLinecap="round"
                opacity={offline ? 0.12 : 0.4 + v * 0.55}
                style={{ transition: 'stroke 0.8s ease' }}
              />
            );
          })}
        </svg>

        {/* LISTENING — she's talking, Sam is hearing her. Make it visibly busier:
            bright white-aqua shimmer lines + particles streaming INWARD (her
            words traveling to Sam). Only while her mic is live. */}
        {state === 'listening' && (
          <svg style={{ position: 'absolute', inset: 0, width: 340, height: 340, overflow: 'visible' }}
               viewBox="0 0 340 340">
            {/* extra white shimmer lines between the colored rays */}
            {Array.from({ length: 56 }, (_, i) => {
              const angle = (i / 56) * Math.PI * 2 - Math.PI / 2 + 0.05;
              const flick = 0.5 + 0.5 * Math.sin(t * (6 + (i % 7)) + i * 1.3);
              const len = 16 + flick * (40 + amp * 70);
              const inner = 94;
              const x1 = 170 + Math.cos(angle) * inner;
              const y1 = 170 + Math.sin(angle) * inner;
              const x2 = 170 + Math.cos(angle) * (inner + len);
              const y2 = 170 + Math.sin(angle) * (inner + len);
              return (
                <line key={i} x1={x1} y1={y1} x2={x2} y2={y2}
                  stroke="#eafdff" strokeWidth={1 + flick * 1.2} strokeLinecap="round"
                  opacity={0.12 + flick * 0.4} />
              );
            })}
            {/* particles streaming inward — her voice reaching Sam */}
            {Array.from({ length: 30 }, (_, i) => {
              const angle = (i / 30) * Math.PI * 2 + i * 0.7;
              const speed = 0.35 + (i % 5) * 0.06;
              const phase = ((t * speed + i / 30) % 1 + 1) % 1; // 0..1
              const r = 168 - phase * 78;                        // 168 → 90 (inward)
              const x = 170 + Math.cos(angle) * r;
              const y = 170 + Math.sin(angle) * r;
              const fade = Math.sin(phase * Math.PI);            // fade in/out along path
              return (
                <circle key={i} cx={x} cy={y} r={1.4 + amp * 1.4}
                  fill="#ffffff" opacity={fade * (0.45 + amp * 0.4)} />
              );
            })}
          </svg>
        )}

        {/* THE SEA GLASS DISC — frosted, smooth, glowing */}
        <div style={{
          position: 'absolute', inset: 108, borderRadius: '50%',
          background: offline
            ? `radial-gradient(circle at 38% 32%, ${m.lo}cc 0%, ${m.deep} 70%, #04201f 100%)`
            : `radial-gradient(circle at 38% 30%, rgba(255,255,255,0.95) 0%, ${m.hi}dd 24%, ${m.base}cc 55%, ${m.lo}dd 84%, ${m.deep} 100%)`,
          boxShadow: offline
            ? `inset 0 0 26px rgba(0,0,0,0.5), 0 0 18px ${m.deep}88`
            : `inset 0 -10px 28px ${m.lo}cc, inset 0 8px 18px rgba(255,255,255,0.5), 0 0 56px ${m.base}aa, 0 0 110px ${m.base}44, 0 0 0 1.5px rgba(255,255,255,0.25)`,
          transition: 'all 0.8s ease',
          overflow: 'hidden',
          // frosted glass feel
          backdropFilter: 'blur(2px)',
        }}>
          {/* Frosted streaks / glass texture */}
          <div style={{
            position: 'absolute', inset: 0, borderRadius: '50%',
            background: `linear-gradient(135deg, rgba(255,255,255,0.35) 0%, transparent 30%, transparent 70%, rgba(255,255,255,0.15) 100%)`,
            mixBlendMode: 'screen',
          }} />
          {/* Inner light that breathes with the voice */}
          <div style={{
            position: 'absolute', inset: 0, borderRadius: '50%',
            background: `radial-gradient(circle at 42% 36%, rgba(255,255,255,${offline ? 0 : 0.55 + amp * 0.35}) 0%, transparent 50%)`,
            mixBlendMode: 'screen',
          }} />
          {/* Highlight glint */}
          <div style={{
            position: 'absolute', top: '14%', left: '24%', width: '34%', height: '24%',
            borderRadius: '50%',
            background: 'radial-gradient(ellipse, rgba(255,255,255,0.85) 0%, transparent 70%)',
            filter: 'blur(4px)',
          }} />
          {/* Connecting pulse */}
          {state === 'connecting' && [0, 1, 2].map(i => (
            <div key={i} style={{
              position: 'absolute', inset: 0, borderRadius: '50%',
              border: `1.5px solid ${m.hi}`,
              animation: `corePulse 2s ${i * 0.66}s ease-out infinite`, opacity: 0,
            }} />
          ))}
        </div>
      </div>

      <style>{`
        @keyframes corePulse {
          0% { transform: scale(0.9); opacity: 0.8; }
          100% { transform: scale(1.5); opacity: 0; }
        }
      `}</style>
    </div>
  );
}

window.SeaGlassOrb = SeaGlassOrb;