import React from 'react'
import OfficeMap3D from './OfficeMap3D'
import { X } from 'lucide-react'

interface OfficeMapModalProps {
  isOpen: boolean
  onClose: () => void
  targetEmployeeId?: string
  targetRoom?: string
  currentUserRoom?: string
  employeeName?: string
}

export default function OfficeMapModal({ 
  isOpen, 
  onClose, 
  targetEmployeeId, 
  targetRoom,
  currentUserRoom,
  employeeName 
}: OfficeMapModalProps) {
  if (!isOpen) return null

  return (
    <>
      {/* Backdrop */}
      <div 
        className="fixed inset-0 bg-black bg-opacity-50 z-40 transition-opacity"
        onClick={onClose}
      />
      
      {/* Modal */}
      <div className="fixed inset-0 z-50 overflow-y-auto">
        <div className="flex items-center justify-center min-h-screen p-4">
          <div className="bg-gray-900 rounded-lg shadow-xl w-full mx-auto" style={{ maxWidth: '1400px' }}>
            {/* Header */}
            <div className="flex justify-between items-center p-4 border-b border-gray-700">
              <div>
                <h2 className="text-xl font-semibold text-white">
                  Wegbeschreibung zu {employeeName || 'dieser Person'}
                </h2>
                <p className="text-sm text-gray-400 mt-1">
                  <span className="text-green-400">● Start:</span> Ihr Büro
                  {' | '}
                  <span className="text-red-400">● Ziel:</span> {targetRoom || 'Zielbüro'}
                </p>
              </div>
              <button
                onClick={onClose}
                className="p-2 hover:bg-gray-700 rounded-lg transition-colors"
              >
                <X className="w-6 h-6 text-gray-400" />
              </button>
            </div>
            
            {/* Map Content */}
            <OfficeMap3D 
              targetEmployeeId={targetEmployeeId}
              targetRoom={targetRoom}
              currentUserRoom={currentUserRoom}
              onClose={onClose}
            />
            
            {/* Footer with legend */}
            <div className="p-4 border-t border-gray-700">
              <div className="flex justify-between items-center">
                <div className="flex gap-6 text-sm">
                  <div className="flex items-center gap-2">
                    <div className="w-4 h-4 bg-green-500 rounded"></div>
                    <span className="text-gray-300">Ihr Standort</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <div className="w-4 h-4 bg-red-500 rounded"></div>
                    <span className="text-gray-300">Ziel</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <div className="w-4 h-4 bg-blue-500 rounded"></div>
                    <span className="text-gray-300">Büro</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <div className="w-4 h-4 bg-purple-500 rounded"></div>
                    <span className="text-gray-300">Treppe/Aufzug</span>
                  </div>
                </div>
                <button
                  onClick={onClose}
                  className="px-4 py-2 bg-gray-700 text-white rounded-lg hover:bg-gray-600 transition-colors"
                >
                  Schließen
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}
