"use client";

import {
  createContext,
  useContext,
  useEffect,
  useMemo,
  useRef,
  useState,
  type MutableRefObject,
} from "react";
import { Canvas, useFrame, useThree } from "@react-three/fiber";
import * as THREE from "three";

type WindLabel = "XS" | "M" | "L";

interface WindContextValue {
  windSpeedRef: MutableRefObject<number>;
}

interface TreeSettings {
  branchesPerBranch: number;
  curveBottomAngle: number;
  curveRes: number;
  curveTopAngle: number;
  curveVariance: number;
  leafCurve: number;
  leafSize: number;
  leavesPerBranch: number;
  lengthFactor: number;
  maxLevel: number;
  radialSegments: number;
  radiusFactor: number;
  startLength: number;
  startRadius: number;
  tropism: [number, number, number];
  tubularSegments: number;
}

interface LeafProps {
  isLeft: boolean;
  parentRadius: number;
  position: THREE.Vector3;
  tangent: THREE.Vector3;
}

interface BranchProps {
  length: number;
  level?: number;
  radius: number;
}

const WIND_SPEEDS: Record<WindLabel, number> = {
  XS: 1,
  M: 10,
  L: 20,
};

const TREE_SETTINGS: TreeSettings = {
  tubularSegments: 10,
  radialSegments: 8,
  maxLevel: 4,
  startLength: 12,
  startRadius: 0.5,
  lengthFactor: 0.65,
  radiusFactor: 0.8,
  branchesPerBranch: 4,
  curveVariance: 0,
  curveTopAngle: -90,
  curveBottomAngle: 90,
  curveRes: 15,
  leafSize: 6,
  leafCurve: 1,
  leavesPerBranch: 3,
  tropism: [0, -0.05, 0],
};

const windContext = createContext<WindContextValue | null>(null);
const treeSettingsContext = createContext<TreeSettings>(TREE_SETTINGS);

function useWindContext() {
  const value = useContext(windContext);
  if (!value) {
    throw new Error("useWindContext must be used inside DappledLightI.");
  }

  return value;
}

function useTreeSettings() {
  return useContext(treeSettingsContext);
}

function pseudoRandom(seed: number) {
  const value = Math.sin(seed * 12.9898) * 43758.5453123;
  return value - Math.floor(value);
}

