import React from 'react';
import { Layers, ChevronDown, Tag, Eye } from 'lucide-react';

export function OntologyInspector() {
  const ontology = [
    { id: '1', label: 'vehicle_four_wheels', color: 'bg-cyan-500', count: 4, zIndex: 60 },
    { id: '2', label: 'pedestrian', color: 'bg-purple-500', count: 2, zIndex: 70 },
    { id: '3', label: 'road_surface', color: 'bg-gray-500', count: 1, zIndex: 10 },
    { id: '4', label: 'traffic_sign', color: 'bg-green-500', count: 3, zIndex: 50 },
  ];

  return (
    <div className="w-60 bg-[#0d0d0d] flex flex-col border-l border-white/5 shrink-0 z-10 overflow-hidden">
      <div className="h-14 border-b border-white/5 flex items-center px-4 shrink-0 font-medium text-[10px] uppercase tracking-widest text-gray-500">
        <Layers size={14} className="mr-2 text-gray-400" />
        本体论与属性分类管理树
      </div>

      <div className="flex-1 overflow-y-auto p-4 flex flex-col gap-6">
        {/* Frame Metadata */}
        <div>
          <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-3">局部帧元数据</h3>
          <div className="bg-white/5 rounded p-2 text-[11px] space-y-2 font-mono text-gray-300">
            <div className="flex justify-between">
               <span className="text-gray-500">物理分辨率:</span> <span>1920x1080</span>
            </div>
            <div className="flex justify-between">
               <span className="text-gray-500">绝对时间码:</span> <span>00:01:24.16</span>
            </div>
            <div className="flex justify-between">
               <span className="text-gray-500">涵盖实体:</span> <span>10 个已实例化</span>
            </div>
          </div>
        </div>

        {/* Global Priority Classes */}
        <div>
           <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-3 flex justify-between items-center">
             <span>语义分类树 (高度/Z-Index)</span>
             <button className="text-cyan-400 hover:text-cyan-300"><ChevronDown size={14} /></button>
           </h3>
           <div className="space-y-2">
             {ontology.sort((a,b) => b.zIndex - a.zIndex).map(cls => (
               <div key={cls.id} className="flex flex-col gap-1">
                 <div className="flex items-center justify-between p-2 rounded bg-white/5 hover:bg-white/10 cursor-pointer group transition-colors">
                   <div className="flex items-center gap-2">
                     <span className={`w-2.5 h-2.5 rounded-sm ${cls.color}`} />
                     <span className="text-xs font-medium text-gray-200">{cls.label}</span>
                   </div>
                   <div className="flex items-center gap-3">
                     <span className="text-[10px] text-gray-500 font-mono">z:{cls.zIndex}</span>
                     <Eye size={14} className="text-gray-500 group-hover:text-gray-300" />
                   </div>
                 </div>
               </div>
             ))}
           </div>
        </div>

        {/* Current Active Object Properties */}
        <div className="mt-4 pt-4 border-t border-[#222]">
           <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-3">特定目标实例属性追踪</h3>
           <div className="bg-white/5 rounded-lg p-3">
             <div className="flex items-center gap-2 mb-3">
               <Tag size={12} className="text-cyan-400" />
               <span className="text-xs font-semibold text-gray-200">vehicle_four_wheels</span>
             </div>
             <div className="space-y-3">
               <div className="space-y-1">
                 <label className="text-[10px] text-gray-500 uppercase">感知算法置信度</label>
                 <div className="h-1.5 w-full bg-white/10 rounded-full overflow-hidden">
                    <div className="h-full bg-green-500 w-[94%]" />
                 </div>
                 <div className="text-[10px] font-mono text-green-500 text-right">0.9412</div>
               </div>
               <div className="flex items-center justify-between">
                 <span className="text-[10px] text-gray-500 uppercase">降维点拓扑锚点:</span>
                 <span className="text-xs font-mono text-gray-300">12 节点</span>
               </div>
               <button className="w-full mt-2 bg-white/5 hover:bg-white/10 border border-white/10 text-xs text-gray-300 py-1.5 rounded transition-colors">
                 重新提取内侧中轴树骨架
               </button>
             </div>
           </div>
        </div>
      </div>
    </div>
  );
}
