/**
 * UnderwaterScene.tsx
 * ------------------------------------------------------------------
 * A Remotion composition depicting a cinematic, hyper-realistic
 * underwater scene. Pure code — no external image assets required.
 *
 * Drop this file into a Remotion project (npx create-video@latest)
 * and register it in your Root.tsx:
 *
 *   import { UnderwaterScene, underwaterSchema } from './UnderwaterScene';
 *   <Composition
 *     id="Underwater"
 *     component={UnderwaterScene}
 *     durationInFrames={30 * 20}   // 20 seconds @ 30fps
 *     fps={30}
 *     width={1920}
 *     height={1080}
 *     defaultProps={{ palette: 'ocean' }}
 *   />
 *
 * Tested against remotion ^4.0.
 * ------------------------------------------------------------------
 */

import React, {useMemo, useEffect, useRef} from 'react';
import {
  AbsoluteFill,
  useCurrentFrame,
  useVideoConfig,
  interpolate,
  random,
  Easing,
} from 'remotion';
import Tone from 'tone';

// -----------------------------------------------------------------
// Palette
// -----------------------------------------------------------------

type Palette = 'ocean' | 'abyss' | 'reef';

const palettes: Record<
  Palette,
  {
    surface: string;
    mid: string;
    deep: string;
    abyss: string;
    sunShaft: string;
    caustic: string;
    particle: string;
  }
> = {
  ocean: {
    surface: '#7dd3c8',
    mid: '#1f6f8b',
    deep: '#0b3a57',
    abyss: '#031527',
    sunShaft: 'rgba(230, 245, 255, 0.55)',
    caustic: 'rgba(190, 235, 255, 0.35)',
    particle: 'rgba(220, 240, 255, 0.85)',
  },
  abyss: {
    surface: '#2c6e7a',
    mid: '#0f3a4a',
    deep: '#061a2b',
    abyss: '#01060f',
    sunShaft: 'rgba(180, 220, 240, 0.35)',
    caustic: 'rgba(160, 210, 230, 0.25)',
    particle: 'rgba(200, 225, 240, 0.7)',
  },
  reef: {
    surface: '#a7e7d4',
    mid: '#3aa1a0',
    deep: '#0f5c66',
    abyss: '#052028',
    sunShaft: 'rgba(255, 240, 210, 0.6)',
    caustic: 'rgba(220, 245, 220, 0.4)',
    particle: 'rgba(255, 250, 230, 0.85)',
  },
};

// -----------------------------------------------------------------
// Water column gradient + vignette
// -----------------------------------------------------------------

const WaterColumn: React.FC<{p: Palette}> = ({p}) => {
  const c = palettes[p];
  return (
    <AbsoluteFill
      style={{
        background: `linear-gradient(180deg,
          ${c.surface} 0%,
          ${c.mid} 35%,
          ${c.deep} 70%,
          ${c.abyss} 100%)`,
      }}
    />
  );
};

const Vignette: React.FC = () => (
  <AbsoluteFill
    style={{
      background:
        'radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(0,0,0,0.55) 100%)',
      pointerEvents: 'none',
    }}
  />
);

// -----------------------------------------------------------------
// Volumetric sun shafts (God rays) — SVG filtered rects
// -----------------------------------------------------------------

const SunShafts: React.FC<{p: Palette}> = ({p}) => {
  const frame = useCurrentFrame();
  const {width, height} = useVideoConfig();
  const c = palettes[p];

  const shafts = useMemo(
    () =>
      new Array(9).fill(0).map((_, i) => ({
        x: (i + 0.5) * (width / 9) + random(`shaft-x-${i}`) * 80 - 40,
        w: 60 + random(`shaft-w-${i}`) * 180,
        tilt: -8 + random(`shaft-t-${i}`) * 16,
        phase: random(`shaft-p-${i}`) * Math.PI * 2,
        speed: 0.5 + random(`shaft-s-${i}`) * 0.8,
      })),
    [width]
  );

  return (
    <AbsoluteFill style={{mixBlendMode: 'screen', opacity: 0.9}}>
      <svg width={width} height={height} style={{position: 'absolute'}}>
        <defs>
          <filter id="shaftBlur" x="-10%" y="-10%" width="120%" height="120%">
            <feGaussianBlur stdDeviation="22" />
          </filter>
          <linearGradient id="shaftGrad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={c.sunShaft} stopOpacity="0.0" />
            <stop offset="15%" stopColor={c.sunShaft} stopOpacity="0.9" />
            <stop offset="60%" stopColor={c.sunShaft} stopOpacity="0.25" />
            <stop offset="100%" stopColor={c.sunShaft} stopOpacity="0" />
          </linearGradient>
        </defs>
        <g filter="url(#shaftBlur)">
          {shafts.map((s, i) => {
            const sway =
              Math.sin(frame / 30 / s.speed + s.phase) * 18 +
              Math.sin(frame / 90 + s.phase) * 6;
            const opacity =
              0.35 +
              0.35 * (0.5 + 0.5 * Math.sin(frame / 40 / s.speed + s.phase));
            return (
              <g
                key={i}
                transform={`translate(${s.x + sway} 0) rotate(${s.tilt} 0 0)`}
              >
                <rect
                  x={-s.w / 2}
                  y={-50}
                  width={s.w}
                  height={height * 0.85}
                  fill="url(#shaftGrad)"
                  opacity={opacity}
                />
              </g>
            );
          })}
        </g>
      </svg>
    </AbsoluteFill>
  );
};

