'use client';

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

interface Participant {
  partyId: string;
  name: string;
  status: 'waiting' | 'ready' | 'processing' | 'completed' | 'failed';
  joinedAt?: string;
}

interface ParticipantListProps {
  participants: Participant[];
  totalRequired: number;
}

/**
 * 参与方列表组件
 */
export default function ParticipantList({ participants, totalRequired }: ParticipantListProps) {
  const getStatusText = (status: Participant['status']) => {
    switch (status) {
      case 'waiting':
        return '等待中';
      case 'ready':
        return '已就绪';
      case 'processing':
        return '处理中';
      case 'completed':
        return '已完成';
      case 'failed':
        return '失败';
      default:
        return status;
    }
  };

  const getStatusIcon = (status: Participant['status']) => {
    switch (status) {
      case 'waiting':
        return '⏳';
      case 'ready':
        return '✓';
      case 'processing':
        return '⚡';
      case 'completed':
        return '✓';
      case 'failed':
        return '✗';
      default:
        return '•';
    }
  };

  const emptySlots = totalRequired - participants.length;

  return (
    <div className={styles.participantList}>
      <div className={styles.participantList__header}>
        <span className={styles.participantList__title}>
          参与方 ({participants.length} / {totalRequired})
        </span>
      </div>

      <div className={styles.participantList__items}>
        {participants.map((participant, index) => (
          <div key={participant.partyId} className={styles.participantList__item}>
            <div className={styles.participantList__info}>
              <span className={styles.participantList__index}>#{index + 1}</span>
              <span className={styles.participantList__name}>{participant.name}</span>
            </div>
            <span
              className={cn(
                styles.participantList__status,
                styles[`participantList__status--${participant.status}`]
              )}
            >
              <span className={styles.participantList__statusIcon}>
                {getStatusIcon(participant.status)}
              </span>
              {getStatusText(participant.status)}
            </span>
          </div>
        ))}

        {Array.from({ length: emptySlots }).map((_, index) => (
          <div
            key={`empty-${index}`}
            className={cn(styles.participantList__item, styles['participantList__item--empty'])}
          >
            <div className={styles.participantList__info}>
              <span className={styles.participantList__index}>
                #{participants.length + index + 1}
              </span>
              <span className={styles.participantList__name}>等待加入...</span>
            </div>
            <span className={styles.participantList__statusIcon}>⏳</span>
          </div>
        ))}
      </div>
    </div>
  );
}
