Todo/components/InlineItemCreate.tsx

'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { createItem } from '@/lib/actions'
import { Plus } from 'lucide-react'

interface InlineItemCreateProps {
  listId: string
}

export default function InlineItemCreate({ listId }: InlineItemCreateProps) {
  const router = useRouter()
  const [isCreating, setIsCreating] = useState(false)
  const [title, setTitle] = useState('')
  const [isSubmitting, setIsSubmitting] = useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    
    if (!title.trim() || isSubmitting) {
      return
    }

    setIsSubmitting(true)

    try {
      await createItem(listId, title.trim())
      setTitle('')
      setIsCreating(false)
      router.refresh()
    } catch (error) {
      console.error('Error creating item:', error)
    } finally {
      setIsSubmitting(false)
    }
  }

  const handleCancel = () => {
    setTitle('')
    setIsCreating(false)
  }

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

  if (!isCreating) {
    return (
      <button
        onClick={() => setIsCreating(true)}
        className="w-full flex items-center gap-2 px-4 py-3 bg-white border-2 border-dashed border-gray-300 rounded-lg text-gray-600 hover:border-blue-400 hover:text-blue-600 transition-colors"
      >
        <Plus size={20} />
        <span>Add a task</span>
      </button>
    )
  }

  return (
    <form onSubmit={handleSubmit} className="bg-white border-2 border-blue-400 rounded-lg p-4">
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        onKeyDown={handleKeyDown}
        placeholder="Enter task title..."
        autoFocus
        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 mb-3"
      />
      <div className="flex gap-2">
        <button
          type="submit"
          disabled={!title.trim() || isSubmitting}
          className="px-4 py-2 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 text-white rounded-lg transition-colors text-sm"
        >
          {isSubmitting ? 'Adding...' : 'Add Task'}
        </button>
        <button
          type="button"
          onClick={handleCancel}
          className="px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg transition-colors text-sm"
        >
          Cancel
        </button>
      </div>
    </form>
  )
}