'use client'

import { useState, useTransition, useRef, useEffect } from 'react'
import { Pencil } from 'lucide-react'
import { renameMap } from '../actions'

export function EditableMapTitle({
  mapId,
  initial,
}: {
  mapId: string
  initial: string
}) {
  const [editing, setEditing] = useState(false)
  const [draft, setDraft] = useState(initial)
  const [pending, startTransition] = useTransition()
  const inputRef = useRef<HTMLInputElement>(null)

  useEffect(() => {
    if (editing) inputRef.current?.select()
  }, [editing])

  const save = () => {
    const trimmed = draft.trim()
    if (!trimmed || trimmed === initial) {
      setDraft(initial)
      setEditing(false)
      return
    }
    startTransition(async () => {
      const res = await renameMap(mapId, trimmed)
      if (!res.ok) {
        alert(res.error)
        setDraft(initial)
      }
      setEditing(false)
    })
  }

  if (editing) {
    return (
      <input
        ref={inputRef}
        value={draft}
        onChange={e => setDraft(e.target.value)}
        onBlur={save}
        onKeyDown={e => {
          if (e.key === 'Enter') {
            e.preventDefault()
            save()
          } else if (e.key === 'Escape') {
            setDraft(initial)
            setEditing(false)
          }
        }}
        disabled={pending}
        className="text-2xl font-bold tracking-tight bg-background border rounded-md px-2 py-0.5 outline-none focus:ring-2 focus:ring-ring min-w-0"
        autoFocus
      />
    )
  }

  return (
    <button
      type="button"
      onClick={() => setEditing(true)}
      title="Rename map"
      className="flex items-center gap-2 min-w-0 group"
    >
      <h1 className="text-2xl font-bold tracking-tight truncate">{initial}</h1>
      <Pencil className="size-4 text-muted-foreground opacity-0 group-hover:opacity-100 shrink-0" />
    </button>
  )
}