import React from 'react';
import './HistoryView.css';

const HistoryView = ({ conversations, onSelectConversation }) => {
    const formatDate = (dateStr) => {
        const date = new Date(dateStr);
        return date.toLocaleDateString('en-GB', {
            day: 'numeric',
            month: 'short',
            year: 'numeric',
            hour: '2-digit',
            minute: '2-digit',
        });
    };

    return (
        <div className="history-view">
            <div className="history-header">
                <h1 className="history-title">Review History</h1>
                <p className="history-subtitle">
                    View past reviews and council feedback.
                </p>
            </div>

            <div className="history-list">
                {conversations.length === 0 ? (
                    <div className="empty-state">
                        <span className="empty-icon">📋</span>
                        <p>No reviews yet. Submit your first content for review!</p>
                    </div>
                ) : (
                    conversations.map((conv) => (
                        <div
                            key={conv.id}
                            className="history-card"
                            onClick={() => onSelectConversation(conv.id)}
                        >
                            <div className="history-card-content">
                                <h3 className="history-card-title">
                                    {conv.title || 'Untitled Review'}
                                </h3>
                                <p className="history-card-meta">
                                    {formatDate(conv.created_at)} • {conv.message_count || 0} messages
                                </p>
                            </div>
                            <span className="history-arrow">→</span>
                        </div>
                    ))
                )}
            </div>
        </div>
    );
};

export default HistoryView;