import { Component, AfterViewInit, Renderer2, ElementRef, ViewChild } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Navigation, Pagination, Autoplay } from 'swiper/modules';
import { Swiper } from 'swiper';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/autoplay';

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' }
    },
    {
      title: 'IP孵化平台',
      subtitle: '文化IP创新与商业化',
      icon: 'fas fa-egg',
      features: [
        { icon: 'fas fa-lightbulb', text: 'IP价值评估系统' },
        { icon: 'fas fa-sync-alt', text: 'IP生态转化模型' },
        { icon: 'fas fa-chart-line', text: '市场潜力分析' },
        { icon: 'fas fa-handshake', text: '商业对接平台' }
      ],
      bgColor: 'var(--community-color)',
      btnPrimary: { text: '孵化项目', icon: 'fas fa-rocket' },
      btnOutline: { text: 'IP商城', icon: 'fas fa-store' }
    },
    {
      title: '高校联盟',
      subtitle: '学术研究与人才培养',
      icon: 'fas fa-graduation-cap',
      features: [
        { icon: 'fas fa-flask', text: '联合研究项目' },
        { icon: 'fas fa-user-graduate', text: '人才实训基地' },
        { icon: 'fas fa-book-open', text: '课程共建计划' },
        { icon: 'fas fa-trophy', text: '创新竞赛平台' }
      ],
      bgColor: 'var(--university-color)',
      btnPrimary: { text: '加入联盟', icon: 'fas fa-user-plus' },
      btnOutline: { text: '合作院校', icon: 'fas fa-school' }
    },
    {
      title: '政府协作',
      subtitle: '政策支持与资源整合',
      icon: 'fas fa-landmark',
      features: [
        { icon: 'fas fa-file-contract', text: '政策申报指南' },
        { icon: 'fas fa-hand-holding-usd', text: '专项扶持资金' },
        { icon: 'fas fa-network-wired', text: '区域协作平台' },
        { icon: 'fas fa-chart-pie', text: '文化资源统筹' }
      ],
      bgColor: 'var(--gov-color)',
      btnPrimary: { text: '政策查询', icon: 'fas fa-file-alt' },
      btnOutline: { text: '协作申请', icon: 'fas fa-hands-helping' }
    },
    {
      title: '全民创作',
      subtitle: '大众参与的文化创新',
      icon: 'fas fa-edit',
      features: [
        { icon: 'fas fa-cloud-upload-alt', text: 'UGC内容平台' },
        { icon: 'fas fa-trophy', text: '创作竞赛活动' },
        { icon: 'fas fa-coins', text: '创作激励计划' },
        { icon: 'fas fa-store', text: '作品交易市场' }
      ],
      bgColor: 'var(--public-color)',
      btnPrimary: { text: '开始创作', icon: 'fas fa-pencil-alt' },
      btnOutline: { text: '优秀作品', icon: 'fas fa-medal' }
    }
  ];

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

  slidesForSmartApp: Slide[] = [
    {
      image: 'assets/images/2-2.png',
      title: '数字文创工坊',
      description: 'AI赋能传统文化创新，打造数字文创精品'
    },
    {
      image: 'assets/images/2-1.png',
      title: '智慧文旅系统',
      description: 'XR技术重现历史场景，沉浸式体验江西文化'
    },
    {
      image: 'assets/images/2-3.png',
      title: 'IP孵化平台',
      description: '培育本土文化IP，推动文化产业商业化'
    }
  ];
  
  // 新增：共创社区轮播图数据
  slidesForCommunity: Slide[] = [
    {
      image: 'assets/images/3-1.png',
      title: '高校联盟创新基地',
      description: '产学研一体化，培养数字文化创新人才'
    },
    {
      image: 'assets/images/3-2.png',
      title: '政企协作平台',
      description: '政策支持与资源整合，加速文化产业发展'
    },
    {
      image: 'assets/images/3-3.png',
      title: '全民创作社区',
      description: '大众参与文化创新，共享创作成果'
    }
  ];

  private culturalSwiper?: Swiper;
  private smartAppSwiper?: Swiper;
  private communitySwiper?: Swiper;

  constructor(private renderer: Renderer2, private el: ElementRef) {}

  ngAfterViewInit() {
    this.initSwipers();
    this.setupNavigation();
  }

  private initSwipers() {
    this.culturalSwiper = this.initSwiper('.cultural-resource-swiper');
    this.smartAppSwiper = this.initSwiper('.smart-app-swiper');
    this.communitySwiper = this.initSwiper('.community-swiper');
  }

  private initSwiper(selector: string): Swiper | undefined {
    const swiperEl = this.el.nativeElement.querySelector(selector);
    if (!swiperEl) return;
    
    // 为每个轮播图创建唯一的分页器和导航选择器
    const uniqueId = Math.random().toString(36).substring(2, 9);
    const paginationSelector = `.swiper-pagination-${uniqueId}`;
    const nextSelector = `.swiper-button-next-${uniqueId}`;
    const prevSelector = `.swiper-button-prev-${uniqueId}`;
    
    // 添加唯一类名到分页器和导航元素
    const paginationEl = swiperEl.querySelector('.swiper-pagination');
    const nextBtn = swiperEl.querySelector('.swiper-button-next');
    const prevBtn = swiperEl.querySelector('.swiper-button-prev');
    
    if (paginationEl) paginationEl.classList.add(`swiper-pagination-${uniqueId}`);
    if (nextBtn) nextBtn.classList.add(`swiper-button-next-${uniqueId}`);
    if (prevBtn) prevBtn.classList.add(`swiper-button-prev-${uniqueId}`);
    
    return new Swiper(swiperEl, {
      modules: [Navigation, Pagination, Autoplay],
      direction: 'horizontal',
      loop: true,
      speed: 600,
      pagination: {
        el: paginationSelector, // 使用唯一选择器
        clickable: true,
        dynamicBullets: true
      },
      navigation: {
        nextEl: nextSelector, // 使用唯一选择器
        prevEl: prevSelector, // 使用唯一选择器
        disabledClass: 'swiper-button-disabled'
      },
      autoplay: {
        delay: 5000,
        disableOnInteraction: false,
      },
      effect: 'fade',
      fadeEffect: {
        crossFade: true
      },
      keyboard: {
        enabled: true,
        onlyInViewport: true,
      },
      grabCursor: true,
      observer: true,
      observeParents: true,
      observeSlideChildren: true,
      breakpoints: {
        480: {
          effect: 'slide'
        }
      }
    });
  }

  private setupNavigation() {
    const navLinks = this.el.nativeElement.querySelectorAll('.module-nav a, .sub-nav a');
    navLinks.forEach((link: HTMLElement) => {
      this.renderer.listen(link, 'click', (event) => {
        event.preventDefault();
        
        // 移除所有活动状态
        navLinks.forEach((l: HTMLElement) => l.classList.remove('active'));
        
        // 设置当前活动状态
        link.classList.add('active');
        
        // 处理父菜单活动状态
        const parentLi = link.closest('li');
        if (parentLi && parentLi.parentElement?.classList.contains('module-nav')) {
          const parentLink = parentLi.querySelector('a');
          if (parentLink) {
            parentLink.classList.add('active');
          }
        }
        
        // 获取目标锚点
        const targetId = link.getAttribute('href');
        if (targetId && targetId.startsWith('#')) {
          const targetElement = document.querySelector(targetId);
          if (targetElement) {
            // 平滑滚动
            targetElement.scrollIntoView({ 
              behavior: 'smooth', 
              block: 'start'
            });
          }
        }
      });
    });
  }
}