'use client'

import { FaPlay, FaVolumeUp, FaVolumeMute, FaVolumeDown } from 'react-icons/fa'
import { FiPause } from 'react-icons/fi'
import { useTranslation } from 'react-i18next'

interface MobileVideoControlsProps {
    isCurrent: boolean
    isPlaying: boolean
    volume: number
    isMuted: boolean
    showVolume: boolean
    onPlayToggle: () => void
    onMuteToggle: () => void
    onVolumeChange: (volume: number) => void
    onShowVolume: (show: boolean) => void
    controlsVisible?: boolean
}

export default function MobileVideoControls({
    isCurrent,
    isPlaying,
    volume,
    isMuted,
    showVolume,
    onPlayToggle,
    onMuteToggle,
    onVolumeChange,
    onShowVolume,
    controlsVisible = true,
}: MobileVideoControlsProps) {
    const { t } = useTranslation()
    if (!isCurrent) return null
    const volumePct = Math.round((isMuted ? 0 : volume) * 100)
    const sliderStyle = { ['--p' as any]: `${volumePct}%` }

    return (
        <>
            {/* 播放控制按鈕 */}
            <div
                className={`absolute top-4 left-4 z-20 transition-[opacity,transform] duration-200 ease-out ${controlsVisible ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2 pointer-events-none'
                    }`}
            >
                <button
                    onClick={(e) => {
                        e.stopPropagation()
                        onPlayToggle()
                    }}
                    className="w-[48px] h-[48px] flex items-center justify-center bg-black/50 rounded-full text-white hover:bg-black/70 transition-colors"
                    aria-label={isPlaying ? t('room.player.pause') : t('room.player.play')}
                >
                    {isPlaying ? (
                        <FiPause className="w-5 h-5" />
                    ) : (
                        <FaPlay className="w-5 h-5 ml-1" />
                    )}
                </button>
            </div>

            {/* 音量控制 */}
            <div
                className={`absolute top-4 left-16 flex items-center z-20 ml-2 transition-[opacity,transform] duration-200 ease-out ${controlsVisible ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2 pointer-events-none'
                    }`}
                onMouseEnter={() => onShowVolume(true)}
                onMouseLeave={() => onShowVolume(false)}
                onClick={(e) => {
                    e.stopPropagation()
                    onShowVolume(!showVolume)
                }}
            >
                <div className="flex max-h-12">
                    <div
                        className={`relative flex items-center gap-3 h-12 flex-1 min-w-0 max-w-[168px] rounded-[50px] ${showVolume ? 'pointer-events-auto' : 'pointer-events-none'}`}
                    >
                        {/* 背景膠囊 scrim：48px -> 100% */}
                        <div
                            className={`absolute h-12 z-0 bg-black/30 rounded-[50px] transition-[width] duration-200 ease-linear ${showVolume ? 'w-full' : 'w-12'}`}
                            aria-hidden="true"
                        />

                        {/* mute icon（永遠可點） */}
                        <button
                            className="relative z-10 pointer-events-auto cursor-pointer flex items-center min-w-9 justify-end bg-transparent border-none outline-none py-3"
                            aria-label={isMuted ? t('room.player.unmute') : t('room.player.mute')}
                            title={isMuted ? t('room.player.unmute') : t('room.player.mute')}
                            onClick={(e) => {
                                e.stopPropagation()
                                onMuteToggle()
                            }}
                        >
                            <span className="text-white">
                                {isMuted || volume === 0 ? (
                                    <FaVolumeMute className="w-5 h-5" />
                                ) : volume < 0.5 ? (
                                    <FaVolumeDown className="w-5 h-5" />
                                ) : (
                                    <FaVolumeUp className="w-5 h-5" />
                                )}
                            </span>
                        </button>

                        {/* slider container（展開才可點 + 展開動畫） */}
                        <div
                            className={`relative z-10 flex items-center min-w-0 pr-3 transition-[visibility,opacity,flex-basis] ${showVolume ? 'visible opacity-100 basis-full duration-300' : 'invisible opacity-0 basis-0 duration-150'}`}
                            onClick={(e) => e.stopPropagation()}
                        >
                            <input
                                aria-label={t('room.player.volume')}
                                title={t('room.player.volume')}
                                type="range"
                                min={0}
                                max={100}
                                value={volumePct}
                                style={sliderStyle}
                                className="flex-grow min-w-0 bg-transparent cursor-pointer appearance-none py-1
                                  [&::-webkit-slider-runnable-track]:h-[2px] [&::-webkit-slider-runnable-track]:rounded-[12px]
                                  [&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_right,#fff_0,#fff_var(--p),rgba(255,255,255,0.3)_var(--p),rgba(255,255,255,0.3)_100%)]
                                  [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:mt-[-7px]
                                  [&::-moz-range-track]:h-[2px] [&::-moz-range-track]:rounded-[12px]
                                  [&::-moz-range-track]:bg-[linear-gradient(to_right,#fff_0,#fff_var(--p),rgba(255,255,255,0.3)_var(--p),rgba(255,255,255,0.3)_100%)]
                                  [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:border-0"
                                onChange={(e) => onVolumeChange(e.currentTarget.valueAsNumber / 100)}
                            />
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}