import React from 'react';
import { CheckCircle, PauseCircle, StopCircle, PlayCircle, AlertCircle } from 'lucide-react';

export type OptimizationStatus = 'running' | 'paused' | 'stopped' | 'completed' | 'error' | 'not_started';

interface StatusBadgeProps {
  status: OptimizationStatus;
  showLabel?: boolean;
  size?: 'sm' | 'md' | 'lg';
  pulse?: boolean;
}

const statusConfig = {
  running: {
    label: 'Running',
    icon: PlayCircle,
    dotClass: 'bg-green-500',
    textClass: 'text-green-400',
    bgClass: 'bg-green-500/10 border-green-500/30',
  },
  paused: {
    label: 'Paused',
    icon: PauseCircle,
    dotClass: 'bg-yellow-500',
    textClass: 'text-yellow-400',
    bgClass: 'bg-yellow-500/10 border-yellow-500/30',
  },
  stopped: {
    label: 'Stopped',
    icon: StopCircle,
    dotClass: 'bg-dark-500',
    textClass: 'text-dark-400',
    bgClass: 'bg-dark-700 border-dark-600',
  },
  completed: {
    label: 'Completed',
    icon: CheckCircle,
    dotClass: 'bg-primary-500',
    textClass: 'text-primary-400',
    bgClass: 'bg-primary-500/10 border-primary-500/30',
  },
  error: {
    label: 'Error',
    icon: AlertCircle,
    dotClass: 'bg-red-500',
    textClass: 'text-red-400',
    bgClass: 'bg-red-500/10 border-red-500/30',
  },
  not_started: {
    label: 'Not Started',
    icon: StopCircle,
    dotClass: 'bg-dark-600',
    textClass: 'text-dark-500',
    bgClass: 'bg-dark-800 border-dark-700',
  },
};

const sizeConfig = {
  sm: { dot: 'w-2 h-2', text: 'text-xs', padding: 'px-2 py-0.5', icon: 'w-3 h-3' },
  md: { dot: 'w-3 h-3', text: 'text-sm', padding: 'px-3 py-1', icon: 'w-4 h-4' },
  lg: { dot: 'w-4 h-4', text: 'text-base', padding: 'px-4 py-2', icon: 'w-5 h-5' },
};

export function StatusBadge({
  status,
  showLabel = true,
  size = 'md',
  pulse = true
}: StatusBadgeProps) {
  const config = statusConfig[status];
  const sizes = sizeConfig[size];

  return (
    <div
      className={`inline-flex items-center gap-2 rounded-full border ${config.bgClass} ${sizes.padding}`}
    >
      <div
        className={`rounded-full ${config.dotClass} ${sizes.dot} ${
          pulse && status === 'running' ? 'animate-pulse' : ''
        }`}
      />
      {showLabel && (
        <span className={`font-semibold uppercase tracking-wide ${config.textClass} ${sizes.text}`}>
          {config.label}
        </span>
      )}
    </div>
  );
}

/**
 * Helper function to determine status from process state
 */
export function getStatusFromProcess(
  isRunning: boolean,
  isPaused: boolean,
  completedTrials: number,
  totalTrials: number,
  hasError?: boolean
): OptimizationStatus {
  if (hasError) return 'error';
  if (completedTrials >= totalTrials && totalTrials > 0) return 'completed';
  if (isPaused) return 'paused';
  if (isRunning) return 'running';
  if (completedTrials === 0) return 'not_started';
  return 'stopped';
}

export default StatusBadge;
