import React, { useState, useEffect, useRef } from 'react';
import { Canvas } from '@react-three/fiber';
import { OrbitControls, Sky, Stars, Plane, Box, ContactShadows } from '@react-three/drei';

// --- 3D World Component ---
const World = () => {
  return (
    <>
      <Sky sunPosition={[100, 20, 100]} />
      <Stars radius={100} depth={50} count={5000} factor={4} saturation={0} fade speed={1} />
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} />
      
      {/* The Ground */}
      <Plane args={[100, 100]} rotation={[-Math.PI / 2, 0, 0]} receiveShadow>
        <meshStandardMaterial color="#222" />
      </Plane>

      {/* Example Interactive Object (Building Block) */}
      <Box position={[0, 0.5, 0]} castShadow>
        <meshStandardMaterial color="cyan" />
      </Box>

      <ContactShadows opacity={0.4} scale={20} blur={2.4} far={4.5} />
      <OrbitControls makeDefault />
    </>
  );
};

// --- UI Overlay Component ---
const HUD = () => {
  const [messages, setMessages] = useState([
    { user: 'System', text: 'Welcome back to the grid.' }
  ]);
  const [input, setInput] = useState('');

  const sendMessage = (e) => {
    e.preventDefault();
    if (input.trim()) {
      setMessages([...messages, { user: 'You', text: input }]);
      setInput('');
    }
  };

  return (
    <div className="absolute inset-0 pointer-events-none flex flex-col justify-between p-4 font-sans text-white">
      {/* Top Bar */}
      <div className="flex justify-between items-start pointer-events-auto">
        <div className="bg-black/50 p-2 rounded border border-white/20">
          <h1 className="text-xl font-bold tracking-tighter">NEBULA <span className="text-xs font-light">v0.1</span></h1>
        </div>
        <div className="flex gap-2">
          <button className="bg-blue-600 hover:bg-blue-500 px-4 py-1 rounded shadow-lg">BUILD</button>
          <button className="bg-gray-800 hover:bg-gray-700 px-4 py-1 rounded shadow-lg">AVATAR</button>
        </div>
      </div>

      {/* Chat Area */}
      <div className="flex flex-col w-80 pointer-events-auto">
        <div className="bg-black/40 h-48 overflow-y-auto p-2 mb-2 rounded backdrop-blur-sm border border-white/10">
          {messages.map((m, i) => (
            <div key={i} className="text-sm mb-1">
              <span className="font-bold text-cyan-400">{m.user}: </span>
              <span>{m.text}</span>
            </div>
          ))}
        </div>
        <form onSubmit={sendMessage} className="flex gap-1">
          <input 
            className="bg-black/60 border border-white/20 flex-grow px-2 py-1 rounded text-sm focus:outline-none focus:border-cyan-500"
            placeholder="Say something..."
            value={input}
            onChange={(e) => setInput(e.target.value)}
          />
          <button type="submit" className="bg-cyan-600 px-3 py-1 rounded text-sm uppercase font-bold">Send</button>
        </form>
      </div>
    </div>
  );
};

// --- Main Application ---
export default function App() {
  return (
    <div className="relative w-full h-screen bg-black">
      {/* The 3D Layer */}
      <Canvas shadows camera={{ position: [5, 5, 5], fov: 50 }}>
        <World />
      </Canvas>

      {/* The UI Layer */}
      <HUD />
    </div>
  );
}