'use client'

import { FuseButton } from '@/components/FuseButton'
import { useState } from 'react'
import { toast } from 'sonner'
import { Loader2 } from 'lucide-react'

// FuseButton wrapper for primary CTA actions with undo window.
// Used for: create deal, finalize invoice, run recurring, approve estimate.
export function FuseCTA({
  label,
  doneLabel = 'Erledigt',
  undoLabel = 'Rückgängig',
  onCommit,
  onUndo,
  disabled,
  size = 'md',
}: {
  label: string
  doneLabel?: string
  undoLabel?: string
  onCommit: () => void | Promise<void>
  onUndo?: () => void
  disabled?: boolean
  size?: 'sm' | 'md' | 'lg'
}) {
  const [busy, setBusy] = useState(false)

  const handleCommit = async () => {
    setBusy(true)
    const t = toast.loading('Wird ausgeführt…')
    try {
      await onCommit()
      toast.success(doneLabel, { id: t })
    } catch {
      toast.error('Fehlgeschlagen', { id: t })
    } finally {
      setBusy(false)
    }
  }

  return (
    <FuseButton
      label={busy ? 'Lädt…' : label}
      doneLabel={doneLabel}
      undoLabel={undoLabel}
      onCommit={handleCommit}
      onUndo={onUndo}
      disabled={disabled || busy}
      size={size}
      commitOn="fuseEnd"
      settle="stay"
      fuse="bottom"
      fuseThickness={2}
      undoWindow={4000}
      color="oklch(0.98 0 0)"
      background="oklch(0.2 0 0)"
      fuseColor="oklch(0.5 0 0)"
    />
  )
}