src/components/OriginalDetailContent.tsx

import { 
  CheckCircle2, 
  ChevronDown, 
  ChevronRight, 
  FileText, 
  Search, 
  MoreHorizontal,
  Sun,
  Moon
} from 'lucide-react';
import { useState } from 'react';
import FilePreviewModal from './FilePreviewModal';

interface OriginalDetailContentProps {
  isDarkMode: boolean;
  toggleTheme: () => void;
}

export default function OriginalDetailContent({ isDarkMode, toggleTheme }: OriginalDetailContentProps) {
  const [expandedSteps, setExpandedSteps] = useState<number[]>([0, 1, 2, 3, 4]);
  const [isModalOpen, setIsModalOpen] = useState(false);

  const toggleStep = (index: number) => {
    setExpandedSteps(prev => 
      prev.includes(index) ? prev.filter(i => i !== index) : [...prev, index]
    );
  };

  const steps = [
    {
      title: '收集贵州茅台的基础信息和最新数据',
      content: '我已通知用户我将开始收集贵州茅台的基础信息，为后续财务和行业分析做准备。下一步将获取最新数据。',
      actions: ['搜索贵州茅台的最新财务数据、股价表现和近期重大新闻。']
    },
    {
      title: '获取财务数据和市场表现',
      content: '已收集2024年财务数据和市场表现，收入达1708亿，净利润862亿，估值PE约21，行业对比显示增长稳定，准备进行行业和估值分析。',
      actions: [
        '获取贵州茅台、五粮液、泸州老窖的财务指标对比数据（营收、利润、毛利率、ROE、分红等）。',
        '获取贵州茅台、五粮液、泸州老窖的财务指标对比数据（营收、利润、毛利率、ROE、分红等）。'
      ]
    },
    {
      title: '分析行业环境和竞争格局',
      content: '已获取贵州茅台财务指标，与行业龙头对比，显示其ROE和毛利率居行业高位，现金流充裕，负债低，盈利能力强。下一步将进行行业环境分析。',
      actions: ['分析白酒行业2025年三季度业绩下滑原因，以及飞天茅台价格走势和消费趋势。']
    },
    {
      title: '综合分析并撰写投资分析报告',
      content: '发现行业整体压力仍大，白酒产量连续下滑，库存高企。茅台价格上涨，需关注市场需求和政策影响，下一步重点分析行业环境。',
      actions: [
        '创建临时文件用于整理贵州茅台的财务数据和行业信息。',
        '撰写贵州茅台投资分析报告，包括财务表现、行业地位、核心竞争力、估值水平和风险因素，并给出投资建议。'
      ],
      actionIcon: FileText
    }
  ];

  return (
    <>
      <div className="flex-1 bg-white dark:bg-gray-900 h-screen text-gray-600 dark:text-gray-400 font-sans transition-colors duration-300 flex flex-col relative overflow-hidden">
        {/* Theme Toggle */}
        <div className="absolute top-4 right-6 z-10">
          <button 
            onClick={toggleTheme}
            className="p-2 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
            title={isDarkMode ? "切换到浅色模式" : "切换到深色模式"}
          >
            {isDarkMode ? <Moon size={20} /> : <Sun size={20} />}
          </button>
        </div>

        {/* Scrollable Content Area */}
        <div className="flex-1 overflow-y-auto custom-scrollbar">
          <div className="max-w-3xl mx-auto pt-4 pb-40 md:pb-60 md:pt-8 w-full px-4 md:px-0">
            {/* User Query */}
            <div className="flex justify-end mb-8">
              <div className="bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 px-4 py-3 rounded-2xl rounded-tr-sm max-w-[80%]">
                分析贵州茅台是否值得购买
              </div>
            </div>

            {/* Bot Response Intro */}
            <div className="mb-6">
              <div className="flex items-center gap-3 mb-3">
                <div className="w-8 h-8 rounded-full overflow-hidden flex-shrink-0 bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
                    <img src="/vite.svg" alt="Logo" className="w-5 h-5" />
                </div>
                <div className="flex items-center gap-2">
                  <span className="font-medium text-gray-900 dark:text-gray-100">Manus-clone-cn</span>
                  <span className="px-1.5 py-0.5 rounded text-[10px] bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 border border-gray-200 dark:border-gray-700">Lite</span>
                </div>
              </div>
              <div className="space-y-2">
                <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
                  好的，我将为您深入分析贵州茅台（600519.SH）的投资价值。我将从财务表现、行业地位、核心竞争力以及潜在风险等多个维度进行研究，并为您提供一份详细的分析报告。请稍等。
                </p>
              </div>
            </div>

            {/* Process Steps */}
            <div className="space-y-6 mb-8 border-l-2 border-gray-100 dark:border-gray-800 pl-6 relative">
              {steps.map((step, index) => (
                <div key={index} className="relative">
                  {/* Timeline Dot */}
                  <div className="absolute -left-[31px] top-0 bg-white dark:bg-gray-900 p-1">
                    <CheckCircle2 className="text-gray-300 dark:text-gray-600" size={16} />
                  </div>

                  {/* Step Header */}
                  <button 
                    onClick={() => toggleStep(index)}
                    className="flex items-center gap-2 w-full text-left group"
                  >
                    <span className={`text-sm font-medium ${expandedSteps.includes(index) ? 'text-gray-900 dark:text-gray-100' : 'text-gray-500 dark:text-gray-500'}`}>
                      {step.title}
                    </span>
                    {expandedSteps.includes(index) ? <ChevronDown size={16} className="text-gray-400" /> : <ChevronRight size={16} className="text-gray-400" />}
                  </button>

                  {/* Step Content */}
                  {expandedSteps.includes(index) && (
                    <div className="mt-3 space-y-3">
                      <p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
                        {step.content}
                      </p>
                      
                      {/* Action Items */}
                      <div className="space-y-2">
                        {step.actions.map((action, i) => (
                          <div key={i} className="flex items-start gap-2 bg-gray-50 dark:bg-gray-800 p-3 rounded-lg border border-gray-100 dark:border-gray-700">
                            {step.actionIcon ? (
                               <step.actionIcon size={14} className="mt-0.5 text-gray-400 dark:text-gray-500" />
                            ) : (
                               <Search size={14} className="mt-0.5 text-gray-400 dark:text-gray-500" />
                            )}
                            <span className="text-xs text-gray-500 dark:text-gray-400">{action}</span>
                          </div>
                        ))}
                      </div>
                    </div>
                  )}
                </div>
              ))}
            </div>

            {/* Final Report Section */}
            <div className="mb-6">
              <div className="flex items-center gap-3 mb-3">
                <div className="w-8 h-8 rounded-full overflow-hidden flex-shrink-0 bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
                    <img src="/vite.svg" alt="Logo" className="w-5 h-5" />
                </div>
                <div className="flex items-center gap-2">
                  <span className="font-medium text-gray-900 dark:text-gray-100">Manus-clone-cn</span>
                  <span className="px-1.5 py-0.5 rounded text-[10px] bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 border border-gray-200 dark:border-gray-700">Lite</span>
                </div>
              </div>
              <div className="space-y-4">
                
                <p className="text-gray-700 dark:text-gray-300">您好，关于贵州茅台（600519.SH）的投资分析报告已完成。报告从财务表现、行业地位、核心竞争力、估值水平和风险因素等多个维度进行了深入分析，并给出了投资建议。请查阅附件。</p>

                {/* File Card */}
                <div 
                  onClick={() => setIsModalOpen(true)}
                  className="mt-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden group cursor-pointer hover:border-gray-400 dark:hover:border-gray-500 hover:shadow-md transition-all"
                >
                  <div className="p-5">
                    <div className="flex items-center gap-3 mb-4">
                      <div className="w-8 h-8 bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded-lg flex items-center justify-center">
                        <FileText size={20} />
                      </div>
                      <div className="font-medium text-gray-900 dark:text-gray-100 flex-1 text-base">贵州茅台 (600519.SH) 投资分析报告</div>
                      <MoreHorizontal size={16} className="text-gray-400" />
                    </div>
                    
                    <div className="space-y-4 pl-1">
                      <div>
                        <h3 className="text-gray-900 dark:text-gray-100 font-bold mb-2 text-sm">作者：Manus AI</h3>
                        <h3 className="text-gray-900 dark:text-gray-100 font-bold mb-4 text-sm">日期：2026年2月6日</h3>

                        <h3 className="text-gray-900 dark:text-gray-100 font-bold mb-2 text-lg">摘要</h3>
                        <p className="text-xs text-gray-500 dark:text-gray-400 leading-relaxed mb-4">
                          本报告旨在对贵州茅台（600519.SH）的投资价值进行深入分析。通过对公司财务表现、行业地位、核心竞争力、估值水平以及潜在风险的全面评估，本报告认为贵州茅台作为中国白酒行业的龙头企业，具备强大的品牌优势和稳定的盈利能力。尽管白酒行业面临一定的下行压力和消费趋势变化，但茅台凭借其独特的市场地位和产品稀缺性，仍展现出较强的抗风险能力和增长韧性。本报告将提供详细的分析数据和投资建议。
                        </p>
                      </div>
                      <div>
                        <h3 className="text-gray-900 dark:text-gray-100 font-bold mb-2 text-lg">1. 公司概况与市场地位</h3>
                        <p className="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">
                          贵州茅台酒股份有限公司是中国白酒行业的标志性企业，主要生产销售茅台酒及系列酒。公司以其独特的酿造工艺、卓越的产品品质和深厚的品牌文化，长期占据中国高端白酒市场的领导地位。在当前白酒行业整体承压的背景下，贵州茅台的头部集中化趋势进一步加剧，其营收和净利润规模远超其他竞争对手，显示出强大的市场主导力 [17]。
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <FilePreviewModal 
        isOpen={isModalOpen} 
        onClose={() => setIsModalOpen(false)} 
        content={`# 贵州茅台 (600519.SH) 投资分析报告

**作者：** Manus AI  
**日期：** 2026年2月6日

## 摘要
本报告旨在对贵州茅台（600519.SH）的投资价值进行深入分析。通过对公司财务表现、行业地位、核心竞争力、估值水平以及潜在风险的全面评估，本报告认为贵州茅台作为中国白酒行业的龙头企业，具备强大的品牌优势和稳定的盈利能力。尽管白酒行业面临一定的下行压力和消费趋势变化，但茅台凭借其独特的市场地位和产品稀缺性，仍展现出较强的抗风险能力和增长韧性。本报告将提供详细的分析数据和投资建议。

## 1. 公司概况与市场地位
贵州茅台酒股份有限公司是中国白酒行业的标志性企业，主要生产销售茅台酒及系列酒。公司以其独特的酿造工艺、卓越的产品品质和深厚的品牌文化，长期占据中国高端白酒市场的领导地位。在当前白酒行业整体承压的背景下，贵州茅台的头部集中化趋势进一步加剧，其营收和净利润规模远超其他竞争对手，显示出强大的市场主导力 [17]。`}
        />
    </>
  );
}