src/components/ui/DebugOverlay.tsx

'use client'

import { useGameStore } from '@/stores/gameStore'
import { usePlayerStore } from '@/stores/playerStore'
import { useWorldStore } from '@/stores/worldStore'

export function DebugOverlay() {
  const { debug, fps, tps } = useGameStore()
  const { player } = usePlayerStore()
  const { world } = useWorldStore()

  if (!debug || !player) return null

  const [x, y, z] = player.position
  const [yaw, pitch] = player.rotation
  const timeOfDay = world ? (world.time / 24000 * 24).toFixed(1) : '0'
  const chunkX = Math.floor(x / 16)
  const chunkZ = Math.floor(z / 16)
  const biome = 'Plains' // TODO

  return (
    <div className="absolute top-2 left-2 z-40 bg-black/70 text-white text-[10px] sm:text-xs font-mono p-2 rounded space-y-0.5 max-w-xs backdrop-blur-sm">
      <div className="text-green-400 font-bold">Minecraft Clone Debug (F3)</div>
      <div>FPS: {fps} | TPS: {tps}</div>
      <div>XYZ: {x.toFixed(1)} / {y.toFixed(1)} / {z.toFixed(1)}</div>
      <div>Chunk: [{chunkX}, {chunkZ}]</div>
      <div>Yaw: {(yaw * 180 / Math.PI).toFixed(1)}° Pitch: {(pitch * 180 / Math.PI).toFixed(1)}°</div>
      <div>Time: {timeOfDay}h | Mode: {player.gamemode}</div>
      <div>Flying: {player.flying ? 'Yes' : 'No'} On Ground: {player.onGround ? 'Yes' : 'No'}</div>
      <div>Health: {player.health} | Food: {player.foodLevel}</div>
    </div>
  )
}