'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { createItem } from '@/lib/actions'
import { Plus } from 'lucide-react'
import { useToast } from './ToastContainer'
import { validateItemTitle, sanitizeString } from '@/lib/validation'

interface InlineItemCreateProps {
  listId: string
}

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

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    
    // Validate title
    const validationResult = validateItemTitle(title)
    if (!validationResult.isValid) {
      setError(validationResult.error || 'Invalid title')
      return
    }

    if (isSubmitting) {
      return
    }

    setIsSubmitting(true)
    setError('')

    try {
      // Clear form immediately for better UX
      const itemTitle = sanitizeString(title)
      setTitle('')
      setIsCreating(false)
      
      // Create item and refresh
      await createItem(listId, itemTitle)
      showToast('Task added successfully', 'success')
      
      // Force immediate refresh
      router.refresh()
    } catch (error) {
      console.error('Error creating item:', error)
      const errorMessage = error instanceof Error ? error.message : 'Failed to add task'
      setError(errorMessage)
      showToast(errorMessage, 'error')
      // Restore form on error
      setIsCreating(true)
    } 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 sm:gap-3 px-4 sm:px-5 py-3 sm:py-4 bg-white border-2 border-dashed border-gray-300 rounded-lg text-gray-600 hover:border-blue-400 hover:text-blue-600 active:border-blue-500 active:text-blue-700 transition-colors tap-target text-sm sm:text-base font-medium"
      >
        <Plus size={20} className="flex-shrink-0" />
        <span>Add a task</span>
      </button>
    )
  }

  return (
    <form onSubmit={handleSubmit} className="bg-white border-2 border-blue-400 rounded-lg p-4 sm:p-5 shadow-sm">
      <div className="mb-3 sm:mb-4">
        <input
          type="text"
          value={title}
          onChange={(e) => {
            setTitle(e.target.value)
            setError('')
          }}
          onKeyDown={handleKeyDown}
          placeholder="Enter task title..."
          autoFocus
          maxLength={200}
          className={`w-full px-3 sm:px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 text-sm sm:text-base ${
            error ? 'border-red-500 focus:ring-red-500' : 'border-gray-300 focus:ring-blue-500'
          }`}
          aria-invalid={error ? 'true' : 'false'}
          aria-describedby={error ? 'inline-title-error' : undefined}
        />
        {error && (
          <p id="inline-title-error" className="mt-1.5 text-xs sm:text-sm text-red-600">
            {error}
          </p>
        )}
      </div>
      <div className="flex flex-col-reverse sm:flex-row gap-2 sm:gap-3">
        <button
          type="button"
          onClick={handleCancel}
          className="w-full sm:w-auto px-4 sm:px-5 py-2.5 sm:py-3 bg-gray-200 hover:bg-gray-300 active:bg-gray-400 text-gray-700 rounded-lg transition-colors tap-target text-sm sm:text-base font-medium"
        >
          Cancel
        </button>
        <button
          type="submit"
          disabled={!title.trim() || isSubmitting}
          className="w-full sm:w-auto px-4 sm:px-5 py-2.5 sm:py-3 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 disabled:bg-blue-300 text-white rounded-lg transition-colors tap-target text-sm sm:text-base font-medium"
        >
          {isSubmitting ? 'Adding...' : 'Add Task'}
        </button>
      </div>
    </form>
  )
}