import { motion } from 'framer-motion';
import { useEffect, useRef } from 'react';

export default function PhoenixFire() {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    const particles = [];
    const flameColors = ['#ff6600', '#ff3300', '#ff9900', '#ffcc00'];

    class Particle {
      constructor(x, y, dx, dy, size, color) {
        this.x = x;
        this.y = y;
        this.dx = dx;
        this.dy = dy;
        this.size = size;
        this.color = color;
        this.alpha = 1;
      }
      update() {
        this.x += this.dx;
        this.y += this.dy;
        this.alpha -= 0.02;
      }
      draw() {
        ctx.globalAlpha = this.alpha;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
        ctx.globalAlpha = 1;
      }
    }

    function spawnParticles(x, y, count = 10) {
      for (let i = 0; i < count; i++) {
        const angle = Math.random() * Math.PI * 2;
        const speed = Math.random() * 2 + 1;
        const dx = Math.cos(angle) * speed;
        const dy = Math.sin(angle) * speed;
        const size = Math.random() * 3 + 2;
        const color = flameColors[Math.floor(Math.random() * flameColors.length)];
        particles.push(new Particle(x, y, dx, dy, size, color));
      }
    }

    function drawPhoenix() {
      const centerX = canvas.width / 2;
      const centerY = canvas.height / 2 + 100;

      // Phoenix body
      ctx.fillStyle = '#ff4500';
      ctx.beginPath();
      ctx.ellipse(centerX, centerY, 40, 80, 0, 0, Math.PI * 2);
      ctx.fill();

      // Wings
      const wingSpan = 300;
      for (let side of [-1, 1]) {
        ctx.beginPath();
        ctx.moveTo(centerX, centerY - 50);
        ctx.quadraticCurveTo(centerX + side * wingSpan / 2, centerY - 150, centerX + side * wingSpan, centerY - 50);
        ctx.strokeStyle = '#ff6f00';
        ctx.lineWidth = 8;
        ctx.stroke();

        // Spawn fire particles along the wings
        for (let i = 0; i < 3; i++) {
          const px = centerX + side * (wingSpan / 3) * Math.random();
          const py = centerY - 100 * Math.random();
          spawnParticles(px, py, 5);
        }
      }
    }

    function animate() {
      ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      drawPhoenix();

      for (let i = 0; i < particles.length; i++) {
        particles[i].update();
        particles[i].draw();
        if (particles[i].alpha <= 0) {
          particles.splice(i, 1);
          i--;
        }
      }
      requestAnimationFrame(animate);
    }

    animate();
    window.addEventListener('resize', () => {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    });
  }, []);

  return (
    <div className="flex items-center justify-center h-screen bg-black">
      <canvas ref={canvasRef} className="w-full h-full" />
      <motion.div
        className="absolute text-orange-500 text-4xl font-bold"
        initial={{ opacity: 0, y: 50 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 1 }}
      >
        Rise of the Phoenix
      </motion.div>
    </div>
  );
}