'use client'

import { useState, useEffect, useRef } from 'react'

interface InlineInputProps {
  value: string
  onSave: (val: string) => Promise<void>
  className?: string
  type?: 'text' | 'number'
}

export function InlineInput({ value, onSave, className, type = 'text' }: InlineInputProps) {
  const [isEditing, setIsEditing] = useState(false)
  const [currentValue, setCurrentValue] = useState(value)
  const inputRef = useRef<HTMLInputElement>(null)

  useEffect(() => {
    setCurrentValue(value)
  }, [value])

  useEffect(() => {
    if (isEditing && inputRef.current) {
      inputRef.current.focus()
    }
  }, [isEditing])

  const handleBlur = async () => {
    setIsEditing(false)
    if (currentValue !== value) {
      await onSave(currentValue)
    }
  }

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      handleBlur()
    }
  }

  if (isEditing) {
    return (
      <input
        ref={inputRef}
        type={type}
        step={type === 'number' ? '0.01' : undefined}
        value={currentValue}
        onChange={(e) => setCurrentValue(e.target.value)}
        onBlur={handleBlur}
        onKeyDown={handleKeyDown}
        className={`bg-white/10 text-white border border-primary px-1 rounded outline-none w-full ${className}`}
      />
    )
  }

  return (
    <span
      onClick={() => setIsEditing(true)}
      className={`cursor-pointer hover:bg-white/5 rounded px-1 transition ${className}`}
    >
      {value || <span className="italic text-slate-500">Klicken zum Bearbeiten</span>}
    </span>
  )
}