"use client";

import { Canvas } from "@react-three/fiber";
import { OrbitControls, Stars } from "@react-three/drei";
import { Suspense, useRef, useState } from "react";
import * as THREE from "three";

// Einfache Partikel-Animation (WebGPU-Ersatz für jetzt)
function ParticleField() {
  const count = 2000;
  const meshRef = useRef<THREE.InstancedMesh>(null);
  const [dummy] = useState(() => new THREE.Object3D());

  // Zufällige Positionen initialisieren
  const positions = useRef(
    Array.from({ length: count }, () => ({
      x: (Math.random() - 0.5) * 20,
      y: (Math.random() - 0.5) * 20,
      z: (Math.random() - 0.5) * 20,
      speed: Math.random() * 0.02 + 0.01,
    }))
  );

  return (
    <instancedMesh ref={meshRef} args={[undefined, undefined, count]}>
      <sphereGeometry args={[0.05, 8, 8]} />
      <meshBasicMaterial color="#a855f7" transparent opacity={0.8} />
    </instancedMesh>
  );
}

// Runic Status Display (vereinfacht)
function RunicStatus() {
  return (
    <div className="absolute top-10 left-1/2 -translate-x-1/2 text-center z-10">
      <h1 className="text-4xl font-bold text-purple-400 mb-2">Pixel</h1>
      <p className="text-xl text-gray-300">Architektin der FaeBits-Anderswelt</p>
      <div className="mt-4 text-2xl text-purple-300 font-mono">
        ⚡ Status: <span className="text-green-400">Online</span>
      </div>
    </div>
  );
}

export default function Home() {
  return (
    <main className="w-full h-screen relative">
      <Canvas camera={{ position: [0, 0, 10], fov: 75 }}>
        <Suspense fallback={null}>
          <color attach="background" args={["#0a0a0a"]} />
          <ambientLight intensity={0.5} />
          <Stars radius={100} depth={50} count={5000} factor={4} saturation={0} fade speed={1} />
          <ParticleField />
          <OrbitControls enableZoom={false} enablePan={false} autoRotate autoRotateSpeed={0.5} />
        </Suspense>
      </Canvas>
      <RunicStatus />
      <div className="absolute bottom-10 left-1/2 -translate-x-1/2 text-center z-10 text-gray-400">
        <p>Warte auf den ersten Schritt ins Tor...</p>
      </div>
    </main>
  );
}