function buildSoftShadowChunk({
  focus = 0,
  samples = 10,
  size = 25,
}: {
  focus?: number;
  samples?: number;
  size?: number;
}) {
  return `
float dappleRand(vec2 uv) {
  return fract(sin(dot(uv, vec2(12.75613, 38.12123))) * 13234.76575);
}

vec3 dappleRandRGB(vec2 uv) {
  return vec3(
    dappleRand(uv + vec2(0.0, 0.0)),
    dappleRand(uv + vec2(17.0, 31.0)),
    dappleRand(uv + vec2(47.0, 11.0))
  );
}

vec3 dappleLowPassRandRGB(vec2 uv) {
  vec3 result = vec3(0.0);
  result += dappleRandRGB(uv + vec2(-1.0, -1.0));
  result += dappleRandRGB(uv + vec2(-1.0, 0.0));
  result += dappleRandRGB(uv + vec2(-1.0, 1.0));
  result += dappleRandRGB(uv + vec2(0.0, -1.0));
  result += dappleRandRGB(uv + vec2(0.0, 0.0));
  result += dappleRandRGB(uv + vec2(0.0, 1.0));
  result += dappleRandRGB(uv + vec2(1.0, -1.0));
  result += dappleRandRGB(uv + vec2(1.0, 0.0));
  result += dappleRandRGB(uv + vec2(1.0, 1.0));
  result *= 0.111111111;
  return result;
}

vec3 dappleHighPassRandRGB(vec2 uv) {
  return dappleRandRGB(uv) - dappleLowPassRandRGB(uv) + 0.5;
}

vec2 dappleVogelDiskSample(int sampleIndex, int sampleCount, float angle) {
  const float goldenAngle = 2.399963;
  float r = sqrt(float(sampleIndex) + 0.5) / sqrt(float(sampleCount));
  float theta = float(sampleIndex) * goldenAngle + angle;
  return vec2(cos(theta), sin(theta)) * r;
}

float dappleReadDepth(sampler2D shadowMap, vec2 uv) {
  return texture2D(shadowMap, uv).r;
}

float dappleShadowCompare(float compare, float depth) {
  #ifdef USE_REVERSED_DEPTH_BUFFER
    return step(depth, compare);
  #else
    return step(compare, depth);
  #endif
}

bool dappleIsBlocker(float depth, float compare) {
  #ifdef USE_REVERSED_DEPTH_BUFFER
    return depth > compare;
  #else
    return depth < compare;
  #endif
}

float dapplePenumbraSize(const in float zReceiver, const in float zBlocker) {
  return (zReceiver - zBlocker) / zBlocker;
}

float dappleFindBlocker(
  sampler2D shadowMap,
  vec2 shadowMapSize,
  vec2 uv,
  float compare,
  float angle,
  float shadowRadius
) {
  float texelSize = 1.0 / shadowMapSize.x;
  float blockerDepthSum = float(${focus});
  float blockers = 0.0;

  for (int i = 0; i < ${samples}; i++) {
    vec2 offset =
      dappleVogelDiskSample(i, ${samples}, angle) *
      texelSize *
      2.0 *
      float(${size}) *
      max(shadowRadius, 1.0);
    float depth = dappleReadDepth(shadowMap, uv + offset);

    if (dappleIsBlocker(depth, compare)) {
      blockerDepthSum += depth;
      blockers += 1.0;
    }
  }

  if (blockers > 0.0) {
    return blockerDepthSum / blockers;
  }

  return -1.0;
}

float dappleVogelFilter(
  sampler2D shadowMap,
  vec2 shadowMapSize,
  vec2 uv,
  float zReceiver,
  float filterRadius,
  float angle,
  float shadowRadius
) {
  float texelSize = 1.0 / shadowMapSize.x;
  float shadow = 0.0;

  for (int i = 0; i < ${samples}; i++) {
    vec2 vogelSample = dappleVogelDiskSample(i, ${samples}, angle) * texelSize;
    vec2 offset =
      vogelSample *
      (1.0 + filterRadius * float(${size}) * max(shadowRadius, 1.0));
    float depth = dappleReadDepth(shadowMap, uv + offset);
    shadow += dappleShadowCompare(zReceiver, depth);
  }

  return shadow / float(${samples});
}

float PCSS(
  sampler2D shadowMap,
  vec2 shadowMapSize,
  vec4 shadowCoord,
  float shadowRadius
) {
  vec2 uv = shadowCoord.xy;
  float zReceiver = shadowCoord.z;
  float angle = dappleHighPassRandRGB(gl_FragCoord.xy).r * PI2;
  float avgBlockerDepth = dappleFindBlocker(
    shadowMap,
    shadowMapSize,
    uv,
    zReceiver,
    angle,
    shadowRadius
  );

  if (avgBlockerDepth == -1.0) {
    return 1.0;
  }

  float penumbraRatio = dapplePenumbraSize(zReceiver, avgBlockerDepth);
  return dappleVogelFilter(
    shadowMap,
    shadowMapSize,
    uv,
    zReceiver,
    1.25 * penumbraRatio,
    angle,
    shadowRadius
  );
}
`;
}

function recompileScene(
  gl: THREE.WebGLRenderer,
  scene: THREE.Scene,
  camera: THREE.Camera,
) {
  scene.traverse((object) => {
    const material = (object as THREE.Mesh).material;
    if (!material) {
      return;
    }

    const materials = Array.isArray(material) ? material : [material];

    materials.forEach((entry) => {
      gl.properties.remove(entry);
      entry.dispose?.();
    });
  });

  if (gl.info.programs) {
    gl.info.programs.length = 0;
  }
  gl.compile(scene, camera);
}

