'use client'

import Image from 'next/image'
import Link from 'next/link'
import { FiPlay, FiClock, FiEye } from 'react-icons/fi'
import { MdVerified } from 'react-icons/md'
import { useTranslation } from 'react-i18next'
import type { CatchVideo } from './types'

interface RelatedVideosProps {
    videos: CatchVideo[]
    currentVideoId: string
    formatViews: (views: number) => string
    formatDate: (dateStr: string) => string
    creatorName?: string
}

export default function RelatedVideos({
    videos,
    currentVideoId,
    formatViews,
    formatDate,
    creatorName,
}: RelatedVideosProps) {
    const { t } = useTranslation()

    return (
        <div className="flex-1 flex flex-col min-h-0 mb-4 bg-white dark:bg-[#0c0d0e] rounded-2xl shadow-lg border border-gray-100 dark:border-gray-800">
            <h2 className="text-base font-semibold text-black dark:text-white px-5 pt-5 pb-4 flex-shrink-0 sticky top-0 bg-white dark:bg-[#0c0d0e] z-10">
                {creatorName ? `${creatorName}님의 Catch` : '相關影片'}
            </h2>
            <div className="flex-1 overflow-y-auto px-5 pb-5 min-h-0 hide-scrollbar">
                <div>
                    {videos.map((video, index) => (
                        <Link
                            key={video.id}
                            href={`/catch/${video.id}`}
                            className={`flex gap-3 hover:bg-gray-50 dark:hover:bg-gray-800/50 rounded-lg p-2 transition-colors group ${index === 0 ? '' : '-m-2 mt-4'}`}
                        >
                            <div className="relative w-32 h-56 flex-shrink-0 rounded-lg overflow-hidden bg-gray-200 dark:bg-neutral-900">
                                {video.thumb ? (
                                    <Image
                                        src={video.thumb}
                                        alt={video.title}
                                        fill
                                        className="group-hover:scale-105 transition-transform duration-200"
                                        unoptimized
                                    />
                                ) : (
                                    <div className="absolute inset-0 flex items-center justify-center">
                                        <FiPlay className="w-6 h-6 text-gray-400" />
                                    </div>
                                )}
                                <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center">
                                    <div className="opacity-0 group-hover:opacity-100 transition-opacity">
                                        <div className="w-12 h-12 rounded-full bg-white/90 flex items-center justify-center">
                                            <FiPlay className="w-6 h-6 text-black ml-1" />
                                        </div>
                                    </div>
                                </div>
                                {video.status === 'adult' && (
                                    <div className="absolute top-2 right-2 bg-red-500 text-white px-2 py-0.5 rounded text-xs font-semibold">
                                        成人
                                    </div>
                                )}
                            </div>
                            <div className="flex-1 min-w-0 flex flex-col justify-between">
                                <div>
                                    <h3 className="text-sm font-semibold text-black dark:text-white line-clamp-2 mb-2 group-hover:text-blue-500 dark:group-hover:text-blue-400 transition-colors">
                                        {video.title}
                                    </h3>
                                    <div className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400 mb-1">
                                        <span className="flex items-center gap-1">
                                            <FiEye className="w-3 h-3" />
                                            {formatViews(video.views)}
                                        </span>
                                        <span>•</span>
                                        <span className="flex items-center gap-1">
                                            <FiClock className="w-3 h-3" />
                                            {formatDate(video.startAt)}
                                        </span>
                                    </div>
                                </div>
                                <div className="flex items-center gap-2 mt-2">
                                    <div className="relative w-6 h-6 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">
                                                <span className="text-xs text-gray-400">?</span>
                                            </div>
                                        )}
                                    </div>
                                    <span className="text-xs text-gray-600 dark:text-gray-400 truncate flex items-center gap-1">
                                        @{video.nickname}
                                        {video.verified && (
                                            <MdVerified
                                                className="w-3.5 h-3.5 text-cyan-500 dark:text-cyan-400 flex-shrink-0"
                                                title={t('catch.verified')}
                                            />
                                        )}
                                    </span>
                                </div>
                            </div>
                        </Link>
                    ))}
                </div>
            </div>
        </div>
    )
}