import React, { useState, useEffect, useMemo } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { useTheme } from '../../contexts/ThemeContext';
import {
  Edit2, Plus, Trash2, Check, X, ChevronDown, ChevronRight,
  Target, Users, Activity, BookOpen, Zap, AlertTriangle,
  Settings, FileText, Info, RefreshCw, AlertCircle, Brain, Save,
} from 'lucide-react';

interface FieldRequirement {
  title: string;
  goal: string;
  must_cover: string[];
  done_criteria: string[];
  blockers: string[];
  dependencies: string[];
  evidence_needs: string[];
  preferred_agents: string[];
  style_notes: string;
  min_chars?: number;
  min_items?: number;
}

interface AgentData {
  id: string;
  name: string;
  dimension: string;
  expertise: string;
  relevant_fields: string[];
  analysis_contract: string[];
}

interface CoordinatorConfig {
  system_prompt_prefix?: string;
  round1_guidance?: string;
  middle_round_guidance?: string;
  final_round_guidance?: string;
  speaker_selection_rules?: string;
  focus_instruction_rules?: string;
  dependency_driving_rules?: string[];
  consistency_check_rules?: string[];
  revise_prompt_prefix?: string;
}

interface TemplateData {
  template_id: string;
  template_name: string;
  template_brief: string;
  usage_notes: string[];
  report_schema: Record<string, string>;
  report_examples: Record<string, string>;
  field_requirements: Record<string, FieldRequirement>;
  agents: AgentData[];
  coordinator_config: CoordinatorConfig;
}

const FIELD_LABELS: Record<string, string> = {
  template_id: '模板ID',
  template_name: '模板名称',
  template_brief: '模板简介',
  usage_notes: '使用说明',
  report_schema: '报告字段结构',
  report_examples: '报告字段示例',
  field_requirements: '字段要求配置',
  agents: '智能体配置',
  coordinator_config: '协调者配置',
  title: '字段标题',
  goal: '字段目标',
  must_cover: '必须覆盖内容',
  done_criteria: '完成标准',
  blockers: '阻塞条件',
  dependencies: '依赖字段',
  evidence_needs: '证据需求',
  preferred_agents: '推荐智能体',
  style_notes: '风格说明',
  min_chars: '最小字符数',
  min_items: '最小条目数',
  id: '智能体ID',
  name: '智能体名称',
  dimension: '分析维度',
  expertise: '专业能力',
  relevant_fields: '关联字段',
  analysis_contract: '分析契约',
  system_prompt_prefix: '系统提示词前缀',
  round1_guidance: '第一轮指导',
  middle_round_guidance: '中间轮指导',
  final_round_guidance: '最终轮指导',
  speaker_selection_rules: '发言者选择规则',
  focus_instruction_rules: '焦点指令规则',
  dependency_driving_rules: '依赖驱动规则',
  consistency_check_rules: '一致性检查规则',
  revise_prompt_prefix: '修改提示前缀',
};

const REPORT_SCHEMA_LABELS: Record<string, string> = {
  objective_analysis: '一、目的分析',
  target_actor_analysis: '二、目标行为体分析',
  expected_behavior_drivers: '三、预期行为及行为驱动因素分析',
  narrative_theme_design: '四、叙事主题设计',
  action_plan_list: '五、认知行动方案列表',
};

interface AgentVisual {
  Icon: React.ElementType;
  lightCard: string;
  darkCard: string;
  iconLight: string;
  iconDark: string;
  tagLight: string;
  tagDark: string;
}

