shanghai-residences/src/pages/ExperimentDetail.jsx

import { useParams, useNavigate, Link } from 'react-router-dom';
import { ArrowLeft, BookOpen, Target, Clock, FileText } from 'lucide-react';
import { defaultExperiments } from '../data/experiments';

export default function ExperimentDetail() {
  const { id } = useParams();
  const navigate = useNavigate();

  const experiment = defaultExperiments.find((exp) => exp.id === id);

  if (!experiment) {
    return (
      <div className="max-w-3xl mx-auto">
        <div className="bg-white rounded-xl shadow-lg p-8 text-center">
          <h2 className="text-2xl font-bold text-gray-800 mb-4">实验不存在</h2>
          <p className="text-gray-600 mb-6">抱歉，未找到该实验项目。</p>
          <Link
            to="/"
            className="inline-flex items-center gap-2 px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"
          >
            <ArrowLeft size={20} />
            返回首页
          </Link>
        </div>
      </div>
    );
  }

  const Icon = experiment.icon;

  return (
    <div className="max-w-4xl mx-auto">
      <button
        onClick={() => navigate('/')}
        className="flex items-center gap-2 text-gray-600 hover:text-gray-800 mb-6 transition-colors"
      >
        <ArrowLeft size={20} />
        返回实验列表
      </button>

      <div className="bg-white rounded-xl shadow-lg overflow-hidden">
        {/* 实验头部 */}
        <div className="bg-gradient-to-r from-indigo-500 to-purple-600 p-8 text-white">
          <div className="flex items-center gap-4 mb-4">
            <div className="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center">
              <Icon className="w-8 h-8" />
            </div>
            <div>
              <h1 className="text-3xl font-bold mb-2">{experiment.name}</h1>
              <p className="text-indigo-100">{experiment.description}</p>
            </div>
          </div>
        </div>

        {/* 实验内容 */}
        <div className="p-8">
          {/* 实验信息卡片 */}
          <div className="grid md:grid-cols-3 gap-4 mb-8">
            <div className="bg-blue-50 rounded-lg p-4">
              <div className="flex items-center gap-2 text-blue-600 mb-2">
                <Clock size={20} />
                <h3 className="font-semibold">实验时长</h3>
              </div>
              <p className="text-gray-700">约 2-3 小时</p>
            </div>

            <div className="bg-green-50 rounded-lg p-4">
              <div className="flex items-center gap-2 text-green-600 mb-2">
                <Target size={20} />
                <h3 className="font-semibold">难度等级</h3>
              </div>
              <p className="text-gray-700">中级</p>
            </div>

            <div className="bg-purple-50 rounded-lg p-4">
              <div className="flex items-center gap-2 text-purple-600 mb-2">
                <BookOpen size={20} />
                <h3 className="font-semibold">实验类型</h3>
              </div>
              <p className="text-gray-700">综合实验</p>
            </div>
          </div>

          {/* 实验目标 */}
          <section className="mb-8">
            <div className="flex items-center gap-2 mb-4">
              <Target className="text-indigo-600" size={24} />
              <h2 className="text-2xl font-bold text-gray-800">实验目标</h2>
            </div>
            <ul className="space-y-2 text-gray-700">
              <li className="flex items-start gap-2">
                <span className="text-indigo-600 mt-1">•</span>
                <span>理解传感器的基本工作原理和测量特性</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-indigo-600 mt-1">•</span>
                <span>掌握传感器的校准和标定方法</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-indigo-600 mt-1">•</span>
                <span>学习数据采集和处理的基本技术</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-indigo-600 mt-1">•</span>
                <span>分析实验结果并撰写实验报告</span>
              </li>
            </ul>
          </section>

          {/* 实验步骤 */}
          <section className="mb-8">
            <div className="flex items-center gap-2 mb-4">
              <FileText className="text-indigo-600" size={24} />
              <h2 className="text-2xl font-bold text-gray-800">实验步骤</h2>
            </div>
            <div className="space-y-4">
              <div className="border-l-4 border-indigo-600 pl-4 py-2">
                <h3 className="font-semibold text-gray-800 mb-1">
                  步骤 1: 实验准备
                </h3>
                <p className="text-gray-600">
                  检查实验设备和仪器，确保传感器连接正确，熟悉实验操作流程。
                </p>
              </div>

              <div className="border-l-4 border-indigo-600 pl-4 py-2">
                <h3 className="font-semibold text-gray-800 mb-1">
                  步骤 2: 传感器校准
                </h3>
                <p className="text-gray-600">
                  使用标准信号源对传感器进行校准，记录校准数据并绘制校准曲线。
                </p>
              </div>

              <div className="border-l-4 border-indigo-600 pl-4 py-2">
                <h3 className="font-semibold text-gray-800 mb-1">
                  步骤 3: 数据采集
                </h3>
                <p className="text-gray-600">
                  按照实验要求进行数据采集，注意记录环境条件和测量参数。
                </p>
              </div>

              <div className="border-l-4 border-indigo-600 pl-4 py-2">
                <h3 className="font-semibold text-gray-800 mb-1">
                  步骤 4: 数据分析
                </h3>
                <p className="text-gray-600">
                  对采集的数据进行处理和分析，计算传感器的性能参数。
                </p>
              </div>

              <div className="border-l-4 border-indigo-600 pl-4 py-2">
                <h3 className="font-semibold text-gray-800 mb-1">
                  步骤 5: 撰写报告
                </h3>
                <p className="text-gray-600">
                  整理实验数据和分析结果，撰写完整的实验报告。
                </p>
              </div>
            </div>
          </section>

          {/* 注意事项 */}
          <section className="mb-8">
            <h2 className="text-2xl font-bold text-gray-800 mb-4">注意事项</h2>
            <div className="bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded">
              <ul className="space-y-2 text-gray-700">
                <li>• 实验前请仔细阅读实验指导书和安全操作规程</li>
                <li>• 注意保护传感器，避免过载和损坏</li>
                <li>• 数据记录要准确完整，便于后续分析</li>
                <li>• 实验结束后及时整理设备和清理实验台</li>
              </ul>
            </div>
          </section>

          {/* 操作按钮 */}
          <div className="flex gap-4">
            <button className="flex-1 px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors font-semibold">
              开始实验
            </button>
            <button className="px-6 py-3 border-2 border-indigo-600 text-indigo-600 rounded-lg hover:bg-indigo-50 transition-colors font-semibold">
              下载资料
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}