function SoftShadowsCompat({
  focus = 0,
  samples = 10,
  size = 25,
}: {
  focus?: number;
  samples?: number;
  size?: number;
}) {
  const gl = useThree((state) => state.gl);
  const scene = useThree((state) => state.scene);
  const camera = useThree((state) => state.camera);

  useEffect(() => {
    const original = THREE.ShaderChunk.shadowmap_pars_fragment;
    const startMarker =
      "#else\n\t\tfloat getShadow( sampler2D shadowMap, vec2 shadowMapSize, float shadowIntensity, float shadowBias, float shadowRadius, vec4 shadowCoord ) {";
    const endMarker = "\n\t#endif\n\t#if NUM_POINT_LIGHT_SHADOWS > 0";

    const startIndex = original.indexOf(startMarker);
    const endIndex = original.indexOf(endMarker, startIndex);

    if (startIndex === -1 || endIndex === -1) {
      return;
    }

    const replacement = `#else
${buildSoftShadowChunk({ focus, samples, size })}
\t\tfloat getShadow( sampler2D shadowMap, vec2 shadowMapSize, float shadowIntensity, float shadowBias, float shadowRadius, vec4 shadowCoord ) {
\t\t\tfloat shadow = 1.0;
\t\t\tshadowCoord.xyz /= shadowCoord.w;
\t\t\t#ifdef USE_REVERSED_DEPTH_BUFFER
\t\t\t\tshadowCoord.z -= shadowBias;
\t\t\t#else
\t\t\t\tshadowCoord.z += shadowBias;
\t\t\t#endif
\t\t\tbool inFrustum = shadowCoord.x >= 0.0 && shadowCoord.x <= 1.0 && shadowCoord.y >= 0.0 && shadowCoord.y <= 1.0;
\t\t\tbool frustumTest = inFrustum && shadowCoord.z <= 1.0;
\t\t\tif ( frustumTest ) {
\t\t\t\tshadow = PCSS( shadowMap, shadowMapSize, shadowCoord, shadowRadius );
\t\t\t}
\t\t\treturn mix( 1.0, shadow, shadowIntensity );
\t\t}`;

    const patched =
      original.slice(0, startIndex) +
      replacement +
      original.slice(endIndex);

    THREE.ShaderChunk.shadowmap_pars_fragment = patched;
    recompileScene(gl, scene, camera);

    return () => {
      THREE.ShaderChunk.shadowmap_pars_fragment = original;
      recompileScene(gl, scene, camera);
    };
  }, [camera, focus, gl, samples, scene, size]);

  return null;
}

function vectorSeed(vector: THREE.Vector3) {
  return vector.x * 12.3 + vector.y * 45.6 + vector.z * 78.9;
}

function buildLeafGeometry(size: number, curve: number) {
  const geometry = new THREE.PlaneGeometry(size, size, 20, 20);
  const halfWidth = geometry.parameters.width / 2;
  const circumference = (size / Math.PI) * 2;
  const arcHeight =
    (circumference - Math.sqrt(circumference ** 2 - (size / 2) ** 2)) * curve;

  const left = new THREE.Vector2(-halfWidth, 0);
  const center = new THREE.Vector2(0, arcHeight);
  const right = new THREE.Vector2(halfWidth, 0);

  const leftCenter = new THREE.Vector2().subVectors(left, center);
  const centerRight = new THREE.Vector2().subVectors(center, right);
  const leftRight = new THREE.Vector2().subVectors(left, right);

  const circumradius =
    (leftCenter.length() * centerRight.length() * leftRight.length()) /
    (2 * Math.abs(leftCenter.cross(leftRight)));

  const circleCenter = new THREE.Vector2(0, arcHeight - circumradius);
  const rotationRange =
    (new THREE.Vector2().subVectors(left, circleCenter).angle() - Math.PI / 2) * 2;

  const positions = geometry.attributes.position as THREE.BufferAttribute;
  const warped = new THREE.Vector2();

  for (let index = 0; index < positions.count; index += 1) {
    const u = 1 - geometry.attributes.uv.getX(index);
    const y = positions.getY(index);

    warped.copy(right).rotateAround(circleCenter, rotationRange * u);
    positions.setXYZ(index, warped.x, y, -warped.y);
  }

  positions.needsUpdate = true;
  geometry.translate(size / 2, 0.5, 0);

  return geometry;
}

