'use client'

import { useState, useTransition } from 'react'
import { Button } from '@/components/ui/button'
import { archiveProductAction } from '@/actions/products'
import { debugProps } from '@/lib/debug'

interface ArchiveProductButtonProps {
  productId: string
}

export function ArchiveProductButton({ productId }: ArchiveProductButtonProps) {
  const [confirming, setConfirming] = useState(false)
  const [isPending, startTransition] = useTransition()

  function handleArchive() {
    startTransition(async () => {
      await archiveProductAction(productId)
    })
  }

  if (confirming) {
    return (
      <div className="flex gap-2 shrink-0" {...debugProps('archive-product-button', 'ArchiveProductButton', 'components/products/archive-product-button.tsx')}>
        <Button
          variant="destructive"
          size="sm"
          disabled={isPending}
          onClick={handleArchive}
        >
          {isPending ? 'Bezig…' : 'Ja, archiveer'}
        </Button>
        <Button
          variant="ghost"
          size="sm"
          onClick={() => setConfirming(false)}
          disabled={isPending}
        >
          Annuleren
        </Button>
      </div>
    )
  }

  return (
    <Button
      variant="outline"
      size="sm"
      className="shrink-0 border-error/40 text-error hover:bg-error/10"
      onClick={() => setConfirming(true)}
      {...debugProps('archive-product-button', 'ArchiveProductButton', 'components/products/archive-product-button.tsx')}
    >
      Archiveren
    </Button>
  )
}