"use client"
import React, { createContext, useContext, useState } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"

type ConfirmOptions = {
  title: string
  description?: string
  confirmText?: string
  cancelText?: string
  onConfirm?: () => void | Promise<void>
  onCancel?: () => void | Promise<void>
}

type ConfirmContextValue = {
  show: (opts: ConfirmOptions) => void
  hide: () => void
}

const ConfirmContext = createContext<ConfirmContextValue | undefined>(undefined)

export function ConfirmProvider({ children }: { children: React.ReactNode }) {
  const [options, setOptions] = useState<ConfirmOptions | null>(null)
  const [open, setOpen] = useState(false)

  function show(opts: ConfirmOptions) {
    setOptions(opts)
    setOpen(true)
  }

  function hide() {
    setOpen(false)
    // delay clearing options to allow animation to finish
    setTimeout(() => setOptions(null), 200)
  }

  async function handleConfirm() {
    try {
      await options?.onConfirm?.()
    } finally {
      hide()
    }
  }

  async function handleCancel() {
    try {
      await options?.onCancel?.()
    } finally {
      hide()
    }
  }

  return (
    <ConfirmContext.Provider value={{ show, hide }}>
      {children}

      {/* Dialog rendered at top-level so it can be used anywhere inside the provider */}
      <Dialog open={open} onOpenChange={v => (v ? show(options!) : hide())}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>{options?.title ?? "Are you sure?"}</DialogTitle>
            {options?.description && <DialogDescription>{options.description}</DialogDescription>}
          </DialogHeader>
          <DialogFooter className="mt-4">
            <Button variant="outline" className="" onClick={handleCancel}>
              {options?.cancelText ?? "Cancel"}
            </Button>
            <Button variant="destructive" onClick={handleConfirm}>
              {options?.confirmText ?? "Confirm"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </ConfirmContext.Provider>
  )
}

export function useConfirm() {
  const ctx = useContext(ConfirmContext)
  if (!ctx) {
    throw new Error("useConfirm must be used within a ConfirmProvider")
  }
  return ctx
}

export default ConfirmProvider