class StrongTubeGeometry extends THREE.BufferGeometry {
  constructor(
    path: THREE.CatmullRomCurve3,
    tubularSegments: number,
    radiusAt: (t: number) => number,
    radialSegments: number,
    closed = true,
  ) {
    super();

    const frames = path.computeFrenetFrames(tubularSegments, closed);
    const vertex = new THREE.Vector3();
    const normal = new THREE.Vector3();
    const curvePoint = new THREE.Vector3();
    const uv = new THREE.Vector2();

    const positions: number[] = [];
    const normals: number[] = [];
    const uvs: number[] = [];
    const indices: number[] = [];

    const generateSegment = (segmentIndex: number) => {
      const t = segmentIndex / tubularSegments;
      const radius = radiusAt(t);
      path.getPointAt(t, curvePoint);

      const frameNormal = frames.normals[segmentIndex];
      const frameBinormal = frames.binormals[segmentIndex];

      for (let ringIndex = 0; ringIndex <= radialSegments; ringIndex += 1) {
        const angle = (ringIndex / radialSegments) * Math.PI * 2;
        const sin = Math.sin(angle);
        const cos = -Math.cos(angle);

        normal
          .set(
            cos * frameNormal.x + sin * frameBinormal.x,
            cos * frameNormal.y + sin * frameBinormal.y,
            cos * frameNormal.z + sin * frameBinormal.z,
          )
          .normalize();

        normals.push(normal.x, normal.y, normal.z);

        vertex.set(
          curvePoint.x + radius * normal.x,
          curvePoint.y + radius * normal.y,
          curvePoint.z + radius * normal.z,
        );

        positions.push(vertex.x, vertex.y, vertex.z);
      }
    };

    for (let segmentIndex = 0; segmentIndex < tubularSegments; segmentIndex += 1) {
      generateSegment(segmentIndex);
    }

    generateSegment(closed ? 0 : tubularSegments);

    for (let segmentIndex = 0; segmentIndex <= tubularSegments; segmentIndex += 1) {
      for (let ringIndex = 0; ringIndex <= radialSegments; ringIndex += 1) {
        uv.set(segmentIndex / tubularSegments, ringIndex / radialSegments);
        uvs.push(uv.x, uv.y);
      }
    }

    for (let segmentIndex = 1; segmentIndex <= tubularSegments; segmentIndex += 1) {
      for (let ringIndex = 1; ringIndex <= radialSegments; ringIndex += 1) {
        const a = (radialSegments + 1) * (segmentIndex - 1) + (ringIndex - 1);
        const b = (radialSegments + 1) * segmentIndex + (ringIndex - 1);
        const c = (radialSegments + 1) * segmentIndex + ringIndex;
        const d = (radialSegments + 1) * (segmentIndex - 1) + ringIndex;

        indices.push(a, b, d, b, c, d);
      }
    }

    this.setIndex(indices);
    this.setAttribute(
      "position",
      new THREE.Float32BufferAttribute(positions, 3),
    );
    this.setAttribute(
      "normal",
      new THREE.Float32BufferAttribute(normals, 3),
    );
    this.setAttribute("uv", new THREE.Float32BufferAttribute(uvs, 2));
  }
}

function StrongTube({
  closed = true,
  path,
  radialSegments,
  radiusAt,
  tubularSegments,
}: {
  closed?: boolean;
  path: THREE.CatmullRomCurve3;
  radialSegments: number;
  radiusAt: (t: number) => number;
  tubularSegments: number;
}) {
  const geometry = useMemo(
    () =>
      new StrongTubeGeometry(
        path,
        tubularSegments,
        radiusAt,
        radialSegments,
        closed,
      ),
    [closed, path, radialSegments, radiusAt, tubularSegments],
  );

  return <primitive attach="geometry" object={geometry} />;
}

