'use client'

import Image from 'next/image'
import Link from 'next/link'
import { FiUser, FiArrowRight, FiEye } from 'react-icons/fi'
import { MdVerified } from 'react-icons/md'
import { RiShareForwardLine } from 'react-icons/ri'
import { FiMoreVertical } from 'react-icons/fi'
import { useTranslation } from 'react-i18next'
import type { CatchVideo } from './types'

interface VideoInfoCardProps {
    video: CatchVideo
    formatViews: (views: number) => string
    formatDate: (dateStr: string) => string
}

export default function VideoInfoCard({
    video,
    formatViews,
    formatDate,
}: VideoInfoCardProps) {
    const { t } = useTranslation()

    return (
        <div className="bg-transparent dark:bg-transparent mb-4">
            {/* 頂部：箭頭、頭像、使用者名、觀看次數、分享和更多按鈕 */}
            <div className="flex items-center gap-3 mb-4">
                <button className="w-8 h-8 flex items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full transition-colors flex-shrink-0">
                    <FiArrowRight className="w-5 h-5 text-gray-600 dark:text-gray-400" />
                </button>
                {video.userId ? (
                    <Link
                        href={`/user/${encodeURIComponent(video.userId)}`}
                        className="relative w-10 h-10 rounded-full overflow-hidden bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 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-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 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="min-w-0 flex-1">
                    {video.userId ? (
                        <Link
                            href={`/user/${encodeURIComponent(video.userId)}`}
                            className="font-semibold text-black dark:text-white text-sm truncate flex items-center gap-1.5 select-none"
                        >
                            {video.nickname}
                            {video.verified && (
                                <MdVerified
                                    className="w-4 h-4 text-cyan-500 dark:text-cyan-400 flex-shrink-0"
                                    title={t('catch.verified')}
                                />
                            )}
                        </Link>
                    ) : (
                        <div className="font-semibold text-black dark:text-white text-sm truncate flex items-center gap-1.5 select-none">
                            {video.nickname}
                            {video.verified && (
                                <MdVerified
                                    className="w-4 h-4 text-cyan-500 dark:text-cyan-400 flex-shrink-0"
                                    title={t('catch.verified')}
                                />
                            )}
                        </div>
                    )}
                    <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5 flex items-center gap-1 select-none">
                        <FiEye className="w-3 h-3" />
                        {formatViews(video.views)}
                    </div>
                </div>
                <div className="flex items-center gap-2 flex-shrink-0">
                    <button className="w-8 h-8 flex items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full transition-colors">
                        <RiShareForwardLine className="w-5 h-5 text-gray-600 dark:text-gray-400" />
                    </button>
                    <button className="w-8 h-8 flex items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full transition-colors">
                        <FiMoreVertical className="w-5 h-5 text-gray-600 dark:text-gray-400" />
                    </button>
                </div>
            </div>

            {/* 標題和標籤 */}
            <div className="mb-4">
                <h1 className="text-base font-semibold text-black dark:text-white mb-2 leading-relaxed">
                    {video.title}
                </h1>
                {video.tags && video.tags.length > 0 && (
                    <div className="flex flex-wrap gap-2">
                        {video.tags.map((tag, index) => (
                            <span
                                key={index}
                                className="text-xs text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-neutral-900 px-2 py-1 rounded"
                            >
                                {tag}
                            </span>
                        ))}
                    </div>
                )}
            </div>
        </div>
    )
}