import './ArticleDetail.css';

function ArticleDetail({ article, onBack, onEdit, onDelete, currentUser }) {
    if (!article) {
        return <div>No article selected</div>
    }

    const canEdit = currentUser?.role === 'Admin' || currentUser?.role === 'Editor';

    return (
        <div className='article-detail'>
            <div className='button-group'>
                <button className='back-button' onClick={onBack}>
                    ← Back
                </button>
                {canEdit && (
                    <>
                        <button className='edit-button' onClick={onEdit}>
                            Edit
                        </button>
                        <button className='delete-button' onClick={onDelete}>
                            Delete
                        </button>
                    </>
                )}
            </div>

            <div className='article-header'>
                <span className='ka-number'>{article.ka_number}</span>
                <h1>{article.title}</h1>
                <p className='article-meta'>
                    Created: {new Date(article.created_at).toLocaleDateString()}
                    {article.updated_at && ` | Updated: ${new Date(article.updated_at).toLocaleDateString()}`}
                </p>

                {article.categories && article.categories.length > 0 && (
                    <div className='article-metadata'>
                        <div className='metadata-label'>Categories:</div>
                        <div className='metadata-badges'>
                            {article.categories.map(category => (
                                <span key={category} className='badge category-badge'>
                                    {category}
                                </span>
                            ))}
                        </div>
                    </div>
                )}

                {article.tags && article.tags.length > 0 && (
                    <div className='article-metadata'>
                        <div className='metadata-label'>Tags:</div>
                        <div className='metadata-badges'>
                            {article.tags.map(tag => (
                                <span key={tag} className='badge tag-badge'>
                                    #{tag}
                                </span>
                            ))}
                        </div>
                    </div>
                )}
            </div>

            <div
                className='article-content'
                dangerouslySetInnerHTML={{ __html: article.content }}
            />
        </div>
    );
}

export default ArticleDetail;