'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { deleteItem } from '@/lib/actions'
import { Trash2 } from 'lucide-react'
import { useToast } from './ToastContainer'

interface DeleteItemButtonProps {
  itemId: string
  listId?: string
  variant?: 'full' | 'icon'
}

export default function DeleteItemButton({ itemId, listId, variant = 'full' }: DeleteItemButtonProps) {
  const router = useRouter()
  const { showToast } = useToast()
  const [isDeleting, setIsDeleting] = useState(false)
  const [showConfirm, setShowConfirm] = useState(false)

  const handleDelete = async (e: React.MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()
    setIsDeleting(true)
    try {
      await deleteItem(itemId)
      showToast('Task deleted successfully', 'success')
      if (listId) {
        router.push(`/list/${listId}`)
      } else {
        router.refresh()
      }
    } catch (error) {
      console.error('Error deleting item:', error)
      showToast('Failed to delete task', 'error')
      setIsDeleting(false)
      setShowConfirm(false)
    }
  }

  const handleShowConfirm = (e: React.MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()
    setShowConfirm(true)
  }

  const handleCancel = (e: React.MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()
    setShowConfirm(false)
  }

  if (showConfirm) {
    return (
      <div className="flex items-center gap-2">
        <button
          onClick={handleDelete}
          disabled={isDeleting}
          className="px-3 sm:px-4 py-2 sm:py-2.5 bg-red-500 hover:bg-red-600 active:bg-red-700 disabled:bg-red-300 text-white rounded-lg text-xs sm:text-sm transition-colors tap-target-sm font-medium"
        >
          {isDeleting ? 'Deleting...' : 'Confirm'}
        </button>
        <button
          onClick={handleCancel}
          disabled={isDeleting}
          className="px-3 sm:px-4 py-2 sm:py-2.5 bg-gray-200 hover:bg-gray-300 active:bg-gray-400 text-gray-700 rounded-lg text-xs sm:text-sm transition-colors tap-target-sm font-medium"
        >
          Cancel
        </button>
      </div>
    )
  }

  if (variant === 'icon') {
    return (
      <button
        onClick={handleShowConfirm}
        className="text-gray-400 hover:text-red-600 active:text-red-700 transition-colors tap-target-sm hover:bg-red-50 active:bg-red-100 rounded-lg"
        aria-label="Delete item"
      >
        <Trash2 size={18} />
      </button>
    )
  }

  return (
    <button
      onClick={handleShowConfirm}
      className="flex items-center gap-2 px-4 sm:px-5 py-2.5 sm:py-3 bg-red-500 hover:bg-red-600 active:bg-red-700 text-white rounded-lg transition-colors tap-target text-sm sm:text-base font-medium"
    >
      <Trash2 size={18} className="flex-shrink-0" />
      <span>Delete</span>
    </button>
  )
}