'use client'

import { FiAlertCircle, FiInfo, FiX } from 'react-icons/fi'
import { useTranslation } from 'react-i18next'

type Severity = 'info' | 'warning' | 'danger'

interface ConfirmModalProps {
    confirmRef: React.RefObject<HTMLDivElement>
    isOpen: boolean
    title: string
    message: string
    note?: string
    confirmText?: string
    cancelText?: string
    onClose: () => void
    onConfirm: () => void
    confirmClosing: boolean
    confirmEntering: boolean
    severity?: Severity
    /** 僅提示：只顯示一顆確定按鈕（黑白主色） */
    alertOnly?: boolean
}

const overlayMotion =
    'transition-[opacity] duration-200 ease-[cubic-bezier(0.56,0.12,0.12,0.98)]'
const panelMotion =
    'transform-gpu transition-[opacity,transform] duration-200 ease-[cubic-bezier(0.56,0.12,0.12,0.98)]'

function AlertIcon({ severity }: { severity: Severity }) {
    const isWarning = severity === 'warning' || severity === 'danger'
    const Icon = isWarning ? FiAlertCircle : FiInfo
    return (
        <span
            className={`inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full ${
                isWarning
                    ? 'bg-amber-50 text-amber-700 ring-1 ring-amber-200/80 dark:bg-amber-500/10 dark:text-amber-300 dark:ring-amber-400/20'
                    : 'bg-gray-100 text-gray-600 ring-1 ring-gray-200/80 dark:bg-white/10 dark:text-gray-200 dark:ring-white/15'
            }`}
            aria-hidden
        >
            <Icon className="h-5 w-5" strokeWidth={2} />
        </span>
    )
}

export default function ConfirmModal({
    confirmRef,
    isOpen,
    title,
    message,
    note,
    confirmText,
    cancelText,
    onClose,
    onConfirm,
    confirmClosing,
    confirmEntering,
    severity = 'info',
    alertOnly = false,
}: ConfirmModalProps) {
    const { t } = useTranslation()
    const confirmLabel = confirmText ?? t('common.confirm')
    const cancelLabel = cancelText ?? t('common.cancel')

    if (!isOpen) return null

    const isHidden = confirmClosing || confirmEntering

    const getConfirmButtonClasses = () => {
        switch (severity) {
            case 'danger':
                return 'border-red-600 bg-red-600 text-white hover:bg-red-700 dark:border-red-500 dark:bg-red-600 dark:hover:bg-red-500'
            case 'warning':
                return 'border-orange-600 bg-orange-600 text-white hover:bg-orange-700 dark:border-orange-500 dark:bg-orange-600 dark:hover:bg-orange-500'
            case 'info':
            default:
                return 'border-gray-900 bg-gray-900 text-white hover:bg-gray-800 dark:border-white dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100'
        }
    }

    if (alertOnly) {
        return (
            <div
                className={`fixed inset-0 z-[600] flex items-center justify-center p-4 ${overlayMotion} ${
                    isHidden ? 'pointer-events-none opacity-0' : 'opacity-100'
                }`}
                role="presentation"
            >
                <div className="absolute inset-0 bg-black/60 backdrop-blur-[2px]" onClick={onClose} aria-hidden />
                <div
                    ref={confirmRef}
                    role="alertdialog"
                    aria-modal="true"
                    aria-labelledby="confirm-alert-title"
                    aria-describedby="confirm-alert-message"
                    className={`relative w-full max-w-[min(100%,380px)] overflow-hidden rounded-xl border border-gray-200 bg-white shadow-2xl dark:border-white/10 dark:bg-[#0c0d0e] ${panelMotion} ${
                        isHidden ? 'scale-95 opacity-0' : 'scale-100 opacity-100'
                    }`}
                >
                    <div className="flex items-start justify-between gap-3 border-b border-gray-100 px-5 py-4 dark:border-white/10">
                        <div className="flex min-w-0 items-start gap-3">
                            <AlertIcon severity={severity} />
                            <h3
                                id="confirm-alert-title"
                                className="pt-1.5 text-base font-semibold leading-snug text-gray-900 dark:text-white"
                            >
                                {title}
                            </h3>
                        </div>
                        <button
                            type="button"
                            onClick={onClose}
                            className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-gray-500 transition-colors hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-[#1a1c21]"
                            aria-label={t('common.close')}
                        >
                            <FiX className="h-4.5 w-4.5" aria-hidden />
                        </button>
                    </div>

                    <div className="px-5 py-4">
                        <p
                            id="confirm-alert-message"
                            className="text-sm leading-relaxed text-gray-600 dark:text-gray-300"
                        >
                            {message}
                        </p>
                        {note ? (
                            <p className="mt-3 text-xs leading-relaxed text-gray-500 dark:text-gray-400">
                                {note}
                            </p>
                        ) : null}
                    </div>

                    <div className="border-t border-gray-100 bg-gray-50/80 px-5 py-4 dark:border-white/10 dark:bg-white/[0.03]">
                        <button
                            type="button"
                            onClick={onClose}
                            className="inline-flex h-10 w-full items-center justify-center rounded-lg border border-gray-900 bg-gray-900 text-sm font-medium text-white transition-colors hover:bg-gray-800 dark:border-white dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100"
                        >
                            {confirmLabel}
                        </button>
                    </div>
                </div>
            </div>
        )
    }

    return (
        <div
            className={`fixed inset-0 z-[600] flex items-center justify-center p-3 ${overlayMotion} ${
                isHidden ? 'pointer-events-none opacity-0' : 'opacity-100'
            }`}
        >
            <div className="absolute inset-0 bg-black/60 backdrop-blur-[2px]" onClick={onClose} aria-hidden />
            <div
                ref={confirmRef}
                role="dialog"
                aria-modal="true"
                className={`relative w-full max-w-md mx-4 overflow-hidden rounded-xl border border-gray-200 bg-white shadow-2xl dark:border-white/10 dark:bg-[#0c0d0e] ${panelMotion} ${
                    isHidden ? 'opacity-0 scale-95' : 'opacity-100 scale-100'
                }`}
            >
                <button
                    type="button"
                    onClick={onClose}
                    className="absolute top-3 right-3 z-10 inline-flex h-8 w-8 items-center justify-center rounded-full hover:bg-gray-100 dark:hover:bg-[#1a1c21] transition-colors"
                    aria-label={t('common.close')}
                >
                    <FiX className="h-4.5 w-4.5 text-[#525661] dark:text-gray-200" />
                </button>

                <div className="p-6">
                    <h3 className="pr-8 text-lg font-semibold text-gray-900 dark:text-white mb-2">{title}</h3>
                    <p className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">{message}</p>
                    {note ? (
                        <p className="mt-3 text-xs leading-relaxed text-gray-500 dark:text-gray-400">{note}</p>
                    ) : null}

                    <div className="mt-6 flex items-center justify-end gap-2">
                        <button
                            type="button"
                            onClick={onClose}
                            className="inline-flex h-10 items-center justify-center rounded-lg border border-gray-200 bg-white px-4 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-white/20 dark:bg-transparent dark:text-gray-200 dark:hover:bg-white/10"
                        >
                            {cancelLabel}
                        </button>
                        <button
                            type="button"
                            onClick={onConfirm}
                            className={`inline-flex h-10 items-center justify-center rounded-lg border px-4 text-sm font-medium transition-colors ${getConfirmButtonClasses()}`}
                        >
                            {confirmLabel}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    )
}