'use client';

import React from 'react';
import { t } from '@/i18n/locales';
import { useApi } from '@/lib/use-api';

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

interface AgentPanelData {
  stats: { label: string; value: string; change: string; color: string }[];
  topQuestions: { question: string; count: number; category: string }[];
  modules: { name: string; status: string; accuracy: string; desc: string }[];
}

const loadingBox: React.CSSProperties = {
  display: 'flex', alignItems: 'center', justifyContent: 'center',
  padding: 40, color: 'var(--color-text-tertiary)', font: 'var(--text-body)',
};

export const AgentPanelPage: React.FC = () => {
  const { data, isLoading, error } = useApi<AgentPanelData>('/api/v1/ai/admin/agent/stats');

  if (error) return <div style={loadingBox}>Error: {error.message}</div>;
  if (isLoading) return <div style={loadingBox}>Loading...</div>;

  const agentStats = data?.stats ?? [];
  const topQuestions = data?.topQuestions ?? [];
  const agentModules = data?.modules ?? [];

  return (
    <div>
      <h1 style={{ font: 'var(--text-h1)', color: 'var(--color-text-primary)', marginBottom: 24 }}>{t('agent_title')}</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 }}>{t('agent_top_questions')}</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}{t('agent_unit_times')}</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 }}>{t('agent_modules')}</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' ? t('agent_running') : '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)' }}>{t('accuracy')}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};
