import { useRef, useState } from 'react'

function UploadBox({ onUpload, isUploading }) {
    const inputRef = useRef(null)
    const [isDragOver, setIsDragOver] = useState(false)

    const handleClick = () => {
        if (!isUploading) {
            inputRef.current?.click()
        }
    }

    const handleChange = (e) => {
        const file = e.target.files?.[0]
        if (file) {
            onUpload(file)
        }
    }

    const handleDragOver = (e) => {
        e.preventDefault()
        setIsDragOver(true)
    }

    const handleDragLeave = (e) => {
        e.preventDefault()
        setIsDragOver(false)
    }

    const handleDrop = (e) => {
        e.preventDefault()
        setIsDragOver(false)

        const file = e.dataTransfer.files?.[0]
        if (file) {
            onUpload(file)
        }
    }

    return (
        <div
            className={`upload-box ${isDragOver ? 'dragover' : ''} ${isUploading ? 'uploading' : ''}`}
            onClick={handleClick}
            onDragOver={handleDragOver}
            onDragLeave={handleDragLeave}
            onDrop={handleDrop}
            style={{
                border: '1px solid var(--border-color)',
                borderRadius: 'var(--radius)',
                padding: '4rem 2rem',
                textAlign: 'center',
                cursor: 'pointer',
                transition: 'all 0.2s ease',
                background: 'var(--bg-card)',
                height: '300px',
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center'
            }}
        >
            <input
                ref={inputRef}
                type="file"
                accept="video/*"
                onChange={handleChange}
                style={{ display: 'none' }}
            />

            <div className="upload-icon" style={{ marginBottom: '1.5rem', color: 'var(--text-secondary)' }}>
                {isUploading ? (
                    <div className="spinner" />
                ) : (
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                        <polyline points="17 8 12 3 7 8" />
                        <line x1="12" y1="3" x2="12" y2="15" />
                    </svg>
                )}
            </div>

            <h2 className="upload-title" style={{
                fontSize: '1.25rem',
                fontWeight: '500',
                marginBottom: '0.5rem',
                color: 'var(--text-primary)'
            }}>
                {isUploading ? 'Processing...' : 'Upload Video'}
            </h2>

            <p className="upload-subtitle" style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>
                {isUploading
                    ? 'Creating shorts...'
                    : 'Drag & drop or click to browse'
                }
            </p>
        </div>
    )
}

export default UploadBox