const AGENT_VISUALS: Record<string, AgentVisual> = {
  objective: {
    Icon: Target,
    lightCard: 'from-blue-50 to-sky-50 border-blue-200 hover:border-blue-400 hover:shadow-blue-200/60',
    darkCard: 'from-slate-900/80 to-blue-950/20 border-slate-700/70 hover:border-blue-500/40 hover:shadow-slate-950/50',
    iconLight: 'bg-blue-100 text-blue-600',
    iconDark: 'bg-slate-800/90 text-blue-300 ring-1 ring-blue-500/20',
    tagLight: 'bg-blue-100 text-blue-700 border-blue-200',
    tagDark: 'bg-slate-800/70 text-blue-200 border-blue-500/25',
  },
  actor: {
    Icon: Users,
    lightCard: 'from-emerald-50 to-teal-50 border-emerald-200 hover:border-emerald-400 hover:shadow-emerald-200/60',
    darkCard: 'from-slate-900/80 to-emerald-950/20 border-slate-700/70 hover:border-emerald-500/40 hover:shadow-slate-950/50',
    iconLight: 'bg-emerald-100 text-emerald-600',
    iconDark: 'bg-slate-800/90 text-emerald-300 ring-1 ring-emerald-500/20',
    tagLight: 'bg-emerald-100 text-emerald-700 border-emerald-200',
    tagDark: 'bg-slate-800/70 text-emerald-200 border-emerald-500/25',
  },
  behavior: {
    Icon: Activity,
    lightCard: 'from-amber-50 to-orange-50 border-amber-200 hover:border-amber-400 hover:shadow-amber-200/60',
    darkCard: 'from-slate-900/80 to-amber-950/20 border-slate-700/70 hover:border-amber-500/40 hover:shadow-slate-950/50',
    iconLight: 'bg-amber-100 text-amber-600',
    iconDark: 'bg-slate-800/90 text-amber-300 ring-1 ring-amber-500/20',
    tagLight: 'bg-amber-100 text-amber-700 border-amber-200',
    tagDark: 'bg-slate-800/70 text-amber-200 border-amber-500/25',
  },
  narrative: {
    Icon: BookOpen,
    lightCard: 'from-purple-50 to-violet-50 border-purple-200 hover:border-purple-400 hover:shadow-purple-200/60',
    darkCard: 'from-slate-900/80 to-purple-950/20 border-slate-700/70 hover:border-purple-500/40 hover:shadow-slate-950/50',
    iconLight: 'bg-purple-100 text-purple-600',
    iconDark: 'bg-slate-800/90 text-purple-300 ring-1 ring-purple-500/20',
    tagLight: 'bg-purple-100 text-purple-700 border-purple-200',
    tagDark: 'bg-slate-800/70 text-purple-200 border-purple-500/25',
  },
  action: {
    Icon: Zap,
    lightCard: 'from-indigo-50 to-slate-50 border-indigo-200 hover:border-indigo-400 hover:shadow-indigo-200/60',
    darkCard: 'from-slate-900/80 to-indigo-950/20 border-slate-700/70 hover:border-indigo-500/40 hover:shadow-slate-950/50',
    iconLight: 'bg-indigo-100 text-indigo-600',
    iconDark: 'bg-slate-800/90 text-indigo-300 ring-1 ring-indigo-500/20',
    tagLight: 'bg-indigo-100 text-indigo-700 border-indigo-200',
    tagDark: 'bg-slate-800/70 text-indigo-200 border-indigo-500/25',
  },
  risk: {
    Icon: AlertTriangle,
    lightCard: 'from-rose-50 to-pink-50 border-rose-200 hover:border-rose-400 hover:shadow-rose-200/60',
    darkCard: 'from-slate-900/80 to-rose-950/20 border-slate-700/70 hover:border-rose-500/40 hover:shadow-slate-950/50',
    iconLight: 'bg-rose-100 text-rose-600',
    iconDark: 'bg-slate-800/90 text-rose-300 ring-1 ring-rose-500/20',
    tagLight: 'bg-rose-100 text-rose-700 border-rose-200',
    tagDark: 'bg-slate-800/70 text-rose-200 border-rose-500/25',
  },
};

const DEFAULT_VISUAL: AgentVisual = {
  Icon: Brain,
  lightCard: 'from-gray-50 to-slate-50 border-gray-200 hover:border-gray-400 hover:shadow-gray-200/60',
  darkCard: 'from-slate-900/80 to-slate-800/50 border-slate-700/70 hover:border-slate-500/50 hover:shadow-slate-950/50',
  iconLight: 'bg-gray-100 text-gray-600',
  iconDark: 'bg-slate-800/90 text-slate-300 ring-1 ring-slate-500/20',
  tagLight: 'bg-gray-100 text-gray-700 border-gray-200',
  tagDark: 'bg-slate-800/70 text-slate-200 border-slate-500/25',
};

const mapFieldLabel = (v: string) => REPORT_SCHEMA_LABELS[v] || v;

