import React from 'react';
import type { HistoryEntry } from './types';
import { formatDateTime } from './types';

interface HistoryTimelineProps {
    history: HistoryEntry[];
}

const HistoryTimeline: React.FC<HistoryTimelineProps> = ({ history }) => {
    // Trier par date décroissante (plus récent en premier)
    const sortedHistory = [...history].sort(
        (a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
    );

    if (sortedHistory.length === 0) {
        return (
            <div className="history-empty">
                <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
                    <circle cx="24" cy="24" r="20" stroke="#cbd5e1" strokeWidth="2" strokeDasharray="4 4" />
                    <path d="M24 16v8l6 3" stroke="#cbd5e1" strokeWidth="2" strokeLinecap="round" />
                </svg>
                <p>Aucun historique disponible</p>
            </div>
        );
    }

    return (
        <div className="history-timeline">
            {sortedHistory.map((entry, index) => {
                const isLatest = index === 0;
                const isCreation = entry.action === 'creation';

                return (
                    <div
                        key={entry.id}
                        className={`timeline-entry ${isLatest ? 'latest' : ''} ${isCreation ? 'creation' : 'modification'}`}
                    >
                        <div className="timeline-connector">
                            <div className={`timeline-dot ${isCreation ? 'dot-creation' : 'dot-modification'}`}>
                                {isCreation ? (
                                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                                        <path d="M7 3v8M3 7h8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
                                    </svg>
                                ) : (
                                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                                        <path d="M10 4L5 9 3 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                                    </svg>
                                )}
                            </div>
                            {index < sortedHistory.length - 1 && <div className="timeline-line" />}
                        </div>

                        <div className="timeline-content">
                            <div className="timeline-header-simple">
                                <div className="timeline-action">
                                    <span className={`action-badge ${isCreation ? 'badge-creation' : 'badge-modification'}`}>
                                        {isCreation ? '🎯 Création' : '✏️ Nouvelle Action'}
                                    </span>
                                    {isLatest && <span className="latest-badge">⭐ Actuel</span>}
                                </div>

                                <div className="timeline-meta">
                                    <span className="timeline-date">
                                        📅 {formatDateTime(entry.timestamp)}
                                    </span>
                                    <span className="timeline-user">
                                        👤 {entry.userName}
                                        <span className={`role-tag ${entry.userRole}`}>
                                            {entry.userRole === 'formateur' ? 'Formateur' : 'RRE'}
                                        </span>
                                    </span>
                                </div>
                            </div>

                            <div className="timeline-reason">
                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                                    <path d="M2 4h12M2 8h8M2 12h10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
                                </svg>
                                <span className="reason-text">{entry.reason}</span>
                            </div>

                            {/* Afficher les anciennes valeurs uniquement */}
                            {entry.changes.length > 0 && (
                                <div className="timeline-old-values">
                                    {entry.changes.map((change, changeIndex) => (
                                        <div key={changeIndex} className="old-value-item">
                                            <span className="field-name">{change.fieldLabel}:</span>
                                            <span className="field-old-value">{change.oldValue}</span>
                                        </div>
                                    ))}
                                </div>
                            )}
                        </div>
                    </div>
                );
            })}
        </div>
    );
};

export default HistoryTimeline;
