import React from 'react';
import { normalizeStatut } from './helpers';

const STEPS = [
    { key: 'enattente', label: 'Soumise', icon: '\u{1F4CB}' },
    { key: 'validen1', label: 'Validée N1', icon: '\u2705' },
    { key: 'validen2', label: 'Validée N2', icon: '\u2705' },
    { key: 'approuve', label: 'Approuvée', icon: '\u{1F389}' },
    { key: 'paiementenattente', label: 'En att. paiement', icon: '\u23F3' },
    { key: 'payee', label: 'Payée', icon: '\u{1F4B6}' },
];

function getActiveIndex(s: string): number {
    if (s === 'refuse' || s === 'refus') return -1;
    if (s === 'payee') return 5;
    if (s === 'paiementenattente' || s === 'paiement_en_attente') return 4;
    if (s === 'approuve') return 3;
    if (['validen2', 'valide_n2', 'validn2'].includes(s)) return 2;
    if (['validen1', 'valide_n1', 'validn1'].includes(s)) return 1;
    return 0;
}

export const StatutStepper = ({ statut }: { statut: string }) => {
    const s = normalizeStatut(statut);
    const active = getActiveIndex(s);

    if (active === -1) {
        return (
            <div style={{
                display: 'flex', alignItems: 'center', gap: 10,
                padding: '10px 16px', background: '#fef2f2',
                border: '1.5px solid #fecaca', borderRadius: 12, marginBottom: 16,
            }}>
                <span style={{ fontSize: 18 }}>\u274C</span>
                <div>
                    <div style={{ fontSize: 13, fontWeight: 700, color: '#dc2626' }}>Note refusée</div>
                    <div style={{ fontSize: 11, color: '#ef4444' }}>Consultez le motif de refus ci-dessous</div>
                </div>
            </div>
        );
    }

    return (
        <div style={{
            padding: '14px 20px', background: 'var(--bg-card)',
            border: '1px solid var(--border-card)', borderRadius: 14,
            marginBottom: 16, overflowX: 'auto',
        }}>
            <div style={{ display: 'flex', alignItems: 'center', minWidth: 500 }}>
                {STEPS.map((step, i) => {
                    const isDone = i < active;
                    const isCurrent = i === active;
                    return (
                        <div key={step.key} style={{ display: 'flex', alignItems: 'center', flex: i < STEPS.length - 1 ? 1 : 0 }}>
                            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
                                <div style={{
                                    width: 36, height: 36, borderRadius: '50%',
                                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                                    fontSize: isCurrent ? 18 : 14,
                                    background: isDone ? '#dcfce7' : isCurrent ? 'linear-gradient(135deg,#6366f1,#4f46e5)' : 'var(--bg-input)',
                                    color: isDone ? '#15803d' : isCurrent ? '#fff' : 'var(--text-muted)',
                                    border: isCurrent ? '2px solid #4f46e5' : isDone ? '2px solid #86efac' : '2px solid var(--border-input)',
                                    boxShadow: isCurrent ? '0 0 0 4px rgba(99,102,241,0.15)' : 'none',
                                    flexShrink: 0, transition: 'all 0.3s',
                                }}>
                                    {isDone ? '\u2713' : step.icon}
                                </div>
                                <span style={{
                                    fontSize: 10, fontWeight: isCurrent ? 700 : 500,
                                    color: isDone ? '#15803d' : isCurrent ? '#4f46e5' : 'var(--text-muted)',
                                    whiteSpace: 'nowrap', textAlign: 'center', letterSpacing: '0.2px',
                                }}>
                                    {step.label}
                                </span>
                            </div>
                            {i < STEPS.length - 1 && (
                                <div style={{
                                    flex: 1, height: 3, marginBottom: 22, marginLeft: 4, marginRight: 4,
                                    borderRadius: 99,
                                    background: i < active ? 'linear-gradient(90deg,#86efac,#4ade80)' : 'var(--border-input)',
                                    transition: 'background 0.3s',
                                }} />
                            )}
                        </div>
                    );
                })}
            </div>
        </div>
    );
};
