import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { 
  FileText, 
  Target, 
  TrendingUp, 
  Calendar, 
  DollarSign, 
  AlertTriangle,
  ChevronLeft,
  ChevronRight,
  RotateCcw,
  Download
} from 'lucide-react';
import { useDemoStore } from '../store/demoStore';

interface ResultPageProps {
  onRestart: () => void;
}

const sections = [
  { id: 'overview', title: '策划案概述', icon: FileText },
  { id: 'introduction', title: '展会介绍与预期效果', icon: Target },
  { id: 'marketing', title: '营销方案', icon: TrendingUp },
  { id: 'operation', title: '现场运营方案', icon: Calendar },
  { id: 'budget', title: '预算与收益分析', icon: DollarSign },
  { id: 'risk', title: '风险评估与应急预案', icon: AlertTriangle },
];

const ResultPage: React.FC<ResultPageProps> = ({ onRestart }) => {
  const [currentSection, setCurrentSection] = useState(0);
  const { generatedContent } = useDemoStore();

  const handlePrevious = () => {
    if (currentSection > 0) {
      setCurrentSection(currentSection - 1);
    }
  };

  const handleNext = () => {
    if (currentSection < sections.length - 1) {
      setCurrentSection(currentSection + 1);
    }
  };

  // Mock content for demonstration
  const getSectionContent = (sectionId: string) => {
    const mockContent = {
      overview: {
        title: '2024长三角国际新能源汽车与智能交通产业博览会',
        content: `
## 策划背景
在全球碳中和目标推动下，新能源汽车产业迎来爆发式增长。长三角地区作为中国汽车产业核心集群，聚集了特斯拉、上汽、蔚来等龙头企业。

## 策划目的
- 打造长三角地区新能源汽车与智能交通领域第一展会品牌
- 吸引300家优质展商，实现现场意向交易额超8亿元人民币
- 促进产业链上下游合作，推动技术创新和产业升级
- 推广绿色出行理念，助力碳中和目标实现
        `,
        images: ['/api/placeholder/600/400', '/api/placeholder/600/400']
      },
      introduction: {
        title: '展会规模与预期',
        content: `
## 展会主题
「智行未来，绿动长三角」

## 预计规模
- 展览面积：50,000平方米
- 标准展位：1,200个（9平米/个）
- 特装展位：20,000平方米
- 参展商家数：350家
- 参观人次：50,000人次

## 预期效果
- 现场成交额预计超10亿元
- 带动相关产业收入约30亿元
- 媒体曝光量超1亿次
        `,
        images: []
      },
      // Add more sections...
    };

    return mockContent[sectionId] || generatedContent[sectionId] || mockContent.overview;
  };

  const currentSectionData = getSectionContent(sections[currentSection].id);

  return (
    <div className="min-h-screen p-6">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <motion.div
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          className="mb-8"
        >
          <div className="flex items-center justify-between">
            <h1 className="text-4xl font-bold text-gradient">
              会展策划方案
            </h1>
            
            <div className="flex items-center gap-4">
              <button
                onClick={() => {}}
                className="px-4 py-2 glass-morphism rounded-xl hover:scale-105 transition-transform flex items-center gap-2"
              >
                <Download className="w-4 h-4" />
                导出方案
              </button>
              
              <button
                onClick={onRestart}
                className="px-4 py-2 glass-morphism rounded-xl hover:scale-105 transition-transform flex items-center gap-2"
              >
                <RotateCcw className="w-4 h-4" />
                重新演示
              </button>
            </div>
          </div>
        </motion.div>

        {/* Section Tabs */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.2 }}
          className="mb-8"
        >
          <div className="flex items-center gap-2 overflow-x-auto scrollbar-thin pb-2">
            {sections.map((section, index) => {
              const Icon = section.icon;
              return (
                <button
                  key={section.id}
                  onClick={() => setCurrentSection(index)}
                  className={`
                    flex items-center gap-2 px-4 py-2 rounded-xl transition-all whitespace-nowrap
                    ${currentSection === index 
                      ? 'bg-gradient-to-r from-blue-500 to-purple-500 text-white shadow-lg' 
                      : 'glass-morphism hover:scale-105'
                    }
                  `}
                >
                  <Icon className="w-4 h-4" />
                  <span className="font-medium">{section.title}</span>
                </button>
              );
            })}
          </div>
        </motion.div>

        {/* Content Area */}
        <AnimatePresence mode="wait">
          <motion.div
            key={currentSection}
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -20 }}
            transition={{ duration: 0.3 }}
            className="glass-morphism rounded-2xl p-8"
          >
            {/* Section Header */}
            <div className="mb-6">
              <h2 className="text-3xl font-bold mb-2">
                {currentSectionData.title}
              </h2>
              <div className="h-1 w-20 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full" />
            </div>

            {/* Section Content */}
            <div className="prose prose-neutral dark:prose-invert max-w-none">
              <div className="whitespace-pre-wrap text-neutral-700 dark:text-neutral-300">
                {currentSectionData.content}
              </div>
            </div>

            {/* Images */}
            {currentSectionData.images && currentSectionData.images.length > 0 && (
              <div className="mt-8 grid grid-cols-2 gap-4">
                {currentSectionData.images.map((src, index) => (
                  <motion.div
                    key={index}
                    initial={{ opacity: 0, scale: 0.9 }}
                    animate={{ opacity: 1, scale: 1 }}
                    transition={{ delay: index * 0.1 }}
                    className="rounded-xl overflow-hidden shadow-lg"
                  >
                    <img 
                      src={src} 
                      alt={`Section image ${index + 1}`}
                      className="w-full h-full object-cover"
                    />
                  </motion.div>
                ))}
              </div>
            )}
          </motion.div>
        </AnimatePresence>

        {/* Navigation */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.4 }}
          className="mt-8 flex items-center justify-between"
        >
          <button
            onClick={handlePrevious}
            disabled={currentSection === 0}
            className={`
              px-4 py-2 rounded-xl flex items-center gap-2 transition-all
              ${currentSection === 0 
                ? 'opacity-50 cursor-not-allowed glass-morphism' 
                : 'glass-morphism hover:scale-105'
              }
            `}
          >
            <ChevronLeft className="w-4 h-4" />
            上一页
          </button>

          {/* Page Indicators */}
          <div className="flex items-center gap-2">
            {sections.map((_, index) => (
              <div
                key={index}
                className={`
                  w-2 h-2 rounded-full transition-all
                  ${currentSection === index 
                    ? 'w-8 bg-gradient-to-r from-blue-500 to-purple-500' 
                    : 'bg-neutral-400'
                  }
                `}
              />
            ))}
          </div>

          <button
            onClick={handleNext}
            disabled={currentSection === sections.length - 1}
            className={`
              px-4 py-2 rounded-xl flex items-center gap-2 transition-all
              ${currentSection === sections.length - 1 
                ? 'opacity-50 cursor-not-allowed glass-morphism' 
                : 'glass-morphism hover:scale-105'
              }
            `}
          >
            下一页
            <ChevronRight className="w-4 h-4" />
          </button>
        </motion.div>
      </div>
    </div>
  );
};

export default ResultPage;