export default function SimulationHistory({ simulations, selectedId, onSelect, onDelete }) {
    const formatDate = (dateString) => {
        const date = new Date(dateString);
        return date.toLocaleDateString('fr-FR', {
            day: '2-digit',
            month: '2-digit',
            hour: '2-digit',
            minute: '2-digit'
        });
    };
    
    const getStatusClass = (status) => {
        const classes = {
            completed: 'status-completed',
            running: 'status-running',
            failed: 'status-failed',
            pending: 'status-pending'
        };
        return classes[status] || '';
    };
    
    const getStatusLabel = (status) => {
        const labels = {
            completed: 'Terminée',
            running: 'En cours',
            failed: 'Échouée',
            pending: 'En attente'
        };
        return labels[status] || status;
    };
    
    return (
        <div className="simulation-history">
            <h3>Historique des simulations</h3>
            
            {simulations.length === 0 ? (
                <p className="no-simulations">Aucune simulation</p>
            ) : (
                <ul className="simulation-list">
                    {simulations.map(sim => (
                        <li 
                            key={sim.id}
                            className={`simulation-item ${selectedId === sim.id ? 'selected' : ''}`}
                            onClick={() => onSelect(sim)}
                        >
                            <div className="sim-header">
                                <span className="sim-name">{sim.name}</span>
                                <span className={`status ${getStatusClass(sim.status)}`}>
                                    {getStatusLabel(sim.status)}
                                </span>
                            </div>
                            
                            <div className="sim-details">
                                <span className="sim-date">{formatDate(sim.created_at)}</span>
                                <span className="sim-mesh">{sim.mesh_nx}×{sim.mesh_ny}</span>
                                {sim.computation_time && (
                                    <span className="sim-time">{sim.computation_time.toFixed(2)}s</span>
                                )}
                            </div>
                            
                            <button 
                                className="delete-btn"
                                onClick={(e) => {
                                    e.stopPropagation();
                                    if (confirm('Supprimer cette simulation ?')) {
                                        onDelete(sim.id);
                                    }
                                }}
                                title="Supprimer"
                            >
                                ×
                            </button>
                        </li>
                    ))}
                </ul>
            )}
        </div>
    );
}