import { Link } from 'react-router-dom'
import { useTranslation } from 'react-i18next'

export default function PortalTopicRow({ thread, forumName, forumId, showForum = true }) {
    const { t } = useTranslation()
    const authorName = thread.user_name || t('thread.anonymous')
    const lastAuthorName = thread.last_post_user_name || authorName
    const lastPostAnchor = thread.last_post_id ? `#post-${thread.last_post_id}` : ''
    const authorLinkColor = thread.user_rank_color || thread.user_group_color
    const authorLinkStyle = authorLinkColor
        ? { '--bb-user-link-color': authorLinkColor }
        : undefined
    const lastAuthorLinkColor = thread.last_post_user_rank_color || thread.last_post_user_group_color
    const lastAuthorLinkStyle = lastAuthorLinkColor
        ? { '--bb-user-link-color': lastAuthorLinkColor }
        : undefined

    const formatDateTime = (value) => {
        if (!value) return '—'
        const date = new Date(value)
        if (Number.isNaN(date.getTime())) return '—'
        const day = String(date.getDate()).padStart(2, '0')
        const month = String(date.getMonth() + 1).padStart(2, '0')
        const year = String(date.getFullYear())
        const hours = String(date.getHours()).padStart(2, '0')
        const minutes = String(date.getMinutes()).padStart(2, '0')
        const seconds = String(date.getSeconds()).padStart(2, '0')
        return `${day}.${month}.${year} ${hours}:${minutes}:${seconds}`
    }

    const repliesCount = Math.max((thread.posts_count ?? 0) - 1, 0)

    return (
        <div className="bb-portal-topic-row">
            <div className="bb-portal-topic-main">
                <span className="bb-portal-topic-icon" aria-hidden="true">
                    <i className="bi bi-chat-left-text" />
                </span>
                <div>
                    <Link to={`/thread/${thread.id}`} className="bb-portal-topic-title">
                        {thread.title}
                        {thread.solved && (
                            <span className="bb-thread-solved-badge">{t('thread.solved')}</span>
                        )}
                    </Link>
                    <div className="bb-portal-topic-meta">
                        <div className="bb-portal-topic-meta-line">
                            <span className="bb-portal-topic-meta-label">{t('portal.posted_by')}</span>
                            {thread.user_id ? (
                                <Link
                                    to={`/profile/${thread.user_id}`}
                                    className="bb-portal-topic-author"
                                    style={authorLinkStyle}
                                >
                                    {authorName}
                                </Link>
                            ) : (
                                <span className="bb-portal-topic-author">{authorName}</span>
                            )}
                            <span className="bb-portal-topic-meta-sep">»</span>
                            <span className="bb-portal-topic-meta-date">{formatDateTime(thread.created_at)}</span>
                        </div>
                        {showForum && (
                            <div className="bb-portal-topic-meta-line">
                                <span className="bb-portal-topic-meta-label">{t('portal.forum_label')}</span>
                                <span className="bb-portal-topic-forum">
                                    {forumId ? (
                                        <Link to={`/forum/${forumId}`} className="bb-portal-topic-forum-link">
                                            {forumName}
                                        </Link>
                                    ) : (
                                        forumName
                                    )}
                                </span>
                            </div>
                        )}
                    </div>
                </div>
            </div>
            <div className="bb-portal-topic-cell">{repliesCount}</div>
            <div className="bb-portal-topic-cell">{thread.views_count ?? 0}</div>
            <div className="bb-portal-topic-cell bb-portal-topic-cell--last">
                <div className="bb-portal-last">
                    <span className="bb-portal-last-by">
                        {t('thread.by')}{' '}
                        {thread.last_post_user_id ? (
                            <Link
                                to={`/profile/${thread.last_post_user_id}`}
                                className="bb-portal-last-user"
                                style={lastAuthorLinkStyle}
                            >
                                {lastAuthorName}
                            </Link>
                        ) : (
                            <span className="bb-portal-last-user">{lastAuthorName}</span>
                        )}
                        <Link
                            to={`/thread/${thread.id}${lastPostAnchor}`}
                            className="bb-portal-last-jump ms-2"
                            aria-label={t('thread.view')}
                        >
                            <i className="bi bi-eye" aria-hidden="true" />
                        </Link>
                    </span>
                    <span className="bb-portal-last-date">
                        {formatDateTime(thread.last_post_at || thread.created_at)}
                    </span>
                </div>
            </div>
        </div>
    )
}