// -----------------------------------------------------------------
// Surface ripple band — refraction at the top of the frame
// -----------------------------------------------------------------

const SurfaceRipples: React.FC<{p: Palette}> = ({p}) => {
  const frame = useCurrentFrame();
  const {width} = useVideoConfig();
  const c = palettes[p];
  const rows = 6;

  return (
    <AbsoluteFill style={{pointerEvents: 'none'}}>
      <svg
        width={width}
        height={220}
        style={{position: 'absolute', top: 0, left: 0}}
      >
        <defs>
          <linearGradient id="rippleGrad" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor={c.surface} stopOpacity="0.9" />
            <stop offset="100%" stopColor={c.mid} stopOpacity="0" />
          </linearGradient>
        </defs>
        <rect width="100%" height="220" fill="url(#rippleGrad)" opacity={0.7} />
        {new Array(rows).fill(0).map((_, r) => {
          const amp = 6 + r * 2;
          const yBase = 40 + r * 28;
          const speed = 0.6 + r * 0.12;
          const phase = r * 1.3;
          const path = buildWave({
            width,
            amp,
            yBase,
            frame,
            speed,
            phase,
            segments: 30,
          });
          return (
            <path
              key={r}
              d={path}
              fill="none"
              stroke={c.caustic}
              strokeWidth={1.4}
              opacity={0.55 - r * 0.07}
            />
          );
        })}
      </svg>
    </AbsoluteFill>
  );
};

const buildWave = ({
  width,
  amp,
  yBase,
  frame,
  speed,
  phase,
  segments,
}: {
  width: number;
  amp: number;
  yBase: number;
  frame: number;
  speed: number;
  phase: number;
  segments: number;
}) => {
  const dx = width / segments;
  let d = '';
  for (let i = 0; i <= segments; i++) {
    const x = i * dx;
    const y =
      yBase +
      Math.sin(i * 0.6 + frame / 12 * speed + phase) * amp +
      Math.sin(i * 0.25 - frame / 30 * speed + phase) * amp * 0.6;
    d += (i === 0 ? 'M' : 'L') + x.toFixed(1) + ' ' + y.toFixed(1) + ' ';
  }
  return d;
};

// -----------------------------------------------------------------
// Caustic light patterns projected on the seabed
// -----------------------------------------------------------------

const Caustics: React.FC<{p: Palette}> = ({p}) => {
  const frame = useCurrentFrame();
  const {width, height} = useVideoConfig();
  const c = palettes[p];

  const cells = useMemo(
    () =>
      new Array(18).fill(0).map((_, i) => ({
        x: random(`cx-${i}`) * width,
        y: height * 0.72 + random(`cy-${i}`) * height * 0.25,
        r: 60 + random(`cr-${i}`) * 140,
        phase: random(`cp-${i}`) * Math.PI * 2,
        speed: 0.4 + random(`cs-${i}`) * 0.7,
      })),
    [width, height]
  );

  return (
    <AbsoluteFill style={{mixBlendMode: 'screen', opacity: 0.7}}>
      <svg width={width} height={height} style={{position: 'absolute'}}>
        <defs>
          <filter id="causticBlur">
            <feGaussianBlur stdDeviation="14" />
          </filter>
          <radialGradient id="causticGrad" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor={c.caustic} stopOpacity="0.9" />
            <stop offset="60%" stopColor={c.caustic} stopOpacity="0.2" />
            <stop offset="100%" stopColor={c.caustic} stopOpacity="0" />
          </radialGradient>
        </defs>
        <g filter="url(#causticBlur)">
          {cells.map((c2, i) => {
            const pulse =
              0.6 + 0.4 * Math.sin(frame / 18 / c2.speed + c2.phase);
            const drift = Math.sin(frame / 40 + c2.phase) * 22;
            return (
              <ellipse
                key={i}
                cx={c2.x + drift}
                cy={c2.y + Math.cos(frame / 50 + c2.phase) * 8}
                rx={c2.r * pulse}
                ry={c2.r * 0.45 * pulse}
                fill="url(#causticGrad)"
              />
            );
          })}
        </g>
      </svg>
    </AbsoluteFill>
  );
};

