'use client'

import { useState, useOptimistic } from 'react'
import { useRouter } from 'next/navigation'
import { toggleItem } from '@/lib/actions'
import { CheckCircle2, Circle } from 'lucide-react'
import { useToast } from './ToastContainer'

interface ToggleItemButtonProps {
  itemId: string
  completed: boolean
  variant?: 'full' | 'icon'
}

export default function ToggleItemButton({ itemId, completed, variant = 'full' }: ToggleItemButtonProps) {
  const router = useRouter()
  const { showToast } = useToast()
  const [isToggling, setIsToggling] = useState(false)
  const [optimisticCompleted, setOptimisticCompleted] = useOptimistic(completed)

  const handleToggle = async (e: React.MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()
    
    if (isToggling) return
    
    setIsToggling(true)
    
    // Optimistically update UI
    setOptimisticCompleted(!completed)
    
    try {
      await toggleItem(itemId)
      showToast(completed ? 'Task marked incomplete' : 'Task completed', 'success')
      router.refresh()
    } catch (error) {
      console.error('Error toggling item:', error)
      showToast('Failed to update task', 'error')
      // Revert optimistic update on error
      setOptimisticCompleted(completed)
    } finally {
      setIsToggling(false)
    }
  }

  if (variant === 'icon') {
    return (
      <button
        onClick={handleToggle}
        disabled={isToggling}
        className="hover:scale-110 active:scale-95 transition-transform disabled:opacity-50 tap-target-sm"
        aria-label={optimisticCompleted ? 'Mark incomplete' : 'Mark complete'}
      >
        {optimisticCompleted ? (
          <CheckCircle2 size={22} className="text-green-500" />
        ) : (
          <Circle size={22} className="text-gray-400 hover:text-gray-600 active:text-gray-700" />
        )}
      </button>
    )
  }

  return (
    <button
      onClick={handleToggle}
      disabled={isToggling}
      className="flex items-center gap-2 px-4 sm:px-5 py-2.5 sm:py-3 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 disabled:bg-gray-50 text-gray-700 rounded-lg transition-colors tap-target text-sm sm:text-base font-medium"
    >
      {optimisticCompleted ? (
        <>
          <CheckCircle2 size={18} className="text-green-500 flex-shrink-0" />
          <span>Mark Incomplete</span>
        </>
      ) : (
        <>
          <Circle size={18} className="flex-shrink-0" />
          <span>Mark Complete</span>
        </>
      )}
    </button>
  )
}