/**
 * 数据库连接测试页面
 * 作者: 阿瑞
 * 功能: 测试数据库连接和查询功能
 * 版本: 1.0
 */
'use client';

import { useState } from 'react';
import styles from './page.module.css';

/**
 * 用户信息接口
 */
interface UserInfo {
  id: number;
  username: string;
  email: string;
  phone: string;
  role_name: string;
}

/**
 * 测试页面组件
 */
export default function TestPage() {
  // 状态管理
  const [connectionStatus, setConnectionStatus] = useState<string>('');
  const [userList, setUserList] = useState<UserInfo[]>([]);
  const [loading, setLoading] = useState<boolean>(false);

  /**
   * 测试数据库连接
   */
  const testConnection = async () => {
    setLoading(true);
    setConnectionStatus('正在测试连接...');
    
    try {
      const response = await fetch('/api/test/connection');
      const data = await response.json();
      
      if (data.success) {
        setConnectionStatus('连接成功：' + data.message);
      } else {
        setConnectionStatus('连接失败：' + data.error);
      }
    } catch (error) {
      setConnectionStatus('请求错误：' + (error instanceof Error ? error.message : String(error)));
    } finally {
      setLoading(false);
    }
  };

  /**
   * 查询用户列表
   */
  const queryUsers = async () => {
    setLoading(true);
    setUserList([]);
    
    try {
      const response = await fetch('/api/test/users');
      const data = await response.json();
      
      if (data.success) {
        setUserList(data.users);
        setConnectionStatus(`成功获取 ${data.users.length} 个用户`);
      } else {
        setConnectionStatus('查询失败：' + data.error);
      }
    } catch (error) {
      setConnectionStatus('请求错误：' + (error instanceof Error ? error.message : String(error)));
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className={styles.container}>
      <h1 className={styles.title}>数据库测试</h1>
      
      <div className={styles.buttonGroup}>
        <button 
          className={styles.button} 
          onClick={testConnection} 
          disabled={loading}
        >
          测试数据库连接
        </button>
        
        <button 
          className={styles.button} 
          onClick={queryUsers} 
          disabled={loading}
        >
          查询用户列表
        </button>
      </div>
      
      {connectionStatus && (
        <div className={styles.statusBox}>
          <h3>状态</h3>
          <p>{connectionStatus}</p>
        </div>
      )}
      
      {userList.length > 0 && (
        <div className={styles.userList}>
          <h3>用户列表</h3>
          <table className={styles.table}>
            <thead>
              <tr>
                <th>ID</th>
                <th>用户名</th>
                <th>邮箱</th>
                <th>电话</th>
                <th>角色</th>
              </tr>
            </thead>
            <tbody>
              {userList.map(user => (
                <tr key={user.id}>
                  <td>{user.id}</td>
                  <td>{user.username}</td>
                  <td>{user.email}</td>
                  <td>{user.phone}</td>
                  <td>{user.role_name}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
} 