import { useMemo, useRef } from 'react';
import { Instance, Instances } from '@react-three/drei';
import * as THREE from 'three';
import { PlantStage } from './types';

interface VolumetricPlantProps {
    stage: PlantStage;
    color: string;
    position: [number, number, number];
    scale?: number;
    onClick?: () => void;
    isHighlighted?: boolean;
    isDimmed?: boolean;
}

export function VolumetricPlant({
    stage,
    color,
    position,
    scale = 1,
    onClick,
    isHighlighted,
    isDimmed
}: VolumetricPlantProps) {

    // Geometry decision based on stage
    // CLONE: Small cylinder
    // VEG: Bushy sphere
    // FLOWER: Tall cone (Christmas tree shape)
    // DRYING: Inverted cone or just color change

    const meshRef = useRef<THREE.Mesh>(null);

    const adjustedColor = isDimmed ? '#3f3f46' : color;
    const highlightScale = isHighlighted ? 1.2 : 1;
    const baseScale = scale * highlightScale;

    // Use standard primitives
    if (stage === 'CLONE_IN') {
        return (
            <mesh position={position} onClick={(e) => { e.stopPropagation(); onClick?.(); }} scale={[baseScale, baseScale, baseScale]}>
                <cylinderGeometry args={[0.05, 0.05, 0.2, 8]} />
                <meshStandardMaterial color={adjustedColor} />
            </mesh>
        );
    }

    if (stage === 'VEGETATIVE') {
        return (
            <mesh position={[position[0], position[1] + 0.15, position[2]]} onClick={(e) => { e.stopPropagation(); onClick?.(); }} scale={[baseScale, baseScale, baseScale]}>
                <sphereGeometry args={[0.25, 12, 8]} />
                <meshStandardMaterial color={adjustedColor} roughness={0.8} />
            </mesh>
        );
    }

    if (stage === 'FLOWERING') {
        return (
            <group position={[position[0], position[1] + 0.3, position[2]]} onClick={(e) => { e.stopPropagation(); onClick?.(); }} scale={[baseScale, baseScale, baseScale]}>
                {/* Main Cola */}
                <mesh position={[0, 0, 0]}>
                    <coneGeometry args={[0.25, 0.8, 12]} />
                    <meshStandardMaterial color={adjustedColor} roughness={0.6} />
                </mesh>
                {/* Visual interest / Buds */}
                <mesh position={[0.1, 0.1, 0.1]}>
                    <sphereGeometry args={[0.08, 6, 4]} />
                    <meshStandardMaterial color="#fcd34d" />
                </mesh>
                <mesh position={[-0.1, 0.2, -0.05]}>
                    <sphereGeometry args={[0.08, 6, 4]} />
                    <meshStandardMaterial color="#fcd34d" />
                </mesh>
            </group>
        );
    }

    // Default / Harvested / Etc
    return (
        <mesh position={position} onClick={(e) => { e.stopPropagation(); onClick?.(); }} scale={[baseScale, baseScale, baseScale]}>
            <boxGeometry args={[0.2, 0.2, 0.2]} />
            <meshStandardMaterial color={adjustedColor} transparent opacity={0.8} />
        </mesh>
    );
}

// Optimized Batch Renderer needed?
// For now, individual components are fine unless we hit >1000 plants in view.
// If needed, we can switch to <Instances> for each shape type.
