'use client'

import Image from 'next/image'
import Link from 'next/link'
import { useState } from 'react'
import { FiUser, FiPlus } from 'react-icons/fi'
import { MdVerified } from 'react-icons/md'
import { useTranslation } from 'react-i18next'
import MobileVideoControls from './MobileVideoControls'
import MobileInteractionButtons from './MobileInteractionButtons'
import CatchVideoPlayer from './CatchVideoPlayer'
import type { CatchVideo } from './types'

interface MobileVideoPlayerProps {
    video: CatchVideo
    isCurrent: boolean
    isPlaying: boolean
    volume: number
    isMuted: boolean
    showVolume: boolean
    onPlayToggle: () => void
    onMuteToggle: () => void
    onVolumeChange: (volume: number) => void
    onShowVolume: (show: boolean) => void
    onCommentsClick: () => void
    formatViews: (views: number) => string
    isLiked?: boolean
    onLikeClick?: () => void
    videoUrl?: string
    videoTitle?: string
    isCommentsOpen?: boolean
}

export default function MobileVideoPlayer({
    video,
    isCurrent,
    isPlaying,
    volume,
    isMuted,
    showVolume,
    onPlayToggle,
    onMuteToggle,
    onVolumeChange,
    onShowVolume,
    onCommentsClick,
    formatViews,
    isLiked = false,
    onLikeClick,
    videoUrl = '',
    videoTitle = '',
    isCommentsOpen = false,
}: MobileVideoPlayerProps) {
    const { t } = useTranslation()
    const [controlsVisible, setControlsVisible] = useState(true)

    return (
        <div className="relative w-full flex items-center justify-center bg-black"
            style={{
                height: 'calc(100vh - 65px)',
                minHeight: 'calc(100vh - 65px)',
                scrollSnapAlign: 'start',
                scrollSnapStop: 'always',
            }}
        >
            {/* 視頻播放器 */}
            <div className="absolute inset-0 flex items-center justify-center">
                <div className="relative w-full h-full">
                    <CatchVideoPlayer
                        video={video}
                        src={video.src}
                        isCurrent={isCurrent}
                        isPlaying={isPlaying}
                        volume={volume}
                        isMuted={isMuted}
                        onPlayStateChange={(playing) => {
                            if (playing !== isPlaying) {
                                onPlayToggle()
                            }
                        }}
                        onVolumeChange={onVolumeChange}
                        onControlsVisibilityChange={setControlsVisible}
                    />

                    {/* 播放和音量控制 */}
                    <MobileVideoControls
                        isCurrent={isCurrent}
                        isPlaying={isPlaying}
                        volume={volume}
                        isMuted={isMuted}
                        showVolume={showVolume}
                        onPlayToggle={onPlayToggle}
                        onMuteToggle={onMuteToggle}
                        onVolumeChange={onVolumeChange}
                        onShowVolume={onShowVolume}
                        controlsVisible={controlsVisible}
                    />

                    {/* 成人限制標籤 */}
                    {video.status === 'adult' && (
                        <div className="absolute top-16 right-4 bg-red-500 text-white px-2 py-1 rounded text-xs font-semibold z-20">
                            成人
                        </div>
                    )}

                    {/* 視頻標題覆蓋（底部）- 僅目前影片顯示 */}
                    {isCurrent && (
                        <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4 pb-5 z-20">
                            <div className="flex items-center gap-3 mb-2">
                                {video.userId ? (
                                    <Link
                                        href={`/user/${encodeURIComponent(video.userId)}`}
                                        className="relative w-10 h-10 rounded-full overflow-hidden bg-gray-200 dark:bg-neutral-900 flex-shrink-0 hover:opacity-80 transition-opacity"
                                    >
                                        {video.profile ? (
                                            <Image
                                                src={video.profile}
                                                alt={video.nickname}
                                                fill
                                                className="pointer-events-none"
                                                unoptimized
                                            />
                                        ) : (
                                            <div className="absolute inset-0 flex items-center justify-center">
                                                <FiUser className="w-5 h-5 text-gray-400" />
                                            </div>
                                        )}
                                    </Link>
                                ) : (
                                    <div className="relative w-10 h-10 rounded-full overflow-hidden bg-gray-200 dark:bg-neutral-900 flex-shrink-0">
                                        {video.profile ? (
                                            <Image
                                                src={video.profile}
                                                alt={video.nickname}
                                                fill
                                                className="pointer-events-none"
                                                unoptimized
                                            />
                                        ) : (
                                            <div className="absolute inset-0 flex items-center justify-center">
                                                <FiUser className="w-5 h-5 text-gray-400" />
                                            </div>
                                        )}
                                    </div>
                                )}
                                <div className="w-auto">
                                    {video.userId ? (
                                        <Link
                                            href={`/user/${encodeURIComponent(video.userId)}`}
                                            className="text-white font-semibold text-sm flex items-center gap-1.5"
                                        >
                                            @{video.nickname}
                                            {video.verified && (
                                                <MdVerified
                                                    className="w-4 h-4 text-cyan-400 flex-shrink-0"
                                                    title={t('catch.verified')}
                                                />
                                            )}
                                        </Link>
                                    ) : (
                                        <div className="text-white font-semibold text-sm flex items-center gap-1.5">
                                            @{video.nickname}
                                            {video.verified && (
                                                <MdVerified
                                                    className="w-4 h-4 text-cyan-400 flex-shrink-0"
                                                    title={t('catch.verified')}
                                                />
                                            )}
                                        </div>
                                    )}
                                    {video.followers !== undefined && (
                                        <div className="text-xs text-white/70 mt-0.5">
                                            {formatViews(video.followers)} {t('explore.followers')}
                                        </div>
                                    )}
                                </div>
                                <button className="px-4 py-1.5 bg-white text-black hover:bg-gray-100 rounded-full text-sm font-semibold inline-flex items-center gap-1.5 transition-colors">
                                    {t('explore.follow')}
                                </button>
                            </div>
                            <p className="text-white text-sm line-clamp-2">
                                {video.title}
                            </p>
                        </div>
                    )}
                </div>
            </div>

            {/* 右側互動按鈕 - 僅目前影片顯示 */}
            {isCurrent && (
                <MobileInteractionButtons
                    likes={video.likes || 0}
                    comments={video.comments || 0}
                    onCommentsClick={onCommentsClick}
                    formatViews={formatViews}
                    isLiked={isLiked}
                    onLikeClick={onLikeClick}
                    videoUrl={videoUrl}
                    videoTitle={videoTitle}
                    isCommentsOpen={isCommentsOpen}
                />
            )}
        </div>
    )
}