'use client';

import styles from './co-managed-wallet.module.scss';
import { cn } from '@/utils/helpers';

interface SessionProgressProps {
  status: 'waiting' | 'ready' | 'processing' | 'completed' | 'failed';
  currentRound?: number;
  totalRounds?: number;
  error?: string;
}

/**
 * 会话进度组件
 */
export default function SessionProgress({
  status,
  currentRound = 0,
  totalRounds = 3,
  error,
}: SessionProgressProps) {
  const getStatusText = () => {
    switch (status) {
      case 'waiting':
        return '等待参与方加入';
      case 'ready':
        return '准备就绪，即将开始';
      case 'processing':
        return '密钥生成中';
      case 'completed':
        return '创建完成';
      case 'failed':
        return '创建失败';
      default:
        return status;
    }
  };

  const progressPercent = status === 'processing' && totalRounds > 0
    ? (currentRound / totalRounds) * 100
    : status === 'completed'
    ? 100
    : 0;

  return (
    <div className={styles.sessionProgress}>
      <div className={styles.sessionProgress__header}>
        <span
          className={cn(
            styles.sessionProgress__status,
            styles[`sessionProgress__status--${status}`]
          )}
        >
          {getStatusText()}
        </span>
        {status === 'processing' && (
          <span className={styles.sessionProgress__round}>
            第 {currentRound} / {totalRounds} 轮
          </span>
        )}
      </div>

      <div className={styles.sessionProgress__bar}>
        <div
          className={cn(
            styles.sessionProgress__fill,
            status === 'completed' && styles['sessionProgress__fill--completed'],
            status === 'failed' && styles['sessionProgress__fill--failed']
          )}
          style={{ width: `${progressPercent}%` }}
        />
      </div>

      {status === 'processing' && (
        <p className={styles.sessionProgress__hint}>
          正在与其他参与方进行安全的密钥生成协议，请勿关闭页面
        </p>
      )}

      {status === 'failed' && error && (
        <p className={styles.sessionProgress__error}>{error}</p>
      )}
    </div>
  );
}
