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

interface Category {
  id: number;
  name: string;
  icon: string;
  active?: boolean;
}

interface Story {
  id: number;
  title: string;
  image: string;
  content?: string;
  views: number;
  likes: number;
  timeAgo?: string;
  comments?: number;
  tag?: string;
  description?: string;
}

@Component({
  selector: 'app-page-story',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './page-story.html',
  styleUrls: ['./page-story.scss']
})
export class PageStory {
  isModalOpen = signal(false);
  selectedStoryId = signal<number | null>(null);
  
  // 定义 categories 数组
  categories: Category[] = [
    { id: 1, name: '全部', icon: 'fas fa-utensils', active: true },
    { id: 2, name: '历史', icon: 'fas fa-history' },
    { id: 3, name: '地域', icon: 'fas fa-map-marked-alt' },
    { id: 4, name: '食材', icon: 'fas fa-seedling' },
    { id: 5, name: '名厨', icon: 'fas fa-user-tie' }
  ];

  // 定义 featuredStory 对象
  featuredStory: Story = {
    id: 0,
    title: '中华美食五千年',
    image: 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80',
    tag: '本周精选',
    description: '从远古时期的火烤食物到现代的分子料理，中华美食经历了漫长而精彩的发展历程...',
    views: 5842,
    likes: 2156,
    comments: 328
  };

  // 定义 stories 数组
  stories: Story[] = [
    {
      id: 1,
      title: '川菜的麻辣传奇',
      image: 'https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80',
      views: 3256,
      likes: 1203,
      timeAgo: '3天前',
      content: `
        <p>川菜，中国八大菜系之一，以其麻辣鲜香著称于世。它的历史可以追溯到秦汉时期，但真正形成特色是在明清时期。</p>
        <p>辣椒虽然是明代才传入中国的外来物种，但却在四川这片土地上找到了最佳的生长环境，并与当地的花椒完美结合，创造了独特的"麻辣"风味。</p>
        <p>传说清朝乾隆年间，一位四川厨师在制作水煮鱼时，不小心将大量辣椒和花椒倒入锅中，本以为会毁掉这道菜，没想到却意外创造了令人难忘的美味。从此，"麻辣"成为了川菜的标志性味道。</p>
        <p>现代川菜已经发展出24种味型，除了麻辣外，还有鱼香、怪味、红油等独特风味。每一道经典川菜背后，都有一段有趣的历史故事。</p>
      `
    },
    {
      id: 2,
      title: '披萨的世界之旅',
      image: 'https://images.unsplash.com/photo-1513104890138-7c749659a591?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80',
      views: 2856,
      likes: 987,
      timeAgo: '1周前',
      content: `
        <p>披萨起源于意大利那不勒斯，最初是穷人的食物。简单的面团配上当地产的番茄和马苏里拉奶酪，就成了这道风靡全球的美食。</p>
        <p>19世纪末，随着意大利移民涌入美国，披萨开始在美国流行。二战后，美国大兵从欧洲战场带回对披萨的喜爱，加速了披萨在全球的传播。</p>
        <p>有趣的是，意大利人坚持传统披萨的做法，而美国人则不断创新，发明了芝加哥深盘披萨、纽约风格披萨等多种变体。</p>
        <p>今天，披萨已经成为全球最受欢迎的食物之一，每年全球消费约50亿个披萨，仅美国就有约7万家披萨店。</p>
      `
    },
    {
      id: 3,
      title: '寿司的艺术与哲学',
      image: 'https://images.unsplash.com/photo-1551504734-5ee1c4a1479b?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80',
      views: 4125,
      likes: 1856,
      timeAgo: '2周前',
      content: `
        <p>寿司起源于东南亚的发酵鱼保存方法，后传入日本并发展为今天的形态。江户时代(17-19世纪)是寿司发展的重要时期。</p>
        <p>最初的寿司是发酵鱼和米饭一起食用，后来发展为将新鲜鱼放在醋饭上的"江户前寿司"，这就是现代寿司的雏形。</p>
        <p>寿司大师小野二郎曾说："寿司不仅仅是食物，它是一种艺术，一种哲学。"制作寿司需要多年的训练，从煮饭到切鱼，每一个细节都至关重要。</p>
        <p>2008年，寿司被联合国教科文组织列为非物质文化遗产，这是对寿司文化和艺术的最高认可。</p>
      `
    },
    {
      id: 4,
      title: '法式甜点的浪漫',
      image: 'https://images.unsplash.com/photo-1563805042-7684c019e1cb?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80',
      views: 3542,
      likes: 1654,
      timeAgo: '3周前',
      content: `
        <p>法国甜点以其精致和浪漫闻名世界。从中世纪的蜂蜜蛋糕到文艺复兴时期的奶油甜点，再到现代的分子甜点，法国一直是甜点创新的中心。</p>
        <p>马卡龙最初是意大利修女发明的杏仁饼干，后来被法国王后凯瑟琳·德·美第奇带到法国，经过法国厨师的改良，成为今天的样子。</p>
        <p>法国大革命后，许多宫廷厨师失业后开设甜点店，使得原本只有贵族才能享用的甜点走入寻常百姓家，促进了法国甜点业的发展。</p>
        <p>今天，法国甜点不仅是一种美食，更是一种生活艺术的象征，代表着法国人对美好生活的追求。</p>
      `
    }
  ];

  // 设置活动分类
  setActiveCategory(id: number) {
    this.categories.forEach(cat => cat.active = cat.id === id);
  }

  // 卡片点击动画效果
  cardClick(event: Event) {
    const card = event.currentTarget as HTMLElement;
    card.style.transform = 'scale(0.98)';
    setTimeout(() => {
      card.style.transform = '';
    }, 200);
  }

  // 打开故事模态框
  openStoryModal(storyId: number) {
    this.selectedStoryId.set(storyId);
    this.isModalOpen.set(true);
    document.body.style.overflow = 'hidden';
  }

  // 关闭模态框
  closeModal() {
    this.isModalOpen.set(false);
    document.body.style.overflow = '';
  }

  // 获取选中的故事
  getSelectedStory() {
    return this.stories.find(story => story.id === this.selectedStoryId()) || this.stories[0];
  }

  // 分享故事
  shareStory() {
    alert('分享功能即将打开');
  }

  // 点赞故事
  likeStory() {
    const story = this.getSelectedStory();
    if (story) {
      story.likes++;
    }
  }
}
