'use client'

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

interface DesktopVideoInfoProps {
    video: CatchVideo
    formatViews: (views: number) => string
}

export default function DesktopVideoInfo({
    video,
    formatViews,
}: DesktopVideoInfoProps) {
    const { t } = useTranslation()

    return (
        <div className="flex flex-col gap-4">
            {/* 自動配音標籤 */}
            <div className="text-white/80 text-sm font-medium">
                自動配音
            </div>

            {/* 創作者資訊 */}
            <div className="flex items-center gap-3">
                {video.userId ? (
                    <Link
                        href={`/user/${encodeURIComponent(video.userId)}`}
                        className="relative w-12 h-12 rounded-full overflow-hidden bg-gradient-to-br from-gray-200 to-gray-300 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">
                                <span className="text-gray-400 text-xl">👤</span>
                            </div>
                        )}
                    </Link>
                ) : (
                    <div className="relative w-12 h-12 rounded-full overflow-hidden bg-gradient-to-br from-gray-200 to-gray-300 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-gray-400 text-xl">👤</span>
                            </div>
                        )}
                    </div>
                )}
                <div className="flex-1 min-w-0">
                    {video.userId ? (
                        <Link
                            href={`/user/${encodeURIComponent(video.userId)}`}
                            className="text-white font-semibold text-base flex items-center gap-1.5"
                        >
                            @{video.nickname}
                            {video.verified && (
                                <MdVerified
                                    className="w-5 h-5 text-cyan-400 flex-shrink-0"
                                    title={t('catch.verified')}
                                />
                            )}
                        </Link>
                    ) : (
                        <div className="text-white font-semibold text-base flex items-center gap-1.5">
                            @{video.nickname}
                            {video.verified && (
                                <MdVerified
                                    className="w-5 h-5 text-cyan-400 flex-shrink-0"
                                    title={t('catch.verified')}
                                />
                            )}
                        </div>
                    )}
                </div>
                <button className="px-5 py-2 bg-white text-black hover:bg-gray-100 rounded-full text-sm font-semibold transition-colors flex-shrink-0">
                    訂閱
                </button>
            </div>

            {/* 視頻標題 */}
            <div className="text-white text-base leading-relaxed">
                {video.title}
            </div>
        </div>
    )
}