import React, { useState, useEffect } from 'react';
import { Settings, FileJson, ArrowRightLeft, Database } from 'lucide-react';

export function TemplateRegistry() {
  const [templates, setTemplates] = useState<any[]>([]);

  useEffect(() => {
    fetch('/api/templates')
      .then(res => res.json())
      .then(data => setTemplates(data))
      .catch(console.error);
  }, []);

  return (
    <div className="p-8 w-full h-full overflow-y-auto bg-[#0a0a0a]">
      <div className="mb-8 border-b border-white/5 pb-6">
        <h1 className="text-3xl font-medium tracking-tight text-white mb-2">分割模板与分类优先级管理库</h1>
        <p className="text-gray-400 text-sm">定义业务语义本体树架构、约束覆盖遮罩优先级(Z-Index裁决权重)，以及真实标签数据的向下兼容转换映射(Dict Translation)原则。</p>
      </div>

      <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
        <div className="xl:col-span-1 border-r border-white/5 pr-6">
          <div className="flex justify-between items-center mb-6">
             <h2 className="text-sm font-bold text-gray-500 uppercase tracking-widest">生效中模板架构清单</h2>
             <button className="text-cyan-400 hover:text-cyan-300 text-sm transition-colors">+ 新建方案</button>
          </div>
          <div className="space-y-3">
             {templates.map(t => (
               <div key={t.id} className="bg-[#111] border border-white/5 hover:border-cyan-500/50 p-4 rounded-xl cursor-pointer transition-all hover:shadow-lg hover:shadow-cyan-900/10">
                 <h3 className="font-medium text-gray-200 mb-1">{t.name}</h3>
                 <div className="flex items-center gap-4 text-xs text-gray-500 font-mono">
                   <span>涵盖 {t.classes} 个字典大类</span>
                   <span>挂载 {t.rules} 项解析规则</span>
                 </div>
               </div>
             ))}
          </div>
        </div>

        <div className="xl:col-span-2 space-y-6">
           <div className="bg-[#111] border border-white/5 rounded-xl p-6">
             <div className="flex items-center justify-between mb-6 border-b border-white/5 pb-4">
                <h2 className="text-lg font-medium text-gray-200 flex items-center gap-2"><Database size={18} /> Cityscapes_v2_Mapping</h2>
                <button className="bg-white/5 hover:bg-white/10 border border-white/10 px-4 py-1.5 rounded text-sm text-gray-300 transition-colors">修改库视图结构 (Schema)</button>
             </div>
             
             <div className="space-y-6">
               <div>
                 <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-4">特定领域分类渲染级重叠裁决权重阵列 (Painter's Algorithm Weight)</h3>
                 <div className="space-y-2">
                    {[
                      { l: 'pedestrian', z: 90, c: '#ec4899', t: '运动中物理特型 (Dynamic Entity)' },
                      { l: 'bicycle', z: 85, c: '#f59e0b', t: '运动中物理特型 (Dynamic Entity)' },
                      { l: 'vehicle_car', z: 80, c: '#6366f1', t: '运动中物理特型 (Dynamic Entity)' },
                      { l: 'traffic_sign', z: 60, c: '#eab308', t: '交通属性静态特型 (Static Entity)' },
                      { l: 'road_surface', z: 10, c: '#71717a', t: '全局视野底板 (Background / Floor)' },
                    ].map(cls => (
                      <div key={cls.l} className="flex grid grid-cols-4 gap-4 p-3 bg-[#0d0d0d] border border-white/5 rounded items-center">
                        <div className="col-span-1 flex items-center gap-2">
                           <div className="w-3 h-3 rounded" style={{ backgroundColor: cls.c }}></div>
                           <span className="font-medium text-sm text-gray-300">{cls.l}</span>
                        </div>
                        <div className="col-span-1 font-mono text-xs text-gray-500">优先级 Z-Level: {cls.z}</div>
                        <div className="col-span-2 flex justify-end">
                          <span className="bg-white/5 text-gray-400 text-xs px-2 py-1 rounded border border-white/10">{cls.t}</span>
                        </div>
                      </div>
                    ))}
                 </div>
               </div>

               <div>
                 <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-4 flex items-center gap-2">
                    <ArrowRightLeft size={14} /> 强兼容真实标签 (GT Source) 闭环降维转置拓扑结构约束表
                 </h3>
                 <div className="bg-[#0d0d0d] border border-white/5 rounded-lg overflow-hidden">
                    <table className="w-full text-left text-sm text-gray-400">
                      <thead className="bg-[#111] border-b border-white/5 text-xs uppercase text-gray-500 font-mono">
                        <tr>
                          <th className="px-4 py-3">原始 JSON 键 (Legacy Key)</th>
                          <th className="px-4 py-3">映射降维引挚解析路径</th>
                          <th className="px-4 py-3">并轨至标准分类</th>
                        </tr>
                      </thead>
                      <tbody className="divide-y divide-white/5">
                        <tr>
                          <td className="px-4 py-3 font-mono text-gray-300">"car_sedan"</td>
                          <td className="px-4 py-3 font-mono text-cyan-400">布尔合并聚类覆盖 (Logical OR)</td>
                          <td className="px-4 py-3 font-medium text-gray-300">vehicle_car</td>
                        </tr>
                        <tr>
                          <td className="px-4 py-3 font-mono text-gray-300">"car_suv"</td>
                          <td className="px-4 py-3 font-mono text-cyan-400">布尔合并聚类覆盖 (Logical OR)</td>
                          <td className="px-4 py-3 font-medium text-gray-300">vehicle_car</td>
                        </tr>
                        <tr>
                          <td className="px-4 py-3 font-mono text-gray-300">"sidewalk_curb"</td>
                          <td className="px-4 py-3 font-mono text-cyan-400">形态学极限分离-内切骨架法 (Skeletonization)</td>
                          <td className="px-4 py-3 font-medium text-gray-300">road_curb</td>
                        </tr>
                      </tbody>
                    </table>
                 </div>
               </div>
             </div>
           </div>
        </div>
      </div>
    </div>
  );
}
