// CancelledBanner - Full-width banner for cancelled projects in detail view

const CancelledBanner = ({ cancelledAt, cancelledByName, cancellationReason, onUncancel, canUncancel = false }) => {
    const formatDate = (dateStr) => {
        if (!dateStr) return '';
        return new Date(dateStr).toLocaleDateString('it-IT', {
            day: '2-digit',
            month: 'short',
            year: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
        });
    };

    return (
        <div className="bg-red-50 border-l-4 border-red-500 p-4 mb-4 rounded-r-lg">
            <div className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                    <div className="flex-shrink-0">
                        <svg className="w-6 h-6 text-red-500" fill="currentColor" viewBox="0 0 20 20">
                            <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
                        </svg>
                    </div>
                    <div>
                        <h3 className="text-red-800 font-semibold">Pratica Annullata</h3>
                        <p className="text-red-700 text-sm mt-0.5">
                            {cancelledByName && `Annullata da ${cancelledByName}`}
                            {cancelledAt && ` il ${formatDate(cancelledAt)}`}
                        </p>
                        {cancellationReason && (
                            <div className="mt-2 p-2 bg-red-100 rounded text-sm text-red-800">
                                <span className="font-medium">Motivo:</span> {cancellationReason}
                            </div>
                        )}
                        <p className="text-red-600 text-xs mt-2">
                            Il workflow di questa pratica è bloccato. Non è possibile modificare gli stati degli step.
                        </p>
                    </div>
                </div>
                {canUncancel && (
                    <button
                        onClick={onUncancel}
                        className="flex items-center gap-2 px-4 py-2 bg-white border border-red-300 text-red-700 font-medium rounded-lg hover:bg-red-50 transition-colors"
                    >
                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" />
                        </svg>
                        Ripristina
                    </button>
                )}
            </div>
        </div>
    );
};

window.CancelledBanner = CancelledBanner;