function Leaf({ isLeft, parentRadius, position, tangent }: LeafProps) {
  const { leafCurve, leafSize } = useTreeSettings();
  const { windSpeedRef } = useWindContext();
  const meshRef = useRef<THREE.Mesh>(null);

  const leafTexture = useMemo(() => {
    const texture = new THREE.TextureLoader().load(
      "/background/farayan-dappled-leaf.png",
    );
    texture.colorSpace = THREE.SRGBColorSpace;
    return texture;
  }, []);

  const leafGeometry = useMemo(
    () => buildLeafGeometry(leafSize, leafCurve),
    [leafCurve, leafSize],
  );

  const quaternion = useMemo(() => {
    const align = new THREE.Quaternion().setFromUnitVectors(
      new THREE.Vector3(0, 1, 0),
      tangent,
    );
    const lean = new THREE.Quaternion().setFromAxisAngle(
      new THREE.Vector3(0, 0, 1),
      THREE.MathUtils.degToRad(isLeft ? 45 : -45),
    );
    const pitch = new THREE.Quaternion().setFromAxisAngle(
      new THREE.Vector3(1, 0, 0),
      THREE.MathUtils.degToRad(22.5),
    );

    return align.multiply(lean).multiply(pitch);
  }, [isLeft, tangent]);

  const baseRotation = useMemo(
    () => new THREE.Euler(0, 0, THREE.MathUtils.degToRad(90)),
    [],
  );

  const phase = useMemo(
    () =>
      (pseudoRandom(parentRadius * 19 + vectorSeed(position) + vectorSeed(tangent)) *
        Math.PI *
        2) /
      parentRadius /
      5,
    [parentRadius, position, tangent],
  );

  const amplitude = useMemo(
    () => 5 + 5 * pseudoRandom(parentRadius * 31 + vectorSeed(position) * 0.5),
    [parentRadius, position],
  );

  useFrame(({ clock }) => {
    if (!meshRef.current) {
      return;
    }

    const wave =
      Math.sin(clock.getElapsedTime() * windSpeedRef.current / 10 + phase) *
      amplitude;

    meshRef.current.rotation.y = wave * THREE.MathUtils.degToRad(1);
    meshRef.current.rotation.x = wave * THREE.MathUtils.degToRad(0.5);
  });

  return (
    <group position={position} quaternion={quaternion}>
      <mesh ref={meshRef} geometry={leafGeometry} rotation={baseRotation} castShadow>
        <meshBasicMaterial
          map={leafTexture}
          alphaMap={leafTexture}
          side={THREE.DoubleSide}
          transparent
          alphaTest={0.001}
          opacity={0}
        />
      </mesh>
    </group>
  );
}

