import { History, UploadCloud, Loader2 } from 'lucide-react';
import { Button } from '../ui/button';
import { Badge } from '../ui/badge';
import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
import { __ } from '../../lib/i18n';

export interface VersionBadgeProps {
  /** Whether the workflow has been published at least once */
  isPublished: boolean;
  /** Whether there are unpublished changes in the draft */
  hasUnpublishedChanges: boolean;
  /** Whether a publish operation is in progress */
  isPublishing: boolean;
  /** Callback to open version history panel */
  onOpenHistory: () => void;
  /** Callback to trigger publish */
  onPublish: () => void;
  /** Whether publish button should be disabled */
  publishDisabled?: boolean;
}

/**
 * Version Badge component for the Toolbar
 *
 * Shows the current version state and provides quick access to
 * publish and version history actions.
 */
export function VersionBadge({
  isPublished,
  hasUnpublishedChanges,
  isPublishing,
  onOpenHistory,
  onPublish,
  publishDisabled = false,
}: VersionBadgeProps) {
  // Determine badge state
  const showPublishButton = hasUnpublishedChanges;

  return (
    <div className="flex items-center gap-2">
      {/* Publish button - shown when there are unpublished changes */}
      {showPublishButton && (
        <Tooltip>
          <TooltipTrigger asChild>
            <Button
              onClick={onPublish}
              variant="accent"
              size="sm"
              disabled={isPublishing || publishDisabled}
              className="gap-2"
            >
              {isPublishing ? (
                <>
                  <Loader2 className="w-4 h-4 animate-spin" />
                  <span className="hidden md:inline">{__('Publishing')}</span>
                </>
              ) : (
                <>
                  <UploadCloud className="w-4 h-4" />
                  <span className="hidden md:inline">{__('Publish')}</span>
                </>
              )}
            </Button>
          </TooltipTrigger>
          <TooltipContent side="bottom">{__('Publish changes to make them live')}</TooltipContent>
        </Tooltip>
      )}

      {/* Version status badge - clickable to open history */}
      <Tooltip>
        <TooltipTrigger asChild>
          <button
            onClick={onOpenHistory}
            className="flex items-center gap-1.5 px-2 py-1 rounded-md text-sm font-medium transition-colors hover:bg-slate-100"
          >
            <History className="w-4 h-4 text-slate-500" />
            {isPublished ? (
              <Badge variant={hasUnpublishedChanges ? 'warning' : 'success'} className="text-xs">
                {hasUnpublishedChanges ? __('Draft') : __('Published')}
              </Badge>
            ) : (
              <Badge variant="secondary" className="text-xs">
                {__('Never published')}
              </Badge>
            )}
          </button>
        </TooltipTrigger>
        <TooltipContent side="bottom">{__('View version history')}</TooltipContent>
      </Tooltip>
    </div>
  );
}