import React, { useState } from 'react';
import { 
  Cpu, 
  Zap, 
  Layers, 
  BarChart3, 
  ShieldCheck, 
  Settings, 
  Play, 
  Server, 
  Activity,
  ArrowRight,
  Monitor,
  CheckCircle2,
  Database,
  Upload,
  FileCode,
  FileJson,
  Plus,
  Search,
  MoreVertical,
  Cloud
} from 'lucide-react';

const App = () => {
  const [activeTab, setActiveTab] = useState('dataset'); // 預設改為資料管理頁面
  const [optimizationLevel, setOptimizationLevel] = useState(75);

  // 新增：控制各個優化工具是否啟用的狀態
  const [toolsEnabled, setToolsEnabled] = useState({
    pruning: true,
    distillation: false,
    quantization: true
  });

  // 新增：性能評測相關狀態
  const [evalSelectedDevices, setEvalSelectedDevices] = useState([1]); 
  const [evalStatus, setEvalStatus] = useState('idle'); // idle, running, completed

  const toggleTool = (id) => {
    setToolsEnabled(prev => ({ ...prev, [id]: !prev[id] }));
  };

  const optimizationTools = [
    { id: 'pruning', title: '模型剪枝 (Pruning)', icon: <Layers className="w-5 h-5" />, desc: '移除不重要的權重以減少計算量' },
    { id: 'distillation', title: '知識蒸餾 (Distillation)', icon: <Zap className="w-5 h-5" />, desc: '將大模型的知識轉移到輕量化小模型' },
    { id: 'quantization', title: '模型量化 (Quantization)', icon: <Cpu className="w-5 h-5" />, desc: '將 FP32 轉換為 INT8/FP16 以加速推理' },
  ];

  const edgeDevices = [
    { id: 1, name: 'NVIDIA Jetson Orin Nano', status: 'Online', type: 'GPU' },
    { id: 2, name: 'Raspberry Pi 5 (8GB)', status: 'Online', type: 'CPU' },
    { id: 3, name: 'Google Coral Dev Board', status: 'Offline', type: 'TPU' },
  ];

  const models = [
    { name: 'YOLOv8-Large_v2.pt', size: '124 MB', type: 'PyTorch', date: '2023-10-24' },
    { name: 'EfficientNet-B0_final.onnx', size: '25 MB', type: 'ONNX', date: '2023-10-20' },
  ];

  const datasets = [
    { name: 'COCO_Validation_Set', count: '5,000 Images', type: 'Object Detection', status: 'Ready' },
    { name: 'Edge_Thermal_Images', count: '1,200 Images', type: 'Infrared', status: 'Processing' },
  ];

  // 新增：模擬的評測數據 (用於多裝置比較)
  const mockEvalResults = {
    1: { name: 'NVIDIA Jetson Orin Nano', latency: 12.5, fps: 80.2, ram: 420, power: 4.8 },
    2: { name: 'Raspberry Pi 5 (8GB)', latency: 45.0, fps: 22.1, ram: 280, power: 2.1 }
  };

  const toggleEvalDevice = (id) => {
    setEvalSelectedDevices(prev => 
      prev.includes(id) ? prev.filter(deviceId => deviceId !== id) : [...prev, id]
    );
    // 變更選擇時重置評測狀態
    if (evalStatus === 'completed') setEvalStatus('idle');
  };

  const startEvaluation = () => {
    setEvalStatus('running');
    setTimeout(() => setEvalStatus('completed'), 1500); // 模擬雲端下發與測試延遲
  };

  return (
    <div className="flex h-screen bg-[#0f172a] text-slate-200 font-sans">
      {/* Sidebar */}
      <div className="w-64 bg-[#1e293b] border-r border-slate-700 flex flex-col">
        <div className="p-6 flex items-center gap-3">
          <div className="bg-cyan-500 p-2 rounded-lg">
            <Activity className="text-white w-6 h-6" />
          </div>
          <span className="text-xl font-bold tracking-tight text-white">EdgeAI Studio</span>
        </div>
        
        <nav className="flex-1 px-4 py-4 space-y-2">
          <button 
            onClick={() => setActiveTab('dataset')}
            className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition ${activeTab === 'dataset' ? 'bg-cyan-600 text-white shadow-lg' : 'hover:bg-slate-700 text-slate-400'}`}
          >
            <Database className="w-5 h-5" />
            <span>模型與資料管理</span>
          </button>
          <button 
            onClick={() => setActiveTab('optimize')}
            className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition ${activeTab === 'optimize' ? 'bg-cyan-600 text-white shadow-lg' : 'hover:bg-slate-700 text-slate-400'}`}
          >
            <Settings className="w-5 h-5" />
            <span>模型優化工具</span>
          </button>
          <button 
            onClick={() => setActiveTab('evaluation')}
            className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition ${activeTab === 'evaluation' ? 'bg-cyan-600 text-white shadow-lg' : 'hover:bg-slate-700 text-slate-400'}`}
          >
            <BarChart3 className="w-5 h-5" />
            <span>性能評測</span>
          </button>
          <button 
            onClick={() => setActiveTab('deploy')}
            className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition ${activeTab === 'deploy' ? 'bg-cyan-600 text-white shadow-lg' : 'hover:bg-slate-700 text-slate-400'}`}
          >
            <Server className="w-5 h-5" />
            <span>邊緣端部署</span>
          </button>
        </nav>

        <div className="p-4 border-t border-slate-700">
          <div className="bg-slate-800 p-4 rounded-xl flex items-center gap-3">
            <div className="w-8 h-8 rounded-full bg-cyan-500 flex items-center justify-center font-bold text-xs">JD</div>
            <div>
              <p className="text-sm font-medium text-white">John Doe</p>
              <p className="text-xs text-slate-400">Pro Developer</p>
            </div>
          </div>
        </div>
      </div>

      {/* Main Content */}
      <div className="flex-1 overflow-y-auto p-8 bg-gradient-to-br from-[#0f172a] to-[#1e1b4b]">
        
        {/* Header Section */}
        <div className="flex justify-between items-start mb-8">
          <div>
            <h1 className="text-3xl font-bold text-white mb-2">
              {activeTab === 'dataset' && "資料與模型中心 (Data & Model Center)"}
              {activeTab === 'optimize' && "模型優化 (Optimization)"}
              {activeTab === 'evaluation' && "性能評測 (Performance Evaluation)"}
              {activeTab === 'deploy' && "邊緣部署 (Edge Deployment)"}
            </h1>
            <p className="text-slate-400">
              {activeTab === 'dataset' ? "上傳訓練好的模型與用於校準的資料集" : "當前模型：YOLOv8-Large_v2.pt"}
            </p>
          </div>
          <div className="flex gap-3">
            {activeTab === 'dataset' && (
              <button className="bg-cyan-500 hover:bg-cyan-400 text-white px-6 py-2 rounded-lg font-bold transition flex items-center gap-2 shadow-lg shadow-cyan-500/20">
                <Plus className="w-4 h-4" />
                新增專案
              </button>
            )}
            {activeTab !== 'dataset' && (
              <>
                <button className="bg-slate-800 hover:bg-slate-700 px-4 py-2 rounded-lg border border-slate-700 transition flex items-center gap-2">
                  <ShieldCheck className="w-4 h-4 text-green-400" />
                  驗證狀態：已通過
                </button>
                <button className="bg-cyan-500 hover:bg-cyan-400 text-white px-6 py-2 rounded-lg font-bold transition flex items-center gap-2 shadow-lg shadow-cyan-500/20">
                  <Play className="w-4 h-4" />
                  執行全流程
                </button>
              </>
            )}
          </div>
        </div>

        {/* Tab Content: Dataset & Model Management */}
        {activeTab === 'dataset' && (
          <div className="space-y-8">
            {/* Top Cards: Model Import & Dataset Import */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {/* Model Upload Zone */}
              <div className="bg-[#1e293b]/50 border-2 border-dashed border-slate-700 rounded-2xl p-8 flex flex-col items-center justify-center hover:border-cyan-500 transition-colors group cursor-pointer">
                <div className="bg-cyan-500/10 p-4 rounded-full mb-4 group-hover:scale-110 transition">
                  <FileCode className="w-10 h-10 text-cyan-400" />
                </div>
                <h3 className="text-lg font-bold text-white mb-1">導入模型權重</h3>
                <p className="text-slate-400 text-sm mb-4 text-center">拖放 .pt, .onnx, .h5 或 .tflite 檔案至此</p>
                <div className="flex gap-2">
                  <button className="bg-slate-800 hover:bg-slate-700 px-4 py-2 rounded-lg text-xs font-bold border border-slate-700 flex items-center gap-2">
                    <Upload className="w-3 h-3" /> 本地上傳
                  </button>
                  <button className="bg-slate-800 hover:bg-slate-700 px-4 py-2 rounded-lg text-xs font-bold border border-slate-700 flex items-center gap-2">
                    <Cloud className="w-3 h-3" /> 雲端匯入
                  </button>
                </div>
              </div>

              {/* Dataset Upload Zone */}
              <div className="bg-[#1e293b]/50 border-2 border-dashed border-slate-700 rounded-2xl p-8 flex flex-col items-center justify-center hover:border-purple-500 transition-colors group cursor-pointer">
                <div className="bg-purple-500/10 p-4 rounded-full mb-4 group-hover:scale-110 transition">
                  <FileJson className="w-10 h-10 text-purple-400" />
                </div>
                <h3 className="text-lg font-bold text-white mb-1">導入校準資料集</h3>
                <p className="text-slate-400 text-sm mb-4 text-center">支援 .zip 壓縮包或標註 JSON 檔案</p>
                <div className="flex gap-2">
                  <button className="bg-slate-800 hover:bg-slate-700 px-4 py-2 rounded-lg text-xs font-bold border border-slate-700 flex items-center gap-2">
                    <Upload className="w-3 h-3" /> 本地上傳
                  </button>
                  <button className="bg-slate-800 hover:bg-slate-700 px-4 py-2 rounded-lg text-xs font-bold border border-slate-700 flex items-center gap-2">
                    <Search className="w-3 h-3" /> 瀏覽資源庫
                  </button>
                </div>
              </div>
            </div>

            {/* Lists: Available Resources */}
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
              {/* Models List */}
              <div className="bg-[#1e293b]/30 rounded-2xl border border-slate-700 overflow-hidden">
                <div className="p-4 border-b border-slate-700 bg-slate-800/50 flex justify-between items-center">
                  <h4 className="font-bold text-sm uppercase tracking-wider text-slate-400">已就緒的模型</h4>
                  <span className="bg-slate-700 text-[10px] px-2 py-0.5 rounded text-slate-300">2 個模型</span>
                </div>
                <div className="divide-y divide-slate-700/50">
                  {models.map((model, idx) => (
                    <div key={idx} className="p-4 hover:bg-slate-800/30 transition flex items-center justify-between group">
                      <div className="flex items-center gap-3">
                        <div className="p-2 bg-slate-800 rounded-lg">
                          <FileCode className="w-5 h-5 text-cyan-500" />
                        </div>
                        <div>
                          <p className="text-sm font-medium text-white group-hover:text-cyan-400 transition">{model.name}</p>
                          <div className="flex gap-2 mt-1">
                            <span className="text-[10px] text-slate-500">{model.type}</span>
                            <span className="text-[10px] text-slate-500">•</span>
                            <span className="text-[10px] text-slate-500">{model.size}</span>
                          </div>
                        </div>
                      </div>
                      <button className="text-slate-500 hover:text-white transition p-1">
                        <MoreVertical className="w-4 h-4" />
                      </button>
                    </div>
                  ))}
                </div>
              </div>

              {/* Datasets List */}
              <div className="bg-[#1e293b]/30 rounded-2xl border border-slate-700 overflow-hidden">
                <div className="p-4 border-b border-slate-700 bg-slate-800/50 flex justify-between items-center">
                  <h4 className="font-bold text-sm uppercase tracking-wider text-slate-400">可用資料集</h4>
                  <span className="bg-slate-700 text-[10px] px-2 py-0.5 rounded text-slate-300">2 個資料集</span>
                </div>
                <div className="divide-y divide-slate-700/50">
                  {datasets.map((dataset, idx) => (
                    <div key={idx} className="p-4 hover:bg-slate-800/30 transition flex items-center justify-between group">
                      <div className="flex items-center gap-3">
                        <div className="p-2 bg-slate-800 rounded-lg">
                          <Database className="w-5 h-5 text-purple-500" />
                        </div>
                        <div>
                          <p className="text-sm font-medium text-white group-hover:text-purple-400 transition">{dataset.name}</p>
                          <div className="flex gap-2 mt-1">
                            <span className="text-[10px] text-slate-500">{dataset.type}</span>
                            <span className="text-[10px] text-slate-500">•</span>
                            <span className="text-[10px] text-slate-500">{dataset.count}</span>
                          </div>
                        </div>
                      </div>
                      <div className="flex items-center gap-4">
                        <span className={`text-[10px] px-2 py-0.5 rounded-full ${dataset.status === 'Ready' ? 'bg-green-500/20 text-green-400' : 'bg-orange-500/20 text-orange-400'}`}>
                          {dataset.status}
                        </span>
                        <button className="text-slate-500 hover:text-white transition p-1">
                          <MoreVertical className="w-4 h-4" />
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* Bottom Info: Next Steps */}
            <div className="bg-cyan-500/10 border border-cyan-500/30 p-6 rounded-2xl flex justify-between items-center">
              <div>
                <h4 className="text-cyan-100 font-bold mb-1">準備好開始優化了嗎？</h4>
                <p className="text-cyan-400/80 text-sm">系統已檢測到 1 個兼容的 PyTorch 模型與對應的校準資料集。</p>
              </div>
              <button 
                onClick={() => setActiveTab('optimize')}
                className="bg-cyan-500 hover:bg-cyan-400 text-white px-6 py-3 rounded-xl font-bold transition flex items-center gap-2 group"
              >
                前往模型優化
                <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition" />
              </button>
            </div>
          </div>
        )}

        {/* Tab Content: Optimization */}
        {activeTab === 'optimize' && (
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <div className="lg:col-span-2 space-y-6">
              {optimizationTools.map((tool) => (
                <div key={tool.id} className={`bg-[#1e293b]/50 backdrop-blur-sm border ${toolsEnabled[tool.id] ? 'border-cyan-500/50' : 'border-slate-700'} p-6 rounded-2xl transition group`}>
                  <div className="flex justify-between items-center cursor-pointer" onClick={() => toggleTool(tool.id)}>
                    <div className="flex items-center gap-4">
                      <div className={`p-3 rounded-xl transition ${toolsEnabled[tool.id] ? 'bg-cyan-500/20' : 'bg-slate-800 group-hover:bg-slate-700'}`}>
                        {React.cloneElement(tool.icon, { className: `w-6 h-6 ${toolsEnabled[tool.id] ? 'text-cyan-400' : 'text-slate-400'}` })}
                      </div>
                      <div>
                        <h3 className="text-lg font-bold text-white">{tool.title}</h3>
                        <p className="text-slate-400 text-sm">{tool.desc}</p>
                      </div>
                    </div>
                    <label className="relative inline-flex items-center cursor-pointer" onClick={(e) => e.stopPropagation()}>
                      <input 
                        type="checkbox" 
                        className="sr-only peer" 
                        checked={toolsEnabled[tool.id]}
                        onChange={() => toggleTool(tool.id)}
                      />
                      <div className="w-11 h-6 bg-slate-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-cyan-500"></div>
                    </label>
                  </div>

                  {/* 參數設定區塊 (展開) */}
                  {toolsEnabled[tool.id] && (
                    <div className="mt-6 pt-6 border-t border-slate-700/50 cursor-default" onClick={(e) => e.stopPropagation()}>
                      
                      {/* 1. 剪枝參數 */}
                      {tool.id === 'pruning' && (
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                          <div>
                            <label className="block text-sm text-slate-400 mb-2">剪枝策略 (Strategy)</label>
                            <select className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-cyan-500 transition">
                              <option>L1-Norm Unstructured (非結構化)</option>
                              <option>L2-Norm Structured (通道剪枝)</option>
                              <option>Taylor Expansion (泰勒展開)</option>
                            </select>
                          </div>
                          <div>
                            <label className="block text-sm text-slate-400 mb-2">微調迭代次數 (Fine-tune Epochs)</label>
                            <input type="number" defaultValue={30} className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-cyan-500 transition" />
                          </div>
                          <div className="md:col-span-2">
                            <div className="flex justify-between text-sm mb-2">
                              <span className="text-slate-400">目標稀疏度 (Target Sparsity)</span>
                              <span className="text-cyan-400 font-mono">50%</span>
                            </div>
                            <input type="range" defaultValue={50} className="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-cyan-500" />
                          </div>
                        </div>
                      )}

                      {/* 2. 蒸餾參數 */}
                      {tool.id === 'distillation' && (
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                          <div className="md:col-span-2">
                            <label className="block text-sm text-slate-400 mb-2">教師模型 (Teacher Model)</label>
                            <select className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-cyan-500 transition">
                              <option>YOLOv8-X_teacher.pt (預設提供)</option>
                              <option>ResNet152_Teacher.pt</option>
                              <option>上傳自訂教師模型...</option>
                            </select>
                          </div>
                          <div>
                            <div className="flex justify-between text-sm mb-2">
                              <span className="text-slate-400">溫度參數 (Temperature, T)</span>
                              <span className="text-cyan-400 font-mono">4.0</span>
                            </div>
                            <input type="range" min="1" max="20" step="0.5" defaultValue={4.0} className="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-cyan-500" />
                          </div>
                          <div>
                            <div className="flex justify-between text-sm mb-2">
                              <span className="text-slate-400">軟標籤權重 (Alpha)</span>
                              <span className="text-cyan-400 font-mono">0.5</span>
                            </div>
                            <input type="range" min="0" max="1" step="0.1" defaultValue={0.5} className="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-cyan-500" />
                          </div>
                        </div>
                      )}

                      {/* 3. 量化參數 */}
                      {tool.id === 'quantization' && (
                        <div className="space-y-6">
                          <div className="flex gap-4">
                            <button className="flex-1 bg-cyan-600 text-white py-2 rounded-lg text-sm font-medium border border-cyan-500 shadow-lg shadow-cyan-500/20">PTQ 訓練後量化</button>
                            <button className="flex-1 bg-slate-800 hover:bg-slate-700 text-slate-300 py-2 rounded-lg text-sm font-medium border border-slate-700 transition">QAT 量化感知訓練</button>
                          </div>
                          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                              <label className="block text-sm text-slate-400 mb-2">目標精度 (Target Precision)</label>
                              <div className="flex gap-2">
                                <button className="bg-cyan-500/20 px-3 py-1.5 rounded-lg text-xs text-cyan-400 border border-cyan-500/50 font-bold flex-1">INT8</button>
                                <button className="bg-slate-800 px-3 py-1.5 rounded-lg text-xs text-slate-300 border border-slate-700 flex-1 hover:bg-slate-700 transition">INT4</button>
                                <button className="bg-slate-800 px-3 py-1.5 rounded-lg text-xs text-slate-300 border border-slate-700 flex-1 hover:bg-slate-700 transition">FP16</button>
                                <button className="bg-slate-800 px-3 py-1.5 rounded-lg text-xs text-slate-300 border border-slate-700 flex-1 hover:bg-slate-700 transition">Mixed</button>
                              </div>
                            </div>
                            <div>
                              <label className="block text-sm text-slate-400 mb-2">校準演算法 (Calibration)</label>
                              <select className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-cyan-500 transition">
                                <option>Histogram (Entropy)</option>
                                <option>Min-Max</option>
                                <option>Percentile</option>
                              </select>
                            </div>
                          </div>
                          <div>
                            <div className="flex justify-between text-sm mb-2">
                              <span className="text-slate-400">壓縮積極度 (Aggressiveness)</span>
                              <span className="text-cyan-400 font-mono">{optimizationLevel}%</span>
                            </div>
                            <input 
                              type="range" 
                              className="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-cyan-500" 
                              value={optimizationLevel}
                              onChange={(e) => setOptimizationLevel(e.target.value)}
                            />
                          </div>
                        </div>
                      )}

                    </div>
                  )}
                </div>
              ))}
            </div>
            
            <div className="bg-slate-900/50 p-6 rounded-2xl border border-slate-700 h-fit">
              <h3 className="font-bold text-white mb-4 flex items-center gap-2">
                <BarChart3 className="w-5 h-5 text-cyan-400" />
                預估收益 (Estimated Gain)
              </h3>
              <div className="space-y-4">
                <div className="flex justify-between items-center">
                  <span className="text-sm text-slate-400">模型體積</span>
                  <span className="text-sm text-green-400">-64.2%</span>
                </div>
                <div className="w-full bg-slate-800 rounded-full h-2">
                  <div className="bg-green-500 h-2 rounded-full w-[64%]"></div>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-sm text-slate-400">推理延遲 (Latency)</span>
                  <span className="text-sm text-green-400">-45.8%</span>
                </div>
                <div className="w-full bg-slate-800 rounded-full h-2">
                  <div className="bg-green-500 h-2 rounded-full w-[45%]"></div>
                </div>
                <div className="pt-4 mt-4 border-t border-slate-700">
                  <div className="flex justify-between items-center">
                    <span className="text-sm text-slate-400">預期準確率損失</span>
                    <span className="text-sm text-red-400">&lt; 0.8%</span>
                  </div>
                </div>
              </div>
              <button className="w-full mt-6 bg-cyan-600 hover:bg-cyan-500 py-3 rounded-xl font-bold transition flex items-center justify-center gap-2">
                開始優化程序
                <ArrowRight className="w-4 h-4" />
              </button>
            </div>
          </div>
        )}

        {/* Tab Content: Evaluation (原 Benchmark 替換並移至 Deploy 前) */}
        {activeTab === 'evaluation' && (
          <div className="space-y-8">
            {/* Device Selection Card */}
            <div className="bg-[#1e293b]/50 p-6 rounded-2xl border border-slate-700">
              <div className="flex justify-between items-center mb-6">
                <div>
                  <h3 className="text-lg font-bold text-white">1. 選擇已上線裝置進行評測</h3>
                  <p className="text-sm text-slate-400 mt-1">選擇單一或多個裝置以進行性能比較</p>
                </div>
                {evalStatus === 'completed' && (
                  <button onClick={() => setEvalStatus('idle')} className="text-sm text-cyan-400 hover:text-cyan-300 transition border border-cyan-500/30 px-3 py-1 rounded-lg">
                    重新設定裝置
                  </button>
                )}
              </div>
              
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
                {edgeDevices.filter(d => d.status === 'Online').map(device => {
                  const isSelected = evalSelectedDevices.includes(device.id);
                  return (
                    <div 
                      key={device.id} 
                      onClick={() => toggleEvalDevice(device.id)}
                      className={`p-4 rounded-xl border-2 transition cursor-pointer flex items-center justify-between ${isSelected ? 'border-cyan-500 bg-cyan-500/10' : 'border-slate-700 bg-slate-800/50 hover:border-slate-500'}`}
                    >
                      <div className="flex items-center gap-3">
                        <Monitor className={`w-6 h-6 ${isSelected ? 'text-cyan-400' : 'text-slate-400'}`} />
                        <div>
                          <p className="font-bold text-sm text-white">{device.name}</p>
                          <p className="text-xs text-slate-400">{device.type}</p>
                        </div>
                      </div>
                      <div className={`w-5 h-5 rounded-full border flex items-center justify-center ${isSelected ? 'border-cyan-500 bg-cyan-500' : 'border-slate-500'}`}>
                        {isSelected && <CheckCircle2 className="w-4 h-4 text-[#0f172a]" />}
                      </div>
                    </div>
                  );
                })}
              </div>
              
              <button 
                onClick={startEvaluation}
                disabled={evalSelectedDevices.length === 0 || evalStatus === 'running'}
                className={`w-full md:w-auto px-8 py-3 rounded-xl font-bold transition flex items-center justify-center gap-2 ${evalSelectedDevices.length === 0 ? 'bg-slate-800 text-slate-500 cursor-not-allowed border border-slate-700' : 'bg-cyan-600 hover:bg-cyan-500 text-white shadow-lg shadow-cyan-500/20'}`}
              >
                {evalStatus === 'running' ? <Activity className="w-5 h-5 animate-spin" /> : <Play className="w-5 h-5" />}
                {evalStatus === 'running' ? '正在雲端編譯並下發評測任務...' : '開始評測 (Start Evaluation)'}
              </button>
            </div>

            {/* Dashboard Results (產生比較結果) */}
            {evalStatus === 'completed' && (
              <div className="space-y-6 animate-in fade-in duration-700">
                <div className="flex items-center gap-3 mb-2">
                  <BarChart3 className="text-cyan-400 w-6 h-6" />
                  <h3 className="text-xl font-bold text-white">2. 性能儀表板 (Dashboard)</h3>
                </div>
                
                {/* Comparison Stats Cards */}
                <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
                  {[
                    { key: 'latency', label: '推理延遲 (Latency)', unit: 'ms' },
                    { key: 'fps', label: '幀率 (FPS)', unit: 'fps' },
                    { key: 'ram', label: '記憶體佔用 (RAM)', unit: 'MB' },
                    { key: 'power', label: '能耗 (Power)', unit: 'W' }
                  ].map(metric => (
                    <div key={metric.key} className="bg-slate-800/50 p-6 rounded-2xl border border-slate-700">
                      <p className="text-slate-400 text-sm mb-4">{metric.label}</p>
                      <div className="space-y-3">
                        {evalSelectedDevices.map(deviceId => {
                          const data = mockEvalResults[deviceId];
                          if(!data) return null;
                          // 判斷該裝置在該指標是否為所有選擇裝置中最優的
                          const isWinner = evalSelectedDevices.every(id => {
                             if(id === deviceId || !mockEvalResults[id]) return true;
                             return metric.key === 'fps' 
                               ? data[metric.key] >= mockEvalResults[id][metric.key]
                               : data[metric.key] <= mockEvalResults[id][metric.key];
                          });
                          
                          return (
                            <div key={deviceId} className="flex justify-between items-end border-b border-slate-700/50 pb-2 last:border-0 last:pb-0">
                              <span className="text-xs text-slate-400 max-w-[100px] truncate">{data.name.split(' ')[0]} {data.name.split(' ')[1]}</span>
                              <div className="text-right">
                                <span className={`text-xl font-bold ${isWinner && evalSelectedDevices.length > 1 ? 'text-green-400' : 'text-white'}`}>
                                  {data[metric.key]}
                                </span>
                                <span className="text-[10px] text-slate-500 ml-1">{metric.unit}</span>
                              </div>
                            </div>
                          );
                        })}
                      </div>
                    </div>
                  ))}
                </div>

                {/* Main Charts area mockup */}
                <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                  <div className="lg:col-span-2 bg-[#1e293b]/50 p-6 rounded-2xl border border-slate-700">
                    <h4 className="font-bold text-white mb-6">FPS 穩定度測試</h4>
                    <div className="relative h-48 flex items-end gap-2 border-b border-l border-slate-700 pb-2 pl-2">
                      {/* 繪製簡易折線/柱狀圖意象 */}
                      {[40, 55, 45, 60, 80, 75, 90, 85, 95, 80].map((h, i) => (
                        <div key={i} className="flex-1 flex gap-1 items-end h-full">
                          {evalSelectedDevices.includes(1) && <div className="w-full bg-cyan-500/80 rounded-t transition-all hover:bg-cyan-400" style={{ height: `${h}%` }}></div>}
                          {evalSelectedDevices.includes(2) && <div className="w-full bg-purple-500/80 rounded-t transition-all hover:bg-purple-400" style={{ height: `${h * 0.3}%` }}></div>}
                        </div>
                      ))}
                    </div>
                    <div className="flex justify-center mt-4 gap-6 text-xs text-slate-400">
                      {evalSelectedDevices.includes(1) && <div className="flex items-center gap-2"><div className="w-3 h-3 bg-cyan-500 rounded"></div>Orin Nano</div>}
                      {evalSelectedDevices.includes(2) && <div className="flex items-center gap-2"><div className="w-3 h-3 bg-purple-500 rounded"></div>Pi 5</div>}
                    </div>
                  </div>

                  {/* Export & Actions */}
                  <div className="bg-slate-900/50 p-6 rounded-2xl border border-slate-700 flex flex-col justify-between">
                    <div>
                      <h4 className="font-bold text-white mb-4">評測總結</h4>
                      {evalSelectedDevices.length > 1 ? (
                        <p className="text-sm text-slate-400 leading-relaxed">
                          <span className="text-green-400 font-bold">Jetson Orin Nano</span> 在各項指標表現最佳。但若考量邊緣設備成本與功耗，<span className="text-purple-400 font-bold">Raspberry Pi 5</span> 在輕度負載下仍具備部署可行性。
                        </p>
                      ) : (
                        <p className="text-sm text-slate-400 leading-relaxed">
                          該裝置性能表現穩定，延遲符合實時運算標準（&lt; 30ms），適合直接進行最終部署。
                        </p>
                      )}
                    </div>
                    <div className="space-y-3 mt-6">
                       <button className="w-full bg-slate-800 hover:bg-slate-700 border border-slate-700 py-3 rounded-xl text-xs font-bold transition flex items-center justify-center gap-2 text-white">
                         <FileCode className="w-4 h-4" />
                         導出詳細報告 (CSV)
                       </button>
                       <button onClick={() => setActiveTab('deploy')} className="w-full bg-cyan-600 hover:bg-cyan-500 py-3 rounded-xl text-xs font-bold transition flex items-center justify-center gap-2 text-white shadow-lg">
                         前往部署模型
                         <ArrowRight className="w-4 h-4" />
                       </button>
                    </div>
                  </div>
                </div>
              </div>
            )}
          </div>
        )}

        {/* Tab Content: Deploy */}
        {activeTab === 'deploy' && (
          <div className="space-y-6">
            <div className="bg-cyan-500/10 border border-cyan-500/30 p-4 rounded-xl flex items-center gap-4">
              <div className="bg-cyan-500 p-2 rounded-full">
                <CheckCircle2 className="text-white w-5 h-5" />
              </div>
              <div>
                <p className="text-cyan-100 font-medium">優化已完成！</p>
                <p className="text-cyan-400/80 text-sm">模型已成功轉換為 TensorRT 與 TFLite 格式，準備進行部署。</p>
              </div>
            </div>

            <h3 className="text-lg font-bold text-white">選擇邊緣端裝置 (Select Edge Devices)</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {edgeDevices.map(device => (
                <div key={device.id} className={`p-6 rounded-2xl border transition cursor-pointer ${device.status === 'Online' ? 'bg-[#1e293b] border-slate-700 hover:border-cyan-500' : 'bg-slate-900 border-slate-800 opacity-60 cursor-not-allowed'}`}>
                  <div className="flex justify-between items-start mb-4">
                    <div className={`p-3 rounded-xl ${device.status === 'Online' ? 'bg-slate-800' : 'bg-slate-950'}`}>
                      <Monitor className={`w-6 h-6 ${device.status === 'Online' ? 'text-cyan-400' : 'text-slate-600'}`} />
                    </div>
                    <span className={`px-2 py-1 rounded text-[10px] font-bold uppercase tracking-wider ${device.status === 'Online' ? 'bg-green-500/20 text-green-400 border border-green-500/50' : 'bg-slate-800 text-slate-500'}`}>
                      {device.status}
                    </span>
                  </div>
                  <h4 className="text-white font-bold mb-1">{device.name}</h4>
                  <div className="flex gap-2 mb-4 text-xs">
                    <span className="bg-slate-800 px-2 py-0.5 rounded text-slate-400">{device.type}</span>
                    <span className="bg-slate-800 px-2 py-0.5 rounded text-slate-400">ARMv8</span>
                  </div>
                  <button className={`w-full py-2 rounded-lg text-sm font-bold transition ${device.status === 'Online' ? 'bg-cyan-600 hover:bg-cyan-500 text-white' : 'bg-slate-800 text-slate-600'}`}>
                    {device.status === 'Online' ? '同步並安裝' : '無法連線'}
                  </button>
                </div>
              ))}
              <div className="p-6 rounded-2xl border-2 border-dashed border-slate-800 flex flex-col items-center justify-center text-slate-500 hover:text-slate-300 hover:border-slate-700 transition cursor-pointer group">
                <div className="bg-slate-800/50 p-4 rounded-full mb-3 group-hover:scale-110 transition">
                  <Activity className="w-8 h-8" />
                </div>
                <span className="font-medium text-sm">新增邊緣端連線</span>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default App;