function Branch({ length, level = 0, radius }: BranchProps) {
  const settings = useTreeSettings();
  const { windSpeedRef } = useWindContext();
  const groupRef = useRef<THREE.Group>(null);

  const radiusAt = useMemo(
    () => (t: number) =>
      radius -
      t * (1 - settings.radiusFactor) +
      0.1 * Math.pow(0.5 * Math.sin(10 * t) + 0.3, 3),
    [radius, settings.radiusFactor],
  );

  const path = useMemo(() => {
    const points: THREE.Vector3[] = [];
    const step = length / settings.curveRes;
    let cursor = new THREE.Vector3(0, 0, 0);
    const direction = new THREE.Vector3(0, 1, 0);
    const rotation = new THREE.Quaternion();
    const axis = new THREE.Vector3(1, 0, 0);
    const varianceRadians = THREE.MathUtils.degToRad(settings.curveVariance);

    for (let index = 0; index <= settings.curveRes; index += 1) {
      let bend = 0;

      if (level > 0) {
        bend =
          index < settings.curveRes / 2
            ? (settings.curveTopAngle * (1 - level / settings.maxLevel / 4)) /
              settings.curveRes
            : (settings.curveBottomAngle *
                (1 - level / settings.maxLevel / 4)) /
              settings.curveRes;
      }

      const variance =
        pseudoRandom(length * 1.13 + level * 17.7 + index * 3.1) *
        varianceRadians;
      rotation.setFromAxisAngle(axis, THREE.MathUtils.degToRad(bend + variance));
      direction.applyQuaternion(rotation).normalize();

      if (level > 0) {
        direction.add(new THREE.Vector3(...settings.tropism)).normalize();
      }

      cursor = cursor.clone().add(direction.clone().multiplyScalar(step));
      points.push(cursor);
    }

    const start = new THREE.CatmullRomCurve3(points).getPointAt(0);
    points.forEach((point) => point.sub(start));

    return new THREE.CatmullRomCurve3(points);
  }, [length, level, settings]);

  const childBranches = useMemo(() => {
    const points: Array<{
      factor: number;
      position: THREE.Vector3;
      tangent: THREE.Vector3;
    }> = [];
    const start = path.getPointAt(0);
    const branchesAtLevel = settings.branchesPerBranch - (level - 1);
    const minT = 0.4 - (0.4 * level) / settings.maxLevel;
    let jitter =
      0.05 * pseudoRandom(length * 2.7 + level * 13.1 + radius * 5.3) - 0.025;

    for (let index = 1; index <= branchesAtLevel; index += 1) {
      const t =
        minT +
        (1 - minT - 0.05) * (index / branchesAtLevel) +
        jitter;

      points.push({
        position: path.getPointAt(t).sub(start),
        tangent: path.getTangentAt(t).normalize(),
        factor: index / branchesAtLevel,
      });

      jitter =
        0.05 *
          pseudoRandom(length * 2.7 + level * 13.1 + radius * 5.3 + index * 1.7) -
        0.025;
    }

    return points;
  }, [length, level, path, radius, settings.branchesPerBranch, settings.maxLevel]);

  const leaves = useMemo(() => {
    const points: Array<{
      position: THREE.Vector3;
      tangent: THREE.Vector3;
      center: THREE.Vector3;
    }> = [];
    const start = path.getPointAt(0);
    const minT = 0.5 - level / 10;
    let jitter =
      0.05 * pseudoRandom(length * 4.1 + level * 9.7 + radius * 6.1) - 0.025;

    for (let index = 1; index <= settings.leavesPerBranch; index += 1) {
      const t =
        minT +
        (1 - minT - 0.05) * (index / settings.leavesPerBranch) +
        jitter;

      points.push({
        position: path.getPointAt(t).sub(start),
        tangent: path.getTangentAt(t).normalize(),
        center: start.clone(),
      });

      jitter =
        0.05 *
          pseudoRandom(length * 4.1 + level * 9.7 + radius * 6.1 + index * 1.9) -
        0.025;
    }

    return points;
  }, [length, level, path, radius, settings.leavesPerBranch]);

  const swayPhase = useMemo(
    () => pseudoRandom(length * 5.1 + radius * 7.7 + level * 11.3) / (radius * length),
    [length, level, radius],
  );
  const swayStrength = useMemo(
    () => pseudoRandom(length * 2.3 + radius * 3.7 + level * 9.1),
    [length, level, radius],
  );

  useFrame(({ clock }) => {
    if (!groupRef.current || level === 0) {
      return;
    }

    const wave =
      Math.sin(clock.getElapsedTime() + swayPhase) *
      swayStrength *
      windSpeedRef.current;
    groupRef.current.rotation.y = wave * THREE.MathUtils.degToRad(1);
    groupRef.current.rotation.x = wave * THREE.MathUtils.degToRad(0.5);
  });

  if (radius < 0.2) {
    return null;
  }

  return (
    <group ref={groupRef}>
      <mesh castShadow receiveShadow>
        <StrongTube
          path={path}
          tubularSegments={settings.tubularSegments}
          radiusAt={radiusAt}
          radialSegments={settings.radialSegments}
        />
        <shadowMaterial transparent opacity={0} />
      </mesh>

      {level < settings.maxLevel &&
        childBranches.map(({ factor, position, tangent }, index) => {
          const branchQuaternion = new THREE.Quaternion()
            .setFromUnitVectors(new THREE.Vector3(0, 1, 0), tangent)
            .multiply(
              new THREE.Quaternion().setFromAxisAngle(
                new THREE.Vector3(0, 1, 0),
                THREE.MathUtils.degToRad(
                  360 * factor +
                    45 * pseudoRandom(level * 19.1 + factor * 23.7 + index * 29.2) -
                    22.5,
                ),
              ),
            );

          return (
            <group key={`${level}-${index}`} position={position} quaternion={branchQuaternion}>
              <Branch
                length={length * settings.lengthFactor}
                radius={radiusAt(factor)}
                level={level + 1}
              />
            </group>
          );
        })}

      {level > 0 &&
        leaves.map(({ center, position, tangent }, index) => {
          const leafPosition = new THREE.Vector3(
            position.x - center.x,
            position.y - center.y,
            position.z - center.z,
          );

          return (
            <Leaf
              key={`leaf-${level}-${index}`}
              position={leafPosition}
              tangent={tangent}
              isLeft={index % 2 === 0}
              parentRadius={radius}
            />
          );
        })}
    </group>
  );
}

