import { CloudUpload } from 'lucide-react'
import { useDriveController } from '@/hooks/useDriveController'
import DriveSidebar from '@/components/drive/DriveSidebar'
import DriveToolbar from '@/components/drive/DriveToolbar'
import DriveExplorer from '@/components/drive/DriveExplorer'
import DriveDialogs from '@/components/drive/DriveDialogs'
import UploadTray from '@/components/drive/UploadTray'
import AdminUsersPage from '@/pages/AdminUsersPage'

export default function DrivePage({user, onLogout}) {
  const controller = useDriveController(user)
  const {sidebar, setSidebar, drag, setDrag, filesInput, uploadFiles, isTrash, canWrite} = controller

  return (
    <div className="flex h-dvh min-h-[540px] overflow-hidden bg-background"
      onDragOver={e => {if(e.dataTransfer?.types?.includes('Files')){e.preventDefault();setDrag(true)}}}
      onDragLeave={e => {if(!e.currentTarget.contains(e.relatedTarget))setDrag(false)}}
      onDrop={e => {e.preventDefault();setDrag(false);if(!isTrash&&canWrite)uploadFiles(e.dataTransfer.files)}}>
      {sidebar && <button className="fixed inset-0 z-30 bg-black/40 md:hidden" aria-label="Fermer le menu" onClick={() => setSidebar(false)} />}
      <DriveSidebar controller={controller} user={user} onLogout={onLogout} />
      <main className="flex min-w-0 flex-1 flex-col overflow-hidden">
        {controller.view === 'users' && user.is_admin ? <AdminUsersPage onOpenSidebar={() => setSidebar(true)} dark={controller.dark} setDark={controller.setDark} /> : <>
          <DriveToolbar controller={controller} />
          <DriveExplorer controller={controller} user={user} />
        </>}
      </main>
      <input className="hidden" ref={filesInput} type="file" multiple onChange={e => uploadFiles(e.target.files)} />
      {drag && !isTrash && canWrite && <div className="pointer-events-none fixed inset-3 z-50 grid place-items-center rounded-3xl border-4 border-dashed border-primary bg-background/90"><div className="text-center"><CloudUpload className="mx-auto mb-3 size-14 text-primary"/><h2 className="text-xl font-semibold">Dépose tes fichiers ici</h2></div></div>}
      <DriveDialogs controller={controller} user={user} />
      <UploadTray uploads={controller.uploads} />
    </div>
  )
}