'use client'

import { useEffect, useRef, useState, useCallback } from 'react'
import { LearningNode } from '@/app/geo-lernwelt/types'

interface UnityViewerProps {
  aoiId: string
  manifestUrl?: string
  learningNodes: LearningNode[]
  geoServiceUrl: string
}

interface UnityInstance {
  SendMessage: (objectName: string, methodName: string, value?: string | number) => void
}

export default function UnityViewer({
  aoiId,
  manifestUrl,
  learningNodes,
  geoServiceUrl,
}: UnityViewerProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const [unityInstance, setUnityInstance] = useState<UnityInstance | null>(null)
  const [loadingProgress, setLoadingProgress] = useState(0)
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [selectedNode, setSelectedNode] = useState<LearningNode | null>(null)
  const [showNodePanel, setShowNodePanel] = useState(false)

  // Placeholder mode when Unity build is not available
  const [placeholderMode, setPlaceholderMode] = useState(true)

  useEffect(() => {
    // Check if Unity build exists
    // For now, always use placeholder mode since Unity build needs to be created separately
    setPlaceholderMode(true)
    setIsLoading(false)
  }, [])

  // Unity message handler (for when Unity build exists)
  useEffect(() => {
    if (typeof window !== 'undefined') {
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      (window as any).handleUnityMessage = (message: string) => {
        try {
          const data = JSON.parse(message)

          switch (data.type) {
            case 'nodeSelected':
              const node = learningNodes.find((n) => n.id === data.nodeId)
              if (node) {
                setSelectedNode(node)
                setShowNodePanel(true)
              }
              break

            case 'terrainLoaded':
              console.log('Unity terrain loaded')
              break

            case 'error':
              setError(data.message)
              break
          }
        } catch (e) {
          console.error('Error parsing Unity message:', e)
        }
      }
    }

    return () => {
      if (typeof window !== 'undefined') {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        delete (window as any).handleUnityMessage
      }
    }
  }, [learningNodes])

  const sendToUnity = useCallback(
    (objectName: string, methodName: string, value?: string | number) => {
      if (unityInstance) {
        unityInstance.SendMessage(objectName, methodName, value)
      }
    },
    [unityInstance]
  )

  // Send AOI data to Unity when ready
  useEffect(() => {
    if (unityInstance && manifestUrl) {
      sendToUnity('TerrainManager', 'LoadManifest', manifestUrl)

      // Send learning nodes
      const nodesJson = JSON.stringify(learningNodes)
      sendToUnity('LearningNodeManager', 'LoadNodes', nodesJson)
    }
  }, [unityInstance, manifestUrl, learningNodes, sendToUnity])

  const handleNodeClick = (node: LearningNode) => {
    setSelectedNode(node)
    setShowNodePanel(true)

    if (unityInstance) {
      sendToUnity('CameraController', 'FocusOnNode', node.id)
    }
  }

  const handleCloseNodePanel = () => {
    setShowNodePanel(false)
    setSelectedNode(null)
  }

  // Placeholder 3D view (when Unity is not available)
  const PlaceholderView = () => (
    <div className="w-full h-full bg-gradient-to-b from-sky-400 to-sky-200 relative overflow-hidden">
      {/* Sky */}
      <div className="absolute inset-0 bg-gradient-to-b from-sky-500 via-sky-400 to-sky-300" />

      {/* Sun */}
      <div className="absolute top-8 right-12 w-16 h-16 bg-yellow-300 rounded-full shadow-lg shadow-yellow-400/50" />

      {/* Clouds */}
      <div className="absolute top-12 left-8 w-24 h-8 bg-white/80 rounded-full blur-sm" />
      <div className="absolute top-20 left-20 w-16 h-6 bg-white/70 rounded-full blur-sm" />
      <div className="absolute top-16 right-32 w-20 h-7 bg-white/75 rounded-full blur-sm" />

      {/* Mountains */}
      <svg
        className="absolute bottom-0 left-0 w-full h-1/2"
        viewBox="0 0 1200 400"
        preserveAspectRatio="none"
      >
        {/* Background mountains */}
        <path d="M0,400 L200,150 L400,300 L600,100 L800,250 L1000,80 L1200,200 L1200,400 Z" fill="#4ade80" fillOpacity="0.5" />
        {/* Foreground mountains */}
        <path d="M0,400 L150,200 L300,350 L500,150 L700,300 L900,120 L1100,280 L1200,180 L1200,400 Z" fill="#22c55e" />
        {/* Ground */}
        <path d="M0,400 L0,350 Q300,320 600,350 Q900,380 1200,340 L1200,400 Z" fill="#15803d" />
      </svg>

      {/* Learning Nodes as Markers */}
      <div className="absolute inset-0 flex items-center justify-center">
        <div className="relative w-full h-full">
          {learningNodes.map((node, idx) => {
            // Position nodes across the view
            const positions = [
              { left: '20%', top: '55%' },
              { left: '40%', top: '45%' },
              { left: '60%', top: '50%' },
              { left: '75%', top: '55%' },
              { left: '30%', top: '60%' },
            ]
            const pos = positions[idx % positions.length]

            return (
              <button
                key={node.id}
                onClick={() => handleNodeClick(node)}
                style={{ left: pos.left, top: pos.top }}
                className="absolute transform -translate-x-1/2 -translate-y-1/2 group"
              >
                <div className="relative">
                  {/* Marker pin */}
                  <div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold shadow-lg group-hover:bg-blue-600 transition-colors animate-bounce">
                    {idx + 1}
                  </div>
                  {/* Pulse effect */}
                  <div className="absolute inset-0 w-8 h-8 bg-blue-500 rounded-full animate-ping opacity-25" />
                  {/* Label */}
                  <div className="absolute top-10 left-1/2 transform -translate-x-1/2 bg-black/70 text-white text-xs px-2 py-1 rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity">
                    {node.title}
                  </div>
                </div>
              </button>
            )
          })}
        </div>
      </div>

      {/* 3D View Notice */}
      <div className="absolute bottom-4 left-4 bg-black/50 text-white px-4 py-2 rounded-lg text-sm">
        <p className="font-medium">Vorschau-Modus</p>
        <p className="text-white/70 text-xs">
          Unity WebGL-Build wird fuer die volle 3D-Ansicht benoetigt
        </p>
      </div>

      {/* Controls hint */}
      <div className="absolute bottom-4 right-4 bg-black/50 text-white px-4 py-2 rounded-lg text-sm">
        <p className="text-white/70">Klicke auf die Marker um Lernstationen anzuzeigen</p>
      </div>
    </div>
  )

  return (
    <div className="relative w-full h-full bg-slate-900">
      {/* Loading overlay */}
      {isLoading && (
        <div className="absolute inset-0 bg-slate-900 flex flex-col items-center justify-center z-10">
          <div className="w-64 mb-4">
            <div className="h-2 bg-slate-700 rounded-full overflow-hidden">
              <div
                className="h-full bg-blue-500 transition-all duration-300"
                style={{ width: `${loadingProgress}%` }}
              />
            </div>
          </div>
          <p className="text-white/60 text-sm">Lade 3D-Lernwelt... {loadingProgress}%</p>
        </div>
      )}

      {/* Error display */}
      {error && (
        <div className="absolute inset-0 bg-slate-900 flex items-center justify-center z-10">
          <div className="text-center p-8">
            <div className="text-red-400 text-6xl mb-4">⚠️</div>
            <p className="text-white text-lg mb-2">Fehler beim Laden</p>
            <p className="text-white/60 text-sm max-w-md">{error}</p>
            <button
              onClick={() => {
                setError(null)
                setIsLoading(true)
                setLoadingProgress(0)
              }}
              className="mt-4 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg"
            >
              Erneut versuchen
            </button>
          </div>
        </div>
      )}

      {/* Unity Canvas or Placeholder */}
      {placeholderMode ? (
        <PlaceholderView />
      ) : (
        <canvas
          ref={canvasRef}
          id="unity-canvas"
          className="w-full h-full"
          tabIndex={-1}
        />
      )}

      {/* Learning Node Panel */}
      {showNodePanel && selectedNode && (
        <div className="absolute top-4 right-4 w-80 bg-white/95 dark:bg-slate-800/95 backdrop-blur-lg rounded-2xl shadow-2xl overflow-hidden z-20">
          {/* Header */}
          <div className="bg-gradient-to-r from-blue-500 to-purple-500 p-4 text-white">
            <div className="flex items-center justify-between">
              <span className="text-sm opacity-80">Station {learningNodes.indexOf(selectedNode) + 1}</span>
              <button
                onClick={handleCloseNodePanel}
                className="w-6 h-6 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center"
              >
                ✕
              </button>
            </div>
            <h3 className="font-semibold text-lg mt-1">{selectedNode.title}</h3>
          </div>

          {/* Content */}
          <div className="p-4 space-y-4">
            {/* Question */}
            <div>
              <h4 className="text-sm font-medium text-slate-500 dark:text-slate-400 mb-1">Aufgabe</h4>
              <p className="text-slate-800 dark:text-white">{selectedNode.question}</p>
            </div>

            {/* Hints */}
            {selectedNode.hints.length > 0 && (
              <div>
                <h4 className="text-sm font-medium text-slate-500 dark:text-slate-400 mb-1">Hinweise</h4>
                <ul className="list-disc list-inside text-sm text-slate-600 dark:text-slate-300 space-y-1">
                  {selectedNode.hints.map((hint, idx) => (
                    <li key={idx}>{hint}</li>
                  ))}
                </ul>
              </div>
            )}

            {/* Answer (collapsible) */}
            <details className="bg-green-50 dark:bg-green-900/20 rounded-lg">
              <summary className="p-3 cursor-pointer text-green-700 dark:text-green-400 font-medium text-sm">
                Loesung anzeigen
              </summary>
              <div className="px-3 pb-3">
                <p className="text-green-800 dark:text-green-300 text-sm">{selectedNode.answer}</p>
                {selectedNode.explanation && (
                  <p className="text-green-600 dark:text-green-400 text-xs mt-2 italic">
                    {selectedNode.explanation}
                  </p>
                )}
              </div>
            </details>

            {/* Points */}
            <div className="flex items-center justify-between pt-2 border-t border-slate-200 dark:border-slate-700">
              <span className="text-sm text-slate-500 dark:text-slate-400">Punkte</span>
              <span className="font-bold text-blue-500">{selectedNode.points}</span>
            </div>
          </div>
        </div>
      )}

      {/* Node List (minimized) */}
      {!showNodePanel && learningNodes.length > 0 && (
        <div className="absolute top-4 right-4 bg-black/70 rounded-xl p-3 z-20 max-h-64 overflow-y-auto">
          <h4 className="text-white text-sm font-medium mb-2">Lernstationen</h4>
          <div className="space-y-1">
            {learningNodes.map((node, idx) => (
              <button
                key={node.id}
                onClick={() => handleNodeClick(node)}
                className="w-full text-left px-3 py-2 rounded-lg bg-white/10 hover:bg-white/20 transition-colors text-white text-sm flex items-center gap-2"
              >
                <span className="w-5 h-5 bg-blue-500 rounded-full flex items-center justify-center text-xs">
                  {idx + 1}
                </span>
                <span className="truncate">{node.title}</span>
              </button>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}