import { useRef, useMemo } from 'react';
import { useFrame } from '@react-three/fiber';
import { TextureLoader, DoubleSide, Mesh } from 'three';

export default function Flag({ isCelebrating }: { isCelebrating: boolean }) {
  const flagRef = useRef<Mesh>(null);
  const poleRef = useRef<Mesh>(null);

  // Create flag texture with text
  const texture = useMemo(() => {
    const canvas = document.createElement('canvas');
    canvas.width = 512;
    canvas.height = 256;
    const ctx = canvas.getContext('2d')!;
    
    // Gradient background - Brand blue colors
    const gradient = ctx.createLinearGradient(0, 0, 512, 0);
    gradient.addColorStop(0, '#2E90FA');
    gradient.addColorStop(1, '#84CAFF');
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, 512, 256);
    
    // Add text
    ctx.fillStyle = '#FFFFFF';
    ctx.font = 'bold 40px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('Freshyo for', 256, 100);
    ctx.fillText('mahabubnagar', 256, 160);
    
    // Add decorative border
    ctx.strokeStyle = '#FFFFFF';
    ctx.lineWidth = 4;
    ctx.strokeRect(10, 10, 492, 236);
    
    const texture = new TextureLoader().load(canvas.toDataURL());
    return texture;
  }, []);

  useFrame((state) => {
    if (flagRef.current) {
      const time = state.clock.getElapsedTime();
      // Wave animation
      const waveIntensity = isCelebrating ? 0.3 : 0.1;
      flagRef.current.rotation.y = Math.sin(time * 3) * waveIntensity;
      flagRef.current.rotation.z = Math.sin(time * 2) * 0.05;
    }
  });

  return (
    <group position={[-1.5, 2.5, 0]}>
      {/* Flag Pole */}
      <mesh ref={poleRef} position={[0, 0, 0]}>
        <cylinderGeometry args={[0.05, 0.05, 3, 16]} />
        <meshStandardMaterial color="#8B4513" />
      </mesh>
      
      {/* Flag */}
      <mesh ref={flagRef} position={[1.5, 1, 0]}>
        <planeGeometry args={[3, 1.5, 10, 10]} />
        <meshStandardMaterial 
          map={texture} 
          side={DoubleSide}
          transparent
        />
      </mesh>
      
      {/* Pole Top */}
      <mesh position={[0, 1.6, 0]}>
        <sphereGeometry args={[0.1, 16, 16]} />
        <meshStandardMaterial color="#53B1FD" emissive="#1570EF" emissiveIntensity={0.5} />
      </mesh>
    </group>
  );
}