'use client';

import { useState } from 'react';
import {
  // 认证相关
  loginApiV1AuthLoginPost,
  registerApiV1AuthRegisterPost,
  registerWithCompanyApiV1AuthRegisterWithCompanyPost,
  getCaptchaApiV1AuthCaptchaGet,
  refreshTokenApiV1AuthRefreshPost,
  logoutApiV1AuthLogoutPost,
  getCurrentUserInfoApiV1AuthMeGet,
  updateCurrentUserApiV1AuthMePut,
  changePasswordApiV1AuthChangePasswordPost,
  verifyUserTokenApiV1AuthVerifyTokenPost,

  // 用户管理
  getUsersApiV1UsersGet,
  createUserApiV1UsersPost,
  getUserApiV1UsersUserIdGet,
  updateUserApiV1UsersUserIdPut,
  deleteUserApiV1UsersUserIdDelete,
  activateUserApiV1UsersUserIdActivatePost,
  deactivateUserApiV1UsersUserIdDeactivatePost,
  getUserStatsApiV1UsersStatsSummaryGet,
  getDepartmentOptionsApiV1UsersDepartmentsOptionsGet,

  // 系统用户管理
  listSystemUsersApiV1UsersSystemUsersGet,
  createSystemUserApiV1UsersSystemUsersPost,
  getSystemUserApiV1UsersSystemUsersUserIdGet,
  updateSystemUserApiV1UsersSystemUsersUserIdPut,
  deleteSystemUserApiV1UsersSystemUsersUserIdDelete,
  activateSystemUserApiV1UsersSystemUsersUserIdActivatePost,
  deactivateSystemUserApiV1UsersSystemUsersUserIdDeactivatePost,
  getSystemUserStatsApiV1UsersSystemUsersStatsSummaryGet,

  // 租户管理
  listTenantsApiV1TenantsGet,
  createTenantApiV1TenantsPost,
  getTenantApiV1TenantsTenantIdGet,
  deleteTenantApiV1TenantsTenantIdDelete,
  auditTenantApiV1TenantsTenantIdAuditPost,
  disableTenantApiV1TenantsTenantIdDisablePatch,
  enableTenantApiV1TenantsTenantIdEnablePatch,
  getCurrentTenantApiV1TenantsMeGet,
  submitTenantAuditApiV1TenantsSubmitPost,
  getTenantAuditLogsApiV1TenantsAuditLogsGet,
  listAnonymousTenantsApiV1TenantsAnonymousListGet,

  // 部门管理
  getDepartmentsApiV1DepartmentsDepartmentsGet,
  createDepartmentApiV1DepartmentsDepartmentsPost,
  getDepartmentApiV1DepartmentsDepartmentsDepartmentIdGet,
  updateDepartmentApiV1DepartmentsDepartmentsDepartmentIdPut,
  deleteDepartmentApiV1DepartmentsDepartmentsDepartmentIdDelete,
  updateDepartmentOrderApiV1DepartmentsDepartmentsDepartmentIdOrderPatch,
  updateDepartmentStatusApiV1DepartmentsDepartmentsDepartmentIdStatusPatch,
  getDepartmentTreeApiV1DepartmentsDepartmentsTreeGet,

  // 系统相关
  getSystemInfoApiV1SystemInfoGet,
  getSystemConfigApiV1SystemConfigGet,
  getSystemStatsApiV1SystemStatsGet,
  getSystemMetricsApiV1SystemMetricsGet,
  getPerformanceSummaryApiV1SystemMetricsSummaryGet,

  // 健康检查
  healthCheckApiV1HealthGet,
  detailedHealthCheckApiV1HealthDetailedGet,

  // 类型导入
  type UserCreate,
  type UserCreateWithCompany,
  type UserLoginWithCaptcha,
  type UserUpdate,
  type UserUpdatePassword,
  type TenantCreateRequest,
  type TenantUpdateRequest,
  type TenantAuditRequest,
  type DepartmentCreate,
  type DepartmentUpdate,
  type CaptchaResponse,
  type Token
} from '@/lib/api';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Badge } from '@/components/ui/badge';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Separator } from '@/components/ui/separator';
import { Label } from '@/components/ui/label';
import OpenApiExamples from './openapi-examples';

