'use client';

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

interface InviteQRCodeProps {
  inviteCode: string;
  inviteUrl: string;
}

/**
 * 邀请二维码组件
 */
export default function InviteQRCode({ inviteCode, inviteUrl }: InviteQRCodeProps) {
  const [copied, setCopied] = useState(false);
  const [qrDataUrl, setQrDataUrl] = useState<string | null>(null);

  useEffect(() => {
    // 动态加载 QR 码生成
    generateQRCode(inviteUrl);
  }, [inviteUrl]);

  const generateQRCode = async (url: string) => {
    try {
      // 使用简单的 QR 码 API (可替换为本地库)
      const qrApiUrl = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(url)}`;
      setQrDataUrl(qrApiUrl);
    } catch (error) {
      console.error('Failed to generate QR code:', error);
    }
  };

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

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

  return (
    <div className={styles.inviteQrCode}>
      <div className={styles.inviteQrCode__qrWrapper}>
        {qrDataUrl ? (
          <img
            src={qrDataUrl}
            alt="邀请二维码"
            className={styles.inviteQrCode__qr}
          />
        ) : (
          <div className={styles.inviteQrCode__placeholder}>
            生成中...
          </div>
        )}
      </div>

      <div className={styles.inviteQrCode__info}>
        <div className={styles.inviteQrCode__field}>
          <label className={styles.inviteQrCode__label}>邀请码</label>
          <div className={styles.inviteQrCode__codeWrapper}>
            <code className={styles.inviteQrCode__code}>{inviteCode}</code>
            <button
              type="button"
              className={styles.inviteQrCode__copyBtn}
              onClick={handleCopyCode}
            >
              {copied ? '已复制' : '复制'}
            </button>
          </div>
        </div>

        <div className={styles.inviteQrCode__field}>
          <label className={styles.inviteQrCode__label}>邀请链接</label>
          <div className={styles.inviteQrCode__urlWrapper}>
            <input
              type="text"
              value={inviteUrl}
              readOnly
              className={styles.inviteQrCode__url}
            />
            <button
              type="button"
              className={styles.inviteQrCode__copyBtn}
              onClick={handleCopyUrl}
            >
              {copied ? '已复制' : '复制'}
            </button>
          </div>
        </div>

        <p className={styles.inviteQrCode__hint}>
          将邀请码或链接分享给其他参与方，他们可以使用 Service Party 应用加入
        </p>
      </div>
    </div>
  );
}
