'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'

interface Props {
  capaId: string
  currentStatus: string
}

export function CapaOwnerActions({ capaId, currentStatus }: Props) {
  const router = useRouter()
  const [loading, setLoading] = useState(false)

  async function updateStatus(status: string) {
    setLoading(true)
    try {
      await fetch(`/ims/api/capa/${capaId}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ status }),
      })
      router.refresh()
    } finally {
      setLoading(false)
    }
  }

  if (currentStatus === 'open' || currentStatus === 'reopened') {
    return (
      <button
        onClick={() => updateStatus('in_progress')}
        disabled={loading}
        className="text-sm px-3 py-1.5 border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50"
      >
        {loading ? '…' : 'Mark In Progress'}
      </button>
    )
  }

  if (currentStatus === 'in_progress') {
    return (
      <button
        onClick={() => updateStatus('pending_verification')}
        disabled={loading}
        className="text-sm px-3 py-1.5 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
      >
        {loading ? '…' : 'Submit for Verification'}
      </button>
    )
  }

  return null
}