'use client'

import React from 'react'
import { Fragment } from 'react'
import { Dialog, Transition } from '@headlessui/react'
import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'

type ConfirmIntent = 'default' | 'danger'

interface ConfirmActionModalProps {
  open: boolean
  title: string
  description: string
  confirmText?: string
  cancelText?: string
  pending?: boolean
  intent?: ConfirmIntent
  onClose: () => void
  onConfirm: () => Promise<void> | void
  extraContent?: React.ReactNode
}

export default function ConfirmActionModal({
  open,
  title,
  description,
  confirmText = 'Confirm',
  cancelText = 'Cancel',
  pending = false,
  intent = 'default',
  onClose,
  onConfirm,
  extraContent,
}: ConfirmActionModalProps) {
  const [displayData, setDisplayData] = React.useState({
    title,
    description,
    confirmText,
    cancelText,
    intent,
    extraContent: extraContent ?? null,
  })

  React.useEffect(() => {
    if (!open) return
    setDisplayData({
      title,
      description,
      confirmText,
      cancelText,
      intent,
      extraContent: extraContent ?? null,
    })
  }, [open, title, description, confirmText, cancelText, intent, extraContent])

  const activeIntent = displayData.intent

  const confirmButtonClass =
    activeIntent === 'danger'
      ? 'inline-flex items-center rounded-md border border-red-300 bg-red-600 px-3 py-2 text-sm text-white hover:bg-red-700 disabled:opacity-60'
      : 'inline-flex items-center rounded-md border border-[#8D6B1D] bg-[#8D6B1D] px-3 py-2 text-sm text-white hover:bg-[#7A5E1A] disabled:opacity-60'

  const iconColorClass = activeIntent === 'danger' ? 'text-red-600' : 'text-amber-600'

  return (
    <Transition show={open} as={Fragment}>
      <Dialog onClose={pending ? () => {} : onClose} className="relative z-[1100]">
        <Transition.Child
          as={Fragment}
          enter="transition-opacity ease-out duration-200"
          enterFrom="opacity-0"
          enterTo="opacity-100"
          leave="transition-opacity ease-in duration-150"
          leaveFrom="opacity-100"
          leaveTo="opacity-0"
        >
          <div className="fixed inset-0 bg-black/40 backdrop-blur-sm" />
        </Transition.Child>

        <div className="fixed inset-0 overflow-y-auto">
          <div className="flex min-h-full items-center justify-center p-4">
            <Transition.Child
              as={Fragment}
              enter="transition-all ease-out duration-200"
              enterFrom="opacity-0 translate-y-2 sm:scale-95"
              enterTo="opacity-100 translate-y-0 sm:scale-100"
              leave="transition-all ease-in duration-150"
              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
              leaveTo="opacity-0 translate-y-2 sm:scale-95"
            >
              <Dialog.Panel className="w-full max-w-md rounded-lg bg-white p-6 shadow-xl ring-1 ring-black/10">
                <div className="flex items-start gap-3">
                  <div className="shrink-0">
                    <ExclamationTriangleIcon className={`h-6 w-6 ${iconColorClass}`} />
                  </div>
                  <div className="flex-1">
                    <Dialog.Title className="text-lg font-semibold text-gray-900">
                      {displayData.title}
                    </Dialog.Title>
                    <div className="mt-2 text-sm text-gray-600">
                      <p>{displayData.description}</p>
                      {displayData.extraContent ? <div className="mt-3">{displayData.extraContent}</div> : null}
                    </div>
                  </div>
                </div>

                <div className="mt-6 flex items-center justify-end gap-2">
                  <button
                    type="button"
                    disabled={pending}
                    onClick={onClose}
                    className="inline-flex items-center rounded-md border border-gray-300 px-3 py-2 text-sm text-gray-800 hover:bg-gray-50 disabled:opacity-60"
                  >
                    {displayData.cancelText}
                  </button>
                  <button
                    type="button"
                    disabled={pending}
                    onClick={onConfirm}
                    className={confirmButtonClass}
                  >
                    {displayData.confirmText}
                  </button>
                </div>
              </Dialog.Panel>
            </Transition.Child>
          </div>
        </div>
      </Dialog>
    </Transition>
  )
}