// -----------------------------------------------------------------
// Seabed silhouette — layered dunes + scattered rocks
// -----------------------------------------------------------------

const Seabed: React.FC<{p: Palette}> = ({p}) => {
  const {width, height} = useVideoConfig();
  const c = palettes[p];

  const dunePath = (yOffset: number, amp: number, seed: string) => {
    const segs = 12;
    const dx = width / segs;
    let d = `M 0 ${height} L 0 ${yOffset} `;
    for (let i = 0; i <= segs; i++) {
      const x = i * dx;
      const y =
        yOffset +
        Math.sin(i * 0.7 + random(seed + i) * 2) * amp +
        random(seed + 'b' + i) * amp * 0.5;
      d += `L ${x.toFixed(1)} ${y.toFixed(1)} `;
    }
    d += `L ${width} ${height} Z`;
    return d;
  };

  const rocks = useMemo(
    () =>
      new Array(12).fill(0).map((_, i) => ({
        x: random(`rx-${i}`) * width,
        y: height * (0.82 + random(`ry-${i}`) * 0.12),
        rx: 40 + random(`rrx-${i}`) * 80,
        ry: 12 + random(`rry-${i}`) * 22,
      })),
    [width, height]
  );

  return (
    <AbsoluteFill style={{pointerEvents: 'none'}}>
      <svg width={width} height={height} style={{position: 'absolute'}}>
        <path
          d={dunePath(height * 0.78, 22, 'back')}
          fill={c.deep}
          opacity={0.9}
        />
        <path
          d={dunePath(height * 0.86, 30, 'mid')}
          fill={c.abyss}
          opacity={0.92}
        />
        {rocks.map((r, i) => (
          <ellipse
            key={i}
            cx={r.x}
            cy={r.y}
            rx={r.rx}
            ry={r.ry}
            fill={c.abyss}
            opacity={0.95}
          />
        ))}
        <path
          d={dunePath(height * 0.93, 18, 'front')}
          fill="#020912"
          opacity={0.95}
        />
      </svg>
    </AbsoluteFill>
  );
};

// -----------------------------------------------------------------
// Drifting kelp / seagrass — layered SVG blades that sway
// -----------------------------------------------------------------

const KelpBlade: React.FC<{
  x: number;
  height: number;
  sway: number;
  frame: number;
  phase: number;
  width: number;
  color: string;
}> = ({x, height: h, sway, frame, phase, width: w, color}) => {
  const tip = Math.sin(frame / 28 + phase) * sway;
  const mid = Math.sin(frame / 32 + phase + 0.8) * sway * 0.6;
  const d = `
    M ${x - w / 2} 0
    C ${x - w / 2 + mid} ${-h * 0.4},
      ${x + tip - w / 2} ${-h * 0.75},
      ${x + tip} ${-h}
    L ${x + tip + w / 2} ${-h + 4}
    C ${x + tip + w / 2} ${-h * 0.75},
      ${x + mid + w / 2} ${-h * 0.4},
      ${x + w / 2} 0
    Z
  `;
  return <path d={d} fill={color} opacity={0.88} />;
};

const Kelp: React.FC<{p: Palette}> = ({p}) => {
  const frame = useCurrentFrame();
  const {width, height} = useVideoConfig();
  const c = palettes[p];

  const blades = useMemo(
    () =>
      new Array(14).fill(0).map((_, i) => ({
        x: random(`kx-${i}`) * width,
        h: 220 + random(`kh-${i}`) * 340,
        w: 10 + random(`kw-${i}`) * 18,
        sway: 10 + random(`ks-${i}`) * 26,
        phase: random(`kp-${i}`) * Math.PI * 2,
        depth: random(`kd-${i}`),
      })),
    [width]
  );

  return (
    <AbsoluteFill style={{pointerEvents: 'none'}}>
      <svg width={width} height={height} style={{position: 'absolute'}}>
        <g transform={`translate(0 ${height})`}>
          {blades
            .slice()
            .sort((a, b) => a.depth - b.depth)
            .map((b, i) => {
              const darken = 0.45 + b.depth * 0.55;
              const col = mixHex(c.deep, c.abyss, 1 - darken);
              return (
                <KelpBlade
                  key={i}
                  x={b.x}
                  height={b.h}
                  sway={b.sway}
                  frame={frame}
                  phase={b.phase}
                  width={b.w}
                  color={col}
                />
              );
            })}
        </g>
      </svg>
    </AbsoluteFill>
  );
};

