"use client"

import { useEffect, useRef, useState } from "react"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import {
  DRIVE_BTN_GHOST,
  DRIVE_BTN_PRIMARY,
  DRIVE_DIALOG_BODY,
  DRIVE_DIALOG_CONTENT,
  DRIVE_DIALOG_FOOTER,
  DRIVE_DIALOG_HEADER,
  DRIVE_DIALOG_OVERLAY,
  DRIVE_FIELD_CLASS,
  DRIVE_TEXT_SECONDARY,
  DRIVE_TEXT_TITLE,
} from "@/lib/drive/drive-dialog-styles"
import { cn } from "@/lib/utils"

export function DriveNameDialog({
  open,
  onOpenChange,
  title,
  description,
  defaultValue,
  confirmLabel = "Créer",
  onConfirm,
}: {
  open: boolean
  onOpenChange: (open: boolean) => void
  title: string
  description?: string
  defaultValue: string
  confirmLabel?: string
  onConfirm: (name: string) => void | Promise<void>
}) {
  const [value, setValue] = useState(defaultValue)
  const [busy, setBusy] = useState(false)
  const inputRef = useRef<HTMLInputElement>(null)

  useEffect(() => {
    if (!open) return
    setValue(defaultValue)
    const t = setTimeout(() => {
      const el = inputRef.current
      if (!el) return
      el.focus()
      el.select()
    }, 0)
    return () => clearTimeout(t)
  }, [open, defaultValue])

  const submit = async () => {
    const trimmed = value.trim()
    if (!trimmed || busy) return
    setBusy(true)
    try {
      await onConfirm(trimmed)
      onOpenChange(false)
    } finally {
      setBusy(false)
    }
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent
        showCloseButton={!busy}
        overlayClassName={DRIVE_DIALOG_OVERLAY}
        className={cn(DRIVE_DIALOG_CONTENT, "sm:max-w-[420px]")}
        onOpenAutoFocus={(e) => e.preventDefault()}
        {...(description ? {} : { "aria-describedby": undefined })}
      >
        <DialogHeader className={DRIVE_DIALOG_HEADER}>
          <DialogTitle className={cn("text-base font-medium", DRIVE_TEXT_TITLE)}>
            {title}
          </DialogTitle>
          {description ? (
            <DialogDescription className={cn("text-sm", DRIVE_TEXT_SECONDARY)}>
              {description}
            </DialogDescription>
          ) : null}
        </DialogHeader>
        <div className={DRIVE_DIALOG_BODY}>
          <Input
            ref={inputRef}
            value={value}
            onChange={(e) => setValue(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === "Enter") void submit()
            }}
            disabled={busy}
            autoComplete="off"
            className={DRIVE_FIELD_CLASS}
          />
        </div>
        <DialogFooter className={DRIVE_DIALOG_FOOTER}>
          <Button
            type="button"
            variant="ghost"
            className={DRIVE_BTN_GHOST}
            onClick={() => onOpenChange(false)}
            disabled={busy}
          >
            Annuler
          </Button>
          <Button
            type="button"
            className={DRIVE_BTN_PRIMARY}
            onClick={() => void submit()}
            disabled={busy || !value.trim()}
          >
            {confirmLabel}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}