import React from 'react';

/**
 * D7. AI Agent管理面板 - 平台管理员的AI Agent运营监控
 *
 * Agent会话统计、常见问题Top10、响应质量监控、模型配置
 */

const agentStats = [
  { label: '今日会话数', value: '3,456', change: '+18%', color: 'var(--color-primary)' },
  { label: '平均响应时间', value: '1.2s', change: '-0.3s', color: 'var(--color-success)' },
  { label: '用户满意度', value: '94.5%', change: '+2.1%', color: 'var(--color-info)' },
  { label: '人工接管率', value: '3.2%', change: '-0.5%', color: 'var(--color-warning)' },
];

const topQuestions = [
  { question: '如何购买券？', count: 234, category: '使用指引' },
  { question: '推荐高折扣券', count: 189, category: '智能推券' },
  { question: '我的券快过期了', count: 156, category: '到期管理' },
  { question: '如何出售我的券？', count: 134, category: '交易指引' },
  { question: '退款怎么操作？', count: 98, category: '售后服务' },
];

const agentModules = [
  { name: '智能推券', status: 'active', accuracy: '92%', desc: '根据用户画像推荐券' },
  { name: '比价分析', status: 'active', accuracy: '96%', desc: '三因子定价模型分析' },
  { name: '投资教育', status: 'active', accuracy: '89%', desc: '券投资知识科普' },
  { name: '客服对话', status: 'active', accuracy: '91%', desc: '常见问题自动应答' },
  { name: '发行方助手', status: 'active', accuracy: '94%', desc: '发券建议/定价优化' },
  { name: '风险预警', status: 'beta', accuracy: '87%', desc: '异常交易智能预警' },
];

export const AgentPanelPage: React.FC = () => {
  return (
    <div>
      <h1 style={{ font: 'var(--text-h1)', color: 'var(--color-text-primary)', marginBottom: 24 }}>AI Agent 管理</h1>

      {/* Stats */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 24 }}>
        {agentStats.map(s => (
          <div key={s.label} style={{
            background: 'var(--color-surface)', borderRadius: 'var(--radius-md)',
            border: '1px solid var(--color-border-light)', padding: 20,
          }}>
            <div style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-tertiary)', marginBottom: 8 }}>{s.label}</div>
            <div style={{ font: 'var(--text-h1)', color: s.color }}>{s.value}</div>
            <div style={{ font: 'var(--text-caption)', color: 'var(--color-text-tertiary)', marginTop: 4 }}>{s.change}</div>
          </div>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
        {/* Top Questions */}
        <div style={{ background: 'var(--color-surface)', borderRadius: 'var(--radius-md)', border: '1px solid var(--color-border-light)', padding: 20 }}>
          <h2 style={{ font: 'var(--text-h2)', marginBottom: 16 }}>热门问题 Top 5</h2>
          {topQuestions.map((q, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', padding: '10px 0', borderBottom: '1px solid var(--color-border-light)' }}>
              <span style={{
                width: 24, height: 24, borderRadius: '50%', background: 'var(--color-primary-surface)',
                color: 'var(--color-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center',
                font: 'var(--text-caption)', fontWeight: 700,
              }}>{i + 1}</span>
              <div style={{ flex: 1, marginLeft: 12 }}>
                <div style={{ font: 'var(--text-body)' }}>{q.question}</div>
                <span style={{
                  padding: '1px 6px', borderRadius: 'var(--radius-full)', font: 'var(--text-caption)',
                  background: 'var(--color-primary-surface)', color: 'var(--color-primary)',
                }}>{q.category}</span>
              </div>
              <span style={{ font: 'var(--text-label)', color: 'var(--color-primary)' }}>{q.count}次</span>
            </div>
          ))}
        </div>

        {/* Agent Modules */}
        <div style={{ background: 'var(--color-surface)', borderRadius: 'var(--radius-md)', border: '1px solid var(--color-border-light)', padding: 20 }}>
          <h2 style={{ font: 'var(--text-h2)', marginBottom: 16 }}>Agent 模块</h2>
          {agentModules.map((m, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', padding: '10px 0', borderBottom: '1px solid var(--color-border-light)' }}>
              <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ font: 'var(--text-label)' }}>{m.name}</span>
                  <span style={{
                    padding: '1px 6px', borderRadius: 'var(--radius-full)', font: 'var(--text-caption)', fontWeight: 600,
                    background: m.status === 'active' ? 'var(--color-success-light)' : 'var(--color-warning-light)',
                    color: m.status === 'active' ? 'var(--color-success)' : 'var(--color-warning)',
                  }}>{m.status === 'active' ? '运行中' : 'Beta'}</span>
                </div>
                <div style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-tertiary)' }}>{m.desc}</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ font: 'var(--text-label)', color: 'var(--color-success)' }}>{m.accuracy}</div>
                <div style={{ font: 'var(--text-caption)', color: 'var(--color-text-tertiary)' }}>准确率</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};