export default function ApiExamplePage() {
  const [loading, setLoading] = useState(false);
  const [results, setResults] = useState<any[]>([]);
  const [errors, setErrors] = useState<string[]>([]);

  // 登录表单状态
  const [loginData, setLoginData] = useState<UserLoginWithCaptcha>({
    identifier: '',
    password: '',
    captcha_id: '',
    captcha_text: ''
  });

  // 验证码状态
  const [captchaData, setCaptchaData] = useState<CaptchaResponse | null>(null);

  // 注册表单状态
  const [registerData, setRegisterData] = useState<UserCreate>({
    username: '',
    password: '',
    email: '',
    full_name: '',
    phone: '',
    tenant_id: '',
    scope: '',
    department_id: ''
  });

  // 带企业注册表单状态
  const [registerWithCompanyData, setRegisterWithCompanyData] = useState<UserCreateWithCompany>({
    user: {
      username: '',
      password: '',
      email: '',
      full_name: ''
    },
    company: {
      name: '',
      code: '',
      description: ''
    }
  });

  // 用户创建表单状态
  const [createUserData, setCreateUserData] = useState<UserCreate>({
    username: '',
    password: '',
    email: '',
    full_name: '',
    phone: '',
    tenant_id: '',
    scope: '',
    department_id: ''
  });

  // 租户创建表单状态
  const [createTenantData, setCreateTenantData] = useState<TenantCreateRequest>({
    company_name: '',
    tenant_code: '',
    company_type: '有限责任公司'
  });

  // 部门创建表单状态
  const [createDepartmentData, setCreateDepartmentData] = useState<DepartmentCreate>({
    name: '',
    code: '',
    description: '',
    parent_id: ''
  });

  // 通用ID输入状态
  const [userId, setUserId] = useState('');
  const [tenantId, setTenantId] = useState('');
  const [departmentId, setDepartmentId] = useState('');

  // 添加结果到显示列表
  const addResult = (type: string, input: any, output: any, error?: string) => {
    const result = {
      id: Date.now(),
      type,
      input,
      output,
      error,
      timestamp: new Date().toLocaleTimeString()
    };
    setResults(prev => [result, ...prev]);
    if (error) {
      setErrors(prev => [error, ...prev]);
    }
  };

  // 清空结果
  const clearResults = () => {
    setResults([]);
    setErrors([]);
  };

  // 用户登录
  const handleLogin = async () => {
    setLoading(true);
    try {
      addResult('用户登录', '登录请求', '发送中...');

      const response = await loginApiV1AuthLoginPost({
        body: loginData
      });

      if (response.data) {
        addResult('用户登录', loginData, response.data);
      } else if (response.error) {
        addResult('用户登录', loginData, null, JSON.stringify(response.error));
      }
    } catch (error: any) {
      addResult('用户登录', loginData, null, error.message);
    } finally {
      setLoading(false);
    }
  };

  // 用户注册
  const handleRegister = async () => {
    setLoading(true);
    try {
      addResult('用户注册', '注册请求', '发送中...');

      const response = await registerApiV1AuthRegisterPost({
        body: registerData
      });

      if (response.data) {
        addResult('用户注册', registerData, response.data);
      } else if (response.error) {
        addResult('用户注册', registerData, null, JSON.stringify(response.error));
      }
    } catch (error: any) {
      addResult('用户注册', registerData, null, error.message);
    } finally {
      setLoading(false);
    }
  };

  // 带企业用户注册
  const handleRegisterWithCompany = async () => {
    setLoading(true);
    try {
      addResult('用户注册并创建企业', '注册请求', '发送中...');

      const response = await registerWithCompanyApiV1AuthRegisterWithCompanyPost({
        body: registerWithCompanyData
      });

      if (response.data) {
        addResult('用户注册并创建企业', registerWithCompanyData, response.data);
      } else if (response.error) {
        addResult('用户注册并创建企业', registerWithCompanyData, null, JSON.stringify(response.error));
      }
    } catch (error: any) {
      addResult('用户注册并创建企业', registerWithCompanyData, null, error.message);
    } finally {
      setLoading(false);
    }
  };

  // 获取验证码
  const handleGetCaptcha = async () => {
    setLoading(true);
    try {
      addResult('获取验证码', 'GET /api/v1/auth/captcha', '发送中...');

      const response = await getCaptchaApiV1AuthCaptchaGet({});

      if (response.data) {
        setCaptchaData(response.data);
        setLoginData(prev => ({ ...prev, captcha_id: response.data.captcha_id }));
        addResult('获取验证码', '无参数', response.data);
      } else if (response.error) {
        addResult('获取验证码', '无参数', null, JSON.stringify(response.error));
      }
    } catch (error: any) {
      addResult('获取验证码', '无参数', null, error.message);
    } finally {
      setLoading(false);
    }
  };

  // 刷新令牌
  const handleRefreshToken = async () => {
    setLoading(true);
    try {
      addResult('刷新令牌', 'POST /api/v1/auth/refresh', '发送中...');

      const response = await refreshTokenApiV1AuthRefreshPost({});

      if (response.data) {
        addResult('刷新令牌', '无参数', response.data);
      } else if (response.error) {
        addResult('刷新令牌', '无参数', null, JSON.stringify(response.error));
      }
    } catch (error: any) {
      addResult('刷新令牌', '无参数', null, error.message);
    } finally {
      setLoading(false);
    }
  };

  // 获取当前用户信息
  const handleGetCurrentUser = async () => {
    setLoading(true);
    try {
      addResult('获取当前用户', 'GET /api/v1/auth/me', '发送中...');

      const response = await getCurrentUserInfoApiV1AuthMeGet({});

      if (response.data) {
        addResult('获取当前用户', '无参数', response.data);
      } else if (response.error) {
        addResult('获取当前用户', '无参数', null, JSON.stringify(response.error));
      }
    } catch (error: any) {
      addResult('获取当前用户', '无参数', null, error.message);
    } finally {
      setLoading(false);
    }
  };

  // 获取用户列表
  const handleGetUsers = async () => {
    setLoading(true);
    try {
      addResult('获取用户列表', 'GET /api/v1/users', '发送中...');

      const response = await getUsersApiV1UsersGet({});

      if (response.data) {
        addResult('获取用户列表', '无参数', response.data);
      } else if (response.error) {
        addResult('获取用户列表', '无参数', null, JSON.stringify(response.error));
      }
    } catch (error: any) {
      addResult('获取用户列表', '无参数', null, error.message);
    } finally {
      setLoading(false);
    }
  };

  // 创建用户
  const handleCreateUser = async () => {
    setLoading(true);
    try {
      addResult('创建用户', 'POST /api/v1/users', '发送中...');

      const response = await createUserApiV1UsersPost({
        body: createUserData
      });

      if (response.data) {
        addResult('创建用户', createUserData, response.data);
      } else if (response.error) {
        addResult('创建用户', createUserData, null, JSON.stringify(response.error));
      }
    } catch (error: any) {
      addResult('创建用户', createUserData, null, error.message);
    } finally {
      setLoading(false);
    }
  };

  // 获取用户详情
  const handleGetUser = async () => {
    if (!userId) {
      addResult('获取用户详情', '缺少用户ID', null, '请输入用户ID');
      return;
    }

    setLoading(true);
    try {
      addResult('获取用户详情', `GET /api/v1/users/${userId}`, '发送中...');

      const response = await getUserApiV1UsersUserIdGet({
        path: { user_id: userId }
      });

      if (response.data) {
        addResult('获取用户详情', { user_id: userId }, response.data);
      } else if (response.error) {
        addResult('获取用户详情', { user_id: userId }, null, JSON.stringify(response.error));
      }
    } catch (error: any) {
      addResult('获取用户详情', { user_id: userId }, null, error.message);
    } finally {
      setLoading(false);
    }
  };

  // 用户登出
  const handleLogout = async () => {
    setLoading(true);
    try {
      addResult('用户登出', 'POST /api/v1/auth/logout', '发送中...');

      const response = await logoutApiV1AuthLogoutPost({});

      if (response.data) {
        addResult('用户登出', '无参数', response.data);
      } else if (response.error) {
        addResult('用户登出', '无参数', null, JSON.stringify(response.error));
      }
    } catch (error: any) {
      addResult('用户登出', '无参数', null, error.message);
    } finally {
      setLoading(false);
    }
  };

  // 健康检查
  const handleHealthCheck = async () => {
    setLoading(true);
    try {
      addResult('健康检查', 'GET /api/v1/health', '发送中...');

      const response = await healthCheckApiV1HealthGet({});

      if (response.data) {
        addResult('健康检查', '无参数', response.data);
      } else if (response.error) {
        addResult('健康检查', '无参数', null, JSON.stringify(response.error));
      }
    } catch (error: any) {
      addResult('健康检查', '无参数', null, error.message);
    } finally {
      setLoading(false);
    }
  };

  // 系统信息
  const handleGetSystemInfo = async () => {
    setLoading(true);
    try {
      addResult('系统信息', 'GET /api/v1/system/info', '发送中...');

      const response = await getSystemInfoApiV1SystemInfoGet({});

      if (response.data) {
        addResult('系统信息', '无参数', response.data);
      } else if (response.error) {
        addResult('系统信息', '无参数', null, JSON.stringify(response.error));
      }
    } catch (error: any) {
      addResult('系统信息', '无参数', null, error.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen bg-background p-6">
      <div className="max-w-7xl mx-auto">
        <div className="flex justify-between items-center mb-6">
          <h1 className="text-3xl font-bold">OpenAPI 接口测试</h1>
          <Button
            variant="outline"
            onClick={clearResults}
            disabled={results.length === 0}
          >
            清空结果 ({results.length})
          </Button>
        </div>

        <Tabs defaultValue="interactive" className="w-full">
          <TabsList className="grid w-full grid-cols-3">
            <TabsTrigger value="interactive">交互式测试</TabsTrigger>
            <TabsTrigger value="examples">接口示例</TabsTrigger>
            <TabsTrigger value="documentation">OpenAPI 文档</TabsTrigger>
          </TabsList>

          <TabsContent value="interactive" className="space-y-6">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              {/* 左侧：API 操作面板 */}
              <Card>
                <CardHeader>
                  <CardTitle>API 操作</CardTitle>
                  <CardDescription>
                    使用 @hey-api/openapi-ts 生成的接口函数
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <Tabs defaultValue="auth" className="w-full">
                    <TabsList className="grid w-full grid-cols-5">
                      <TabsTrigger value="auth">认证操作</TabsTrigger>
                      <TabsTrigger value="user">用户管理</TabsTrigger>
                      <TabsTrigger value="tenant">租户管理</TabsTrigger>
                      <TabsTrigger value="department">部门管理</TabsTrigger>
                      <TabsTrigger value="system">系统管理</TabsTrigger>
                    </TabsList>

                    <TabsContent value="auth" className="space-y-4">
                      {/* 登录表单 */}
                      <div className="space-y-3">
                        <h4 className="font-medium">用户登录（需要验证码）</h4>
                        <div className="space-y-2">
                          <Label htmlFor="identifier">用户名/邮箱/手机号</Label>
                          <Input
                            id="identifier"
                            placeholder="请输入用户名、邮箱或手机号"
                            value={loginData.identifier}
                            onChange={(e) => setLoginData(prev => ({ ...prev, identifier: e.target.value }))}
                          />
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor="password">密码</Label>
                          <Input
                            id="password"
                            type="password"
                            placeholder="请输入密码"
                            value={loginData.password}
                            onChange={(e) => setLoginData(prev => ({ ...prev, password: e.target.value }))}
                          />
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor="captcha_text">验证码</Label>
                          <div className="flex gap-2">
                            <Input
                              id="captcha_text"
                              placeholder="请输入验证码"
                              value={loginData.captcha_text}
                              onChange={(e) => setLoginData(prev => ({ ...prev, captcha_text: e.target.value }))}
                              className="flex-1"
                            />
                            <Button
                              onClick={handleGetCaptcha}
                              disabled={loading}
                              variant="outline"
                              className="whitespace-nowrap"
                            >
                              获取验证码
                            </Button>
                          </div>
                          {captchaData && (
                            <div className="mt-2 p-2 bg-muted rounded">
                              <img
                                src={`data:image/png;base64,${captchaData.image}`}
                                alt="验证码"
                                className="h-12 mx-auto"
                              />
                              <p className="text-xs text-center text-muted-foreground mt-1">
                                验证码ID: {captchaData.captcha_id}
                              </p>
                            </div>
                          )}
                        </div>
                        <Button
                          onClick={handleLogin}
                          disabled={loading || !loginData.identifier || !loginData.password || !loginData.captcha_text || !loginData.captcha_id}
                          className="w-full"
                        >
                          {loading ? '登录中...' : '登录'}
                        </Button>
                      </div>

                      {/* 注册表单 */}
                      <div className="space-y-2">
                        <h4 className="font-medium">用户注册</h4>
                        <Input
                          placeholder="用户名"
                          value={registerData.username}
                          onChange={(e) => setRegisterData(prev => ({ ...prev, username: e.target.value }))}
                        />
                        <Input
                          type="password"
                          placeholder="密码"
                          value={registerData.password}
                          onChange={(e) => setRegisterData(prev => ({ ...prev, password: e.target.value }))}
                        />
                        <Input
                          placeholder="邮箱"
                          value={registerData.email}
                          onChange={(e) => setRegisterData(prev => ({ ...prev, email: e.target.value }))}
                        />
                        <Input
                          placeholder="姓名"
                          value={registerData.full_name}
                          onChange={(e) => setRegisterData(prev => ({ ...prev, full_name: e.target.value }))}
                        />
                        <Input
                          placeholder="手机号"
                          value={registerData.phone}
                          onChange={(e) => setRegisterData(prev => ({ ...prev, phone: e.target.value }))}
                        />
                        <Input
                          placeholder="租户ID (可选)"
                          value={registerData.tenant_id || ''}
                          onChange={(e) => setRegisterData(prev => ({ ...prev, tenant_id: e.target.value || undefined }))}
                        />
                        <Input
                          placeholder="用户作用域 (可选)"
                          value={registerData.scope || ''}
                          onChange={(e) => setRegisterData(prev => ({ ...prev, scope: e.target.value || undefined }))}
                        />
                        <Input
                          placeholder="部门ID (可选)"
                          value={registerData.department_id || ''}
                          onChange={(e) => setRegisterData(prev => ({ ...prev, department_id: e.target.value || undefined }))}
                        />
                        <Button
                          onClick={handleRegister}
                          disabled={loading || !registerData.username || !registerData.password || !registerData.email || !registerData.phone}
                          variant="outline"
                          className="w-full"
                        >
                          {loading ? '注册中...' : '注册'}
                        </Button>
                      </div>

                      {/* 其他认证操作 */}
                      <div className="grid grid-cols-1 gap-2">
                        <Button
                          onClick={handleGetCaptcha}
                          disabled={loading}
                          variant="outline"
                        >
                          获取验证码
                        </Button>
                        <Button
                          onClick={handleRefreshToken}
                          disabled={loading}
                          variant="outline"
                        >
                          刷新令牌
                        </Button>
                        <Button
                          onClick={handleGetCurrentUser}
                          disabled={loading}
                          variant="outline"
                        >
                          获取当前用户信息
                        </Button>
                        <Button
                          onClick={handleLogout}
                          disabled={loading}
                          variant="outline"
                        >
                          用户登出
                        </Button>
                      </div>
                    </TabsContent>

                    <TabsContent value="user" className="space-y-4">
                      {/* 创建用户表单 */}
                      <div className="space-y-2">
                        <h4 className="font-medium">创建用户</h4>
                        <Input
                          placeholder="用户名"
                          value={createUserData.username}
                          onChange={(e) => setCreateUserData(prev => ({ ...prev, username: e.target.value }))}
                        />
                        <Input
                          type="password"
                          placeholder="密码"
                          value={createUserData.password}
                          onChange={(e) => setCreateUserData(prev => ({ ...prev, password: e.target.value }))}
                        />
                        <Input
                          placeholder="邮箱"
                          value={createUserData.email}
                          onChange={(e) => setCreateUserData(prev => ({ ...prev, email: e.target.value }))}
                        />
                        <Input
                          placeholder="姓名"
                          value={createUserData.full_name}
                          onChange={(e) => setCreateUserData(prev => ({ ...prev, full_name: e.target.value }))}
                        />
                        <Input
                          placeholder="手机号"
                          value={createUserData.phone}
                          onChange={(e) => setCreateUserData(prev => ({ ...prev, phone: e.target.value }))}
                        />
                        <Input
                          placeholder="租户ID (可选)"
                          value={createUserData.tenant_id || ''}
                          onChange={(e) => setCreateUserData(prev => ({ ...prev, tenant_id: e.target.value || undefined }))}
                        />
                        <Input
                          placeholder="用户作用域 (可选)"
                          value={createUserData.scope || ''}
                          onChange={(e) => setCreateUserData(prev => ({ ...prev, scope: e.target.value || undefined }))}
                        />
                        <Input
                          placeholder="部门ID (可选)"
                          value={createUserData.department_id || ''}
                          onChange={(e) => setCreateUserData(prev => ({ ...prev, department_id: e.target.value || undefined }))}
                        />
                        <Button
                          onClick={handleCreateUser}
                          disabled={loading || !createUserData.username || !createUserData.password || !createUserData.email || !createUserData.phone}
                          className="w-full"
                        >
                          {loading ? '创建中...' : '创建用户'}
                        </Button>
                      </div>

                      {/* 获取用户详情 */}
                      <div className="space-y-2">
                        <h4 className="font-medium">获取用户详情</h4>
                        <Input
                          placeholder="用户ID"
                          value={userId}
                          onChange={(e) => setUserId(e.target.value)}
                        />
                        <Button
                          onClick={handleGetUser}
                          disabled={loading || !userId}
                          variant="outline"
                          className="w-full"
                        >
                          获取用户详情
                        </Button>
                      </div>

                      {/* 其他用户操作 */}
                      <div className="grid grid-cols-1 gap-2">
                        <Button
                          onClick={handleGetUsers}
                          disabled={loading}
                          variant="outline"
                        >
                          获取用户列表
                        </Button>
                      </div>
                    </TabsContent>

                    <TabsContent value="tenant" className="space-y-4">
                      {/* 创建租户表单 */}
                      <div className="space-y-2">
                        <h4 className="font-medium">创建租户</h4>
                        <Input
                          placeholder="企业名称"
                          value={createTenantData.company_name}
                          onChange={(e) => setCreateTenantData(prev => ({ ...prev, company_name: e.target.value }))}
                        />
                        <Input
                          placeholder="企业编码"
                          value={createTenantData.tenant_code}
                          onChange={(e) => setCreateTenantData(prev => ({ ...prev, tenant_code: e.target.value }))}
                        />
                        <select
                          value={createTenantData.company_type}
                          onChange={(e) => setCreateTenantData(prev => ({ ...prev, company_type: e.target.value as any }))}
                          className="w-full p-2 border rounded"
                        >
                          <option value="个体工商户">个体工商户</option>
                          <option value="有限责任公司">有限责任公司</option>
                          <option value="股份有限公司">股份有限公司</option>
                          <option value="合伙企业">合伙企业</option>
                          <option value="其他">其他</option>
                        </select>
                        <Button
                          onClick={async () => {
                            setLoading(true);
                            try {
                              addResult('创建租户', 'POST /api/v1/tenants', '发送中...');
                              const response = await createTenantApiV1TenantsPost({
                                body: createTenantData
                              });
                              if (response.data) {
                                addResult('创建租户', createTenantData, response.data);
                              } else if (response.error) {
                                addResult('创建租户', createTenantData, null, JSON.stringify(response.error));
                              }
                            } catch (error: any) {
                              addResult('创建租户', createTenantData, null, error.message);
                            } finally {
                              setLoading(false);
                            }
                          }}
                          disabled={loading || !createTenantData.company_name || !createTenantData.tenant_code}
                          className="w-full"
                        >
                          {loading ? '创建中...' : '创建租户'}
                        </Button>
                      </div>

                      {/* 其他租户操作 */}
                      <div className="grid grid-cols-1 gap-2">
                        <Button
                          onClick={async () => {
                            setLoading(true);
                            try {
                              addResult('获取租户列表', 'GET /api/v1/tenants', '发送中...');
                              const response = await listTenantsApiV1TenantsGet({});
                              if (response.data) {
                                addResult('获取租户列表', '无参数', response.data);
                              } else if (response.error) {
                                addResult('获取租户列表', '无参数', null, JSON.stringify(response.error));
                              }
                            } catch (error: any) {
                              addResult('获取租户列表', '无参数', null, error.message);
                            } finally {
                              setLoading(false);
                            }
                          }}
                          disabled={loading}
                          variant="outline"
                        >
                          获取租户列表
                        </Button>
                        <Button
                          onClick={async () => {
                            setLoading(true);
                            try {
                              addResult('获取当前租户', 'GET /api/v1/tenants/me', '发送中...');
                              const response = await getCurrentTenantApiV1TenantsMeGet({});
                              if (response.data) {
                                addResult('获取当前租户', '无参数', response.data);
                              } else if (response.error) {
                                addResult('获取当前租户', '无参数', null, JSON.stringify(response.error));
                              }
                            } catch (error: any) {
                              addResult('获取当前租户', '无参数', null, error.message);
                            } finally {
                              setLoading(false);
                            }
                          }}
                          disabled={loading}
                          variant="outline"
                        >
                          获取当前租户
                        </Button>
                        <Button
                          onClick={async () => {
                            setLoading(true);
                            try {
                              addResult('获取租户审计日志', 'GET /api/v1/tenants/audit-logs', '发送中...');
                              const response = await getTenantAuditLogsApiV1TenantsAuditLogsGet({});
                              if (response.data) {
                                addResult('获取租户审计日志', '无参数', response.data);
                              } else if (response.error) {
                                addResult('获取租户审计日志', '无参数', null, JSON.stringify(response.error));
                              }
                            } catch (error: any) {
                              addResult('获取租户审计日志', '无参数', null, error.message);
                            } finally {
                              setLoading(false);
                            }
                          }}
                          disabled={loading}
                          variant="outline"
                        >
                          获取租户审计日志
                        </Button>
                      </div>
                    </TabsContent>

                    <TabsContent value="department" className="space-y-4">
                      {/* 创建部门表单 */}
                      <div className="space-y-2">
                        <h4 className="font-medium">创建部门</h4>
                        <Input
                          placeholder="部门编码"
                          value={createDepartmentData.code}
                          onChange={(e) => setCreateDepartmentData(prev => ({ ...prev, code: e.target.value }))}
                        />
                        <Input
                          placeholder="部门名称"
                          value={createDepartmentData.name}
                          onChange={(e) => setCreateDepartmentData(prev => ({ ...prev, name: e.target.value }))}
                        />
                        <Input
                          placeholder="部门描述"
                          value={createDepartmentData.description}
                          onChange={(e) => setCreateDepartmentData(prev => ({ ...prev, description: e.target.value }))}
                        />
                        <Button
                          onClick={async () => {
                            setLoading(true);
                            try {
                              addResult('创建部门', 'POST /api/v1/departments/departments', '发送中...');
                              const response = await createDepartmentApiV1DepartmentsDepartmentsPost({
                                body: createDepartmentData
                              });
                              if (response.data) {
                                addResult('创建部门', createDepartmentData, response.data);
                              } else if (response.error) {
                                addResult('创建部门', createDepartmentData, null, JSON.stringify(response.error));
                              }
                            } catch (error: any) {
                              addResult('创建部门', createDepartmentData, null, error.message);
                            } finally {
                              setLoading(false);
                            }
                          }}
                          disabled={loading || !createDepartmentData.code || !createDepartmentData.name}
                          className="w-full"
                        >
                          {loading ? '创建中...' : '创建部门'}
                        </Button>
                      </div>

                      {/* 其他部门操作 */}
                      <div className="grid grid-cols-1 gap-2">
                        <Button
                          onClick={async () => {
                            setLoading(true);
                            try {
                              addResult('获取部门列表', 'GET /api/v1/departments/departments', '发送中...');
                              const response = await getDepartmentsApiV1DepartmentsDepartmentsGet({});
                              if (response.data) {
                                addResult('获取部门列表', '无参数', response.data);
                              } else if (response.error) {
                                addResult('获取部门列表', '无参数', null, JSON.stringify(response.error));
                              }
                            } catch (error: any) {
                              addResult('获取部门列表', '无参数', null, error.message);
                            } finally {
                              setLoading(false);
                            }
                          }}
                          disabled={loading}
                          variant="outline"
                        >
                          获取部门列表
                        </Button>
                        <Button
                          onClick={async () => {
                            setLoading(true);
                            try {
                              addResult('获取部门树', 'GET /api/v1/departments/departments/tree', '发送中...');
                              const response = await getDepartmentTreeApiV1DepartmentsDepartmentsTreeGet({});
                              if (response.data) {
                                addResult('获取部门树', '无参数', response.data);
                              } else if (response.error) {
                                addResult('获取部门树', '无参数', null, JSON.stringify(response.error));
                              }
                            } catch (error: any) {
                              addResult('获取部门树', '无参数', null, error.message);
                            } finally {
                              setLoading(false);
                            }
                          }}
                          disabled={loading}
                          variant="outline"
                        >
                          获取部门树
                        </Button>
                        <Button
                          onClick={async () => {
                            setLoading(true);
                            try {
                              addResult('获取部门选项', 'GET /api/v1/users/departments/options', '发送中...');
                              const response = await getDepartmentOptionsApiV1UsersDepartmentsOptionsGet({});
                              if (response.data) {
                                addResult('获取部门选项', '无参数', response.data);
                              } else if (response.error) {
                                addResult('获取部门选项', '无参数', null, JSON.stringify(response.error));
                              }
                            } catch (error: any) {
                              addResult('获取部门选项', '无参数', null, error.message);
                            } finally {
                              setLoading(false);
                            }
                          }}
                          disabled={loading}
                          variant="outline"
                        >
                          获取部门选项
                        </Button>
                      </div>
                    </TabsContent>

                    <TabsContent value="system" className="space-y-4">
                      {/* 系统操作 */}
                      <div className="grid grid-cols-1 gap-2">
                        <Button
                          onClick={handleHealthCheck}
                          disabled={loading}
                          variant="outline"
                        >
                          健康检查
                        </Button>
                        <Button
                          onClick={handleGetSystemInfo}
                          disabled={loading}
                          variant="outline"
                        >
                          系统信息
                        </Button>
                      </div>
                    </TabsContent>
                  </Tabs>
                </CardContent>
              </Card>

              {/* 右侧：结果显示面板 */}
              <Card>
                <CardHeader>
                  <CardTitle>请求 & 响应结果</CardTitle>
                  <CardDescription>
                    显示 API 调用的输入和输出结果
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4 max-h-[600px] overflow-y-auto">
                    {results.length === 0 ? (
                      <div className="text-center text-muted-foreground py-8">
                        <p>暂无 API 调用记录</p>
                        <p className="text-sm">请在左侧面板中操作 API 接口</p>
                      </div>
                    ) : (
                      results.map((result) => (
                        <div key={result.id} className="border rounded-lg p-4 space-y-2">
                          <div className="flex items-center justify-between">
                            <h4 className="font-medium">{result.type}</h4>
                            <div className="flex items-center gap-2">
                              <Badge variant="outline">{result.timestamp}</Badge>
                              {result.error ? (
                                <Badge variant="destructive">错误</Badge>
                              ) : (
                                <Badge variant="default">成功</Badge>
                              )}
                            </div>
                          </div>

                          {/* 输入数据 */}
                          <div className="space-y-1">
                            <p className="text-sm font-medium text-muted-foreground">输入数据:</p>
                            <pre className="text-xs bg-muted p-2 rounded overflow-x-auto">
                              {JSON.stringify(result.input, null, 2)}
                            </pre>
                          </div>

                          {/* 输出数据 */}
                          <div className="space-y-1">
                            <p className="text-sm font-medium text-muted-foreground">
                              {result.error ? '错误信息:' : '响应数据:'}
                            </p>
                            <pre className={`text-xs p-2 rounded overflow-x-auto ${
                              result.error ? 'bg-destructive/10 text-destructive' : 'bg-muted'
                            }`}>
                              {result.error || JSON.stringify(result.output, null, 2)}
                            </pre>
                          </div>
                        </div>
                      ))
                    )}
                  </div>
                </CardContent>
              </Card>
            </div>

            {/* 错误提示 */}
            {errors.length > 0 && (
              <div className="mt-6">
                <Alert>
                  <AlertDescription>
                    最近发生了 {errors.length} 个错误，请查看右侧结果面板中的详细信息。
                  </AlertDescription>
                </Alert>
              </div>
            )}
          </TabsContent>

          <TabsContent value="examples" className="space-y-6">
            <ApiExamplesPage />
          </TabsContent>

          <TabsContent value="documentation" className="space-y-6">
            <OpenApiExamples />
          </TabsContent>
        </Tabs>
      </div>
    </div>
  );
}

// API示例页面组件
function ApiExamplesPage() {
  const [examplesLoading, setExamplesLoading] = useState<Record<string, boolean>>({});
  const [examplesResults, setExamplesResults] = useState<Record<string, any>>({});

  // API示例配置 - 基于新生成的SDK
  const apiExamples = [
    // 认证相关
    {
      id: 'getCaptcha',
      method: 'GET',
      path: '/api/v1/auth/captcha',
      title: '获取验证码',
      description: '获取登录验证码',
      exampleParams: null,
      category: '认证',
      expectedOutput: { captcha_id: 'xyz789', image: 'base64_image_data' }
    },
    {
      id: 'login',
      method: 'POST',
      path: '/api/v1/auth/login',
      title: '用户登录',
      description: '用户登录（需要验证码）',
      exampleParams: {
        identifier: 'admin',
        password: 'admin123',
        captcha_id: 'test_captcha_id',
        captcha_text: 'test'
      },
      category: '认证',
      expectedOutput: { access_token: 'jwt_token', token_type: 'bearer', expires_in: 3600 }
    },
    {
      id: 'register',
      method: 'POST',
      path: '/api/v1/auth/register',
      title: '用户注册',
      description: '用户注册接口',
      exampleParams: {
        username: 'newuser',
        password: 'password123',
        email: 'user@example.com',
        full_name: '新用户',
        phone: '13800138000',
        tenant_id: 'tenant-uuid',
        scope: 'user',
        department_id: 'dept-uuid'
      },
      category: '认证',
      expectedOutput: { id: 'uuid', username: 'newuser', email: 'user@example.com', phone: '13800138000' }
    },
    {
      id: 'getCurrentUser',
      method: 'GET',
      path: '/api/v1/auth/me',
      title: '获取当前用户',
      description: '获取当前登录用户信息',
      exampleParams: null,
      category: '认证',
      expectedOutput: { id: 'uuid', username: 'admin', is_active: true }
    },
    {
      id: 'refreshToken',
      method: 'POST',
      path: '/api/v1/auth/refresh',
      title: '刷新令牌',
      description: '刷新访问令牌',
      exampleParams: null,
      category: '认证',
      expectedOutput: { access_token: 'new_jwt_token' }
    },
    {
      id: 'logout',
      method: 'POST',
      path: '/api/v1/auth/logout',
      title: '用户登出',
      description: '用户登出接口',
      exampleParams: null,
      category: '认证',
      expectedOutput: { message: '登出成功' }
    },

    // 用户管理
    {
      id: 'getUsers',
      method: 'GET',
      path: '/api/v1/users',
      title: '获取用户列表',
      description: '获取用户列表（需要管理员权限）',
      exampleParams: { page: 1, size: 20 },
      category: '用户管理',
      expectedOutput: { data: [{ id: 'uuid', username: 'admin' }], total: 1 }
    },
    {
      id: 'createUser',
      method: 'POST',
      path: '/api/v1/users',
      title: '创建用户',
      description: '创建用户（需要管理员权限）',
      exampleParams: {
        username: 'testuser',
        password: 'password123',
        email: 'test@example.com',
        full_name: '测试用户',
        phone: '13900139000',
        tenant_id: 'tenant-uuid',
        scope: 'user',
        department_id: 'dept-uuid'
      },
      category: '用户管理',
      expectedOutput: { id: 'uuid', username: 'testuser', email: 'test@example.com', phone: '13900139000' }
    },
    {
      id: 'getUserStats',
      method: 'GET',
      path: '/api/v1/users/stats/summary',
      title: '用户统计',
      description: '获取用户统计信息',
      exampleParams: null,
      category: '用户管理',
      expectedOutput: { total_users: 10, active_users: 8, inactive_users: 2 }
    },
    {
      id: 'getDepartmentOptions',
      method: 'GET',
      path: '/api/v1/users/departments/options',
      title: '获取部门选项',
      description: '获取部门选择列表（用于用户管理中的部门选择）',
      exampleParams: null,
      category: '用户管理',
      expectedOutput: [{ id: 'uuid', code: 'TECH001', name: '技术开发部' }]
    },
    {
      id: 'listSystemUsers',
      method: 'GET',
      path: '/api/v1/users/system/users',
      title: '获取系统用户列表',
      description: '获取系统用户列表（需要系统权限）',
      exampleParams: { page: 1, size: 20, search: '', is_active: true },
      category: '用户管理',
      expectedOutput: { data: [{ id: 'uuid', username: 'admin', is_active: true }], total: 1 }
    },
    {
      id: 'createSystemUser',
      method: 'POST',
      path: '/api/v1/users/system/users',
      title: '创建系统用户',
      description: '创建系统级用户（需要系统权限）',
      exampleParams: {
        username: 'system_admin',
        password: 'admin123',
        email: 'admin@system.com',
        full_name: '系统管理员',
        phone: '13700137000',
        tenant_id: null,
        scope: 'system',
        department_id: null
      },
      category: '用户管理',
      expectedOutput: { id: 'uuid', username: 'system_admin', scope: 'system' }
    },

    // 租户管理
    {
      id: 'listTenants',
      method: 'GET',
      path: '/api/v1/tenants',
      title: '获取租户列表',
      description: '获取租户列表',
      exampleParams: { page: 1, size: 20, search: '', audit_status: 'approved' },
      category: '租户管理',
      expectedOutput: { data: [{ id: 'uuid', name: '测试企业' }], total: 1, page: 1, size: 20 }
    },
    {
      id: 'getCurrentTenant',
      method: 'GET',
      path: '/api/v1/tenants/me',
      title: '获取当前租户',
      description: '获取当前登录租户信息',
      exampleParams: null,
      category: '租户管理',
      expectedOutput: { id: 'uuid', name: '测试企业', code: 'TEST001', audit_status: 'approved' }
    },
    {
      id: 'createTenant',
      method: 'POST',
      path: '/api/v1/tenants',
      title: '创建租户',
      description: '创建新租户',
      exampleParams: {
        company_name: '新企业有限责任公司',
        tenant_code: 'NEW001',
        company_type: '有限责任公司'
      },
      category: '租户管理',
      expectedOutput: { id: 'uuid', company_name: '新企业有限责任公司', tenant_code: 'NEW001', company_type: '有限责任公司' }
    },
    {
      id: 'getTenantAuditLogs',
      method: 'GET',
      path: '/api/v1/tenants/audit-logs',
      title: '获取租户审计日志',
      description: '获取租户审计日志',
      exampleParams: { page: 1, size: 20, tenant_id: 'uuid' },
      category: '租户管理',
      expectedOutput: { data: [{ id: 'uuid', action: 'create', timestamp: '2024-01-01T00:00:00Z' }], total: 1 }
    },

    // 部门管理
    {
      id: 'getDepartments',
      method: 'GET',
      path: '/api/v1/departments/departments',
      title: '获取部门列表',
      description: '获取部门列表',
      exampleParams: { page: 1, size: 20 },
      category: '部门管理',
      expectedOutput: { data: [{ id: 'uuid', name: '技术部', code: 'TECH' }], total: 1, page: 1, size: 20 }
    },
    {
      id: 'createDepartment',
      method: 'POST',
      path: '/api/v1/departments/departments',
      title: '创建部门',
      description: '创建新部门',
      exampleParams: {
        code: 'TECH001',
        name: '技术开发部',
        description: '负责技术研发工作'
      },
      category: '部门管理',
      expectedOutput: { id: 'uuid', code: 'TECH001', name: '技术开发部', description: '负责技术研发工作' }
    },
    {
      id: 'getDepartmentTree',
      method: 'GET',
      path: '/api/v1/departments/departments/tree',
      title: '获取部门树',
      description: '获取部门树形结构',
      exampleParams: null,
      category: '部门管理',
      expectedOutput: [{ id: 'uuid', code: 'TECH001', name: '技术开发部', description: '负责技术研发工作', children: [] }]
    },

    // 系统管理
    {
      id: 'healthCheck',
      method: 'GET',
      path: '/api/v1/health',
      title: '健康检查',
      description: 'API健康检查',
      exampleParams: null,
      category: '系统管理',
      expectedOutput: { status: 'healthy', timestamp: '2024-01-01T00:00:00Z' }
    },
    {
      id: 'detailedHealthCheck',
      method: 'GET',
      path: '/api/v1/health/detailed',
      title: '详细健康检查',
      description: '详细的系统健康检查',
      exampleParams: null,
      category: '系统管理',
      expectedOutput: { status: 'healthy', database: 'connected', redis: 'connected' }
    },
    {
      id: 'getSystemInfo',
      method: 'GET',
      path: '/api/v1/system/info',
      title: '系统信息',
      description: '获取系统信息',
      exampleParams: null,
      category: '系统管理',
      expectedOutput: { version: '1.0.0', environment: 'development' }
    },
    {
      id: 'getSystemStats',
      method: 'GET',
      path: '/api/v1/system/stats',
      title: '系统统计',
      description: '获取系统统计信息',
      exampleParams: null,
      category: '系统管理',
      expectedOutput: { uptime: 3600, memory_usage: '50MB' }
    }
  ];

  // 调用示例API
  const callExampleApi = async (example: typeof apiExamples[0]) => {
    setExamplesLoading(prev => ({ ...prev, [example.id]: true }));

    try {
      let response;

      switch (example.id) {
        // 认证相关
        case 'getCaptcha':
          response = await getCaptchaApiV1AuthCaptchaGet({});
          break;
        case 'login':
          response = await loginApiV1AuthLoginPost({
            body: example.exampleParams
          });
          break;
        case 'register':
          response = await registerApiV1AuthRegisterPost({
            body: example.exampleParams
          });
          break;
        case 'getCurrentUser':
          response = await getCurrentUserInfoApiV1AuthMeGet({});
          break;
        case 'refreshToken':
          response = await refreshTokenApiV1AuthRefreshPost({});
          break;
        case 'logout':
          response = await logoutApiV1AuthLogoutPost({});
          break;

        // 用户管理
        case 'getUsers':
          response = await getUsersApiV1UsersGet({
            query: example.exampleParams
          });
          break;
        case 'createUser':
          response = await createUserApiV1UsersPost({
            body: example.exampleParams
          });
          break;
        case 'getUserStats':
          response = await getUserStatsApiV1UsersStatsSummaryGet({});
          break;
        case 'getDepartmentOptions':
          response = await getDepartmentOptionsApiV1UsersDepartmentsOptionsGet({});
          break;
        case 'listSystemUsers':
          response = await listSystemUsersApiV1UsersSystemUsersGet({
            query: example.exampleParams
          });
          break;
        case 'createSystemUser':
          response = await createSystemUserApiV1UsersSystemUsersPost({
            body: example.exampleParams
          });
          break;

        // 租户管理
        case 'listTenants':
          response = await listTenantsApiV1TenantsGet({
            query: example.exampleParams
          });
          break;
        case 'getCurrentTenant':
          response = await getCurrentTenantApiV1TenantsMeGet({});
          break;
        case 'createTenant':
          response = await createTenantApiV1TenantsPost({
            body: example.exampleParams
          });
          break;
        case 'getTenantAuditLogs':
          response = await getTenantAuditLogsApiV1TenantsAuditLogsGet({
            query: example.exampleParams
          });
          break;

        // 部门管理
        case 'getDepartments':
          response = await getDepartmentsApiV1DepartmentsDepartmentsGet({
            query: example.exampleParams
          });
          break;
        case 'createDepartment':
          response = await createDepartmentApiV1DepartmentsDepartmentsPost({
            body: example.exampleParams
          });
          break;
        case 'getDepartmentTree':
          response = await getDepartmentTreeApiV1DepartmentsDepartmentsTreeGet({});
          break;

        // 系统管理
        case 'healthCheck':
          response = await healthCheckApiV1HealthGet({});
          break;
        case 'detailedHealthCheck':
          response = await detailedHealthCheckApiV1HealthDetailedGet({});
          break;
        case 'getSystemInfo':
          response = await getSystemInfoApiV1SystemInfoGet({});
          break;
        case 'getSystemStats':
          response = await getSystemStatsApiV1SystemStatsGet({});
          break;

        default:
          throw new Error(`Unknown API example: ${example.id}`);
      }

      setExamplesResults(prev => ({
        ...prev,
        [example.id]: {
          success: !response.error,
          data: response.data,
          error: response.error,
          input: example.exampleParams,
          timestamp: new Date().toLocaleTimeString()
        }
      }));
    } catch (error: any) {
      setExamplesResults(prev => ({
        ...prev,
        [example.id]: {
          success: false,
          error: error.message,
          input: example.exampleParams,
          timestamp: new Date().toLocaleTimeString()
        }
      }));
    } finally {
      setExamplesLoading(prev => ({ ...prev, [example.id]: false }));
    }
  };

  // 批量调用所有示例
  const callAllExamples = async () => {
    // 按类别调用，先调用认证相关的
    const authExamples = apiExamples.filter(ex => ex.category === '认证');
    for (const example of authExamples) {
      await callExampleApi(example);
      await new Promise(resolve => setTimeout(resolve, 200)); // 间隔200ms
    }

    // 然后调用其他类别的接口
    const otherExamples = apiExamples.filter(ex => ex.category !== '认证');
    for (const example of otherExamples) {
      await callExampleApi(example);
      await new Promise(resolve => setTimeout(resolve, 100)); // 间隔100ms
    }
  };

  // 按类别调用
  const callCategoryExamples = async (category: string) => {
    const categoryExamples = apiExamples.filter(ex => ex.category === category);
    for (const example of categoryExamples) {
      await callExampleApi(example);
      await new Promise(resolve => setTimeout(resolve, 150)); // 间隔150ms
    }
  };

  // 获取所有类别
  const categories = Array.from(new Set(apiExamples.map(ex => ex.category)));

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h2 className="text-2xl font-bold">接口示例集合</h2>
          <p className="text-muted-foreground">
            基于OpenAPI规范自动生成的所有接口示例，支持分类测试和批量调用
          </p>
        </div>
        <div className="flex gap-2">
          <Button onClick={callAllExamples} disabled={Object.values(examplesLoading).some(v => v)}>
            {Object.values(examplesLoading).some(v => v) ? '测试中...' : '批量测试所有接口'}
          </Button>
        </div>
      </div>

      {/* 按类别展示 */}
      {categories.map((category) => {
        const categoryExamples = apiExamples.filter(ex => ex.category === category);
        const categorySuccessCount = categoryExamples.filter(ex => examplesResults[ex.id]?.success).length;
        const categoryFailureCount = categoryExamples.filter(ex => examplesResults[ex.id]?.success === false).length;
        const categoryTotalCount = categoryExamples.length;

        return (
          <Card key={category}>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle className="text-xl">{category}</CardTitle>
                  <CardDescription>
                    共 {categoryTotalCount} 个接口，成功 {categorySuccessCount} 个，失败 {categoryFailureCount} 个
                  </CardDescription>
                </div>
                <div className="flex gap-2">
                  <Button
                    onClick={() => callCategoryExamples(category)}
                    disabled={Object.values(examplesLoading).some(v => v)}
                    variant="outline"
                    size="sm"
                  >
                    测试该类别
                  </Button>
                  <div className="flex items-center gap-2 text-sm">
                    <span className="text-green-600">{categorySuccessCount}</span>
                    <span>/</span>
                    <span className="text-red-600">{categoryFailureCount}</span>
                    <span>/</span>
                    <span className="text-blue-600">{categoryTotalCount}</span>
                  </div>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {categoryExamples.map((example) => (
                  <Card key={example.id} className="h-fit">
                    <CardHeader className="pb-3">
                      <div className="flex items-center justify-between">
                        <div className="flex-1">
                          <CardTitle className="text-sm">{example.title}</CardTitle>
                          <CardDescription className="text-xs">
                            {example.method} {example.path}
                          </CardDescription>
                        </div>
                        <Badge variant="outline" className="text-xs">
                          {example.method}
                        </Badge>
                      </div>
                    </CardHeader>
                    <CardContent className="space-y-3">
                      <p className="text-xs text-muted-foreground">{example.description}</p>

                      {/* 示例参数 */}
                      {example.exampleParams && (
                        <div className="space-y-1">
                          <h4 className="text-xs font-medium">参数:</h4>
                          <pre className="text-xs bg-muted p-2 rounded overflow-x-auto max-h-20">
                            {JSON.stringify(example.exampleParams, null, 2)}
                          </pre>
                        </div>
                      )}

                      {/* 实际结果 */}
                      {examplesResults[example.id] && (
                        <div className="space-y-2">
                          <div className="flex items-center justify-between">
                            <h4 className="text-xs font-medium">
                              结果
                              <span className="ml-1 text-xs text-muted-foreground">
                                ({examplesResults[example.id].timestamp})
                              </span>
                            </h4>
                            <Badge
                              variant={examplesResults[example.id].success ? "default" : "destructive"}
                              className="text-xs"
                            >
                              {examplesResults[example.id].success ? '成功' : '失败'}
                            </Badge>
                          </div>
                          <pre className={`text-xs p-2 rounded overflow-x-auto max-h-32 ${
                            examplesResults[example.id].success
                              ? 'bg-green-50 text-green-800 border border-green-200'
                              : 'bg-red-50 text-red-800 border border-red-200'
                          }`}>
                            {examplesResults[example.id].error
                              ? JSON.stringify(examplesResults[example.id].error, null, 2)
                              : JSON.stringify(examplesResults[example.id].data, null, 2)
                            }
                          </pre>
                        </div>
                      )}

                      <Button
                        onClick={() => callExampleApi(example)}
                        disabled={examplesLoading[example.id]}
                        className="w-full"
                        variant={examplesResults[example.id]?.success ? "outline" : "default"}
                        size="sm"
                      >
                        {examplesLoading[example.id] ? '测试中...' : '测试'}
                      </Button>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </CardContent>
          </Card>
        );
      })}

      {/* 总体统计信息 */}
      <Card>
        <CardHeader>
          <CardTitle>测试统计总览</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
            <div>
              <p className="text-2xl font-bold text-green-600">
                {Object.values(examplesResults).filter(r => r?.success).length}
              </p>
              <p className="text-sm text-muted-foreground">成功</p>
            </div>
            <div>
              <p className="text-2xl font-bold text-red-600">
                {Object.values(examplesResults).filter(r => r?.success === false).length}
              </p>
              <p className="text-sm text-muted-foreground">失败</p>
            </div>
            <div>
              <p className="text-2xl font-bold text-blue-600">
                {Object.values(examplesResults).filter(r => r !== undefined).length}
              </p>
              <p className="text-sm text-muted-foreground">已测试</p>
            </div>
            <div>
              <p className="text-2xl font-bold text-gray-600">
                {apiExamples.length}
              </p>
              <p className="text-sm text-muted-foreground">总计</p>
            </div>
          </div>

          {/* 进度条 */}
          <div className="mt-4">
            <div className="w-full bg-gray-200 rounded-full h-2">
              <div
                className="bg-green-600 h-2 rounded-full transition-all duration-300"
                style={{
                  width: `${apiExamples.length > 0 ? (Object.values(examplesResults).filter(r => r?.success).length / apiExamples.length) * 100 : 0}%`
                }}
              ></div>
            </div>
            <p className="text-xs text-muted-foreground mt-1 text-center">
              成功率: {apiExamples.length > 0 ? Math.round((Object.values(examplesResults).filter(r => r?.success).length / apiExamples.length) * 100) : 0}%
            </p>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}