'use client';

import { useState } from 'react';
import styles from './co-managed-wallet.module.scss';

interface WalletResultProps {
  walletName: string;
  publicKey: string;
  threshold: { t: number; n: number };
  participants: Array<{ partyId: string; name: string }>;
  createdAt: string;
  onClose: () => void;
}

/**
 * 钱包创建结果组件
 */
export default function WalletResult({
  walletName,
  publicKey,
  threshold,
  participants,
  createdAt,
  onClose,
}: WalletResultProps) {
  const [copied, setCopied] = useState(false);

  const handleCopyPublicKey = async () => {
    try {
      await navigator.clipboard.writeText(publicKey);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (error) {
      console.error('Failed to copy:', error);
    }
  };

  const formatDate = (dateStr: string) => {
    try {
      return new Date(dateStr).toLocaleString('zh-CN');
    } catch {
      return dateStr;
    }
  };

  return (
    <div className={styles.walletResult}>
      <div className={styles.walletResult__successIcon}>✓</div>
      <h3 className={styles.walletResult__title}>共管钱包创建成功</h3>

      <div className={styles.walletResult__info}>
        <div className={styles.walletResult__row}>
          <span className={styles.walletResult__label}>钱包名称</span>
          <span className={styles.walletResult__value}>{walletName}</span>
        </div>

        <div className={styles.walletResult__row}>
          <span className={styles.walletResult__label}>阈值设置</span>
          <span className={styles.walletResult__value}>
            {threshold.t}-of-{threshold.n}
          </span>
        </div>

        <div className={styles.walletResult__row}>
          <span className={styles.walletResult__label}>创建时间</span>
          <span className={styles.walletResult__value}>{formatDate(createdAt)}</span>
        </div>

        <div className={styles.walletResult__row}>
          <span className={styles.walletResult__label}>参与方</span>
          <span className={styles.walletResult__value}>
            {participants.map(p => p.name).join('、')}
          </span>
        </div>
      </div>

      <div className={styles.walletResult__publicKey}>
        <label className={styles.walletResult__label}>钱包公钥</label>
        <div className={styles.walletResult__keyWrapper}>
          <code className={styles.walletResult__key}>{publicKey}</code>
          <button
            type="button"
            className={styles.walletResult__copyBtn}
            onClick={handleCopyPublicKey}
          >
            {copied ? '已复制' : '复制'}
          </button>
        </div>
      </div>

      <div className={styles.walletResult__notice}>
        <strong>重要提示：</strong>
        <ul>
          <li>每个参与方的密钥份额已保存在各自的 Service Party 应用中</li>
          <li>请确保所有参与方都已备份各自的密钥份额</li>
          <li>签名交易时需要至少 {threshold.t} 个参与方共同参与</li>
        </ul>
      </div>

      <div className={styles.walletResult__actions}>
        <button
          type="button"
          className={styles.walletResult__closeBtn}
          onClick={onClose}
        >
          完成
        </button>
      </div>
    </div>
  );
}