// -----------------------------------------------------------------
// Floating particles / marine snow
// -----------------------------------------------------------------

const MarineSnow: React.FC<{p: Palette; count?: number}> = ({p, count = 80}) => {
  const frame = useCurrentFrame();
  const {width, height} = useVideoConfig();
  const c = palettes[p];

  const dots = useMemo(
    () =>
      new Array(count).fill(0).map((_, i) => ({
        x: random(`px-${i}`) * width,
        y: random(`py-${i}`) * height,
        r: 0.6 + random(`pr-${i}`) * 2.4,
        driftX: -8 + random(`pdx-${i}`) * 16,
        driftY: 6 + random(`pdy-${i}`) * 22,
        phase: random(`pp-${i}`) * Math.PI * 2,
        speed: 0.4 + random(`ps-${i}`) * 1.2,
      })),
    [width, height, count]
  );

  return (
    <AbsoluteFill style={{pointerEvents: 'none'}}>
      <svg width={width} height={height} style={{position: 'absolute'}}>
        {dots.map((d, i) => {
          const t = frame / 30;
          const x =
            d.x + Math.sin(t * d.speed + d.phase) * 14 + d.driftX * t * 0.3;
          const y = (d.y + d.driftY * t * 6) % height;
          const a =
            0.2 + 0.8 * (0.5 + 0.5 * Math.sin(t * d.speed * 2 + d.phase));
          return (
            <circle
              key={i}
              cx={x}
              cy={y}
              r={d.r}
              fill={c.particle}
              opacity={a}
            />
          );
        })}
      </svg>
    </AbsoluteFill>
  );
};

// -----------------------------------------------------------------
// Bubble streams rising from the seabed
// -----------------------------------------------------------------

const Bubbles: React.FC<{p: Palette}> = ({p}) => {
  const frame = useCurrentFrame();
  const {width, height, durationInFrames} = useVideoConfig();

  const streams = useMemo(
    () =>
      new Array(5).fill(0).map((_, i) => ({
        x: 150 + random(`bsx-${i}`) * (width - 300),
        count: 10 + Math.floor(random(`bsc-${i}`) * 8),
        seed: i,
      })),
    [width]
  );

  return (
    <AbsoluteFill style={{pointerEvents: 'none'}}>
      <svg width={width} height={height} style={{position: 'absolute'}}>
        <defs>
          <radialGradient id="bub" cx="35%" cy="30%" r="55%">
            <stop offset="0%" stopColor="rgba(255,255,255,0.95)" />
            <stop offset="60%" stopColor="rgba(200,230,255,0.2)" />
            <stop offset="100%" stopColor="rgba(200,230,255,0)" />
          </radialGradient>
        </defs>
        {streams.map((s) =>
          new Array(s.count).fill(0).map((_, j) => {
            const seedKey = `b-${s.seed}-${j}`;
            const lifeLen = 90 + random(seedKey + 'l') * 120;
            const offset = j * 14 + random(seedKey + 'o') * 40;
            const localFrame = ((frame + offset) % lifeLen) / lifeLen;
            const y = interpolate(localFrame, [0, 1], [height - 40, 80]);
            const r = 2 + random(seedKey + 'r') * 5;
            const sway = Math.sin(localFrame * Math.PI * 3 + s.seed) * 18;
            const op = interpolate(
              localFrame,
              [0, 0.1, 0.9, 1],
              [0, 0.9, 0.7, 0],
              {extrapolateRight: 'clamp'}
            );
            return (
              <circle
                key={`${s.seed}-${j}`}
                cx={s.x + sway}
                cy={y}
                r={r}
                fill="url(#bub)"
                opacity={op}
              />
            );
          })
        )}
      </svg>
    </AbsoluteFill>
  );
};

// -----------------------------------------------------------------
// Fish — a small silhouette school that crosses the frame
// -----------------------------------------------------------------

