import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

import { Router } from '@angular/router';
// 修改1：添加Material图标模块导入
import { MatIconModule } from '@angular/material/icon';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; // NEW: 添加FontAwesome模块
import { 
  faUser, 
  faCog, 
  faSignOutAlt, 
  faPlus, 
  faShoppingBag, 
  faHeart, 
  faPalette,
  faEye,
  faRedo,
  faTruck,
  faDownload,
  faBoxOpen,
  faSearch
} from '@fortawesome/free-solid-svg-icons'; // NEW: 添加所需图标


interface DesignItem {
  image: string;
  title: string;
  date: string;
  likes?: number; // NEW: 添加点赞数属性
}

interface FavoriteItem {
  image: string;
  title: string;
  author: string;
   downloads?: number; // NEW: 添加下载数属性
}

interface OrderItem { // NEW: 新增订单接口
  id: string;
  date: string;
  status: 'processing' | 'shipped' | 'delivered';
  image: string;
  title: string;
  description: string;
  price: number;
}

@Component({
  selector: 'app-page-mine',
  standalone: true,
  imports: [CommonModule,MatIconModule,FontAwesomeModule],
  templateUrl: './page-mine.html',
  styleUrls: ['./page-mine.scss']
})
export class PageMineComponent {

   // 修改3：定义Material图标名称映射
  icons = {
    //user: 'account_circle',  // 对应fa-user
    //cog: 'settings',         // 对应fa-cog
    //signOut: 'logout'        // 对应fa-sign-out-alt
    // NEW: 定义使用的图标
  
    user: faUser,
    cog: faCog,
    signOut: faSignOutAlt,
    plus: faPlus,
    shoppingBag: faShoppingBag,
    heart: faHeart,
    palette: faPalette,
    eye: faEye,
    redo: faRedo,
    truck: faTruck,
    download: faDownload,
    boxOpen: faBoxOpen,
    search: faSearch
  
  };

constructor(private router: Router) {}

  // 用户信息
  user = {
    name: '用户昵称',
    level: '黄金会员',
    avatar: 'https://p26-dreamina-sign.byteimg.com/tos-cn-i-tb4s082cfz/d10684d06ebf447bb47c209b902d5a1f~tplv-tb4s082cfz-aigc_resize:360:360.webp?lk3s=43402efa&x-expires=1753488000&x-signature=U5qRj87JEvvtHaTGc8GYAtFreO8%3D&format=.webp', // 本地头像图片
    stats: { // 新增字段
      designs: 12,
      favorites: 8,
      orders: 5
    }

  };

  // 我的设计数据
  myDesigns: DesignItem[] = [
    {
    image: 'https://p9-dreamina-sign.byteimg.com/tos-cn-i-tb4s082cfz/c84173af695e4d26999dbe49f363f030~tplv-tb4s082cfz-aigc_resize:360:360.webp?lk3s=43402efa&x-expires=1753488000&x-signature=IJ9j8rxWCnN04rUmutS0glRDE2g%3D&format=.webp',
      title: '蓝色风暴',
      date: '3天前',
      likes: 24 // 新增字段
    },
    {
      image: 'https://p3-dreamina-sign.byteimg.com/tos-cn-i-tb4s082cfz/9a7b56c915f2430f82ee49dd0df876e0~tplv-tb4s082cfz-aigc_resize:360:360.webp?lk3s=43402efa&x-expires=1753488000&x-signature=bn8z99XYKH6rcsIs%2FvRJvXOc6C8%3D&format=.webp',
      title: '红黑经典',
      date: '1周前',
      likes: 18 // 新增字段
    },
    {
      image: 'https://p9-dreamina-sign.byteimg.com/tos-cn-i-tb4s082cfz/0332b05f30db4e1ab594deda70cfd5b9~tplv-tb4s082cfz-aigc_resize:360:360.webp?lk3s=43402efa&x-expires=1753488000&x-signature=qyxMs%2B%2Bx2HtKaXkuazBDp%2BEogB8%3D&format=.webp',
      title: '星空主题',
      date: '2周前',
      likes: 32 // 新增字段
    },
    {
      image: 'https://p3-dreamina-sign.byteimg.com/tos-cn-i-tb4s082cfz/d0df63176686402ab842a99bec6486a6~tplv-tb4s082cfz-aigc_resize:360:360.webp?lk3s=43402efa&x-expires=1753488000&x-signature=%2BxTttfK%2BzH8dFg%2BoOaP8Bz2ejZA%3D&format=.webp',
      title: '火焰纹路',
      date: '3周前',
      likes: 15 // 新增字段
    }
  ];

