import { RotateCcw, Loader2, AlertTriangle } from 'lucide-react';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '../ui/alert-dialog';
import { Version } from '../../types/workflow';
import { __, sprintf } from '../../lib/i18n';

export interface RestoreVersionDialogProps {
  /** The version to restore */
  version: Version | null;
  /** Whether the dialog is open */
  isOpen: boolean;
  /** Callback when dialog is closed */
  onClose: () => void;
  /** Callback when restore is confirmed */
  onConfirm: () => void;
  /** Whether a restore operation is in progress */
  isRestoring: boolean;
}

/**
 * Restore Version Dialog component
 *
 * Confirms that the user wants to restore a previous version.
 * Warns that this will replace the current draft.
 */
export function RestoreVersionDialog({
  version,
  isOpen,
  onClose,
  onConfirm,
  isRestoring,
}: RestoreVersionDialogProps) {
  if (!version) return null;

  return (
    <AlertDialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle className="flex items-center gap-2">
            <RotateCcw className="w-5 h-5" />
            {sprintf(__('Restore Version %d?'), version.version_number)}
          </AlertDialogTitle>
          <AlertDialogDescription className="space-y-3">
            <p>
              {__('This will replace your current draft with the configuration from this version.')}
            </p>
            <div className="flex items-start gap-2 p-3 rounded-md bg-amber-50 border border-amber-200 text-amber-800">
              <AlertTriangle className="w-4 h-4 mt-0.5 shrink-0" />
              <p className="text-sm">
                {__(
                  'Any unsaved changes in your current draft will be lost. You will need to publish again to make these changes live.',
                )}
              </p>
            </div>
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel disabled={isRestoring}>{__('Cancel')}</AlertDialogCancel>
          <AlertDialogAction onClick={onConfirm} disabled={isRestoring} className="gap-2">
            {isRestoring ? (
              <>
                <Loader2 className="w-4 h-4 animate-spin" />
                {__('Restoring...')}
              </>
            ) : (
              <>
                <RotateCcw className="w-4 h-4" />
                {__('Restore')}
              </>
            )}
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}