import { useState, useRef, Suspense } from 'react';
import { MessageCircle, Menu, Settings, Plus, Palette } from 'lucide-react';
import { Canvas } from '@react-three/fiber';
import { OrbitControls, PerspectiveCamera, Environment, useGLTF } from '@react-three/drei';

// Virtual Joystick Component
function Joystick({ onMove }) {
  const [isDragging, setIsDragging] = useState(false);
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const containerRef = useRef();
  const knobRef = useRef();

  const handleStart = (e) => {
    const touch = e.touches ? e.touches[0] : e;
    setIsDragging(true);
    updatePosition(touch);
  };

  const handleMove = (e) => {
    if (!isDragging) return;
    const touch = e.touches ? e.touches[0] : e;
    updatePosition(touch);
  };

  const updatePosition = (touch) => {
    const container = containerRef.current.getBoundingClientRect();
    const centerX = container.width / 2;
    const centerY = container.height / 2;
    const x = touch.clientX - container.left - centerX;
    const y = touch.clientY - container.top - centerY;
    const radius = container.width / 2;
    const distance = Math.min(Math.sqrt(x * x + y * y), radius);
    const angle = Math.atan2(y, x);
    const newX = Math.cos(angle) * distance;
    const newY = Math.sin(angle) * distance;
    setPosition({ x: newX, y: newY });
    onMove({ x: newX / radius, y: newY / radius });
  };

  const handleEnd = () => {
    setIsDragging(false);
    setPosition({ x: 0, y: 0 });
    onMove({ x: 0, y: 0 });
  };

  return (
    <div
      ref={containerRef}
      className="w-32 h-32 bg-black/10 rounded-full relative touch-none"
      onMouseDown={handleStart}
      onMouseMove={handleMove}
      onMouseUp={handleEnd}
      onMouseLeave={handleEnd}
      onTouchStart={handleStart}
      onTouchMove={handleMove}
      onTouchEnd={handleEnd}
    >
      <div
        ref={knobRef}
        className="w-16 h-16 bg-purple-500/50 rounded-full absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 cursor-grab active:cursor-grabbing"
        style={{
          transform: `translate(${position.x}px, ${position.y}px) translate(-50%, -50%)`,
        }}
      />
    </div>
  );
}

// Room Component
function Room({ avatarPosition }) {
  return (
    <mesh receiveShadow position={[0, -1, 0]} rotation={[-Math.PI / 2, 0, 0]}>
      <planeGeometry args={[10, 10]} />
      <meshStandardMaterial color="#f0f0f0" />
    </mesh>
  );
}

// Avatar Component
function Avatar({ position }) {
  return (
    <mesh position={[position.x * 5, 0, position.y * 5]}>
      <capsuleGeometry args={[0.3, 1, 4, 8]} />
      <meshStandardMaterial color="#8b5cf6" />
    </mesh>
  );
}

export default function App() {
  const [messages, setMessages] = useState([]);
  const [inputText, setInputText] = useState('');
  const [avatarPosition, setAvatarPosition] = useState({ x: 0, y: 0 });
  const [showCustomization, setShowCustomization] = useState(false);
  const [avatarColor, setAvatarColor] = useState('#8b5cf6');

  const handleSendMessage = (e) => {
    e.preventDefault();
    if (inputText.trim()) {
      setMessages([...messages, { text: inputText, sender: 'user' }]);
      setInputText('');
    }
  };

  const handleJoystickMove = (position) => {
    setAvatarPosition(position);
  };

  return (
    <div className="h-screen w-full bg-gradient-to-b from-purple-50 to-blue-50 flex flex-col">
      {/* Header */}
      <header className="p-4 flex justify-between items-center">
        <Menu className="w-6 h-6 text-gray-600" />
        <div className="text-center">
          <h1 className="text-xl font-semibold text-gray-800">Io</h1>
          <p className="text-sm text-gray-600">Your AI Companion</p>
        </div>
        <button
          onClick={() => setShowCustomization(!showCustomization)}
          className="w-6 h-6 text-gray-600"
        >
          <Palette />
        </button>
      </header>

      {/* 3D Environment */}
      <div className="flex-1 relative">
        <Canvas shadows>
          <PerspectiveCamera makeDefault position={[0, 5, 5]} />
          <OrbitControls enableZoom={false} maxPolarAngle={Math.PI / 2.5} />
          <ambientLight intensity={0.5} />
          <directionalLight
            position={[5, 5, 5]}
            castShadow
            intensity={1}
          />
          <Suspense fallback={null}>
            <Room />
            <Avatar position={avatarPosition} />
            <Environment preset="sunset" />
          </Suspense>
        </Canvas>

        {/* Joystick */}
        <div className="absolute bottom-24 left-4">
          <Joystick onMove={handleJoystickMove} />
        </div>

        {/* Customization Panel */}
        {showCustomization && (
          <div className="absolute top-4 right-4 bg-white/90 p-4 rounded-lg shadow-lg">
            <h3 className="text-sm font-semibold mb-2">Avatar Customization</h3>
            <div className="flex gap-2">
              <input
                type="color"
                value={avatarColor}
                onChange={(e) => setAvatarColor(e.target.value)}
                className="w-full"
              />
            </div>
          </div>
        )}
      </div>

      {/* Chat Input */}
      <div className="p-4 bg-white/80 backdrop-blur-sm">
        <form onSubmit={handleSendMessage} className="flex items-center gap-2">
          <MessageCircle className="w-10 h-10 p-2 text-gray-600 bg-gray-100 rounded-full" />
          <input
            type="text"
            value={inputText}
            onChange={(e) => setInputText(e.target.value)}
            placeholder="Talk to me..."
            className="flex-1 p-3 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-purple-400"
          />
          <button
            type="submit"
            className="w-10 h-10 flex items-center justify-center bg-purple-500 text-white rounded-full hover:bg-purple-600 transition-colors"
          >
            <Plus className="w-6 h-6" />
          </button>
        </form>
      </div>
    </div>
  );
}