/* eslint-disable import/prefer-default-export */
import { useTranslation } from 'react-i18next'
import { Modal } from 'react-responsive-modal'
import 'react-responsive-modal/styles.css'
import { Button } from '../Button'
import { Text } from '../Text'

type ConfirmationType = 'warning' | 'danger' | 'info'

interface ConfirmationProps {
  open: boolean
  conformationLabel: string
  title?: string
  loading?: boolean
  type?: ConfirmationType
  confirmLabel?: string
  cancelLabel?: string
  onClose: () => void
  onConfirm: () => void
}

const getIconByType = (type: ConfirmationType) => {
  switch (type) {
    case 'danger':
      return (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          className="h-6 w-6"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
          />
        </svg>
      )
    case 'info':
      return (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          className="h-6 w-6"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
          />
        </svg>
      )
    case 'warning':
    default:
      return (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          className="h-6 w-6"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
          />
        </svg>
      )
  }
}

const getIconContainerClass = (type: ConfirmationType) => {
  switch (type) {
    case 'danger':
      return 'bg-error/10 text-error'
    case 'info':
      return 'bg-info/10 text-info'
    case 'warning':
    default:
      return 'bg-warning/10 text-warning'
  }
}

const getConfirmButtonVariant = (type: ConfirmationType) => {
  switch (type) {
    case 'danger':
      return 'error'
    case 'info':
      return 'info'
    case 'warning':
    default:
      return 'primary'
  }
}

export const Confirmation = (props: ConfirmationProps) => {
  const {
    open,
    conformationLabel,
    title,
    loading,
    type = 'warning',
    confirmLabel,
    cancelLabel,
    onClose,
    onConfirm,
  } = props

  const { t } = useTranslation()

  return (
    <Modal
      open={open}
      onClose={onClose}
      center
      showCloseIcon={false}
      classNames={{
        modal: 'rounded-lg min-w-[20rem] max-w-[28rem] w-full !p-0 !m-4',
        overlay: 'bg-black/50',
      }}
    >
      <div className="flex flex-col">
        {/* Header */}
        <div className="flex items-center gap-3 px-6 py-4 border-b border-base-200">
          <div
            className={`flex items-center justify-center w-10 h-10 rounded-full ${getIconContainerClass(type)}`}
          >
            {getIconByType(type)}
          </div>
          <Text
            text={title || t('api.confirmation') || 'Confirm Action'}
            variant="h4"
            className="font-semibold text-neutral"
          />
        </div>

        {/* Body */}
        <div className="px-6 py-5">
          <Text
            text={conformationLabel}
            variant="p"
            className="text-neutral/80 leading-relaxed"
          />
        </div>

        {/* Footer */}
        <div className="flex justify-end items-center gap-3 px-6 py-4 bg-base-200/50 border-t border-base-200">
          <Button
            label={cancelLabel || t('api.cancel') || 'Cancel'}
            variant="ghost"
            isDisabled={loading}
            onClick={onClose}
            size="sm"
            className="min-w-[5rem]"
          />
          <Button
            label={confirmLabel || t('api.ok') || 'Confirm'}
            variant={getConfirmButtonVariant(type) as 'primary' | 'error' | 'info'}
            isLoading={loading}
            isDisabled={loading}
            onClick={onConfirm}
            size="sm"
            className="min-w-[5rem]"
          />
        </div>
      </div>
    </Modal>
  )
}