'use client'

import { useState, useRef, useEffect } from 'react'
import { Maximize2, Minimize2, Navigation, Ruler, Map, RotateCcw, Volume2, VolumeX } from 'lucide-react'
import Image from 'next/image'
import { Button } from '@/components/ui/button'
import dynamic from 'next/dynamic'

const PannellumWrapper = dynamic(() => import('./pannellum-wrapper'), { 
  ssr: false,
  loading: () => <div className="absolute inset-0 flex items-center justify-center bg-gray-900 text-white">جاري تحميل الجولة 360...</div>
})

interface Scene {
  id: string
  name: string
  panoramaUrl: string
  thumbnailUrl: string
  hotspots: any[]
  infoTags: any[]
}

interface VirtualeyesViewerProps {
  scenes: Scene[]
  propertyId: string
}

export function VirtualeyesViewer({ scenes, propertyId }: VirtualeyesViewerProps) {
  const [currentScene, setCurrentScene] = useState(0)
  const [isFullscreen, setIsFullscreen] = useState(false)
  const [isPlaying, setIsPlaying] = useState(false)
  const [showFloorPlan, setShowFloorPlan] = useState(false)
  const containerRef = useRef<HTMLDivElement>(null)

  const scene = scenes[currentScene]

  const toggleFullscreen = () => {
    if (!document.fullscreenElement) {
      containerRef.current?.requestFullscreen()
      setIsFullscreen(true)
    } else {
      document.exitFullscreen()
      setIsFullscreen(false)
    }
  }

  return (
    <div 
      ref={containerRef}
      className={`relative bg-black overflow-hidden ${isFullscreen ? 'fixed inset-0 z-50' : 'rounded-2xl h-[500px]'}`}
    >
      {/* Panorama Image (using Pannellum) */}
      <div className="absolute inset-0">
        <PannellumWrapper scene={scene} />
      </div>

      {/* Overlay Controls */}
      <div className="absolute top-0 left-0 right-0 p-4 bg-gradient-to-b from-black/70 to-transparent">
        <div className="flex justify-between items-start text-white">
          <div>
            <h3 className="text-xl font-bold">{scene.name}</h3>
            <p className="text-sm text-gray-300">{currentScene + 1} / {scenes.length}</p>
          </div>
          <div className="flex gap-2">
            <Button variant="ghost" size="icon" className="text-white hover:bg-white/20">
              <Ruler className="w-5 h-5" />
            </Button>
            <Button 
              variant="ghost" 
              size="icon" 
              className="text-white hover:bg-white/20"
              onClick={() => setShowFloorPlan(!showFloorPlan)}
            >
              <Map className="w-5 h-5" />
            </Button>
            <Button 
              variant="ghost" 
              size="icon" 
              className="text-white hover:bg-white/20"
              onClick={toggleFullscreen}
            >
              {isFullscreen ? <Minimize2 className="w-5 h-5" /> : <Maximize2 className="w-5 h-5" />}
            </Button>
          </div>
        </div>
      </div>

      {/* Scene Thumbnails */}
      <div className="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent">
        <div className="flex gap-2 overflow-x-auto">
          {scenes.map((s, idx) => (
            <button
              key={s.id}
              onClick={() => setCurrentScene(idx)}
              className={`flex-shrink-0 relative rounded-lg overflow-hidden transition-all ${idx === currentScene ? 'ring-2 ring-blue-500 scale-105' : 'opacity-60'}`}
            >
              <Image src={s.thumbnailUrl} alt={s.name} width={96} height={64} className="w-24 h-16 object-cover" />
              <span className="absolute inset-0 flex items-center justify-center text-white text-xs font-medium bg-black/40">
                {s.name}
              </span>
            </button>
          ))}
        </div>
      </div>

      {/* Floor Plan Overlay */}
      {showFloorPlan && (
        <div className="absolute inset-0 bg-black/90 flex items-center justify-center z-40">
          <div className="bg-white rounded-xl p-6 max-w-md w-full mx-4">
            <div className="flex justify-between items-center mb-4">
              <h4 className="font-bold">مخطط الطابق</h4>
              <Button variant="ghost" size="sm" onClick={() => setShowFloorPlan(false)}>إغلاق</Button>
            </div>
            <div className="aspect-square bg-gray-100 rounded-lg flex items-center justify-center">
              <p className="text-gray-500">مخطط تفاعلي هنا</p>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}