import { useState, useRef } from 'react'

interface PhotoPreviewProps {
  currentPhoto?: string
  onPhotoSelect: (file: File) => void
  onPhotoRemove?: () => void
  disabled?: boolean
}

export default function PhotoPreview({ 
  currentPhoto, 
  onPhotoSelect,
  onPhotoRemove,
  disabled = false 
}: PhotoPreviewProps) {
  const [dragOver, setDragOver] = useState(false)
  const [error, setError] = useState('')
  const fileInputRef = useRef<HTMLInputElement>(null)

  const handleFileSelect = (file: File) => {
    setError('')
    
    // Validate file type
    const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp']
    if (!allowedTypes.includes(file.type)) {
      setError('Nur Bilddateien sind erlaubt (JPEG, PNG, GIF, WebP)')
      return
    }

    // Validate file size (5MB)
    if (file.size > 5 * 1024 * 1024) {
      setError('Datei zu groß (max. 5MB)')
      return
    }

    onPhotoSelect(file)
  }

  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault()
    if (!disabled) {
      setDragOver(true)
    }
  }

  const handleDragLeave = (e: React.DragEvent) => {
    e.preventDefault()
    setDragOver(false)
  }

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault()
    setDragOver(false)
    
    if (disabled) return

    const files = e.dataTransfer.files
    if (files.length > 0) {
      handleFileSelect(files[0])
    }
  }

  const handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files
    if (files && files.length > 0) {
      handleFileSelect(files[0])
    }
  }

  const triggerFileInput = () => {
    if (!disabled) {
      fileInputRef.current?.click()
    }
  }

  return (
    <div className="space-y-4">
      <div
        className={`relative w-32 h-32 rounded-full border-2 border-dashed transition-colors ${
          dragOver ? 'border-primary-blue bg-bg-accent' : 'border-border-default'
        } ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
        onDragOver={handleDragOver}
        onDragLeave={handleDragLeave}
        onDrop={handleDrop}
        onClick={triggerFileInput}
      >
        {currentPhoto ? (
          <img
            src={currentPhoto}
            alt="Employee photo"
            className="w-full h-full rounded-full object-cover"
          />
        ) : (
          <div className="w-full h-full rounded-full bg-bg-accent dark:bg-dark-primary flex items-center justify-center">
            <svg className="w-8 h-8 text-text-placeholder" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
            </svg>
          </div>
        )}

        <input
          ref={fileInputRef}
          type="file"
          accept="image/*"
          onChange={handleFileInputChange}
          className="hidden"
          disabled={disabled}
        />
      </div>

      <div className="flex space-x-2">
        <button
          type="button"
          onClick={triggerFileInput}
          disabled={disabled}
          className="btn-secondary text-xs"
        >
          Foto auswählen
        </button>
        
        {currentPhoto && onPhotoRemove && (
          <button
            type="button"
            onClick={onPhotoRemove}
            disabled={disabled}
            className="btn-secondary text-xs text-error hover:bg-error-bg"
          >
            Entfernen
          </button>
        )}
      </div>

      {error && (
        <p className="text-error text-xs">{error}</p>
      )}

      <p className="text-xs text-tertiary">
        Drag & Drop oder klicken zum Auswählen
        <br />
        Max. 5MB, JPEG/PNG/GIF/WebP
      </p>
    </div>
  )
}