'use client'

import { useRef } from 'react'
import { FolderOpen, Upload, RefreshCw } from 'lucide-react'
import { cn } from '@/lib/utils'
import type { FileItem } from './FileRow'
import FileTable from './FileTable'

interface FileExplorerContainerProps {
  selectedDeviceName: string | null
  currentPath: string
  files: FileItem[]
  onFolderClick?: (name: string) => void
  onRefresh?: () => void
  onUpload?: () => void
}

export default function FileExplorerContainer({
  selectedDeviceName,
  currentPath,
  files,
  onFolderClick,
  onRefresh,
  onUpload,
}: FileExplorerContainerProps) {
  const pathRef = useRef<HTMLDivElement>(null)
  const hasDevice = !!selectedDeviceName

  return (
    <div
      className={cn(
        'flex h-[520px] min-h-[320px] flex-col overflow-hidden rounded-xl',
        'border border-white/10 bg-gradient-to-b from-dark-300/90 to-dark-400/90',
        'shadow-lg'
      )}
    >
      <div className="flex shrink-0 flex-wrap items-center justify-between gap-3 border-b border-white/10 bg-dark-200/80 px-4 py-3">
        <div className="flex min-w-0 flex-1 items-center gap-3">
          <button
            type="button"
            onClick={onUpload}
            disabled={!hasDevice}
            className="flex items-center gap-2 rounded-lg border border-white/10 px-3 py-2 text-sm text-gray-400 transition-colors hover:bg-white/5 hover:text-gray-200 disabled:cursor-not-allowed disabled:opacity-50"
          >
            <Upload className="h-4 w-4" />
            Subir
          </button>
          <div
            ref={pathRef}
            className="min-w-0 flex-1 overflow-x-auto rounded-lg border border-white/10 bg-dark-300/80 px-3 py-2 font-mono text-sm text-gray-400"
          >
            {currentPath}
          </div>
        </div>
        <div className="flex shrink-0 items-center gap-2">
          <button
            type="button"
            onClick={onRefresh}
            disabled={!hasDevice}
            className="flex items-center gap-2 rounded-lg border border-white/10 px-3 py-2 text-sm text-gray-400 transition-colors hover:bg-white/5 hover:text-gray-200 disabled:cursor-not-allowed disabled:opacity-50"
          >
            <RefreshCw className="h-4 w-4" />
            Actualizar
          </button>
          <button
            type="button"
            onClick={onUpload}
            disabled={!hasDevice}
            className="flex items-center gap-2 rounded-lg bg-cyan-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-cyan-500 disabled:cursor-not-allowed disabled:opacity-50"
          >
            <Upload className="h-4 w-4" />
            Subir
          </button>
        </div>
      </div>

      <div className="flex flex-1 flex-col overflow-hidden">
        {!hasDevice ? (
          <div className="flex flex-1 flex-col items-center justify-center gap-4 text-center">
            <FolderOpen className="h-16 w-16 text-gray-600" />
            <p className="text-gray-500">
              Selecciona un dispositivo para explorar archivos
            </p>
          </div>
        ) : (
          <FileTable files={files} onFolderClick={onFolderClick} />
        )}
      </div>
    </div>
  )
}