const Fish: React.FC<{
  yBase: number;
  delay: number;
  scale: number;
  flip: boolean;
  color: string;
}> = ({yBase, delay, scale, flip, color}) => {
  const frame = useCurrentFrame();
  const {width, durationInFrames} = useVideoConfig();
  const t = (frame + delay) / durationInFrames;
  const x = interpolate(t, [0, 1], flip ? [width + 120, -240] : [-240, width + 120]);
  const y = yBase + Math.sin((frame + delay) / 22) * 10;
  const tail = Math.sin((frame + delay) / 3) * 8;

  return (
    <g
      transform={`translate(${x} ${y}) scale(${scale * (flip ? -1 : 1)} ${scale})`}
    >
      <ellipse cx={0} cy={0} rx={38} ry={11} fill={color} />
      <path
        d={`M -38 0 Q -56 ${-12 + tail} -68 ${tail} Q -56 ${12 + tail} -38 0 Z`}
        fill={color}
      />
      <circle cx={22} cy={-2} r={1.6} fill="#fff" opacity={0.7} />
    </g>
  );
};

const School: React.FC<{p: Palette}> = ({p}) => {
  const {width, height} = useVideoConfig();
  const c = palettes[p];

  const fish = useMemo(
    () =>
      new Array(9).fill(0).map((_, i) => ({
        yBase: height * (0.3 + random(`fy-${i}`) * 0.4),
        delay: -random(`fd-${i}`) * 300,
        scale: 0.4 + random(`fs-${i}`) * 0.7,
        flip: random(`ff-${i}`) > 0.6,
        col: mixHex(c.deep, '#000', 0.3 + random(`fc-${i}`) * 0.4),
      })),
    [height]
  );

  return (
    <AbsoluteFill style={{pointerEvents: 'none'}}>
      <svg width={width} height={height} style={{position: 'absolute'}}>
        {fish.map((f, i) => (
          <Fish
            key={i}
            yBase={f.yBase}
            delay={f.delay}
            scale={f.scale}
            flip={f.flip}
            color={f.col}
          />
        ))}
      </svg>
    </AbsoluteFill>
  );
};

// -----------------------------------------------------------------
// Slow camera drift — subtle parallax/breathing to feel cinematic
// -----------------------------------------------------------------

const useCameraDrift = () => {
  const frame = useCurrentFrame();
  const {durationInFrames} = useVideoConfig();
  const t = frame / durationInFrames;
  const zoom = interpolate(t, [0, 1], [1.0, 1.08], {
    easing: Easing.inOut(Easing.quad),
  });
  const panX = Math.sin(frame / 180) * 14;
  const panY = Math.cos(frame / 240) * 10;
  return {zoom, panX, panY};
};

// -----------------------------------------------------------------
// Tone.js underwater soundscape
// Ambient low-pass filtered pink noise + random bubble pings.
// Plays in the Remotion Studio preview (requires a user gesture
// to start the AudioContext).
// -----------------------------------------------------------------

