import React from 'react';
import { 
  Edit, Send, FileSignature, Download, Eye, FileText, 
  Trash2, Copy, CheckCircle, XCircle 
} from 'lucide-react';
import PrimaryButton from '@/components/PrimaryButton';
import { cn } from '@/lib/utils';

const ActionButton = ({ icon: Icon, label, onClick, variant = 'secondary', disabled, className, title }) => (
  <button
    onClick={onClick}
    disabled={disabled}
    title={title || label}
    className={cn(
      "flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all shadow-sm active:scale-95",
      variant === 'primary' 
        ? "bg-[#941403] text-white hover:bg-[#7a1002] shadow-red-900/10" 
        : "bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-750",
      disabled && "opacity-50 cursor-not-allowed grayscale",
      className
    )}
  >
    <Icon className="w-4 h-4" />
    <span className="hidden sm:inline">{label}</span>
  </button>
);

const QuoteActionRibbon = ({ quote, onAction, onTransform, isEditMode }) => {
  if (!quote) return null;

  const isSigned = quote.status === 'Signé' || quote.status === 'Transformé en commande';
  const isCancelled = quote.status === 'Annulé' || quote.status === 'Refusé';
  
  // For new quotes, we don't show the ribbon actions yet
  if (quote.id === 'new') return null;

  if (isCancelled) {
    return (
      <div className="bg-red-50 dark:bg-red-900/20 border border-red-100 dark:border-red-800 rounded-xl p-3 flex items-center gap-3 text-red-700 dark:text-red-300">
        <XCircle className="w-5 h-5" />
        <span className="font-medium">Ce devis est annulé. Aucune action n'est possible.</span>
      </div>
    );
  }

  return (
    <div className="flex flex-wrap items-center gap-2 py-2">
      {/* Main Actions */}
      {!isSigned && (
        <>
          <PrimaryButton icon={FileSignature} onClick={() => onAction('sign')} disabled={isEditMode}>
             Signature électronique
          </PrimaryButton>
          <ActionButton icon={Send} label="Envoyer" onClick={() => onAction('send')} disabled={isEditMode} />
          
          {!isEditMode && (
            <ActionButton icon={Edit} label="Modifier" onClick={() => onAction('edit')} />
          )}
        </>
      )}

      {/* Signed Actions */}
      {isSigned && (
        <div className="flex items-center gap-2 bg-green-50 dark:bg-green-900/20 px-3 py-1.5 rounded-lg border border-green-100 dark:border-green-800 mr-auto">
          <CheckCircle className="w-4 h-4 text-green-600 dark:text-green-400" />
          <span className="text-sm font-medium text-green-700 dark:text-green-300">Document verrouillé – signé</span>
        </div>
      )}

      {/* Common Actions */}
      <div className="flex items-center gap-2 ml-auto">
        {!isSigned && (
           <ActionButton 
              icon={FileText} 
              label="Transformer" 
              onClick={onTransform} 
              disabled={isEditMode}
              className="text-blue-600 dark:text-blue-400 border-blue-100 dark:border-blue-900 bg-blue-50 dark:bg-blue-900/10 hover:bg-blue-100" 
            />
        )}
        <ActionButton icon={Download} label="PDF" onClick={() => onAction('download')} />
        <ActionButton icon={Eye} label="Aperçu" onClick={() => onAction('preview')} />
        
        <div className="h-6 w-px bg-gray-200 dark:bg-gray-700 mx-1" />
        
        <button 
          onClick={() => onAction('copy')}
          className="p-2 text-gray-500 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors" 
          title="Dupliquer le devis"
        >
          <Copy className="w-4 h-4" />
        </button>
        {!isSigned && (
          <button 
            onClick={() => onAction('delete')}
            className="p-2 text-gray-500 hover:text-red-600 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors" 
            title="Supprimer le devis"
          >
            <Trash2 className="w-4 h-4" />
          </button>
        )}
      </div>
    </div>
  );
};

export default QuoteActionRibbon;