'use client'

import { useState } from 'react'
import { FiX } from 'react-icons/fi'

interface BanModalProps {
    banRef: React.RefObject<HTMLDivElement>
    isOpen: boolean
    userName: string
    userId: string
    roomId: string
    onClose: () => void
    onBan: (durationMs: number | null, reason: string) => Promise<void>
    t: (key: string) => string
    banClosing: boolean
    banEntering: boolean
}

const BAN_DURATIONS = [
    { key: '5min', value: 5 * 60 * 1000 },
    { key: '10min', value: 10 * 60 * 1000 },
    { key: '30min', value: 30 * 60 * 1000 },
    { key: '1hour', value: 60 * 60 * 1000 },
    { key: '1day', value: 24 * 60 * 60 * 1000 },
    { key: '7days', value: 7 * 24 * 60 * 60 * 1000 },
    { key: 'permanent', value: null },
]

export default function BanModal({ banRef, isOpen, userName, userId, roomId, onClose, onBan, t, banClosing, banEntering }: BanModalProps) {
    const [selectedDuration, setSelectedDuration] = useState<number | null>(5 * 60 * 1000)
    const [reason, setReason] = useState('')
    const [isBanning, setIsBanning] = useState(false)

    if (!isOpen) return null

    const handleBan = async () => {
        setIsBanning(true)
        try {
            await onBan(selectedDuration, reason.trim())
            onClose()
            setReason('')
            setSelectedDuration(5 * 60 * 1000)
        } catch (error) {
            console.error('Failed to ban user:', error)
        } finally {
            setIsBanning(false)
        }
    }

    return (
        <div
            className={`fixed inset-0 z-[600] flex items-center justify-center p-3 transition-[opacity] duration-200 ease-[cubic-bezier(0.56,0.12,0.12,0.98)] ${banClosing || banEntering ? 'opacity-0 pointer-events-none' : 'opacity-100'
                }`}
        >
            <div className="absolute inset-0 bg-black/60" />
            <div
                ref={banRef}
                className={`relative w-full max-w-md mx-4 bg-white dark:bg-[#0c0d0e] rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl transform-gpu transition-[opacity,transform] duration-200 ease-[cubic-bezier(0.56,0.12,0.12,0.98)] ${banClosing || banEntering ? 'opacity-0 scale-95' : 'opacity-100 scale-100'
                    }`}
            >
                <button
                    type="button"
                    onClick={onClose}
                    className="absolute top-3 right-3 w-7 h-7 rounded-full inline-flex items-center justify-center hover:bg-gray-100 dark:hover:bg-[#1a1c21] transition-colors"
                    aria-label={t('room.ban.modal.cancel')}
                >
                    <FiX className="w-4.5 h-4.5 text-[#525661] dark:text-gray-200" />
                </button>

                <div className="p-6">
                    <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
                        {t('room.ban.modal.title')}
                    </h2>
                    <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">
                        {t('room.ban.modal.targetUser')}<span className="font-semibold text-gray-900 dark:text-white">{userName}</span>
                    </p>

                    <div className="mb-6">
                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            {t('room.ban.modal.duration')}
                        </label>
                        <select
                            value={selectedDuration === null ? 'permanent' : String(selectedDuration)}
                            onChange={(e) => {
                                const value = e.target.value
                                setSelectedDuration(value === 'permanent' ? null : Number(value))
                            }}
                            className="w-full px-3 py-2 text-sm border border-gray-200 dark:border-gray-800 rounded-lg bg-white dark:bg-[#1a1c21] text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        >
                            {BAN_DURATIONS.map((duration) => (
                                <option
                                    key={duration.key}
                                    value={duration.value === null ? 'permanent' : String(duration.value)}
                                >
                                    {t(`room.ban.modal.durations.${duration.key}`)}
                                </option>
                            ))}
                        </select>
                    </div>

                    <div className="mb-6">
                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            {t('room.ban.modal.reason')}
                        </label>
                        <textarea
                            value={reason}
                            onChange={(e) => setReason(e.target.value)}
                            placeholder={t('room.ban.modal.reasonPlaceholder')}
                            className="w-full px-3 py-2 text-sm border border-gray-200 dark:border-gray-800 rounded-lg bg-white dark:bg-[#1a1c21] text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
                            rows={3}
                        />
                    </div>

                    <div className="flex gap-3">
                        <button
                            type="button"
                            onClick={onClose}
                            className="flex-1 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-[#1a1c21] rounded-lg hover:bg-gray-200 dark:hover:bg-[#25272b] transition-colors"
                        >
                            {t('room.ban.modal.cancel')}
                        </button>
                        <button
                            type="button"
                            onClick={handleBan}
                            disabled={isBanning}
                            className="flex-1 px-4 py-2 text-sm font-medium text-white bg-red-500 rounded-lg hover:bg-red-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                        >
                            {isBanning ? t('room.ban.modal.processing') : selectedDuration === null ? t('room.ban.modal.permanentBan') : t('room.ban.modal.mute')}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    )
}