function Tree() {
  return (
    <treeSettingsContext.Provider value={TREE_SETTINGS}>
      <Branch length={TREE_SETTINGS.startLength} radius={TREE_SETTINGS.startRadius} />
    </treeSettingsContext.Provider>
  );
}

function Ground() {
  return (
    <mesh receiveShadow rotation={[-Math.PI / 2, 0, 0]}>
      <planeGeometry args={[30, 30]} />
      <meshStandardMaterial color="white" roughness={1} />
    </mesh>
  );
}

function Scene() {
  return (
    <>
      <SoftShadowsCompat focus={1} samples={70} size={25} />
      <directionalLight
        color="#FFE5C7"
        castShadow
        position={[-15, 28, 23]}
        intensity={5}
        shadow-mapSize-width={8192}
        shadow-mapSize-height={8192}
        shadow-camera-near={1}
        shadow-camera-far={50}
        shadow-camera-left={-20}
        shadow-camera-right={20}
        shadow-camera-top={20}
        shadow-camera-bottom={-20}
        shadow-bias={-0.0005}
      />
      <ambientLight color="#9DACB1" intensity={0.8} />
      <Ground />
      <group position={[-7, 0, 14]}>
        <Tree />
      </group>
    </>
  );
}

function DappledCanvas() {
  const fov = 16;
  const distanceScale = (fov / 16) * 40;

  return (
    <Canvas
      shadows
      dpr={[1, 2]}
      gl={{ antialias: true }}
      camera={{
        position: [-(0.7 * distanceScale), 0.8 * distanceScale, 0],
        fov,
      }}
    >
      <Scene />
    </Canvas>
  );
}

function WindControls({
  onChange,
  value,
}: {
  onChange: (value: WindLabel) => void;
  value: WindLabel;
}) {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        gap: "0.5rem",
        fontFamily: "var(--font-mono)",
        fontSize: "0.75rem",
        color: "#1f1c18",
        letterSpacing: "-0.03em",
      }}
    >
      <span style={{ fontSize: "0.9rem" }}>Wind:</span>
      {(["XS", "M", "L"] as const).map((label) => {
        const active = value === label;

        return (
          <label
            key={label}
            style={{
              width: "1.6rem",
              height: "1.6rem",
              display: "inline-flex",
              alignItems: "center",
              justifyContent: "center",
              borderRadius: "999px",
              cursor: "pointer",
              border: active ? "0.8px solid #111" : "0.8px solid transparent",
            }}
          >
            <input
              type="radio"
              name="dappled-wind"
              value={label}
              checked={active}
              onChange={() => onChange(label)}
              style={{ display: "none" }}
            />
            {label}
          </label>
        );
      })}
    </div>
  );
}

export default function DappledLightI() {
  const [wind, setWind] = useState<WindLabel>("XS");
  const windSpeedRef = useRef(WIND_SPEEDS.XS);

  return (
    <windContext.Provider value={{ windSpeedRef }}>
      <div
        style={{
          width: "min(100%, 500px)",
          minWidth: 280,
          display: "flex",
          flexDirection: "column",
          gap: 12,
        }}
      >
        <div
          style={{
            width: "100%",
            aspectRatio: "500 / 307",
            background: "#f2f0ee",
            borderRadius: 2,
            overflow: "hidden",
          }}
        >
          <DappledCanvas />
        </div>

        <WindControls
          value={wind}
          onChange={(nextWind) => {
            setWind(nextWind);
            windSpeedRef.current = WIND_SPEEDS[nextWind];
          }}
        />
      </div>
    </windContext.Provider>
  );
}
Dappled Light I