const UnderwaterAudio: React.FC = () => {
  const frame = useCurrentFrame();
  const {fps} = useVideoConfig();
  const startedRef = useRef(false);
  const nodesRef = useRef<{
    noise?: any;
    filter?: any;
    lfo?: any;
    reverb?: any;
    bubbleSynth?: any;
    rumble?: any;
    rumbleFilter?: any;
  }>({});
  const lastBubbleFrameRef = useRef<number>(-9999);

  // Set up the audio graph once.
  useEffect(() => {
    const start = async () => {
      if (startedRef.current) return;
      try {
        await Tone.start();
      } catch (e) {
        // ignore — user gesture required
      }

      const reverb = new Tone.Reverb({decay: 6, wet: 0.6}).toDestination();

      // Ambient pink noise through a slow-moving low-pass filter.
      const filter = new Tone.Filter({
        frequency: 420,
        type: 'lowpass',
        Q: 0.8,
      }).connect(reverb);
      const lfo = new Tone.LFO({
        frequency: 0.08,
        min: 240,
        max: 650,
      }).connect(filter.frequency);
      const noise = new Tone.Noise('pink');
      noise.volume.value = -18;
      noise.connect(filter);

      // Deep rumble — slow sine sweep.
      const rumbleFilter = new Tone.Filter({
        frequency: 120,
        type: 'lowpass',
      }).connect(reverb);
      const rumble = new Tone.Oscillator({
        frequency: 42,
        type: 'sine',
      }).connect(rumbleFilter);
      rumble.volume.value = -22;

      // Bubble pings — short pluck-like blips.
      const bubbleSynth = new Tone.MembraneSynth({
        pitchDecay: 0.08,
        octaves: 4,
        envelope: {attack: 0.001, decay: 0.2, sustain: 0, release: 0.2},
      }).connect(reverb);
      bubbleSynth.volume.value = -12;

      noise.start();
      rumble.start();
      lfo.start();

      nodesRef.current = {
        noise,
        filter,
        lfo,
        reverb,
        bubbleSynth,
        rumble,
        rumbleFilter,
      };
      startedRef.current = true;
    };

    start();

    const gestureHandler = () => start();
    window.addEventListener('click', gestureHandler, {once: true});
    window.addEventListener('keydown', gestureHandler, {once: true});

    return () => {
      window.removeEventListener('click', gestureHandler);
      window.removeEventListener('keydown', gestureHandler);
      const n = nodesRef.current;
      try {
        n.noise?.stop();
        n.rumble?.stop();
        n.lfo?.stop();
        n.noise?.dispose();
        n.rumble?.dispose();
        n.lfo?.dispose();
        n.filter?.dispose();
        n.rumbleFilter?.dispose();
        n.bubbleSynth?.dispose();
        n.reverb?.dispose();
      } catch {}
      startedRef.current = false;
    };
  }, []);

  // Trigger bubble pings deterministically from the frame clock.
  useEffect(() => {
    if (!startedRef.current) return;
    // One bubble every ~0.9s, jittered per frame via remotion's `random`.
    const bubbleEvery = Math.floor(fps * 0.9);
    if (frame - lastBubbleFrameRef.current < bubbleEvery) return;
    if (random(`bubble-gate-${frame}`) > 0.55) return;

    lastBubbleFrameRef.current = frame;
    const notes = ['C5', 'D5', 'E5', 'G5', 'A5', 'C6'];
    const note = notes[Math.floor(random(`bubble-note-${frame}`) * notes.length)];
    const vel = 0.3 + random(`bubble-vel-${frame}`) * 0.5;
    try {
      nodesRef.current.bubbleSynth?.triggerAttackRelease(note, '16n', undefined, vel);
    } catch {}
  }, [frame, fps]);

  return null;
};

// -----------------------------------------------------------------
// Helpers
// -----------------------------------------------------------------

const mixHex = (a: string, b: string, t: number) => {
  const pa = parseHex(a);
  const pb = parseHex(b);
  const r = Math.round(pa.r + (pb.r - pa.r) * t);
  const g = Math.round(pa.g + (pb.g - pa.g) * t);
  const bb = Math.round(pa.b + (pb.b - pa.b) * t);
  return `rgb(${r}, ${g}, ${bb})`;
};

const parseHex = (h: string) => {
  const m = h.replace('#', '');
  return {
    r: parseInt(m.substring(0, 2), 16),
    g: parseInt(m.substring(2, 4), 16),
    b: parseInt(m.substring(4, 6), 16),
  };
};

// -----------------------------------------------------------------
// Root composition
// -----------------------------------------------------------------

export type UnderwaterSceneProps = {
  palette?: Palette;
};

export const UnderwaterScene: React.FC<UnderwaterSceneProps> = ({
  palette = 'ocean',
}) => {
  const {zoom, panX, panY} = useCameraDrift();

  return (
    <AbsoluteFill style={{backgroundColor: '#000', overflow: 'hidden'}}>
      {/* Tone.js generative soundscape */}
      <UnderwaterAudio />

      {/* Camera rig */}
      <AbsoluteFill
        style={{
          transform: `scale(${zoom}) translate(${panX}px, ${panY}px)`,
          transformOrigin: '50% 45%',
        }}
      >
        <WaterColumn p={palette} />
        <SurfaceRipples p={palette} />
        <SunShafts p={palette} />
        <Caustics p={palette} />
        <Seabed p={palette} />
        <Kelp p={palette} />
        <School p={palette} />
        <Bubbles p={palette} />
        <MarineSnow p={palette} count={120} />
        <Vignette />
      </AbsoluteFill>

      {/* Lens chromatic tint — stays put, outside camera rig */}
      <AbsoluteFill
        style={{
          background:
            'radial-gradient(ellipse at 50% 35%, rgba(120,220,230,0.08), transparent 60%)',
          mixBlendMode: 'screen',
          pointerEvents: 'none',
        }}
      />
    </AbsoluteFill>
  );
};

export default UnderwaterScene;