"use client"

import type { InputHTMLAttributes } from "react"
import {
  FileSpreadsheet,
  FileText,
  FolderPlus,
  FolderUp,
  PenLine,
  Plus,
  Presentation,
  Upload,
} from "lucide-react"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { DriveNameDialog } from "@/components/drive/drive-name-dialog"
import {
  DRIVE_NEW_MENU_ITEM_CLASS,
  useDriveNewMenu,
} from "@/lib/hooks/use-drive-new-menu"
import { cn } from "@/lib/utils"

export function DriveNewMenu({ parentPath }: { parentPath: string }) {
  const {
    pendingKind,
    pendingMeta,
    defaultName,
    confirmNew,
    uploadFiles,
    importFolder,
    pickKind,
    closeNameDialog,
  } = useDriveNewMenu(parentPath)

  return (
    <>
      <DriveNameDialog
        open={pendingKind !== null}
        onOpenChange={(open) => {
          if (!open) closeNameDialog()
        }}
        title={
          pendingKind === "folder"
            ? "Nouveau dossier"
            : pendingMeta
              ? `Nouveau ${pendingMeta.menuLabel.toLowerCase()}`
              : "Nouveau"
        }
        defaultValue={defaultName}
        confirmLabel="Créer"
        onConfirm={confirmNew}
      />
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <button
            type="button"
            className={cn(
              "inline-flex h-12 w-auto min-w-0 cursor-pointer items-center justify-start gap-3 rounded-2xl border border-border",
              "bg-mail-surface px-5 text-[15px] font-medium text-foreground shadow-sm outline-none transition-[box-shadow,background-color]",
              "hover:bg-accent hover:shadow-md focus-visible:ring-2 focus-visible:ring-ring/50",
            )}
          >
            <Plus className="size-5 shrink-0 opacity-80" />
            Nouveau
          </button>
        </DropdownMenuTrigger>
        <DropdownMenuContent
          align="start"
          sideOffset={8}
          data-drive-menu-surface
          className="w-64 border-border bg-mail-surface-elevated p-1.5 shadow-lg"
        >
          <DropdownMenuItem
            className={DRIVE_NEW_MENU_ITEM_CLASS}
            onClick={() => pickKind("document")}
          >
            <FileText className="text-blue-600" />
            Document
          </DropdownMenuItem>
          <DropdownMenuItem
            className={DRIVE_NEW_MENU_ITEM_CLASS}
            onClick={() => pickKind("spreadsheet")}
          >
            <FileSpreadsheet className="text-green-600" />
            Tableur
          </DropdownMenuItem>
          <DropdownMenuItem
            className={DRIVE_NEW_MENU_ITEM_CLASS}
            onClick={() => pickKind("presentation")}
          >
            <Presentation className="text-amber-600" />
            Présentation
          </DropdownMenuItem>
          <DropdownMenuItem
            className={DRIVE_NEW_MENU_ITEM_CLASS}
            onClick={() => pickKind("drawing")}
          >
            <PenLine className="text-violet-600" />
            Dessin
          </DropdownMenuItem>
          <DropdownMenuItem className={DRIVE_NEW_MENU_ITEM_CLASS} onClick={() => pickKind("folder")}>
            <FolderPlus className="text-amber-500" />
            Dossier
          </DropdownMenuItem>
          <DropdownMenuItem className={DRIVE_NEW_MENU_ITEM_CLASS} asChild>
            <label className="flex cursor-pointer items-center">
              <Upload className="text-sky-600" />
              Importer un fichier
              <input
                type="file"
                className="hidden"
                multiple
                onChange={async (e) => {
                  await uploadFiles(e.target.files)
                  e.target.value = ""
                }}
              />
            </label>
          </DropdownMenuItem>
          <DropdownMenuItem className={DRIVE_NEW_MENU_ITEM_CLASS} asChild>
            <label className="flex cursor-pointer items-center">
              <FolderUp className="text-violet-600" />
              Importer un dossier
              <input
                type="file"
                className="hidden"
                multiple
                {...({ webkitdirectory: "", directory: "" } as InputHTMLAttributes<HTMLInputElement>)}
                onChange={async (e) => {
                  await importFolder(e.target.files)
                  e.target.value = ""
                }}
              />
            </label>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </>
  )
}