"use client";

import { useMemo } from "react";

type TreeProps = {
  position: [number, number, number];
  scale?: number;
  rotation?: number;
};

function Tree({
  position,
  scale = 1,
  rotation = 0,
}: TreeProps) {
  return (
    <group position={position} scale={scale} rotation={[0, rotation, 0]}>
      <mesh position={[0, 0.75, 0]} castShadow receiveShadow>
        <cylinderGeometry args={[0.16, 0.22, 1.5, 8]} />
        <meshStandardMaterial color="#7c5a3c" roughness={0.9} />
      </mesh>

      <mesh position={[0, 1.8, 0]} castShadow receiveShadow>
        <coneGeometry args={[0.95, 1.65, 7]} />
        <meshStandardMaterial color="#4e8a55" roughness={0.92} />
      </mesh>

      <mesh position={[0.35, 1.55, 0.2]} castShadow receiveShadow>
        <coneGeometry args={[0.7, 1.25, 7]} />
        <meshStandardMaterial color="#65a56b" roughness={0.92} />
      </mesh>

      <mesh position={[-0.3, 1.45, -0.15]} castShadow receiveShadow>
        <coneGeometry args={[0.62, 1.1, 7]} />
        <meshStandardMaterial color="#3f7748" roughness={0.92} />
      </mesh>
    </group>
  );
}

function Shrub({
  position,
  scale = 1,
}: {
  position: [number, number, number];
  scale?: number;
}) {
  return (
    <mesh position={position} scale={scale} castShadow receiveShadow>
      <icosahedronGeometry args={[0.45, 1]} />
      <meshStandardMaterial color="#6ca66c" roughness={0.95} />
    </mesh>
  );
}

export default function Trees() {
  const trees = useMemo<TreeProps[]>(
    () => [
      { position: [-11, 0, -8], scale: 1.15, rotation: 0.3 },
      { position: [-8.5, 0, -7.5], scale: 0.9, rotation: 1.2 },
      { position: [-11.5, 0, -3.5], scale: 1.05, rotation: 2.1 },
      { position: [-10.5, 0, 1.5], scale: 0.95, rotation: 0.8 },
      { position: [-11, 0, 6.5], scale: 1.1, rotation: 1.7 },
      { position: [-8.5, 0, 8], scale: 0.85, rotation: 2.5 },

      { position: [10.5, 0, -8], scale: 1.1, rotation: 1.2 },
      { position: [8, 0, -8.5], scale: 0.9, rotation: 2.4 },
      { position: [11, 0, -3.2], scale: 1.0, rotation: 0.5 },
      { position: [11.5, 0, 1.8], scale: 1.15, rotation: 1.9 },
      { position: [11, 0, 7.7], scale: 0.95, rotation: 2.8 },
      { position: [8.5, 0, 9], scale: 0.85, rotation: 0.7 },

      { position: [-3.7, 0, -10], scale: 0.92, rotation: 1.1 },
      { position: [1.7, 0, -10.5], scale: 1.05, rotation: 2.2 },
      { position: [5, 0, -10], scale: 0.82, rotation: 0.4 },

      { position: [-4.5, 0, 9.8], scale: 1.0, rotation: 1.8 },
      { position: [0.5, 0, 10.5], scale: 0.9, rotation: 2.7 },
      { position: [4.4, 0, 10], scale: 1.08, rotation: 0.9 },

      { position: [-3.2, 0, 3.8], scale: 0.7, rotation: 1.5 },
      { position: [3.2, 0, -3.2], scale: 0.72, rotation: 2.1 },
      { position: [-3.4, 0, -3.5], scale: 0.68, rotation: 0.6 },
      { position: [3.3, 0, 3.4], scale: 0.74, rotation: 2.7 },
    ],
    [],
  );

  const shrubs = useMemo(
    () => [
      [-9.7, 0.48, 0.5],
      [-9.1, 0.42, 0.9],
      [-8.5, 0.45, 1.2],
      [-7.8, 0.4, 1.4],

      [5.3, 0.45, 7.2],
      [6.1, 0.42, 7.4],
      [7.0, 0.44, 7.5],
      [7.9, 0.4, 7.3],

      [4.0, 0.43, -7.0],
      [4.8, 0.46, -7.3],
      [5.7, 0.42, -7.2],

      [-3.9, 0.42, -7.1],
      [-3.2, 0.45, -7.5],
      [-2.5, 0.4, -7.3],
    ] as [number, number, number][],
    [],
  );

  return (
    <group>
      {trees.map((tree, index) => (
        <Tree
          key={index}
          position={tree.position}
          scale={tree.scale}
          rotation={tree.rotation}
        />
      ))}

      {shrubs.map((position, index) => (
        <Shrub
          key={index}
          position={position}
          scale={0.72 + (index % 3) * 0.08}
        />
      ))}
    </group>
  );
}