'use client'

import { clampChatFontLevel } from '@/lib/chat/chatFontLevel'
import type { ChatSettingsView } from '@/lib/chat/chatSettingsView'

import { useEffect } from 'react'
import { FiChevronLeft, FiChevronRight, FiMinus, FiPlus, FiX } from 'react-icons/fi'
import { FaCrown } from 'react-icons/fa'

export default function SettingsPanel({
    panelRef,
    maxH,
    t,
    settingsClosing,
    settingsEntering,
    settingsView,
    setSettingsView,
    closeSettings,
    clearChat,
    popoutChat,
    chatFontLevel,
    setChatFontLevel,
    chatFontSizePx,
    chatLineHeightPx,
    emojiShow,
    setEmojiShow,
    isPopout = false,
    streamerName,
    highlightMentions,
    setHighlightMentions,
    hideSystemMessages,
    setHideSystemMessages,
    showGiftMessages,
    setShowGiftMessages,
    /** 未登入時隱藏「個人設定」「表情顯示方式」 */
    showUserPreferences = true,
}: {
    panelRef: React.RefObject<HTMLDivElement>
    maxH: number | null
    t: (key: string) => string
    settingsClosing: boolean
    settingsEntering: boolean
    settingsView: ChatSettingsView
    setSettingsView: (v: ChatSettingsView) => void
    closeSettings: () => void
    clearChat: () => void
    popoutChat: () => void
    chatFontLevel: number
    setChatFontLevel: React.Dispatch<React.SetStateAction<number>>
    chatFontSizePx: number
    chatLineHeightPx: number
    emojiShow: boolean
    setEmojiShow: (v: boolean) => void
    isPopout?: boolean
    streamerName?: string
    highlightMentions: boolean
    setHighlightMentions: (v: boolean) => void
    hideSystemMessages: boolean
    setHideSystemMessages: (v: boolean) => void
    showGiftMessages: boolean
    setShowGiftMessages: (v: boolean) => void
    showUserPreferences?: boolean
}) {
    useEffect(() => {
        if (!showUserPreferences && settingsView !== 'root') {
            setSettingsView('root')
        }
    }, [showUserPreferences, settingsView, setSettingsView])

    return (
        <div
            ref={panelRef}
            style={maxH ? { maxHeight: `${maxH}px` } : undefined}
            className={`absolute top-full right-0 mt-2 z-[125] w-[280px] max-w-[calc(100vw-24px)] rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#0c0d0e] shadow-lg overflow-hidden flex flex-col origin-top-right transform-gpu transition-[opacity,transform] duration-200 ease-[cubic-bezier(0.56,0.12,0.12,0.98)] ${settingsClosing || settingsEntering ? 'opacity-0 scale-95 pointer-events-none' : 'opacity-100 scale-100'
                }`}
        >
            <div className="relative flex items-center h-12 px-4 flex-shrink-0">
                {settingsView !== 'root' && (
                    <button
                        type="button"
                        onClick={() => setSettingsView('root')}
                        aria-label={t('room.settings.back')}
                        className="w-6 h-6 mr-2 rounded-md inline-flex items-center justify-center hover:bg-gray-100 dark:hover:bg-[#1a1c21] transition-colors"
                    >
                        <FiChevronLeft className="w-5 h-5 text-[#525661] dark:text-gray-200" />
                    </button>
                )}
                <h3 className="text-base font-semibold text-gray-900 dark:text-white">
                    {settingsView === 'root'
                        ? t('room.settings.title')
                        : settingsView === 'emoji'
                            ? t('room.settings.emojiDisplay')
                            : settingsView === 'gift'
                              ? t('room.settings.gift')
                              : t('room.settings.personal')}
                </h3>
                <button
                    type="button"
                    aria-label={t('room.close')}
                    onClick={() => closeSettings()}
                    className="absolute top-2 right-2 w-8 h-8 rounded-full inline-flex items-center justify-center hover:bg-gray-100 dark:hover:bg-[#1a1c21] transition-colors"
                >
                    <FiX className="w-5 h-5 text-gray-600 dark:text-gray-300" />
                </button>
            </div>

            <div className="flex-1 min-h-0 overflow-y-auto hide-scrollbar pb-4">
                {settingsView === 'root' ? (
                    <>
                        {showUserPreferences && (
                            <>
                                <ul>
                                    <li>
                                        <button
                                            type="button"
                                            onClick={() => setSettingsView('emoji')}
                                    className="w-full text-left px-4 py-3 text-sm text-[#525661] dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-[#1a1c21] transition-colors flex items-center"
                                >
                                    <span className="flex-1">{t('room.settings.emojiDisplay')}</span>
                                    <FiChevronRight className="w-5 h-5 text-gray-400" />
                                </button>
                            </li>
                            <li>
                                <button
                                    type="button"
                                    onClick={() => setSettingsView('personal')}
                                    className="w-full text-left px-4 py-3 text-sm text-[#525661] dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-[#1a1c21] transition-colors flex items-center"
                                >
                                    <span className="flex-1">{t('room.settings.personal')}</span>
                                    <FiChevronRight className="w-5 h-5 text-gray-400" />
                                </button>
                                    </li>
                                </ul>

                                <div className="h-px bg-gray-100 dark:bg-neutral-900 mx-4" />
                            </>
                        )}

                        <ul>
                            <li>
                                <button
                                    type="button"
                                    onClick={() => setSettingsView('gift')}
                                    className="w-full text-left px-4 py-3 text-sm text-[#525661] dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-[#1a1c21] transition-colors flex items-center"
                                >
                                    <span className="flex-1">{t('room.settings.gift')}</span>
                                    <FiChevronRight className="w-5 h-5 text-gray-400" />
                                </button>
                            </li>
                        </ul>

                        <div className="h-px bg-gray-100 dark:bg-neutral-900 mx-4" />

                        <ul>
                            <li>
                                <button
                                    type="button"
                                    onClick={() => {
                                        clearChat()
                                        closeSettings()
                                    }}
                                    className="w-full text-left px-4 py-3 text-sm text-[#525661] dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-[#1a1c21] transition-colors"
                                >
                                    {t('room.settings.clearChat')}
                                </button>
                            </li>
                            {!isPopout && (
                                <li>
                                    <button
                                        type="button"
                                        onClick={() => {
                                            popoutChat()
                                            closeSettings()
                                        }}
                                        className="w-full text-left px-4 py-3 text-sm text-[#525661] dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-[#1a1c21] transition-colors"
                                    >
                                        {t('room.settings.popoutChat')}
                                    </button>
                                </li>
                            )}
                        </ul>

                        <div className="mt-2 px-4 pt-2">
                            <div className="flex items-center justify-between text-sm text-[#525661] dark:text-gray-200">
                                <span>{t('room.settings.chatSize')}</span>
                                <div className="relative inline-flex items-center">
                                    <button
                                        type="button"
                                        onClick={() => setChatFontLevel((v) => clampChatFontLevel(v - 1))}
                                        className="absolute left-0 top-1/2 -translate-y-1/2 w-6 h-6 inline-flex items-center justify-center text-gray-500 hover:bg-gray-100 dark:hover:bg-[#1a1c21] rounded"
                                        aria-label={t('room.settings.decreaseFont')}
                                    >
                                        <FiMinus className="w-4 h-4" />
                                    </button>
                                    <input
                                        readOnly
                                        value={chatFontLevel}
                                        className="w-[34px] h-[22px] mx-[22px] text-center text-xs border border-gray-300 dark:border-gray-700 rounded bg-white dark:bg-[#0c0d0e] text-gray-900 dark:text-gray-100"
                                    />
                                    <button
                                        type="button"
                                        onClick={() => setChatFontLevel((v) => clampChatFontLevel(v + 1))}
                                        className="absolute right-0 top-1/2 -translate-y-1/2 w-6 h-6 inline-flex items-center justify-center text-gray-500 hover:bg-gray-100 dark:hover:bg-[#1a1c21] rounded"
                                        aria-label={t('room.settings.increaseFont')}
                                    >
                                        <FiPlus className="w-4 h-4" />
                                    </button>
                                </div>
                            </div>

                            <div className="mt-3 p-4 rounded-lg bg-gray-50 dark:bg-[#15171b]">
                                <div style={{ fontSize: `${chatFontSizePx}px`, lineHeight: `${chatLineHeightPx}px` }}>
                                    <div className="inline-flex items-center gap-2">
                                        <span className="inline-flex items-center justify-center w-4 h-4 rounded-sm bg-orange-500 border border-orange-600 dark:border-orange-400 flex-shrink-0">
                                            <FaCrown className="w-2.5 h-2.5 text-white" />
                                        </span>
                                        <span className="font-semibold text-orange-600 dark:text-orange-400">{streamerName || 'NoiR'}</span>
                                        <span className="text-gray-700 dark:text-gray-200 font-semibold">{t('room.settings.previewMessage')}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </>
                ) : settingsView === 'gift' ? (
                    <ul>
                        <li>
                            <div className="relative">
                                <input
                                    id="st1_show_gift_messages"
                                    type="checkbox"
                                    className="peer sr-only"
                                    checked={showGiftMessages}
                                    onChange={(e) => setShowGiftMessages(e.target.checked)}
                                />
                                <label
                                    htmlFor="st1_show_gift_messages"
                                    className="flex items-center relative min-h-9 px-4 py-3 text-sm text-[#525661] dark:text-gray-200 cursor-pointer transition-colors hover:bg-gray-100 dark:hover:bg-[#1a1c21]
                                    after:content-[''] after:absolute after:right-4 after:w-10 after:h-[22px] after:rounded-full after:bg-[#e2e4e9] dark:after:bg-gray-700 after:transition-all
                                    before:content-[''] before:absolute before:right-[37px] before:w-4 before:h-4 before:rounded-full before:bg-white dark:before:bg-[#0c0d0e] before:shadow before:z-[1] before:transition-all
                                    peer-checked:after:bg-[#0182ff] peer-checked:hover:after:bg-[#0377e9] hover:after:bg-[#dadde2]
                                    peer-checked:before:right-[19px]"
                                >
                                    {t('room.settings.giftOptions.showGiftMessages')}
                                </label>
                            </div>
                        </li>
                    </ul>
                ) : settingsView === 'emoji' ? (
                    <ul>
                        <li>
                            <div className="relative">
                                <input
                                    id="st1_emoticon"
                                    type="checkbox"
                                    className="peer sr-only"
                                    checked={emojiShow}
                                    onChange={(e) => setEmojiShow(e.target.checked)}
                                />
                                <label
                                    htmlFor="st1_emoticon"
                                    className="flex items-center relative min-h-9 px-4 py-3 text-sm text-[#525661] dark:text-gray-200 cursor-pointer transition-colors hover:bg-gray-100 dark:hover:bg-[#1a1c21]
                                    after:content-[''] after:absolute after:right-4 after:w-10 after:h-[22px] after:rounded-full after:bg-[#e2e4e9] dark:after:bg-gray-700 after:transition-all
                                    before:content-[''] before:absolute before:right-[37px] before:w-4 before:h-4 before:rounded-full before:bg-white dark:before:bg-[#0c0d0e] before:shadow before:z-[1] before:transition-all
                                    peer-checked:after:bg-[#0182ff] peer-checked:hover:after:bg-[#0377e9] hover:after:bg-[#dadde2]
                                    peer-checked:before:right-[19px]"
                                >
                                    {t('room.settings.emojiOptions.view')}
                                </label>
                            </div>
                        </li>
                    </ul>
                ) : settingsView === 'personal' ? (
                    <ul>
                        <li>
                            <div className="relative">
                                <input
                                    id="st1_highlight_mentions"
                                    type="checkbox"
                                    className="peer sr-only"
                                    checked={highlightMentions}
                                    onChange={(e) => setHighlightMentions(e.target.checked)}
                                />
                                <label
                                    htmlFor="st1_highlight_mentions"
                                    className="flex items-center relative min-h-9 px-4 py-3 text-sm text-[#525661] dark:text-gray-200 cursor-pointer transition-colors hover:bg-gray-100 dark:hover:bg-[#1a1c21]
                                    after:content-[''] after:absolute after:right-4 after:w-10 after:h-[22px] after:rounded-full after:bg-[#e2e4e9] dark:after:bg-gray-700 after:transition-all
                                    before:content-[''] before:absolute before:right-[37px] before:w-4 before:h-4 before:rounded-full before:bg-white dark:before:bg-[#0c0d0e] before:shadow before:z-[1] before:transition-all
                                    peer-checked:after:bg-[#0182ff] peer-checked:hover:after:bg-[#0377e9] hover:after:bg-[#dadde2]
                                    peer-checked:before:right-[19px]"
                                >
                                    {t('room.settings.personalOptions.highlightMentions')}
                                </label>
                            </div>
                        </li>
                        <li>
                            <div className="relative">
                                <input
                                    id="st1_hide_system_messages"
                                    type="checkbox"
                                    className="peer sr-only"
                                    checked={hideSystemMessages}
                                    onChange={(e) => setHideSystemMessages(e.target.checked)}
                                />
                                <label
                                    htmlFor="st1_hide_system_messages"
                                    className="flex items-center relative min-h-9 px-4 py-3 text-sm text-[#525661] dark:text-gray-200 cursor-pointer transition-colors hover:bg-gray-100 dark:hover:bg-[#1a1c21]
                                    after:content-[''] after:absolute after:right-4 after:w-10 after:h-[22px] after:rounded-full after:bg-[#e2e4e9] dark:after:bg-gray-700 after:transition-all
                                    before:content-[''] before:absolute before:right-[37px] before:w-4 before:h-4 before:rounded-full before:bg-white dark:before:bg-[#0c0d0e] before:shadow before:z-[1] before:transition-all
                                    peer-checked:after:bg-[#0182ff] peer-checked:hover:after:bg-[#0377e9] hover:after:bg-[#dadde2]
                                    peer-checked:before:right-[19px]"
                                >
                                    {t('room.settings.personalOptions.hideSystemMessages')}
                                </label>
                            </div>
                        </li>
                    </ul>
                ) : null}
            </div>
        </div>
    )
}