// @ts-nocheck
/**
 * Phase 4 剩余 - 推广系统管理页面
 * 推广活动、分销链接、返佣记录、推广统计、排行榜
 */
import React, { useState, useEffect, useCallback } from 'react';
import { adminAPI } from '@/api';

// ==================== 类型定义 ====================
interface Promotion {
  id: number;
  title: string;
  description: string;
  reward_type: string;
  reward_value: number;
  min_payout: number;
  start_date: string;
  end_date: string;
  status: string;
  max_referrals: number;
  coupon_id: string;
  created_by: number;
  creator_name: string;
  created_at: string;
  updated_at: string;
  link_count: number;
  total_rewards: number;
}

interface ReferralLink {
  id: number;
  code: string;
  user_id: number;
  username: string;
  promotion_id: number;
  promotion_title: string;
  target_url: string;
  channel: string;
  qr_code_url: string;
  total_clicks: number;
  total_registrations: number;
  total_conversions: number;
  status: string;
  created_at: string;
}

interface ReferralReward {
  id: number;
  referral_code: string;
  referrer_name: string;
  referee_name: string;
  order_id: string;
  reward_type: string;
  reward_amount: number;
  reward_points: number;
  status: string;
  payout_method: string;
  paid_at: string;
  created_at: string;
}

interface PromotionStats {
  total_promotions: number;
  active_promotions: number;
  total_referral_links: number;
  active_referral_links: number;
  rewards_by_status: Record<string, { count: number; total: number }>;
  total_clicks: number;
  total_registrations: number;
  total_conversions: number;
  total_revenue: number;
  total_rewards_paid: number;
}