  // 我的收藏数据
  favorites: FavoriteItem[] = [
     {
      image: 'https://p9-dreamina-sign.byteimg.com/tos-cn-i-tb4s082cfz/0332b05f30db4e1ab594deda70cfd5b9~tplv-tb4s082cfz-aigc_resize:360:360.webp?lk3s=43402efa&x-expires=1753488000&x-signature=qyxMs%2B%2Bx2HtKaXkuazBDp%2BEogB8%3D&format=.webp',
      title: '星空主题',
      author: 'by 设计师小王',
      downloads: 56 // 新增字段
    },
    {
      image: 'https://p3-dreamina-sign.byteimg.com/tos-cn-i-tb4s082cfz/d0df63176686402ab842a99bec6486a6~tplv-tb4s082cfz-aigc_resize:360:360.webp?lk3s=43402efa&x-expires=1753488000&x-signature=%2BxTttfK%2BzH8dFg%2BoOaP8Bz2ejZA%3D&format=.webp',
      title: '火焰纹路',
      author: 'by 创意达人',
      downloads: 42 // 新增字段
    },
    {
      image: 'https://p3-dreamina-sign.byteimg.com/tos-cn-i-tb4s082cfz/59ff9deac094430d8b09eb960be3cccb~tplv-tb4s082cfz-aigc_resize:360:360.webp?lk3s=43402efa&x-expires=1753488000&x-signature=f3YWBwq%2BEdNcaKhlmvJR4q37j5A%3D&format=.webp',
      title: '极简主义',
      author: 'by 简约大师',
      downloads: 38 // 新增字段
    }
  ];

 orders: OrderItem[] = [
    {
      id: '#DS20230715',
      date: '2023-07-15',
      status: 'delivered',
      image: 'https://p9-dreamina-sign.byteimg.com/tos-cn-i-tb4s082cfz/c8c4792091c546a79238a6f88e05570d~tplv-tb4s082cfz-aigc_resize:360:360.webp?lk3s=43402efa&x-expires=1753488000&x-signature=3%2Fn5k8LO9q6okBhlu1qzTjYpgLg%3D&format=.webp',
      title: '蓝色风暴羽绒服',
      description: '颜色: 天蓝色 / 尺码: L / 定制图案: 风暴纹理',
      price: 899.00
    },
    {
      id: '#DS20230710',
      date: '2023-07-10',
      status: 'shipped',
      image: 'https://p3-dreamina-sign.byteimg.com/tos-cn-i-tb4s082cfz/6d08ff960f54452a801914baa8ac4091~tplv-tb4s082cfz-aigc_resize:360:360.webp?lk3s=43402efa&x-expires=1753488000&x-signature=uXsUOLZO6jiNoxX1DnQlquiwe5g%3D&format=.webp',
      title: '红黑经典羽绒服',
      description: '颜色: 红黑渐变 / 尺码: M / 定制图案: 几何线条',
      price: 799.00
    }
  ];

  // NEW: 快速操作项
  quickActions = [
    { icon: this.icons.plus, title: '新建设计', color: 'primary' },
    { icon: this.icons.shoppingBag, title: '我的订单', color: 'success' },
    { icon: this.icons.heart, title: '我的收藏', color: 'warning' },
    { icon: this.icons.cog, title: '账户设置', color: 'danger' }
  ];

  // 处理图片加载错误
  handleImageError(event: Event) {
    const img = event.target as HTMLImageElement;
    img.src = 'assets/images/default-placeholder.png';
    img.onerror = null; // 防止无限循环
  }

  
openSettings() {
    // 实际项目中可以导航到设置页面或打开设置模态框
    console.log('设置功能已触发');
    this.router.navigate(['/settings']); // 或使用模态框
  }

  // 退出登录
  logout() {
    alert('退出登录功能需要后端支持，此处为前端演示');

    // 实际项目中这里会有路由跳转到登录页
  


 if (confirm('确定要退出登录吗？')) {
      // 实际项目中这里应该清除用户认证信息
      localStorage.removeItem('authToken');
       localStorage.removeItem('userData'); // 新增清除项
      // 导航到登录页面
      this.router.navigate(['/login']);
      // 显示退出成功提示
      alert('您已成功退出登录');
    }
    




    
  }

  // 修改16：新增获取状态样式类的方法
  getStatusClass(status: string): string {
    return `status-${status}`;
  }

  // 修改17：新增获取操作按钮渐变背景的方法
  getActionGradient(color: string): string {
    const gradients: Record<string, string> = {
      primary: 'linear-gradient(135deg, #3498db, #9b59b6)',
      success: 'linear-gradient(135deg, #2ecc71, #27ae60)',
      warning: 'linear-gradient(135deg, #f39c12, #d35400)',
      danger: 'linear-gradient(135deg, #e74c3c, #c0392b)'
    };
    return gradients[color] ;
  }
}
