'use client';

/**
 * 自定义钩子测试页面
 * 作者: 阿瑞
 * 功能: 测试演示自定义钩子的使用方法
 * 版本: 1.0.0
 */

import { useState } from 'react';
import Link from 'next/link';
import { 
  useTheme, 
  useApplyTheme, 
  useUserProfile, 
  useIsAdmin,
  useHasRole,
  useAuth
} from '@/hooks';
import styles from './page.module.css';

/**
 * 页面布局组件
 */
const TestHookPage = () => {
  // 应用主题到DOM
  useApplyTheme();
  
  // 使用主题相关钩子
  const { 
    themeMode, 
    isDarkMode, 
    toggleThemeMode, 
    enableLightMode, 
    enableDarkMode 
  } = useTheme();
  
  // 使用用户相关钩子
  const userProfile = useUserProfile();
  const isAdmin = useIsAdmin();
  const hasRole = useHasRole();
  const { isAuthenticated, login, logout } = useAuth();
  
  // 模拟用户登录测试数据
  const [loading, setLoading] = useState(false);
  
  // 模拟登录状态
  const handleLogin = async () => {
    setLoading(true);
    
    // 模拟API请求延迟
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    // 创建模拟用户数据
    const mockUser = {
      id: 1,
      username: 'test_user',
      email: 'test@example.com',
      phone: '13800138000',
      roleType: 'admin',
      roleName: '系统管理员',
      isCustomRole: false,
      status: 1,
      created_at: new Date(),
      workspace: {
        id: 1,
        name: '测试工作空间',
        status: 1
      }
    };
    
    // 模拟登录
    login('mock_token_12345', mockUser);
    setLoading(false);
  };
  
  // 退出登录
  const handleLogout = () => {
    logout();
  };
  
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>自定义钩子测试页面</h1>
      
      {/* 导航栏 */}
      <nav className={styles.nav}>
        <Link href="/">返回首页</Link>
      </nav>
      
      <div className={styles.grid}>
        {/* 主题设置测试区域 */}
        <section className={styles.card}>
          <h2>useTheme() 主题设置钩子</h2>
          <div className={styles.infoRow}>
            <span>当前主题模式: </span>
            <strong>{themeMode}</strong>
          </div>
          <div className={styles.infoRow}>
            <span>是否暗色模式: </span>
            <strong>{isDarkMode ? '是' : '否'}</strong>
          </div>
          <div className={styles.actions}>
            <button 
              onClick={toggleThemeMode} 
              className={styles.button}
            >
              切换主题
            </button>
            <button 
              onClick={enableLightMode} 
              className={styles.button}
              disabled={themeMode === 'light'}
            >
              亮色模式
            </button>
            <button 
              onClick={enableDarkMode} 
              className={styles.button}
              disabled={themeMode === 'dark'}
            >
              暗色模式
            </button>
          </div>
        </section>
        
        {/* 用户信息测试区域 */}
        <section className={styles.card}>
          <h2>useUserProfile() 用户信息钩子</h2>
          {isAuthenticated ? (
            <>
              <div className={styles.infoRow}>
                <span>用户名: </span>
                <strong>{userProfile.username}</strong>
              </div>
              <div className={styles.infoRow}>
                <span>邮箱: </span>
                <strong>{userProfile.email}</strong>
              </div>
              <div className={styles.infoRow}>
                <span>电话: </span>
                <strong>{userProfile.phone}</strong>
              </div>
              <div className={styles.infoRow}>
                <span>角色名称: </span>
                <strong>{userProfile.roleName}</strong>
              </div>
            </>
          ) : (
            <p>尚未登录，请先登录</p>
          )}
        </section>
        
        {/* 角色验证测试区域 */}
        <section className={styles.card}>
          <h2>useIsAdmin() / useHasRole() 角色验证钩子</h2>
          {isAuthenticated ? (
            <>
              <div className={styles.infoRow}>
                <span>是否管理员: </span>
                <strong>{isAdmin ? '是' : '否'}</strong>
              </div>
              <div className={styles.infoRow}>
                <span>是否拥有admin角色: </span>
                <strong>{hasRole('admin') ? '是' : '否'}</strong>
              </div>
              <div className={styles.infoRow}>
                <span>是否拥有editor角色: </span>
                <strong>{hasRole('editor') ? '是' : '否'}</strong>
              </div>
            </>
          ) : (
            <p>尚未登录，请先登录</p>
          )}
        </section>
        
        {/* 登录状态测试区域 */}
        <section className={styles.card}>
          <h2>useAuth() 登录状态钩子</h2>
          <div className={styles.infoRow}>
            <span>登录状态: </span>
            <strong>{isAuthenticated ? '已登录' : '未登录'}</strong>
          </div>
          <div className={styles.actions}>
            {isAuthenticated ? (
              <button 
                onClick={handleLogout}
                className={styles.button}
              >
                退出登录
              </button>
            ) : (
              <button 
                onClick={handleLogin}
                className={styles.button}
                disabled={loading}
              >
                {loading ? '登录中...' : '模拟登录'}
              </button>
            )}
          </div>
        </section>
      </div>
    </div>
  );
};

export default TestHookPage;