function EditableText({
  value,
  onChange,
  isDark,
  multiline = false,
}: {
  value: string;
  onChange: (v: string) => void;
  isDark: boolean;
  multiline?: boolean;
}) {
  const [editing, setEditing] = useState(false);
  const [draft, setDraft] = useState(value);

  const confirm = () => { onChange(draft); setEditing(false); };
  const cancel = () => { setDraft(value); setEditing(false); };

  const inputCls = isDark
    ? 'bg-slate-800 border-blue-500/60 text-slate-100 focus:border-blue-400'
    : 'bg-white border-blue-300 text-gray-800 focus:border-blue-500';

  if (editing) {
    return (
      <div className="space-y-2">
        {multiline ? (
          <textarea
            autoFocus
            value={draft}
            onChange={e => setDraft(e.target.value)}
            rows={5}
            className={`w-full px-3 py-2 text-sm rounded-lg border outline-none resize-y font-mono leading-relaxed transition-colors ${inputCls}`}
          />
        ) : (
          <input
            autoFocus
            value={draft}
            onChange={e => setDraft(e.target.value)}
            onKeyDown={e => { if (e.key === 'Enter') confirm(); if (e.key === 'Escape') cancel(); }}
            className={`w-full px-3 py-1.5 text-sm rounded-lg border outline-none transition-colors ${inputCls}`}
          />
        )}
        <div className="flex gap-2">
          <button onClick={confirm} className="flex items-center gap-1 px-3 py-1 text-xs rounded-lg bg-green-500 hover:bg-green-400 text-white transition-colors">
            <Check className="w-3 h-3" /> 确认
          </button>
          <button onClick={cancel} className={`flex items-center gap-1 px-3 py-1 text-xs rounded-lg border transition-colors ${isDark ? 'border-slate-600 text-slate-400 hover:text-slate-200' : 'border-gray-300 text-gray-500 hover:text-gray-700'}`}>
            <X className="w-3 h-3" /> 取消
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="group/editable flex items-start gap-2 rounded-lg px-2 py-1.5 -mx-2 -my-1.5 transition-all duration-200 hover:bg-black/5 dark:hover:bg-white/5 cursor-pointer" onClick={() => { setDraft(value); setEditing(true); }}>
      <span className={`flex-1 text-sm leading-relaxed break-words ${isDark ? 'text-slate-300' : 'text-gray-700'} ${multiline ? 'whitespace-pre-wrap font-mono text-xs' : ''}`}>
        {value || <span className={isDark ? 'text-slate-600 italic' : 'text-gray-300 italic'}>(空)</span>}
      </span>
      <Edit2 className={`flex-shrink-0 w-3.5 h-3.5 mt-0.5 opacity-0 group-hover/editable:opacity-100 transition-all duration-200 ${isDark ? 'text-blue-400' : 'text-blue-500'}`} />
    </div>
  );
}

function TagList({
  tags,
  onChange,
  isDark,
  tagLight = 'bg-sky-50 text-sky-700 border-sky-200',
  tagDark = 'bg-slate-800/70 text-sky-200 border-sky-500/25',
}: {
  tags: string[];
  onChange: (tags: string[]) => void;
  isDark: boolean;
  tagLight?: string;
  tagDark?: string;
}) {
  const [editIdx, setEditIdx] = useState<number | null>(null);
  const [editVal, setEditVal] = useState('');
  const [adding, setAdding] = useState(false);
  const [addVal, setAddVal] = useState('');

  const tagCls = isDark ? tagDark : tagLight;
  const inputCls = isDark
    ? 'bg-slate-800 border-blue-500/60 text-slate-100 placeholder-slate-500 focus:border-blue-400'
    : 'bg-white border-blue-400 text-gray-800 placeholder-gray-400 focus:border-blue-500';

  const confirmEdit = () => {
    if (editIdx === null) return;
    const next = [...tags];
    if (editVal.trim()) next[editIdx] = editVal.trim();
    else next.splice(editIdx, 1);
    onChange(next);
    setEditIdx(null);
  };

  const confirmAdd = () => {
    if (addVal.trim()) onChange([...tags, addVal.trim()]);
    setAdding(false);
    setAddVal('');
  };

  return (
    <div className="flex flex-wrap gap-1.5 items-center">
      {tags.map((tag, i) =>
        editIdx === i ? (
          <span key={i} className="inline-flex items-center gap-1">
            <input
              autoFocus
              value={editVal}
              onChange={e => setEditVal(e.target.value)}
              onKeyDown={e => { if (e.key === 'Enter') confirmEdit(); if (e.key === 'Escape') setEditIdx(null); }}
              className={`px-2 py-0.5 text-xs rounded border outline-none w-36 transition-colors ${inputCls}`}
            />
            <button onClick={confirmEdit} className="text-green-500 hover:text-green-400 transition-colors"><Check className="w-3 h-3" /></button>
            <button onClick={() => setEditIdx(null)} className="text-red-400 hover:text-red-300 transition-colors"><X className="w-3 h-3" /></button>
          </span>
        ) : (
          <span key={i} className="group/tag inline-flex items-center gap-1">
            <span
              onClick={() => { setEditIdx(i); setEditVal(tag); setAdding(false); }}
              className={`inline-flex items-center gap-1 px-2.5 py-0.5 text-xs rounded-full border cursor-pointer transition-all duration-200 hover:scale-105 hover:opacity-90 ${tagCls}`}
            >
              {tag}
              <button
                onClick={e => { e.stopPropagation(); onChange(tags.filter((_, j) => j !== i)); }}
                className="opacity-0 group-hover/tag:opacity-100 transition-opacity hover:text-red-500 ml-0.5"
              >
                <X className="w-2.5 h-2.5" />
              </button>
            </span>
          </span>
        )
      )}
      {adding ? (
        <span className="inline-flex items-center gap-1">
          <input
            autoFocus
            value={addVal}
            onChange={e => setAddVal(e.target.value)}
            onKeyDown={e => { if (e.key === 'Enter') confirmAdd(); if (e.key === 'Escape') { setAdding(false); setAddVal(''); } }}
            placeholder="输入内容…"
            className={`px-2 py-0.5 text-xs rounded border outline-none w-36 transition-colors ${inputCls}`}
          />
          <button onClick={confirmAdd} className="text-green-500 hover:text-green-400 transition-colors"><Check className="w-3 h-3" /></button>
          <button onClick={() => { setAdding(false); setAddVal(''); }} className="text-red-400 hover:text-red-300 transition-colors"><X className="w-3 h-3" /></button>
        </span>
      ) : (
        <button
          onClick={() => { setAdding(true); setEditIdx(null); }}
          className={`inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded-full border border-dashed transition-all duration-200 hover:scale-105 ${isDark ? 'border-slate-600 text-slate-500 hover:border-blue-500 hover:text-blue-400' : 'border-gray-300 text-gray-400 hover:border-blue-400 hover:text-blue-500'}`}
        >
          <Plus className="w-3 h-3" /> 添加
        </button>
      )}
    </div>
  );
}

function AgentCard({
  agent,
  onUpdate,
  onDelete,
  isDark,
}: {
  agent: AgentData;
  onUpdate: (a: AgentData) => void;
  onDelete: () => void;
  isDark: boolean;
}) {
  const [editing, setEditing] = useState(false);
  const [hovered, setHovered] = useState(false);
  const vis = AGENT_VISUALS[agent.id] ?? DEFAULT_VISUAL;
  const { Icon } = vis;
  const cardCls = isDark ? vis.darkCard : vis.lightCard;
  const iconCls = isDark ? vis.iconDark : vis.iconLight;
  const tagCls = isDark ? vis.tagDark : vis.tagLight;

  const handleFieldChange = (field: keyof AgentData, value: unknown) => {
    onUpdate({ ...agent, [field]: value });
  };

  return (
    <>
      <div
        onMouseEnter={() => setHovered(true)}
        onMouseLeave={() => setHovered(false)}
        className={`relative rounded-xl border p-4 bg-gradient-to-br transition-all duration-300 ${cardCls} ${hovered ? 'scale-[1.02] shadow-lg -translate-y-0.5' : 'scale-100 shadow-sm'}`}
      >
        <div className="flex items-start justify-between gap-3 mb-3">
          <div className="flex items-center gap-3">
            <div className={`w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 transition-transform duration-300 ${iconCls} ${hovered ? 'scale-110 rotate-3' : ''}`}>
              <Icon className="w-5 h-5" />
            </div>
            <div>
              <p className={`font-semibold text-sm ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>{agent.name}</p>
              <p className={`text-xs mt-0.5 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{agent.dimension}</p>
            </div>
          </div>
          <div className={`flex items-center gap-1 transition-opacity duration-200 ${hovered ? 'opacity-100' : 'opacity-0'}`}>
            <button
              onClick={() => setEditing(true)}
              className={`p-1.5 rounded-lg transition-colors ${isDark ? 'hover:bg-slate-700 text-slate-400 hover:text-blue-300' : 'hover:bg-white/70 text-gray-400 hover:text-blue-500'}`}
            >
              <Edit2 className="w-3.5 h-3.5" />
            </button>
            <button
              onClick={onDelete}
              className={`p-1.5 rounded-lg transition-colors ${isDark ? 'hover:bg-slate-700 text-slate-400 hover:text-red-400' : 'hover:bg-white/70 text-gray-400 hover:text-red-500'}`}
            >
              <Trash2 className="w-3.5 h-3.5" />
            </button>
          </div>
        </div>

        <code className={`inline-block text-xs px-2 py-0.5 rounded-full border mb-2 font-mono ${tagCls}`}>{agent.id}</code>

        <div className="mb-3">
          <p className={`text-xs leading-relaxed mb-1.5 line-clamp-2 ${isDark ? 'text-slate-400' : 'text-gray-600'}`}>{agent.expertise.slice(0, 80)}</p>
        </div>

        {agent.relevant_fields.length > 0 && (
          <div className="mb-2">
            <p className={`text-xs font-medium mb-1.5 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{FIELD_LABELS.relevant_fields}</p>
            <div className="flex flex-wrap gap-1">
              {agent.relevant_fields.map(f => (
                <span key={f} className={`text-xs px-2 py-0.5 rounded-full border ${tagCls}`}>{f}</span>
              ))}
            </div>
          </div>
        )}
      </div>

      {editing && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4" onClick={() => setEditing(false)}>
          <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />
          <div
            className={`relative w-full max-w-2xl max-h-[85vh] overflow-y-auto rounded-2xl border shadow-2xl ${isDark ? 'bg-slate-900 border-slate-700' : 'bg-white border-gray-200'}`}
            onClick={e => e.stopPropagation()}
          >
            <div className={`flex items-center justify-between px-6 py-4 border-b ${isDark ? 'border-slate-700' : 'border-gray-200'}`}>
              <h2 className={`font-semibold ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>编辑智能体</h2>
              <button onClick={() => setEditing(false)} className={`p-1.5 rounded-lg transition-colors ${isDark ? 'hover:bg-slate-800 text-slate-400' : 'hover:bg-gray-100 text-gray-500'}`}><X className="w-4 h-4" /></button>
            </div>
            <div className="p-6 space-y-4">
              {(['id', 'name', 'dimension'] as const).map(k => (
                <div key={k} className="space-y-1">
                  <label className={`text-xs font-semibold uppercase tracking-wide ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{FIELD_LABELS[k]}</label>
                  <EditableText value={agent[k]} onChange={v => handleFieldChange(k, v)} isDark={isDark} />
                </div>
              ))}
              <div className="space-y-1">
                <label className={`text-xs font-semibold uppercase tracking-wide ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{FIELD_LABELS.expertise}</label>
                <EditableText value={agent.expertise} onChange={v => handleFieldChange('expertise', v)} isDark={isDark} multiline />
              </div>
              <div className="space-y-1.5">
                <label className={`text-xs font-semibold uppercase tracking-wide ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{FIELD_LABELS.relevant_fields}</label>
                <TagList tags={agent.relevant_fields} onChange={v => handleFieldChange('relevant_fields', v)} isDark={isDark} tagLight="bg-blue-50 text-blue-700 border-blue-200" tagDark="bg-slate-800/70 text-blue-200 border-blue-500/25" />
              </div>
              <div className="space-y-1.5">
                <label className={`text-xs font-semibold uppercase tracking-wide ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{FIELD_LABELS.analysis_contract}</label>
                <TagList tags={agent.analysis_contract} onChange={v => handleFieldChange('analysis_contract', v)} isDark={isDark} tagLight="bg-violet-50 text-violet-700 border-violet-200" tagDark="bg-slate-800/70 text-violet-200 border-violet-500/25" />
              </div>
            </div>
            <div className={`flex justify-end gap-3 px-6 py-4 border-t ${isDark ? 'border-slate-700' : 'border-gray-200'}`}>
              <button onClick={() => setEditing(false)} className={`px-4 py-2 text-sm rounded-lg border transition-colors ${isDark ? 'border-slate-600 text-slate-400 hover:text-slate-200' : 'border-gray-300 text-gray-500 hover:text-gray-700'}`}>取消</button>
              <button onClick={() => setEditing(false)} className="px-4 py-2 text-sm rounded-lg bg-blue-500 hover:bg-blue-400 text-white transition-colors flex items-center gap-1.5">
                <Check className="w-3.5 h-3.5" /> 保存
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

function SectionWrapper({
  title,
  icon: Icon,
  children,
  isDark,
  defaultOpen = true,
}: {
  title: string;
  icon: React.ElementType;
  children: React.ReactNode;
  isDark: boolean;
  defaultOpen?: boolean;
}) {
  const [open, setOpen] = useState(defaultOpen);
  return (
    <div className={`rounded-xl border overflow-hidden transition-all duration-200 ${isDark ? 'bg-slate-800/40 border-slate-700/60' : 'bg-white border-gray-200 shadow-sm'}`}>
      <button
        onClick={() => setOpen(o => !o)}
        className={`w-full flex items-center justify-between px-5 py-4 transition-colors duration-200 ${isDark ? 'hover:bg-slate-700/30' : 'hover:bg-gray-50'}`}
      >
        <div className="flex items-center gap-2.5">
          <div className={`w-7 h-7 rounded-lg flex items-center justify-center ${isDark ? 'bg-slate-700' : 'bg-red-50'}`}>
            <Icon className={`w-4 h-4 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
          </div>
          <span className={`font-semibold text-sm ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>{title}</span>
        </div>
        {open
          ? <ChevronDown className={`w-4 h-4 ${isDark ? 'text-slate-500' : 'text-gray-400'}`} />
          : <ChevronRight className={`w-4 h-4 ${isDark ? 'text-slate-500' : 'text-gray-400'}`} />}
      </button>
      <div className={`grid transition-all duration-300 ease-in-out ${open ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-70'}`}>
        <div className="overflow-hidden">
          <div className="px-5 pb-5 space-y-4">{children}</div>
        </div>
      </div>
    </div>
  );
}

export default function Template6BEditor() {
  const { theme } = useTheme();
  const isDark = theme === 'dark';

  const [template, setTemplate] = useState<TemplateData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [dirty, setDirty] = useState(false);

  useEffect(() => {
    fetch('https://ch1.b.uat.4.cn/zncmweb/templates/6b_template.json')
      .then(r => r.json())
      .then((data: TemplateData) => { setTemplate(data); setLoading(false); })
      .catch(e => { setError(e.message); setLoading(false); });
  }, []);

  const update = <K extends keyof TemplateData>(key: K, value: TemplateData[K]) => {
    setTemplate(prev => prev ? { ...prev, [key]: value } : null);
    setDirty(true);
  };

  const handleSave = () => {
    if (!template) return;
    console.log('[Template6BEditor 保存]', JSON.stringify(template, null, 2));
    window.alert('配置已保存，详情请查看控制台');
    setDirty(false);
  };

  if (loading) {
    return (
      <div className={`flex items-center justify-center min-h-64 ${isDark ? 'text-slate-400' : 'text-gray-400'}`}>
        <RefreshCw className="w-5 h-5 animate-spin mr-2" />
        <span className="text-sm">加载模板中…</span>
      </div>
    );
  }

  if (error || !template) {
    return (
      <div className={`flex items-center gap-2 p-4 rounded-xl ${isDark ? 'bg-red-950/30 text-red-400 border border-red-900/50' : 'bg-red-50 text-red-600 border border-red-200'}`}>
        <AlertCircle className="w-5 h-5 flex-shrink-0" />
        <span className="text-sm">模板加载失败：{error}</span>
      </div>
    );
  }

  return (
    <div className="h-[calc(100vh-24px)] max-h-[calc(100vh-24px)] flex flex-col max-w-5xl mx-auto px-1 pb-3">
      <div className={`flex-shrink-0 flex items-center justify-between gap-4 py-3 border-b ${isDark ? 'border-slate-800' : 'border-gray-200'}`}>
        <div>
          <h1 className={`text-xl font-bold ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>模板配置编辑器</h1>
          <p className={`text-sm mt-0.5 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>六步行动方案 · {template.template_id}</p>
        </div>
        <div className="flex items-center gap-3">
          {dirty && (
            <div className={`flex items-center gap-2 text-xs px-3 py-1.5 rounded-full border ${isDark ? 'bg-amber-900/20 border-amber-700/40 text-amber-300' : 'bg-amber-50 border-amber-200 text-amber-600'}`}>
              <Info className="w-3.5 h-3.5" />
              已有未保存修改
            </div>
          )}
          <button
            onClick={handleSave}
            className={`inline-flex items-center gap-2 px-4 py-2 rounded-xl border shadow-sm transition-all duration-200 hover:scale-[1.02] ${isDark ? 'bg-slate-900 border-slate-700 text-slate-100 hover:border-blue-500/40' : 'bg-white border-gray-200 text-gray-800 hover:border-blue-300'}`}
          >
            <Save className="w-4 h-4" /> 保存
          </button>
        </div>
      </div>

      <div className="min-h-0 flex-1 overflow-y-auto py-3 pr-1 space-y-4">
        <SectionWrapper title="基本信息" icon={FileText} isDark={isDark}>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {(['template_id', 'template_name'] as const).map(k => (
              <div key={k} className="space-y-1.5">
                <span className={`text-xs font-semibold uppercase tracking-wide ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{FIELD_LABELS[k]}</span>
                <EditableText value={template[k]} onChange={v => update(k, v)} isDark={isDark} />
              </div>
            ))}
          </div>
          <div className="space-y-1.5">
            <span className={`text-xs font-semibold uppercase tracking-wide ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{FIELD_LABELS.template_brief}</span>
            <EditableText value={template.template_brief} onChange={v => update('template_brief', v)} isDark={isDark} multiline />
          </div>
        </SectionWrapper>

        <SectionWrapper title={FIELD_LABELS.usage_notes} icon={Info} isDark={isDark}>
          <TagList
            tags={template.usage_notes}
            onChange={v => update('usage_notes', v)}
            isDark={isDark}
            tagLight="bg-amber-50 text-amber-700 border-amber-200"
            tagDark="bg-slate-800/70 text-amber-200 border-amber-500/25"
          />
        </SectionWrapper>

        <SectionWrapper title={FIELD_LABELS.report_schema} icon={Settings} isDark={isDark}>
          <div className="space-y-3">
            {Object.entries(template.report_schema).map(([key, desc]) => (
              <div key={key} className={`group/row rounded-lg border px-4 py-3 transition-all duration-200 hover:scale-[1.005] ${isDark ? 'border-slate-700/50 bg-slate-800/30 hover:border-slate-600' : 'border-gray-200 bg-gray-50/50 hover:border-gray-300 hover:shadow-sm'}`}>
                <div className="flex items-center gap-2 mb-1.5">
                  <code className={`text-xs px-2 py-0.5 rounded font-mono ${isDark ? 'bg-slate-700 text-slate-400' : 'bg-gray-200 text-gray-500'}`}>{key}</code>
                  <span className={`text-sm font-medium ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>{REPORT_SCHEMA_LABELS[key] || key}</span>
                </div>
                <EditableText
                  value={desc}
                  onChange={v => update('report_schema', { ...template.report_schema, [key]: v })}
                  isDark={isDark}
                  multiline
                />
              </div>
            ))}
          </div>
        </SectionWrapper>

        <SectionWrapper title={FIELD_LABELS.agents} icon={Brain} isDark={isDark}>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
            {template.agents.map((agent, i) => (
              <AgentCard
                key={agent.id + i}
                agent={agent}
                onUpdate={updated => {
                  const next = [...template.agents];
                  next[i] = updated;
                  update('agents', next);
                }}
                onDelete={() => {
                  if (template.agents.length <= 1) {
                    window.alert('智能体最少必须保留 1 个');
                    return;
                  }
                  update('agents', template.agents.filter((_, j) => j !== i));
                }}
                isDark={isDark}
              />
            ))}
          </div>
        </SectionWrapper>
      </div>
    </div>
  );
}