import { Component, AfterViewInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import Swiper from 'swiper';

// 添加这些导入
import { Navigation, Pagination, Autoplay } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';


interface PlatformModule {
  title: string;
  subtitle: string;
  icon: string;
  features: { icon: string; text: string }[];
  bgColor: string;
  btnPrimary: { text: string; icon: string };
  btnOutline: { text: string; icon: string };
}

interface Slide {
  image: string;
  title: string;
  description: string;
}

interface StatCard {
  title: string;
  value: string;
}

@Component({
  selector: 'app-page-crm-platform',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './page-crm-platform.html',
  styleUrls: ['./page-crm-platform.scss']
})
export class PageCrmPlatform implements AfterViewInit {
  stats: StatCard[] = [
    { title: '资源总数', value: '24,685' },
    { title: '本月新增', value: '1,243' },
    { title: '活跃用户', value: '3,842' }
  ];

  modules: PlatformModule[] = [
    {
      title: '多模态采集中心',
      subtitle: '全方位采集文化资源数据',
      icon: 'fas fa-microphone-alt',
      features: [
        { icon: 'fas fa-comments', text: 'AI访谈工具（语伴科技）' },
        { icon: 'fas fa-cube', text: '3D扫描建模' },
        { icon: 'fas fa-cloud-upload-alt', text: 'MCP融合上传' },
        { icon: 'fas fa-vr-cardboard', text: '沉浸式数据采集' }
      ],
      bgColor: 'var(--primary-blue)',
      btnPrimary: { text: '开始采集', icon: 'fas fa-play' },
      btnOutline: { text: '了解更多', icon: 'fas fa-info-circle' }
    },
    {
      title: '分类知识图谱',
      subtitle: '构建江西文化知识体系',
      icon: 'fas fa-sitemap',
      features: [
        { icon: 'fas fa-landmark', text: '红色文化数字馆' },
        { icon: 'fas fa-tint', text: '水文化研究中心' },
        { icon: 'fas fa-dragon', text: '非遗传承数据库' },
        { icon: 'fas fa-graduation-cap', text: '水利水电大学专区' }
      ],
      bgColor: 'var(--red-culture)',
      btnPrimary: { text: '探索图谱', icon: 'fas fa-project-diagram' },
      btnOutline: { text: '文化百科', icon: 'fas fa-book' }
    },
    {
      title: '数字文创工坊',
      subtitle: '创新文化内容生产平台',
      icon: 'fas fa-paint-brush',
      features: [
        { icon: 'fas fa-robot', text: 'AIGC内容生成' },
        { icon: 'fas fa-building', text: 'BIM建筑建模' },
        { icon: 'fas fa-hands', text: '非遗技艺孪生' },
        { icon: 'fas fa-palette', text: '赣鄱风格设计' }
      ],
      bgColor: 'var(--primary-gold)',
      btnPrimary: { text: '开始创作', icon: 'fas fa-magic' },
      btnOutline: { text: '作品展示', icon: 'fas fa-gift' }
    },
    {
      title: '智慧文旅系统',
      subtitle: '科技赋能文旅体验',
      icon: 'fas fa-map-marked-alt',
      features: [
        { icon: 'fas fa-vr-cardboard', text: 'XR场景重现' },
        { icon: 'fas fa-mobile-alt', text: 'AR智能导览' },
        { icon: 'fas fa-route', text: '旅游动线策划器' },
        { icon: 'fas fa-tree', text: '生态旅游规划' }
      ],
      bgColor: 'var(--heritage)',
      btnPrimary: { text: '体验导览', icon: 'fas fa-play-circle' },
      btnOutline: { text: '探索路线', icon: 'fas fa-compass' }
    }
  ];

  slides: Slide[] = [
    {
      image: 'assets/images/red.webp',
      title: '红色文化数字馆',
      description: '探索江西丰富的革命历史资源，数字化保存红色记忆'
    },
    {
      image: 'assets/images/feiyi.png',
      title: '非遗传承数据库',
      description: '记录与保护江西非物质文化遗产，传承千年技艺'
    },
    {
      image: 'assets/images/water.png',
      title: '水文化研究中心',
      description: '聚焦鄱阳湖流域水文化研究，展现江西水韵之美'
    }
  ];

  ngAfterViewInit() {
    new Swiper('.swiper-container', {
      // 启用导航模块
      modules: [Navigation, Pagination, Autoplay],

      // 基本配置
      direction: 'horizontal',
      loop: true,
      speed: 600,

      // 分页器配置
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
        dynamicBullets: true
      },

      // 导航按钮配置（关键修复）
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
        disabledClass: 'swiper-button-disabled' // 添加禁用状态类
      },

      // 自动播放配置
      autoplay: {
        delay: 5000,
        disableOnInteraction: false,
      },

      // 效果配置
      effect: 'fade',
      fadeEffect: {
        crossFade: true
      },

      // 键盘控制
      keyboard: {
        enabled: true,
        onlyInViewport: true,
      },

      // 触摸控制
      grabCursor: true,

      // 响应式配置
      breakpoints: {
        480: {
          effect: 'slide'
        }
      }
    });
  }
}
