import React, { useCallback, useEffect } from 'react';
import styles from './homepage.module.css';
import { useApi } from '@/hooks/request';
import { useSelector } from 'react-redux';
import { RootState } from '@/store';
import { useNavigate } from 'react-router';
import logo from '&/assets/logo.png';
import { getUserMessage } from '@/api/homepage';
import request from '@/utils/request'
import { hotPosts } from '@/api/post';
import { postUserLogin } from '@/api/auth';

interface WorkItem {  
  postId: number,
  userId: number,
  postTitle: string,
  postContent: string,
  createdAt: number,
  postType: string,
  viewCount: number,
  hotScore: number,
  lastCalculated: number

}

interface UserStats {
  likes: number;
  following: number;
  followers: number;
  mutualFollows: number;
}

interface UserResponse {
  username: string;
  inviteCode: string;
  stats: UserStats;
  upload: string;
  level: string;
  works: WorkItem[];
  petImage: string;
  trafficImage: string;
}


const Homepage: React.FC =() => {
  const navigate = useNavigate();
  const userInfo = useSelector((state: RootState) => state.user);
  
  // 获取用户作品数据
  // const {data: response, loading, error, refresh} =useApi(()=>request.get(getUserMessage), false);
  const { data: response, loading, error, refresh } = useApi<UserResponse>(() => request.get(getUserMessage), false);
  useEffect(() => {
    refresh(); // 页面首次加载时触发请求
  }, []);
  // 用户统计数据
  const userStats = {
    likes: response?.stats?.likes ?? 0,
    following: response?.stats?.following ?? 0,
    followers: response?.stats?.followers ?? 0,
    mutualFollows: response?.stats?.mutualFollows ?? 0,
    uploadAmount: response?.upload ?? '--',
    level: response?.level ?? '--'
  };
  
  const handleLogoClick = () => {
    navigate('/');
  };

  return (
    <div className={styles.container}>


      {/* 用户信息主区域 */}
      <div className={styles.mainContent}>
        {/* 左侧用户信息区 */}
        <div className={styles.userProfile}>
          <div className={styles.userHeader}>
            <img 
              src={userInfo.avatar || '/default-avatar.png'} 
              alt="用户头像" 
              className={styles.userAvatar}
            />
            <div className={styles.userInfo}>
              <h2 className={styles.username}>阳菜，放睛！</h2>
              <div className={styles.inviteCode}>邀请码：1314520</div>
              <button className={styles.editButton}>编辑主页</button>
               <button 
                className={styles.editButton}
                onClick={() => navigate('/postDetails', {
                  state: { isNewPost: true }
                })}
              >
                发布种子
              </button>
            </div>
          </div>

          <div className={styles.userStats}>
            <div className={styles.statItem}>
              <div className={styles.statNumber}>{userStats.likes}</div>
              <div className={styles.statLabel}>获赞</div>
            </div>
            <div className={styles.statItem}>
              <div className={styles.statNumber}>{userStats.following}</div>
              <div className={styles.statLabel}>关注</div>
            </div>
            <div className={styles.statItem}>
              <div className={styles.statNumber}>{userStats.followers}</div>
              <div className={styles.statLabel}>粉丝</div>
            </div>
            <div className={styles.statItem}>
              <div className={styles.statNumber}>{userStats.mutualFollows}</div>
              <div className={styles.statLabel}>互关</div>
            </div>
          </div>

          <div className={styles.userData}>
            <div className={styles.dataItem}>
              <span>您的总上传量为：</span>
              <strong>{userStats.uploadAmount}</strong>
            </div>
            <div className={styles.dataItem}>
              <span>您的用户等级为：</span>
              <strong>{userStats.level}</strong>
            </div>
          </div>

          <div className={styles.worksSection}>
            <h3 className={styles.sectionTitle}>我的作品</h3>
            {loading && <div className={styles.loading}>加载中...</div>}
            {error && <div className={styles.error}>{error.message}</div>}
            
            {response && response.works.map(work => (
              <div key={work.postId} className={styles.workItem}>
                <h4 className={styles.workTitle}>{work.postTitle}</h4>
                <div className={styles.workMeta}>
                  <span>发布时间：{work.createdAt}</span>
                  <span>下载量：{work.viewCount} 做种数：{'待定'}</span>
                </div>
              </div>
            )) }
          </div>
        </div>

        {/* 右侧内容区 */}
        <div className={styles.rightContent}>
          <div className={styles.petSection}>
            <h3 className={styles.sectionTitle}>宠物图</h3>
            <div className={styles.petContainer}>
              <img 
                src="/assets/pet-blue-star.png" 
                alt="蓝色星星宠物" 
                className={styles.petImage}
              />
            </div>
          </div>

        </div>
      </div>
    </div>
  );
};

export default Homepage;