import React from 'react';
import type { DeployState } from '../../types/deployer';
import './DeployProgress.css';

interface DeployProgressProps {
  state: DeployState;
  message: string;
  completed: number;
  total: number;
  percent: number;
}

const STATE_GRADIENT: Record<string, string> = {
  compiling:    'linear-gradient(90deg, #3b82f6, #60a5fa)',  // blue
  transferring: 'linear-gradient(90deg, #f59e0b, #fbbf24)',  // amber/yellow
  flashing:     'linear-gradient(90deg, #22c55e, #4ade80)',  // green
  serial_bridge:'linear-gradient(90deg, #8b5cf6, #a78bfa)',  // purple
  success:      'linear-gradient(90deg, #22c55e, #4ade80)',  // green
};

const STATE_SPINNER_COLOR: Record<string, string> = {
  compiling:    '#3b82f6',
  transferring: '#f59e0b',
  flashing:     '#22c55e',
  serial_bridge:'#8b5cf6',
};

const DEFAULT_GRADIENT = 'linear-gradient(90deg, #3b82f6, #22c55e)';
const DEFAULT_SPINNER_COLOR = '#3b82f6';

export const DeployProgress: React.FC<DeployProgressProps> = ({
  state,
  message,
  completed,
  total,
  percent,
}) => {
  const showBar = total > 0 && (state === 'transferring' || state === 'flashing' || state === 'serial_bridge');
  const showSpinner = state === 'compiling' || state === 'pairing' || (state === 'transferring' && total === 0);
  const barGradient = STATE_GRADIENT[state] ?? DEFAULT_GRADIENT;
  const spinnerColor = STATE_SPINNER_COLOR[state] ?? DEFAULT_SPINNER_COLOR;

  return (
    <div className="deploy-progress">
      <div className="deploy-progress-header">
        <span className="deploy-progress-message">{message}</span>
        {showBar && (
          <span className="deploy-progress-counter">
            Chunk {completed}/{total} ({percent}%)
          </span>
        )}
      </div>
      {showBar && (
        <div className="deploy-progress-bar-container">
          <div
            className="deploy-progress-bar-fill"
            style={{ width: `${percent}%`, background: barGradient }}
          />
        </div>
      )}
      {showSpinner && (
        <div
          className="deploy-progress-spinner"
          style={{ borderTopColor: spinnerColor }}
        />
      )}
    </div>
  );
};