import { useNavigate } from "react-router";
import { useAuth } from "@/client/mobile/hooks/AuthProvider";
import { UserType } from "@/server/modules/users/user.enum";
import { getGlobalConfig } from "@/client/utils/utils";

export default function StockHomePage() {
  const { user } = useAuth();
  const navigate = useNavigate();

  const handleClassroomClick = (classId = '') => {
    if (user?.userType === UserType.TEACHER) {
      navigate(`/mobile/classroom/${classId}/${UserType.TEACHER}`);
    } else {
      navigate(`/mobile/classroom/${classId}/${UserType.STUDENT}`);
    }
  };

  
  return (
    <div className="min-h-screen bg-gray-50 flex flex-col">
      {/* 顶部导航 */}
      <header className="bg-blue-600 text-white shadow-md fixed w-full z-10">
        <div className="container mx-auto px-4 py-3 flex justify-between items-center">
          <h1 className="text-xl font-bold">股票训练系统</h1>
          {user ? (
            <div className="flex items-center space-x-4">
              <div className="flex items-center cursor-pointer" onClick={() => navigate(`/mobile/member`)}>
                <div className="w-8 h-8 rounded-full bg-white text-blue-600 flex items-center justify-center mr-2">
                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                    <path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" />
                  </svg>
                </div>
                <span className="hidden md:inline">{user.username}</span>
              </div>
            </div>
          ) : (
            <div className="flex space-x-2">
              <button 
                onClick={() => navigate('/mobile/login')}
                className="px-3 py-1 rounded text-sm bg-white text-blue-600 hover:bg-blue-50"
              >
                登录
              </button>
              <button 
                onClick={() => navigate('/mobile/register')}
                className="px-3 py-1 rounded text-sm bg-white text-blue-600 hover:bg-blue-50"
              >
                注册
              </button>
            </div>
          )}
        </div>
      </header>
      
      {/* 主内容区 */}
      <main className="flex-grow container mx-auto px-4 pt-24 pb-12">
        
        <div className="flex flex-col gap-4 max-w-md mx-auto">
          <button
            onClick={() => handleClassroomClick(getGlobalConfig('PUBLIC_CHATROOM_ID'))}
            className="bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg shadow-md transition-colors duration-200 text-center"
          >
            公开解盘室
          </button>
          <button
            onClick={() => handleClassroomClick(getGlobalConfig('PRIVATE_CHATROOM_ID'))}
            className="bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg shadow-md transition-colors duration-200 text-center"
          >
            学员解盘室
          </button>
          <button
            onClick={() => navigate('/mobile/exam')}
            className="bg-green-600 hover:bg-green-700 text-white font-medium py-3 px-6 rounded-lg shadow-md transition-colors duration-200 text-center"
          >
            考试模式
          </button>
          <button
            onClick={() => navigate('/mobile/xunlian')}
            className="bg-purple-600 hover:bg-purple-700 text-white font-medium py-3 px-6 rounded-lg shadow-md transition-colors duration-200 text-center"
          >
            训练模式
          </button>
        </div>
      </main>
      
      {/* 页脚 */}
      <footer className="bg-white border-t border-gray-200 py-4">
        <div className="container mx-auto px-4 text-center text-gray-500 text-sm">
          网站模板 ©{new Date().getFullYear()} Created with React & Tailwind CSS
          <div className="mt-2 space-x-4">
            <a href="/admin" className="text-blue-600 hover:underline">管理后台</a>
            <span className="text-gray-300">|</span>
            <a href="/ui" className="text-blue-600 hover:underline">Api</a>
          </div>
        </div>
      </footer>
    </div>
  );
}