'use client'

import { useCallback, useRef, useState } from 'react'
import { useDropzone, FileRejection } from 'react-dropzone'
import dynamic from 'next/dynamic'

const ModelViewer = dynamic(() => import('./ModelViewer'), { ssr: false })

type FileStatus = 'pending' | 'uploading' | 'success' | 'error'

interface FileEntry {
  file: File
  status: FileStatus
  progress: number
  error?: string
  filename?: string
  previewUrl?: string
  viewerOpen?: boolean
}

interface UploadResult {
  success: boolean
  filename?: string
  message?: string
  error?: string
  gitOutput?: string
  gitError?: string
}

const ACCEPTED_FORMATS = {
  'model/gltf-binary': ['.glb'],
  'model/gltf+json': ['.gltf'],
  'image/png': ['.png'],
  'image/jpeg': ['.jpg', '.jpeg'],
  'image/webp': ['.webp'],
}

const MODEL_EXTENSIONS = ['.glb', '.gltf']
const TEXTURE_EXTENSIONS = ['.png', '.jpg', '.jpeg', '.webp']
const ALL_EXTENSIONS = [...MODEL_EXTENSIONS, ...TEXTURE_EXTENSIONS]

function formatBytes(bytes: number): string {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`
}

function getFileType(filename: string): 'model' | 'texture' | null {
  const ext = filename.slice(filename.lastIndexOf('.')).toLowerCase()
  if (MODEL_EXTENSIONS.includes(ext)) return 'model'
  if (TEXTURE_EXTENSIONS.includes(ext)) return 'texture'
  return null
}

function uploadSingleFile(
  file: File,
  secret: string,
  assetName: string,
  onProgress: (pct: number) => void,
  xhrRef: { current: XMLHttpRequest | null }
): Promise<UploadResult> {
  return new Promise((resolve) => {
    const formData = new FormData()
    formData.append('file', file)
    if (assetName.trim()) formData.append('assetName', assetName.trim())

    const xhr = new XMLHttpRequest()
    xhrRef.current = xhr

    xhr.upload.onprogress = (e) => {
      if (e.lengthComputable) onProgress(Math.round((e.loaded / e.total) * 100))
    }

    xhr.onload = () => {
      try {
        resolve(JSON.parse(xhr.responseText))
      } catch {
        resolve({ success: false, error: `Unexpected response (HTTP ${xhr.status})` })
      }
    }

    xhr.onerror = () => resolve({ success: false, error: 'Network error.' })
    xhr.onabort = () => resolve({ success: false, error: 'Cancelled.' })

    xhr.open('POST', '/api/upload')
    xhr.setRequestHeader('x-upload-secret', secret.trim())
    xhr.send(formData)
  })
}

export default function UploadZone() {
  const [files, setFiles] = useState<FileEntry[]>([])
  const [isUploading, setIsUploading] = useState(false)
  const [secret, setSecret] = useState('')
  const [secretVisible, setSecretVisible] = useState(false)
  const [assetName, setAssetName] = useState('')
  const [globalError, setGlobalError] = useState<string | null>(null)
  const xhrRef = useRef<XMLHttpRequest | null>(null)

  const updateFile = (index: number, patch: Partial<FileEntry>) => {
    setFiles((prev) => prev.map((f, i) => i === index ? { ...f, ...patch } : f))
  }

  const handleUpload = useCallback(async () => {
    if (!secret.trim()) {
      setGlobalError('Please enter the access key before uploading.')
      return
    }
    if (files.length === 0) return

    setIsUploading(true)
    setGlobalError(null)

    for (let i = 0; i < files.length; i++) {
      if (files[i].status === 'success') continue

      updateFile(i, { status: 'uploading', progress: 0, error: undefined })

      const result = await uploadSingleFile(
        files[i].file,
        secret,
        assetName,
        (pct) => updateFile(i, { progress: pct }),
        xhrRef
      )

      updateFile(i, {
        status: result.success ? 'success' : 'error',
        progress: result.success ? 100 : 0,
        error: result.success ? undefined : result.error,
        filename: result.filename,
      })
    }

    setIsUploading(false)
  }, [files, secret, assetName])

  const handleCancel = () => { xhrRef.current?.abort() }

  const removeFile = (index: number) => {
    const file = files[index]
    if (file.previewUrl) {
      URL.revokeObjectURL(file.previewUrl)
    }
    setFiles((prev) => prev.filter((_, i) => i !== index))
  }

  const handleReset = () => {
    files.forEach((f) => {
      if (f.previewUrl) URL.revokeObjectURL(f.previewUrl)
    })
    setFiles([])
    setGlobalError(null)
    setIsUploading(false)
  }

  const onDrop = useCallback((acceptedFiles: File[], rejectedFiles: FileRejection[]) => {
    if (rejectedFiles.length > 0) {
      const codes = rejectedFiles[0].errors.map((e) => e.code).join(', ')
      setGlobalError(
        codes.includes('file-invalid-type')
          ? `Unsupported format. Use: ${ALL_EXTENSIONS.join(', ')}`
          : codes.includes('file-too-large')
          ? 'File too large (max 2 GB)'
          : `File rejected: ${codes}`
      )
      return
    }

    setGlobalError(null)
    setFiles((prev) => {
      const existingNames = new Set(prev.map((f) => f.file.name))
      const newEntries: FileEntry[] = acceptedFiles
        .filter((f) => !existingNames.has(f.name))
        .map((file) => {
          const entry: FileEntry = { file, status: 'pending', progress: 0, viewerOpen: true }
          const type = getFileType(file.name)
          if (type === 'model') {
            entry.previewUrl = URL.createObjectURL(file)
          }
          return entry
        })
      return [...prev, ...newEntries]
    })
  }, [])

  const { getRootProps, getInputProps, isDragActive, isDragReject } = useDropzone({
    onDrop,
    accept: ACCEPTED_FORMATS,
    maxSize: 2 * 1024 * 1024 * 1024,
    disabled: isUploading,
    multiple: false,
  })

  const allDone = files.length > 0 && files.every((f) => f.status === 'success')
  const hasErrors = files.some((f) => f.status === 'error')

  return (
    <div className="w-full max-w-2xl space-y-4">
      <div className="space-y-1.5">
        <label className="block text-sm font-medium text-gray-300">Access Key</label>
        <div className="relative">
          <input
            type={secretVisible ? 'text' : 'password'}
            value={secret}
            onChange={(e) => setSecret(e.target.value)}
            placeholder="Enter secret key..."
            disabled={isUploading}
            className="w-full bg-black-800 border border-white/30 rounded-xl px-4 py-2.5 pr-12
                       text-gray-100 placeholder-gray-500 text-sm
                       focus:outline-none focus:ring-2 focus:ring-white/50 focus:border-white/50
                       disabled:opacity-50 disabled:cursor-not-allowed transition"
          />
          <button
            type="button"
            onClick={() => setSecretVisible((v) => !v)}
            className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300 transition"
            tabIndex={-1}
          >
            {secretVisible ? (
              <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
              </svg>
            ) : (
              <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                <path strokeLinecap="round" strokeLinejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
              </svg>
            )}
          </button>
        </div>
      </div>

      <div className="space-y-1.5">
        <label className="block text-sm font-medium text-gray-300">
          Asset Name
          <span className="text-gray-500 font-normal ml-2">— common name for model and texture</span>
        </label>
        <input
          type="text"
          value={assetName}
          onChange={(e) => setAssetName(e.target.value)}
          placeholder="e.g., tower, stone_floor, brick_wall..."
          disabled={isUploading}
className="w-full bg-black-800 border border-white/30 rounded-xl px-4 py-2.5
                   text-gray-100 placeholder-gray-500 text-sm font-mono
                   focus:outline-none focus:ring-2 focus:ring-white/50 focus:border-white/50
                   disabled:opacity-50 disabled:cursor-not-allowed transition"
        />
      </div>

      {files.length === 0 && (
        <div
          {...getRootProps()}
          className={`
            relative border-2 border-dashed rounded-2xl p-8 text-center cursor-pointer transition-all duration-200 bg-black-800
            ${isUploading ? 'cursor-not-allowed opacity-60 border-white/20' : ''}
            ${isDragReject ? 'border-red-500 bg-red-900/20' : ''}
            ${isDragActive && !isDragReject ? 'border-white/50 bg-black-700 scale-[1.01]' : ''}
            ${!isDragActive && !isDragReject && !isUploading
              ? 'border-white/30 hover:border-white/50 hover:bg-black-700'
              : ''}
          `}
        >
          <input {...getInputProps()} />
          <div className="flex justify-center mb-3">
            <div className={`w-12 h-12 rounded-full flex items-center justify-center transition ${isDragActive ? 'bg-gray-700' : 'bg-black-700'}`}>
              <svg className={`w-6 h-6 transition ${isDragActive ? 'text-white' : 'text-gray-400'}`}
                fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
                <path strokeLinecap="round" strokeLinejoin="round"
                  d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
              </svg>
            </div>
          </div>
          {isDragReject ? (
            <p className="text-sm font-medium text-red-400">Unsupported format</p>
          ) : isDragActive ? (
            <p className="text-sm font-medium text-gray-200">Release to add</p>
          ) : (
            <>
              <p className="text-sm font-medium text-gray-300">
                Drag files here
                <span className="text-gray-500 font-normal"> or click to browse</span>
              </p>
              <p className="text-xs text-gray-500 mt-1">
                Models: .glb, .gltf · Textures: .png, .jpg, .webp
              </p>
            </>
          )}
        </div>
      )}

      {globalError && (
        <p className="text-xs text-red-400 text-center">{globalError}</p>
      )}

      {files.length > 0 && (
        <div className="space-y-2">
          {files.map((entry, i) => {
            const type = getFileType(entry.file.name)
            return (
              <div key={`${entry.file.name}-${i}`}>
                <div className="flex items-center gap-3 bg-black-800 border border-white/20 rounded-xl px-4 py-3">

                <div className="shrink-0">
                  {entry.status === 'success' ? (
                    <div className="w-8 h-8 rounded-full bg-green-900/30 flex items-center justify-center">
                      <svg className="w-4 h-4 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
                        <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                      </svg>
                    </div>
                  ) : entry.status === 'error' ? (
                    <div className="w-8 h-8 rounded-full bg-red-900/30 flex items-center justify-center">
                      <svg className="w-4 h-4 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
                        <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
                      </svg>
                    </div>
                  ) : entry.status === 'uploading' ? (
                    <div className="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center">
                      <svg className="w-4 h-4 text-gray-300 animate-spin" fill="none" viewBox="0 0 24 24">
                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                      </svg>
                    </div>
                  ) : (
                    <button
                      onClick={() => {
                        if (entry.previewUrl && type === 'model') {
                          updateFile(i, { viewerOpen: !entry.viewerOpen })
                        }
                      }}
                      className={`shrink-0 w-8 h-8 rounded-full flex items-center justify-center transition ${
                        entry.previewUrl && type === 'model'
                          ? 'bg-black-700 hover:bg-gray-700 cursor-pointer'
                          : 'bg-black-700 cursor-default'
                      }`}
                    >
                      <svg 
                        className={`w-4 h-4 text-gray-500 transition-transform ${entry.viewerOpen ? 'rotate-180' : ''}`} 
                        fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}
                      >
                        <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
                      </svg>
                    </button>
                  )}
                </div>

                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2">
                    <span className="text-sm text-gray-200 font-mono truncate">{entry.file.name}</span>
                    {type && (
                      <span className={`shrink-0 text-xs px-1.5 py-0.5 rounded-full
                        ${type === 'model' ? 'bg-gray-700 text-gray-300' : 'bg-gray-700 text-gray-300'}`}>
                        {type === 'model' ? '3D' : 'Texture'}
                      </span>
                    )}
                  </div>
                  <div className="flex items-center gap-2 mt-0.5">
                    <span className="text-xs text-gray-500">{formatBytes(entry.file.size)}</span>
                    {entry.status === 'error' && entry.error && (
                      <span className="text-xs text-red-400 truncate">{entry.error}</span>
                    )}
                    {entry.status === 'success' && entry.filename && (
                      <span className="text-xs text-green-400 font-mono">{entry.filename}</span>
                    )}
                  </div>
                  {entry.status === 'uploading' && (
                    <div className="mt-1.5 w-full h-1 bg-black-700 rounded-full overflow-hidden">
                      <div
                        className="h-full bg-gray-400 rounded-full transition-all duration-200"
                        style={{ width: `${entry.progress}%` }}
                      />
                    </div>
                  )}
                </div>

                {entry.status !== 'uploading' && (
                  <button
                    onClick={() => removeFile(i)}
                    className="shrink-0 text-gray-600 hover:text-red-400 transition"
                  >
                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                      <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                  </button>
                )}
              </div>

              {entry.previewUrl && type === 'model' && entry.status !== 'success' && (
                <div 
                  className={`transition-all duration-300 ease-in-out ${
                    entry.viewerOpen ? 'max-h-[500px] opacity-100 mt-2' : 'max-h-0 opacity-0'
                  }`}
                >
                  <ModelViewer 
                    url={entry.previewUrl} 
                    filename={entry.file.name}
                    size={formatBytes(entry.file.size)}
                  />
                </div>
              )}
            </div>
          );
        })}
        </div>
      )}

      <div className="flex gap-3">
        {!isUploading && files.some((f) => f.status === 'pending' || f.status === 'error') && (
          <button
            onClick={handleUpload}
            className="flex-1 bg-white text-black font-medium text-sm
                       py-2.5 px-6 rounded-xl transition-all duration-150
                       hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-white/50 border border-white/20"
            style={{ color: '#000000' }}
          >
            Upload {files.filter(f => f.status !== 'success').length > 1
              ? `${files.filter(f => f.status !== 'success').length} files`
              : 'file'} & Push to Git
          </button>
        )}

        {isUploading && (
          <button
            onClick={handleCancel}
            className="flex-1 bg-black-700 text-gray-300 font-medium text-sm
                       py-2.5 px-6 rounded-xl border border-black-600 transition-colors duration-150
                       hover:bg-black-600"
          >
            Cancel
          </button>
        )}

        {(allDone || hasErrors) && !isUploading && (
          <button
            onClick={handleReset}
            className="flex-1 bg-black-700 text-gray-300 font-medium text-sm
                       py-2.5 px-6 rounded-xl border border-black-600 transition-colors duration-150
                       hover:bg-black-600"
          >
            {allDone ? 'Clear All' : 'Retry'}
          </button>
        )}
      </div>
    </div>
  )
}