'use client'

import React, { useState } from 'react'
import ModelViewer from '../components/ModelViewer'

export default function Home() {
  const [modelInfo, setModelInfo] = useState<{
    meshes: unknown[]
    boundingBox: {
      min: { x: number; y: number; z: number }
      max: { x: number; y: number; z: number }
    }
  } | null>(null)
  const [error, setError] = useState<string | null>(null)
  
  const handleModelLoaded = (data: {
    meshes: unknown[]
    boundingBox: {
      min: { x: number; y: number; z: number }
      max: { x: number; y: number; z: number }
    }
  }) => {
    setModelInfo(data)
    setError(null)
    console.log('Model loaded successfully:', data)
  }

  const handleError = (errorMessage: string) => {
    setError(errorMessage)
    setModelInfo(null)
  }

  return (
    <div className="h-screen relative">
      <ModelViewer
        modelPath="/models/EXPO_АР_PostRecon_level.gltf"
        onModelLoaded={handleModelLoaded}
        onError={handleError}
      />
      
      {error && (
        <div className="absolute top-4 left-4 right-4 md:left-4 md:right-auto md:w-80 bg-red-600/90 text-white p-4 rounded-lg z-50 text-sm">
          <strong>Error:</strong> {error}
        </div>
      )}

      {modelInfo && (
        <div className="absolute top-4 right-4 bg-black/80 text-white p-4 rounded-lg z-50 text-sm max-w-xs">
          <h3 className="text-base font-semibold mb-3">EXPO Building Model</h3>
          
          <div className="text-xs text-gray-300 space-y-1">
            <div>🖱️ Left click + drag: Rotate</div>
            <div>🖱️ Right click + drag: Pan</div>
            <div>🖱️ Scroll: Zoom in/out</div>
          </div>
        </div>
      )}
    </div>
  )
}