// ==================== 主组件 ====================
const Promotion: React.FC = () => {
  const [activeTab, setActiveTab] = useState('overview');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  
  // 数据
  const [stats, setStats] = useState<PromotionStats | null>(null);
  const [promotions, setPromotions] = useState<Promotion[]>([]);
  const [referralLinks, setReferralLinks] = useState<ReferralLink[]>([]);
  const [rewards, setRewards] = useState<ReferralReward[]>([]);
  const [leaderboard, setLeaderboard] = useState<any[]>([]);
  
  // 分页
  const [promoPage, setPromoPage] = useState(1);
  const [linkPage, setLinkPage] = useState(1);
  const [rewardPage, setRewardPage] = useState(1);
  const [totalPromos, setTotalPromos] = useState(0);
  const [totalLinks, setTotalLinks] = useState(0);
  const [totalRewards, setTotalRewards] = useState(0);
  
  // 弹窗
  const [showPromoModal, setShowPromoModal] = useState(false);
  const [showLinkModal, setShowLinkModal] = useState(false);
  const [editingPromo, setEditingPromo] = useState<Promotion | null>(null);

  // 加载概览数据
  const loadStats = useCallback(async () => {
    try {
      const res = await adminAPI.getPromotionStats();
      if (res.data) {
        setStats(res.data);
      }
    } catch (err: any) {
      console.error('Failed to load stats:', err);
    }
  }, []);

  // 加载推广活动
  const loadPromotions = useCallback(async (page: number) => {
    setLoading(true);
    try {
      const res = await adminAPI.getPromotions({ page, page_size: 20 });
      if (res.data) {
        setPromotions(res.data.items);
        setTotalPromos(res.data.total);
        setPromoPage(page);
      }
    } catch (err: any) {
      setError(err.message || '加载失败');
    } finally {
      setLoading(false);
    }
  }, []);

  // 加载分销链接
  const loadLinks = useCallback(async (page: number) => {
    setLoading(true);
    try {
      const res = await adminAPI.getReferralLinks({ page, page_size: 20 });
      if (res.data) {
        setReferralLinks(res.data.items);
        setTotalLinks(res.data.total);
        setLinkPage(page);
      }
    } catch (err: any) {
      setError(err.message || '加载失败');
    } finally {
      setLoading(false);
    }
  }, []);

  // 加载返佣记录
  const loadRewards = useCallback(async (page: number) => {
    setLoading(true);
    try {
      const res = await adminAPI.getReferralRewards({ page, page_size: 20 });
      if (res.data) {
        setRewards(res.data.items);
        setTotalRewards(res.data.total);
        setRewardPage(page);
      }
    } catch (err: any) {
      setError(err.message || '加载失败');
    } finally {
      setLoading(false);
    }
  }, []);

  // 加载排行榜
  const loadLeaderboard = useCallback(async () => {
    try {
      const res = await adminAPI.getPromotionLeaderboard({ limit: 50 });
      if (res.data) {
        setLeaderboard(res.data.items || res.data.leaderboard || []);
      }
    } catch (err: any) {
      console.error('Failed to load leaderboard:', err);
    }
  }, []);

  useEffect(() => {
    loadStats();
  }, [loadStats]);

  useEffect(() => {
    if (activeTab === 'promotions') {
      loadPromotions(1);
    } else if (activeTab === 'links') {
      loadLinks(1);
    } else if (activeTab === 'rewards') {
      loadRewards(1);
    } else if (activeTab === 'leaderboard') {
      loadLeaderboard();
    }
  }, [activeTab, loadPromotions, loadLinks, loadRewards, loadLeaderboard]);

  // 创建/更新推广活动
  const handleSavePromo = async (formData: any) => {
    setLoading(true);
    try {
      if (editingPromo) {
        await adminAPI.updatePromotion(editingPromo.id, formData);
      } else {
        await adminAPI.createPromotion(formData);
      }
      setShowPromoModal(false);
      setEditingPromo(null);
      loadPromotions(promoPage);
      loadStats();
    } catch (err: any) {
      setError(err.message || '保存失败');
    } finally {
      setLoading(false);
    }
  };

  // 切换活动状态
  const handleTogglePromo = async (id: number) => {
    try {
      await adminAPI.togglePromotion(id);
      loadPromotions(promoPage);
    } catch (err: any) {
      setError(err.message || '操作失败');
    }
  };

  // 删除活动
  const handleDeletePromo = async (id: number) => {
    if (!window.confirm('确定删除此推广活动？')) return;
    try {
      await adminAPI.deletePromotion(id);
      loadPromotions(promoPage);
      loadStats();
    } catch (err: any) {
      setError(err.message || '删除失败');
    }
  };

  // 生成分销链接
  const handleGenerateLink = async (formData: any) => {
    setLoading(true);
    try {
      await adminAPI.generateReferralLink(formData);
      setShowLinkModal(false);
      loadLinks(linkPage);
      loadStats();
    } catch (err: any) {
      setError(err.message || '生成失败');
    } finally {
      setLoading(false);
    }
  };

  // 审核返佣
  const handleApproveReward = async (id: number) => {
    try {
      await adminAPI.approveReward(id);
      loadRewards(rewardPage);
    } catch (err: any) {
      setError(err.message || '操作失败');
    }
  };

  // 标记已打款
  const handleMarkPaid = async (id: number) => {
    const payout_method = prompt('请输入提现方式（wechat/alipay/bank/balance）:');
    const payout_account = prompt('请输入提现账号:');
    if (!payout_method || !payout_account) return;
    
    try {
      await adminAPI.markRewardPaid(id, {
        payout_method,
        payout_account,
        payout_transaction_id: `TXN${Date.now()}`
      });
      loadRewards(rewardPage);
    } catch (err: any) {
      setError(err.message || '操作失败');
    }
  };

  // ==================== 渲染 ====================
  const renderOverview = () => {
    if (!stats) return <div className="loading">加载中...</div>;
    
    // 计算返佣状态分布条的宽度
    const totalRewardsCount = Object.values(stats.rewards_by_status || {}).reduce((a: number, b: any) => a + (b.count || 0), 0) || 1;
    const statusBars = Object.entries(stats.rewards_by_status || {}).map(([status, data]: [string, any]) => ({
      status,
      data,
      width: Math.min(100, ((data.count || 0) / totalRewardsCount) * 100)
    }));
    
    return (
      <div className="overview-grid">
        <div className="stat-card">
          <div className="stat-icon">📢</div>
          <div className="stat-content">
            <div className="stat-value">{stats.total_promotions}</div>
            <div className="stat-label">推广活动总数</div>
          </div>
        </div>
        
        <div className="stat-card active">
          <div className="stat-icon">✅</div>
          <div className="stat-content">
            <div className="stat-value">{stats.active_promotions}</div>
            <div className="stat-label">进行中的活动</div>
          </div>
        </div>
        
        <div className="stat-card">
          <div className="stat-icon">🔗</div>
          <div className="stat-content">
            <div className="stat-value">{stats.total_referral_links}</div>
            <div className="stat-label">分销链接总数</div>
          </div>
        </div>
        
        <div className="stat-card">
          <div className="stat-icon">👥</div>
          <div className="stat-content">
            <div className="stat-value">{stats.total_registrations || 0}</div>
            <div className="stat-label">总注册数</div>
          </div>
        </div>
        
        <div className="stat-card">
          <div className="stat-icon">💰</div>
          <div className="stat-content">
            <div className="stat-value">¥{(stats.total_revenue || 0).toFixed(2)}</div>
            <div className="stat-label">产生收入</div>
          </div>
        </div>
        
        <div className="stat-card">
          <div className="stat-icon">💸</div>
          <div className="stat-content">
            <div className="stat-value">¥{(stats.total_rewards_paid || 0).toFixed(2)}</div>
            <div className="stat-label">已发返佣</div>
          </div>
        </div>
        
        {/* 返佣状态分布 */}
        {statusBars.length > 0 && (
          <div className="chart-card full-width">
            <h3>返佣状态分布</h3>
            <div className="status-bars">
              {statusBars.map(bar => (
                <div key={bar.status} className="status-bar-item">
                  <span className="status-label">
                    {bar.status === 'pending' ? '待审核' : bar.status === 'approved' ? '已通过' : bar.status === 'paid' ? '已打款' : '已取消'}
                  </span>
                  <div className="status-bar">
                    <div className={`status-bar-fill ${bar.status}`} style={{ width: `${bar.width}%` }}></div>
                  </div>
                  <span className="status-count">{bar.data.count} 笔 (¥{bar.data.total.toFixed(2)})</span>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    );
  };

  const renderPromotions = () => (
    <div className="table-container">
      <div className="table-header">
        <h3>推广活动列表</h3>
        <button className="btn-primary" onClick={() => { setEditingPromo(null); setShowPromoModal(true); }}>
          + 创建活动
        </button>
      </div>
      
      {error && <div className="error-message">{error}</div>}
      
      <table className="data-table">
        <thead>
          <tr>
            <th>ID</th>
            <th>活动标题</th>
            <th>返佣类型</th>
            <th>返佣值</th>
            <th>状态</th>
            <th>链接数</th>
            <th>已发返佣</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {promotions.map(promo => (
            <tr key={promo.id}>
              <td>{promo.id}</td>
              <td>
                <div className="name-cell">
                  <div className="name">{promo.title}</div>
                  {promo.description && <div className="description">{promo.description}</div>}
                </div>
              </td>
              <td>
                <span className={`badge ${promo.reward_type}`}>
                  {promo.reward_type === 'percentage' ? '百分比' : promo.reward_type === 'fixed' ? '固定金额' : '积分'}
                </span>
              </td>
              <td>
                {promo.reward_type === 'percentage' ? `${promo.reward_value}%` : 
                 promo.reward_type === 'fixed' ? `¥${promo.reward_value.toFixed(2)}` : 
                 `${promo.reward_value} 分`}
              </td>
              <td>
                <span className={`status-badge ${promo.status}`}>
                  {promo.status === 'active' ? '进行中' : promo.status === 'inactive' ? '已停用' : '已过期'}
                </span>
              </td>
              <td>{promo.link_count || 0}</td>
              <td>¥{(promo.total_rewards || 0).toFixed(2)}</td>
              <td>{new Date(promo.created_at).toLocaleDateString()}</td>
              <td>
                <div className="action-buttons">
                  <button className="btn-sm" onClick={() => { setEditingPromo(promo); setShowPromoModal(true); }}>编辑</button>
                  <button className="btn-sm warning" onClick={() => handleTogglePromo(promo.id)}>
                    {promo.status === 'active' ? '停用' : '启用'}
                  </button>
                  <button className="btn-sm danger" onClick={() => handleDeletePromo(promo.id)}>删除</button>
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      
      {/* 分页 */}
      <div className="pagination">
        <button disabled={promoPage <= 1} onClick={() => loadPromotions(promoPage - 1)}>上一页</button>
        <span>第 {promoPage} 页 / 共 {Math.ceil(totalPromos / 20)} 页</span>
        <button disabled={promoPage >= Math.ceil(totalPromos / 20)} onClick={() => loadPromotions(promoPage + 1)}>下一页</button>
      </div>
    </div>
  );

  const renderLinks = () => (
    <div className="table-container">
      <div className="table-header">
        <h3>分销链接列表</h3>
        <button className="btn-primary" onClick={() => setShowLinkModal(true)}>
          + 生成链接
        </button>
      </div>
      
      <table className="data-table">
        <thead>
          <tr>
            <th>ID</th>
            <th>推广短码</th>
            <th>推广人</th>
            <th>关联活动</th>
            <th>点击数</th>
            <th>注册数</th>
            <th>转化数</th>
            <th>状态</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {referralLinks.map(link => (
            <tr key={link.id}>
              <td>{link.id}</td>
              <td>
                <code className="code">{link.code}</code>
                <button className="btn-icon" onClick={() => { navigator.clipboard.writeText(link.code); alert('已复制'); }}>📋</button>
              </td>
              <td>{link.username}</td>
              <td>{link.promotion_title || '-'}</td>
              <td>{link.total_clicks || 0}</td>
              <td>{link.total_registrations || 0}</td>
              <td>{link.total_conversions || 0}</td>
              <td>
                <span className={`status-badge ${link.status}`}>
                  {link.status === 'active' ? '活跃' : '停用'}
                </span>
              </td>
              <td>{new Date(link.created_at).toLocaleDateString()}</td>
              <td>
                <div className="action-buttons">
                  <button className="btn-sm" onClick={() => {
                    const url = `${link.target_url}?ref=${link.code}`;
                    navigator.clipboard.writeText(url);
                    alert('链接已复制');
                  }}>复制链接</button>
                  <button className="btn-sm warning" onClick={async () => {
                    if (window.confirm('确定重新生成推广短码？')) {
                      try {
                        await adminAPI.regenerateReferralCode(link.id);
                        loadLinks(linkPage);
                      } catch (err: any) {
                        setError(err.message || '操作失败');
                      }
                    }
                  }}>重新生成</button>
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );

  const renderRewards = () => (
    <div className="table-container">
      <div className="table-header">
        <h3>返佣记录</h3>
      </div>
      
      <table className="data-table">
        <thead>
          <tr>
            <th>ID</th>
            <th>推广码</th>
            <th>推广人</th>
            <th>被推荐人</th>
            <th>订单号</th>
            <th>返佣类型</th>
            <th>返佣金额</th>
            <th>状态</th>
            <th>打款时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {rewards.map(reward => (
            <tr key={reward.id}>
              <td>{reward.id}</td>
              <td><code className="code">{reward.referral_code}</code></td>
              <td>{reward.referrer_name}</td>
              <td>{reward.referee_name}</td>
              <td>{reward.order_id || '-'}</td>
              <td>
                <span className="badge">
                  {reward.reward_type === 'registration' ? '注册奖励' : 
                   reward.reward_type === 'first_purchase' ? '首购返佣' : '续费返佣'}
                </span>
              </td>
              <td>¥{reward.reward_amount.toFixed(2)}</td>
              <td>
                <span className={`status-badge ${reward.status}`}>
                  {reward.status === 'pending' ? '待审核' : 
                   reward.status === 'approved' ? '已通过' : 
                   reward.status === 'paid' ? '已打款' : '已取消'}
                </span>
              </td>
              <td>{reward.paid_at ? new Date(reward.paid_at).toLocaleDateString() : '-'}</td>
              <td>
                <div className="action-buttons">
                  {reward.status === 'pending' && (
                    <button className="btn-sm" onClick={() => handleApproveReward(reward.id)}>审核通过</button>
                  )}
                  {reward.status === 'approved' && (
                    <button className="btn-sm warning" onClick={() => handleMarkPaid(reward.id)}>标记已打款</button>
                  )}
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );

  const renderLeaderboard = () => (
    <div className="table-container">
      <div className="table-header">
        <h3>推广排行榜</h3>
      </div>
      
      <table className="data-table">
        <thead>
          <tr>
            <th>排名</th>
            <th>用户</th>
            <th>点击数</th>
            <th>注册数</th>
            <th>转化数</th>
            <th>产生收入</th>
            <th>获得返佣</th>
          </tr>
        </thead>
        <tbody>
          {leaderboard.map((entry, index) => (
            <tr key={entry.user_id}>
              <td>
                <span className={`rank ${index < 3 ? 'top' : ''}`}>
                  {index === 0 ? '🥇' : index === 1 ? '🥈' : index === 2 ? '🥉' : entry.rank}
                </span>
              </td>
              <td>{entry.username}</td>
              <td>{entry.total_clicks || 0}</td>
              <td>{entry.total_registrations || 0}</td>
              <td>{entry.total_conversions || 0}</td>
              <td>¥{(entry.total_revenue || 0).toFixed(2)}</td>
              <td>¥{(entry.total_rewards || 0).toFixed(2)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );

  return (
    <div className="promotion-page">
      <div className="page-header">
        <h2>📢 推广系统管理</h2>
        <p>管理推广活动、分销链接、返佣记录和推广统计</p>
      </div>

      {error && <div className="error-banner">{error}</div>}

      <div className="tabs">
        <button className={`tab ${activeTab === 'overview' ? 'active' : ''}`} onClick={() => setActiveTab('overview')}>
          📊 概览
        </button>
        <button className={`tab ${activeTab === 'promotions' ? 'active' : ''}`} onClick={() => setActiveTab('promotions')}>
          📢 推广活动
        </button>
        <button className={`tab ${activeTab === 'links' ? 'active' : ''}`} onClick={() => setActiveTab('links')}>
          🔗 分销链接
        </button>
        <button className={`tab ${activeTab === 'rewards' ? 'active' : ''}`} onClick={() => setActiveTab('rewards')}>
          💰 返佣记录
        </button>
        <button className={`tab ${activeTab === 'leaderboard' ? 'active' : ''}`} onClick={() => setActiveTab('leaderboard')}>
          🏆 排行榜
        </button>
      </div>

      <div className="tab-content">
        {activeTab === 'overview' && renderOverview()}
        {activeTab === 'promotions' && renderPromotions()}
        {activeTab === 'links' && renderLinks()}
        {activeTab === 'rewards' && renderRewards()}
        {activeTab === 'leaderboard' && renderLeaderboard()}
      </div>

      {/* 推广活动弹窗 */}
      {showPromoModal && (
        <PromotionModal
          promotion={editingPromo}
          onSave={handleSavePromo}
          onCancel={() => { setShowPromoModal(false); setEditingPromo(null); }}
        />
      )}

      {/* 生成链接弹窗 */}
      {showLinkModal && (
        <LinkModal
          onSave={handleGenerateLink}
          onCancel={() => setShowLinkModal(false)}
        />
      )}
    </div>
  );
};

// ==================== 推广活动弹窗 ====================
interface PromotionModalProps {
  promotion: Promotion | null;
  onSave: (data: any) => void;
  onCancel: () => void;
}

const PromotionModal: React.FC<PromotionModalProps> = ({ promotion, onSave, onCancel }) => {
  const [formData, setFormData] = useState({
    title: promotion?.title || '',
    description: promotion?.description || '',
    reward_type: promotion?.reward_type || 'percentage',
    reward_value: promotion?.reward_value || 5,
    min_payout: promotion?.min_payout || 10,
    start_date: promotion?.start_date ? promotion.start_date.slice(0, 16) : '',
    end_date: promotion?.end_date ? promotion.end_date.slice(0, 16) : '',
    max_referrals: promotion?.max_referrals || 0,
    status: promotion?.status || 'active'
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSave(formData);
  };

  return (
    <div className="modal-overlay">
      <div className="modal">
        <div className="modal-header">
          <h3>{promotion ? '编辑推广活动' : '创建推广活动'}</h3>
          <button className="close-btn" onClick={onCancel}>×</button>
        </div>
        <form onSubmit={handleSubmit}>
          <div className="modal-body">
            <div className="form-group">
              <label>活动标题 *</label>
              <input
                type="text"
                required
                value={formData.title}
                onChange={e => setFormData({ ...formData, title: e.target.value })}
                placeholder="例如：新用户推广计划"
              />
            </div>
            
            <div className="form-group">
              <label>活动描述</label>
              <textarea
                value={formData.description}
                onChange={e => setFormData({ ...formData, description: e.target.value })}
                placeholder="活动说明..."
                rows={3}
              />
            </div>
            
            <div className="form-row">
              <div className="form-group">
                <label>返佣类型 *</label>
                <select
                  value={formData.reward_type}
                  onChange={e => setFormData({ ...formData, reward_type: e.target.value })}
                >
                  <option value="percentage">百分比</option>
                  <option value="fixed">固定金额</option>
                  <option value="points">积分</option>
                </select>
              </div>
              
              <div className="form-group">
                <label>返佣值 *</label>
                <input
                  type="number"
                  required
                  step={formData.reward_type === 'percentage' ? 1 : 0.01}
                  min={0}
                  value={formData.reward_value}
                  onChange={e => setFormData({ ...formData, reward_value: parseFloat(e.target.value) })}
                  placeholder={formData.reward_type === 'percentage' ? '5 表示 5%' : '100 表示 100元'}
                />
              </div>
            </div>
            
            <div className="form-row">
              <div className="form-group">
                <label>最低提现金额</label>
                <input
                  type="number"
                  step={0.01}
                  min={0}
                  value={formData.min_payout}
                  onChange={e => setFormData({ ...formData, min_payout: parseFloat(e.target.value) })}
                />
              </div>
              
              <div className="form-group">
                <label>最大推广人数 (0=无限制)</label>
                <input
                  type="number"
                  min={0}
                  value={formData.max_referrals}
                  onChange={e => setFormData({ ...formData, max_referrals: parseInt(e.target.value) })}
                />
              </div>
            </div>
            
            <div className="form-row">
              <div className="form-group">
                <label>开始时间 *</label>
                <input
                  type="datetime-local"
                  required
                  value={formData.start_date}
                  onChange={e => setFormData({ ...formData, start_date: e.target.value })}
                />
              </div>
              
              <div className="form-group">
                <label>结束时间 (可选)</label>
                <input
                  type="datetime-local"
                  value={formData.end_date}
                  onChange={e => setFormData({ ...formData, end_date: e.target.value })}
                />
              </div>
            </div>
          </div>
          
          <div className="modal-footer">
            <button type="button" className="btn-secondary" onClick={onCancel}>取消</button>
            <button type="submit" className="btn-primary">保存</button>
          </div>
        </form>
      </div>
    </div>
  );
};

// ==================== 生成链接弹窗 ====================
interface LinkModalProps {
  onSave: (data: any) => void;
  onCancel: () => void;
}

const LinkModal: React.FC<LinkModalProps> = ({ onSave, onCancel }) => {
  const [formData, setFormData] = useState({
    promotion_id: '',
    target_url: 'https://bot.qihuyun.com/register',
    channel: 'link'
  });
  const [promotions, setPromotions] = useState<Promotion[]>([]);

  useEffect(() => {
    adminAPI.getPromotions({ status: 'active', page: 1, page_size: 100 })
      .then(res => {
        if (res.data) setPromotions(res.data.items);
      })
      .catch(err => console.error('Failed to load active promotions:', err));
  }, []);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSave({
      promotion_id: parseInt(formData.promotion_id),
      target_url: formData.target_url,
      channel: formData.channel
    });
  };

  return (
    <div className="modal-overlay">
      <div className="modal">
        <div className="modal-header">
          <h3>生成分销链接</h3>
          <button className="close-btn" onClick={onCancel}>×</button>
        </div>
        <form onSubmit={handleSubmit}>
          <div className="modal-body">
            <div className="form-group">
              <label>选择推广活动 *</label>
              <select
                required
                value={formData.promotion_id}
                onChange={e => setFormData({ ...formData, promotion_id: e.target.value })}
              >
                <option value="">-- 请选择 --</option>
                {promotions.map(p => (
                  <option key={p.id} value={p.id}>{p.title}</option>
                ))}
              </select>
            </div>
            
            <div className="form-group">
              <label>目标URL *</label>
              <input
                type="url"
                required
                value={formData.target_url}
                onChange={e => setFormData({ ...formData, target_url: e.target.value })}
                placeholder="https://bot.qihuyun.com/register"
              />
            </div>
            
            <div className="form-group">
              <label>推广渠道</label>
              <select
                value={formData.channel}
                onChange={e => setFormData({ ...formData, channel: e.target.value })}
              >
                <option value="link">链接</option>
                <option value="qrcode">二维码</option>
                <option value="api">API</option>
              </select>
            </div>
          </div>
          
          <div className="modal-footer">
            <button type="button" className="btn-secondary" onClick={onCancel}>取消</button>
            <button type="submit" className="btn-primary">生成链接</button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default Promotion;