"use client"

import { useEffect, useRef, useState } from "react"
import { cn } from "@/lib/utils"

export function OfficeEditorInlineTitle({
  value,
  onRename,
  disabled = false,
  className,
}: {
  value: string
  onRename: (next: string) => Promise<void>
  disabled?: boolean
  className?: string
}) {
  const [editing, setEditing] = useState(false)
  const [draft, setDraft] = useState(value)
  const [busy, setBusy] = useState(false)
  const inputRef = useRef<HTMLInputElement>(null)
  const skipBlurCommitRef = useRef(false)

  useEffect(() => {
    if (!editing) setDraft(value)
  }, [value, editing])

  useEffect(() => {
    if (!editing) return
    const timer = window.setTimeout(() => {
      const el = inputRef.current
      if (!el) return
      el.focus()
      el.select()
    }, 0)
    return () => window.clearTimeout(timer)
  }, [editing])

  const cancelEdit = () => {
    skipBlurCommitRef.current = true
    setDraft(value)
    setEditing(false)
  }

  const commitEdit = async () => {
    if (skipBlurCommitRef.current) {
      skipBlurCommitRef.current = false
      return
    }
    const trimmed = draft.trim()
    if (!trimmed || trimmed === value) {
      setDraft(value)
      setEditing(false)
      return
    }
    setBusy(true)
    try {
      await onRename(trimmed)
      setEditing(false)
    } catch {
      setDraft(value)
      setEditing(false)
    } finally {
      setBusy(false)
    }
  }

  if (editing && !disabled) {
    return (
      <input
        ref={inputRef}
        value={draft}
        disabled={busy}
        aria-label="Nom du fichier"
        className={cn(
          "h-8 min-w-0 max-w-[min(420px,50vw)] rounded-md border border-border bg-background px-2 text-sm font-medium text-foreground outline-none ring-offset-background focus-visible:ring-2 focus-visible:ring-ring",
          className
        )}
        onChange={(event) => setDraft(event.target.value)}
        onKeyDown={(event) => {
          if (event.key === "Enter") {
            event.preventDefault()
            void commitEdit()
          }
          if (event.key === "Escape") {
            event.preventDefault()
            cancelEdit()
          }
        }}
        onBlur={() => void commitEdit()}
      />
    )
  }

  return (
    <button
      type="button"
      disabled={disabled || busy}
      title={disabled ? undefined : "Renommer"}
      className={cn(
        "min-w-0 truncate rounded-md px-1.5 py-1 text-left text-sm font-medium text-foreground transition-colors hover:bg-muted/70 disabled:cursor-default disabled:hover:bg-transparent",
        className
      )}
      onClick={() => {
        if (!disabled && !busy) setEditing(true)
      }}
    >
      {value}
    </button>
  )
}