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, Package, Globe, BookOpen, MessageSquare, Zap,
  Settings, FileText, Info, RefreshCw, AlertCircle, Brain, Save,
} from 'lucide-react';

// ─── Types ────────────────────────────────────────────────────────────────────

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;
}

// ─── Constants ────────────────────────────────────────────────────────────────

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> = {
  task_background: '任务背景与领导指示研判',
  resource_assessment: '各方口径与己方资源研判',
  information_environment: '战场/舆论场环境分析',
  historical_cultural_context: '历史与人文环境分析',
  actor_dynamics: '敌我双方动态与优劣势',
  opponent_narrative_logic: '对方核心叙事逻辑梳理',
  strategic_weakness: '核心战略薄弱点研判',
  assessment_conclusion: '研判结论',
};

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

const AGENT_VISUALS: Record<string, AgentVisual> = {
  background: {
    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',
  },
  resource: {
    Icon: Package,
    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',
  },
  information_environment: {
    Icon: Globe,
    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',
  },
  history_culture: {
    Icon: BookOpen,
    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',
  },
  opponent_narrative: {
    Icon: MessageSquare,
    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',
  },
  strategy: {
    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',
  },
};

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 parseExpertiseConfig(expertise: string, fields: string[]) {
  const match = expertise.match(/(你的分析应服务于?|你服务于)\s*/);
  if (!match || match.index === undefined) {
    return {
      prefix: expertise,
      marker: '你的分析应服务于',
      fields: fields.filter(f => expertise.includes(f)),
      suffix: '。',
    };
  }

  const prefix = expertise.slice(0, match.index);
  const marker = match[1] === '你服务于' ? '你的分析应服务于' : match[1];
  const rest = expertise.slice(match.index + match[0].length);
  const endIndex = rest.indexOf('。');
  const serviceText = endIndex >= 0 ? rest.slice(0, endIndex) : rest;
  const suffix = endIndex >= 0 ? rest.slice(endIndex) : '。';

  return {
    prefix,
    marker,
    fields: fields.filter(f => serviceText.includes(f)),
    suffix,
  };
}

function buildExpertise(prefix: string, fields: string[], suffix: string) {
  const normalizedPrefix = prefix.trim();
  const prefixSeparator = normalizedPrefix && !/[。！？.!?]$/.test(normalizedPrefix) ? '。' : '';
  const serviceFields = fields.join('、');
  const normalizedSuffix = suffix.trim() || '。';
  return `${normalizedPrefix}${prefixSeparator}你的分析应服务于 ${serviceFields}${normalizedSuffix.startsWith('。') ? normalizedSuffix : `。${normalizedSuffix}`}`;
}

function replaceFieldKeysWithLabels(text: string, fields: string[]) {
  return fields.reduce((next, field) => next.replaceAll(field, mapFieldLabel(field)), text);
}

function replaceFieldLabelsWithKeys(text: string, fields: string[]) {
  return fields.reduce((next, field) => next.replaceAll(mapFieldLabel(field), field), text);
}

function extractFieldTokens(text: string, fields: string[]) {
  return fields.filter(field => text.includes(field));
}

function removeFieldToken(text: string, field: string) {
  return text
    .replaceAll(field, '')
    .replace(/、{2,}/g, '、')
    .replace(/\s{2,}/g, ' ')
    .replace(/、([，。；;,.])/g, '$1')
    .replace(/([、，；;,])\s*([。,.])/g, '$2')
    .trim();
}

function appendFieldTokens(text: string, fields: string[]) {
  const missing = fields.filter(field => !text.includes(field));
  if (!missing.length) return text;
  const separator = text.trim().endsWith('。') ? '' : '。';
  return `${text.trim()}${separator}相关字段：${missing.join('、')}。`;
}

function getValueType(value: unknown) {
  if (Array.isArray(value)) return 'array';
  if (value === null) return 'null';
  return typeof value;
}

function compareJsonShape(reference: unknown, current: unknown, path = 'root') {
  const issues: string[] = [];
  const refType = getValueType(reference);
  const curType = getValueType(current);

  if (refType !== curType) {
    issues.push(`${path}: 类型不一致，期望 ${refType}，实际 ${curType}`);
    return issues;
  }

  if (refType === 'array') {
    const refArr = reference as unknown[];
    const curArr = current as unknown[];
    if (refArr.length > 0 && curArr.length > 0) {
      issues.push(...compareJsonShape(refArr[0], curArr[0], `${path}[]`));
    }
    return issues;
  }

  if (refType === 'object') {
    const refObj = reference as Record<string, unknown>;
    const curObj = current as Record<string, unknown>;
    const refKeys = Object.keys(refObj);
    const curKeys = Object.keys(curObj);

    refKeys.filter(key => !(key in curObj)).forEach(key => issues.push(`${path}.${key}: 缺少字段`));
    curKeys.filter(key => !(key in refObj)).forEach(key => issues.push(`${path}.${key}: 多余字段`));

    refKeys
      .filter(key => key in curObj)
      .forEach(key => issues.push(...compareJsonShape(refObj[key], curObj[key], `${path}.${key}`)));
  }

  return issues;
}


// ─── Sub-components ───────────────────────────────────────────────────────────

function RestoreAgentModal({
  agents,
  onClose,
  onRestore,
  isDark,
}: {
  agents: AgentData[];
  onClose: () => void;
  onRestore: (agent: AgentData) => void;
  isDark: boolean;
}) {
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4" onClick={onClose}>
      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />
      <div
        className={`relative w-full max-w-xl 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-5 py-4 border-b ${isDark ? 'border-slate-700' : 'border-gray-200'}`}>
          <h3 className={`font-semibold ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>恢复已删除智能体</h3>
          <button onClick={onClose}><X className="w-4 h-4" /></button>
        </div>
        <div className="p-5 space-y-2 max-h-[50vh] overflow-y-auto">
          {agents.map(agent => (
            <button
              key={agent.id}
              onClick={() => onRestore(agent)}
              className={`w-full text-left rounded-xl border p-3 transition-all duration-200 hover:scale-[1.01] ${isDark ? 'border-slate-700 hover:border-blue-500 bg-slate-800/40' : 'border-gray-200 hover:border-blue-300 bg-gray-50'}`}
            >
              <div className={`font-medium text-sm ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>{agent.name}</div>
              <div className={`text-xs mt-1 ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>{agent.id} · {agent.dimension}</div>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

function CoordinatorRuleList({
  rules,
  fields,
  onChange,
  isDark,
}: {
  rules: string[];
  fields: string[];
  onChange: (rules: string[]) => void;
  isDark: boolean;
}) {
  return (
    <div className="space-y-2">
      {rules.map((rule, index) => (
        <div key={index} className={`rounded-lg border px-3 py-2 ${isDark ? 'border-slate-700/60 bg-slate-800/30' : 'border-gray-200 bg-gray-50/60'}`}>
          <CoordinatorFieldText
            value={rule}
            fields={fields}
            onChange={nextRule => onChange(rules.map((item, i) => i === index ? nextRule : item))}
            isDark={isDark}
          />
          <button
            onClick={() => onChange(rules.filter((_, i) => i !== index))}
            className={`mt-2 inline-flex items-center gap-1 text-xs transition-colors ${isDark ? 'text-slate-500 hover:text-red-400' : 'text-gray-400 hover:text-red-500'}`}
          >
            <Trash2 className="w-3 h-3" /> 删除规则
          </button>
        </div>
      ))}
      <button
        onClick={() => onChange([...rules, fields[0] ? `补充 ${fields[0]} 的依赖驱动规则。` : '补充新的依赖驱动规则。'])}
        className={`inline-flex items-center gap-1 px-2.5 py-1 text-xs rounded-full border border-dashed transition-all duration-200 hover:scale-105 ${isDark ? 'border-slate-600 text-slate-500 hover:border-teal-500 hover:text-teal-400' : 'border-gray-300 text-gray-400 hover:border-teal-400 hover:text-teal-500'}`}
      >
        <Plus className="w-3 h-3" /> 添加规则
      </button>
    </div>
  );
}

function CoordinatorFieldText({
  value,
  fields,
  onChange,
  isDark,
}: {
  value: string;
  fields: string[];
  onChange: (v: string) => void;
  isDark: boolean;
}) {
  const [editing, setEditing] = useState(false);
  const [draft, setDraft] = useState(replaceFieldKeysWithLabels(value, fields));
  const [pickerOpen, setPickerOpen] = useState(false);
  const selectedFields = extractFieldTokens(value, fields);
  const fieldOptions = fields.map(f => ({ value: f, label: mapFieldLabel(f) }));
  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';

  const confirm = () => {
    onChange(replaceFieldLabelsWithKeys(draft, fields));
    setEditing(false);
  };

  const removeField = (field: string) => {
    onChange(removeFieldToken(value, field));
    setDraft(replaceFieldKeysWithLabels(removeFieldToken(value, field), fields));
  };

  const addFields = (nextFields: string[]) => {
    const next = appendFieldTokens(value, nextFields);
    onChange(next);
    setDraft(replaceFieldKeysWithLabels(next, fields));
    setPickerOpen(false);
  };

  return (
    <div className="space-y-2">
      {editing ? (
        <div className="space-y-2">
          <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 leading-relaxed 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={() => { setDraft(replaceFieldKeysWithLabels(value, fields)); setEditing(false); }} 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>
      ) : (
        <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(replaceFieldKeysWithLabels(value, fields)); setEditing(true); }}>
          <span className={`flex-1 text-sm leading-relaxed break-words whitespace-pre-wrap ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>{replaceFieldKeysWithLabels(value, fields)}</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>
      )}
      <div className="flex flex-wrap gap-1.5 items-center">
        {selectedFields.map(field => (
          <span key={field} className={`inline-flex items-center gap-1 px-2.5 py-0.5 text-xs rounded-full border ${isDark ? 'bg-slate-800/70 text-cyan-200 border-cyan-500/25' : 'bg-cyan-50 text-cyan-700 border-cyan-200'}`}>
            {mapFieldLabel(field)}
            <button onClick={() => removeField(field)} className="hover:text-red-500"><X className="w-3 h-3" /></button>
          </span>
        ))}
        <button onClick={() => setPickerOpen(true)} 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-cyan-500 hover:text-cyan-400' : 'border-gray-300 text-gray-400 hover:border-cyan-400 hover:text-cyan-500'}`}>
          <Plus className="w-3 h-3" /> 添加字段
        </button>
      </div>
      {pickerOpen && (
        <MultiSelectModal
          title="添加第一轮配置字段"
          selected={selectedFields}
          options={fieldOptions}
          onClose={() => setPickerOpen(false)}
          onSave={addFields}
          isDark={isDark}
        />
      )}
    </div>
  );
}

function MultiSelectModal({
  title,
  selected,
  options,
  minKeep = 0,
  onClose,
  onSave,
  isDark,
}: {
  title: string;
  selected: string[];
  options: { value: string; label: string }[];
  minKeep?: number;
  onClose: () => void;
  onSave: (v: string[]) => void;
  isDark: boolean;
}) {
  const [draft, setDraft] = useState<string[]>([...selected]);

  const toggle = (value: string) => {
    const has = draft.includes(value);
    if (has && draft.length <= minKeep) {
      window.alert(`最少必须保留 ${minKeep} 个`);
      return;
    }
    setDraft(prev => has ? prev.filter(v => v !== value) : [...prev, value]);
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4" onClick={onClose}>
      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />
      <div
        className={`relative w-full max-w-xl 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-5 py-4 border-b ${isDark ? 'border-slate-700' : 'border-gray-200'}`}>
          <h3 className={`font-semibold ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>{title}</h3>
          <button onClick={onClose}><X className="w-4 h-4" /></button>
        </div>
        <div className="p-5 flex flex-wrap gap-2 max-h-[45vh] overflow-y-auto">
          {options.map(op => {
            const active = draft.includes(op.value);
            return (
              <button
                key={op.value}
                onClick={() => toggle(op.value)}
                className={`px-2.5 py-1 text-xs rounded-full border transition-all ${
                  active
                    ? (isDark ? 'bg-blue-700/60 border-blue-500 text-blue-200' : 'bg-blue-100 border-blue-400 text-blue-700')
                    : (isDark ? 'border-slate-600 text-slate-400' : 'border-gray-300 text-gray-600')
                }`}
              >
                {op.label}
              </button>
            );
          })}
        </div>
        <div className={`flex justify-end gap-2 px-5 py-4 border-t ${isDark ? 'border-slate-700' : 'border-gray-200'}`}>
          <button onClick={onClose} className="px-3 py-1.5 text-sm rounded-lg border">取消</button>
          <button
            onClick={() => {
              if (draft.length < minKeep) {
                window.alert(`最少必须保留 ${minKeep} 个`);
                return;
              }
              onSave(draft);
            }}
            className="px-3 py-1.5 text-sm rounded-lg bg-blue-500 text-white"
          >
            确认
          </button>
        </div>
      </div>
    </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 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={multiline ? 5 : 2}
            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 EditableMarkdown({
  value,
  onChange,
  isDark,
}: {
  value: string;
  onChange: (v: string) => void;
  isDark: boolean;
}) {
  const [editing, setEditing] = useState(false);
  const [draft, setDraft] = useState(value);

  if (editing) {
    return (
      <div className="space-y-2">
        <textarea
          autoFocus
          value={draft}
          onChange={e => setDraft(e.target.value)}
          rows={10}
          className={`w-full px-3 py-2 text-sm rounded-lg border outline-none resize-y font-mono leading-relaxed transition-colors ${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'}`}
        />
        <div className="flex gap-2">
          <button
            onClick={() => { onChange(draft); setEditing(false); }}
            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={() => { setDraft(value); setEditing(false); }}
            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/markdown relative rounded-lg border px-3 py-3 transition-colors cursor-pointer ${isDark ? 'border-slate-700/50 bg-slate-900/20 hover:border-slate-600' : 'border-gray-200 bg-white hover:border-gray-300'}`}
      onClick={() => { setDraft(value); setEditing(true); }}
    >
      <Edit2 className={`absolute top-2 right-2 w-4 h-4 opacity-0 group-hover/markdown:opacity-100 transition-opacity ${isDark ? 'text-blue-400' : 'text-blue-500'}`} />
      <div className={`prose prose-sm max-w-none ${isDark ? 'prose-invert' : ''}`}>
        <ReactMarkdown remarkPlugins={[remarkGfm]}>{value}</ReactMarkdown>
      </div>
    </div>
  );
}

function EditableNumber({
  value,
  onChange,
  isDark,
}: {
  value: number | undefined;
  onChange: (v: number | undefined) => void;
  isDark: boolean;
}) {
  const [editing, setEditing] = useState(false);
  const [draft, setDraft] = useState(String(value ?? ''));

  const confirm = () => {
    const n = parseInt(draft, 10);
    onChange(isNaN(n) ? undefined : n);
    setEditing(false);
  };

  if (editing) {
    return (
      <span className="inline-flex items-center gap-1">
        <input
          autoFocus
          type="number"
          value={draft}
          onChange={e => setDraft(e.target.value)}
          onKeyDown={e => { if (e.key === 'Enter') confirm(); if (e.key === 'Escape') setEditing(false); }}
          className={`w-20 px-2 py-0.5 text-sm rounded border outline-none ${isDark ? 'bg-slate-800 border-blue-500/60 text-slate-100' : 'bg-white border-blue-300 text-gray-800'}`}
        />
        <button onClick={confirm} className="text-green-500 hover:text-green-400"><Check className="w-3.5 h-3.5" /></button>
        <button onClick={() => setEditing(false)} className="text-red-400 hover:text-red-300"><X className="w-3.5 h-3.5" /></button>
      </span>
    );
  }

  return (
    <span
      onClick={() => { setDraft(String(value ?? '')); setEditing(true); }}
      className={`group/num inline-flex items-center gap-1 px-2 py-0.5 text-sm rounded cursor-pointer transition-all duration-200 hover:scale-105 ${isDark ? 'text-blue-300 bg-blue-900/30 hover:bg-blue-900/50' : 'text-blue-600 bg-blue-50 hover:bg-blue-100'}`}
    >
      {value ?? <span className="italic opacity-50">未设置</span>}
      <Edit2 className="w-3 h-3 opacity-0 group-hover/num:opacity-100 transition-opacity" />
    </span>
  );
}

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>
  );
}

function LabelRow({
  label,
  children,
  isDark,
}: {
  label: string;
  children: React.ReactNode;
  isDark: boolean;
}) {
  return (
    <div className="space-y-1.5">
      <span className={`text-xs font-semibold uppercase tracking-wide ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{label}</span>
      <div>{children}</div>
    </div>
  );
}

// ─── Agent Edit Modal ─────────────────────────────────────────────────────────

function AgentEditModal({
  agent,
  existingFields,
  onSave,
  onClose,
  isDark,
}: {
  agent: AgentData;
  existingFields: string[];
  onSave: (a: AgentData) => void;
  onClose: () => void;
  isDark: boolean;
}) {
  const [form, setForm] = useState<AgentData>({ ...agent, relevant_fields: [...agent.relevant_fields], analysis_contract: [...agent.analysis_contract] });
  const initialExpertise = useMemo(() => parseExpertiseConfig(agent.expertise, existingFields), [agent.expertise, existingFields]);
  const [expertisePrefix, setExpertisePrefix] = useState(initialExpertise.prefix);
  const [expertiseFields, setExpertiseFields] = useState<string[]>(initialExpertise.fields.length ? initialExpertise.fields : existingFields.slice(0, 1));
  const [expertiseSuffix] = useState(initialExpertise.suffix);
  const [fieldPickerOpen, setFieldPickerOpen] = useState(false);
  const [expertisePickerOpen, setExpertisePickerOpen] = useState(false);

  const set = (k: keyof AgentData, v: unknown) => setForm(p => ({ ...p, [k]: v }));

  const inputCls = `w-full px-3 py-2 text-sm rounded-lg border outline-none transition-colors ${isDark ? 'bg-slate-800 border-slate-600 text-slate-100 focus:border-blue-400' : 'bg-white border-gray-300 text-gray-800 focus:border-blue-400'}`;
  const labelCls = `text-xs font-semibold uppercase tracking-wide ${isDark ? 'text-slate-500' : 'text-gray-400'}`;
  const fieldOptions = existingFields.map(f => ({ value: f, label: mapFieldLabel(f) }));

  const removeRelevantField = (field: string) => {
    if (form.relevant_fields.length <= 1) {
      window.alert('关联字段最少必须保留 1 个');
      return;
    }
    set('relevant_fields', form.relevant_fields.filter(x => x !== field));
  };

  const removeExpertiseField = (field: string) => {
    if (expertiseFields.length <= 1) {
      window.alert('专业能力服务字段最少必须保留 1 个');
      return;
    }
    setExpertiseFields(prev => prev.filter(x => x !== field));
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4" onClick={onClose}>
      <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={onClose} 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={labelCls}>{FIELD_LABELS[k]}</label>
              <input value={form[k]} onChange={e => set(k, e.target.value)} className={inputCls} />
            </div>
          ))}
          <div className="space-y-2">
            <label className={labelCls}>{FIELD_LABELS.expertise}</label>
            <div className="space-y-1.5">
              <span className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>分析职责描述（“你的分析应服务于”前面的内容）</span>
              <textarea
                value={expertisePrefix}
                onChange={e => setExpertisePrefix(e.target.value)}
                rows={3}
                className={inputCls + ' resize-y text-xs leading-relaxed'}
              />
            </div>
            <div className="space-y-1.5">
              <span className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>你的分析应服务于</span>
              <div className="flex flex-wrap gap-1.5">
                {expertiseFields.map(f => (
                  <span key={f} className={`inline-flex items-center gap-1 px-2.5 py-0.5 text-xs rounded-full border ${isDark ? 'bg-slate-800/70 text-emerald-200 border-emerald-500/25' : 'bg-emerald-50 text-emerald-700 border-emerald-200'}`}>
                    {mapFieldLabel(f)}
                    <button onClick={() => removeExpertiseField(f)} className="hover:text-red-500"><X className="w-3 h-3" /></button>
                  </span>
                ))}
                <button onClick={() => setExpertisePickerOpen(true)} className={`inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded-full border border-dashed ${isDark ? 'border-slate-600 text-slate-400 hover:border-emerald-500 hover:text-emerald-300' : 'border-gray-300 text-gray-500 hover:border-emerald-400 hover:text-emerald-600'}`}>
                  <Plus className="w-3 h-3" /> 添加
                </button>
              </div>
            </div>
          </div>
          <div className="space-y-1.5">
            <label className={labelCls}>{FIELD_LABELS.relevant_fields}</label>
            <div className="flex flex-wrap gap-1.5">
              {form.relevant_fields.map(f => (
                <span key={f} className={`inline-flex items-center gap-1 px-2.5 py-0.5 text-xs rounded-full border ${isDark ? 'bg-slate-800/70 text-blue-200 border-blue-500/25' : 'bg-blue-50 text-blue-700 border-blue-200'}`}>
                  {mapFieldLabel(f)}
                  <button onClick={() => removeRelevantField(f)} className="hover:text-red-500"><X className="w-3 h-3" /></button>
                </span>
              ))}
              <button onClick={() => setFieldPickerOpen(true)} className={`inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded-full border border-dashed ${isDark ? 'border-slate-600 text-slate-400 hover:border-blue-500 hover:text-blue-300' : 'border-gray-300 text-gray-500 hover:border-blue-400 hover:text-blue-600'}`}>
                <Plus className="w-3 h-3" /> 添加
              </button>
            </div>
          </div>
          <div className="space-y-1.5">
            <label className={labelCls}>{FIELD_LABELS.analysis_contract}</label>
            <TagList tags={form.analysis_contract} onChange={v => set('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={onClose} 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={() => onSave({ ...form, expertise: buildExpertise(expertisePrefix, expertiseFields, expertiseSuffix) })} 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>
      {fieldPickerOpen && (
        <MultiSelectModal
          title="选择关联字段"
          selected={form.relevant_fields}
          options={fieldOptions}
          minKeep={1}
          onClose={() => setFieldPickerOpen(false)}
          onSave={v => { set('relevant_fields', v); setFieldPickerOpen(false); }}
          isDark={isDark}
        />
      )}
      {expertisePickerOpen && (
        <MultiSelectModal
          title="选择专业能力服务字段"
          selected={expertiseFields}
          options={fieldOptions}
          minKeep={1}
          onClose={() => setExpertisePickerOpen(false)}
          onSave={v => { setExpertiseFields(v); setExpertisePickerOpen(false); }}
          isDark={isDark}
        />
      )}
    </div>
  );
}

// ─── Agent Card ───────────────────────────────────────────────────────────────

function AgentCard({
  agent,
  existingFields,
  onUpdate,
  onDelete,
  isDark,
}: {
  agent: AgentData;
  existingFields: string[];
  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 expertiseConfig = parseExpertiseConfig(agent.expertise, existingFields);

  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'}`}
      >
        {/* Header */}
        <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'}`}
              title="编辑"
            >
              <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'}`}
              title="删除"
            >
              <Trash2 className="w-3.5 h-3.5" />
            </button>
          </div>
        </div>

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

        {/* Expertise */}
        <div className="mb-3">
          <p className={`text-xs leading-relaxed mb-1.5 line-clamp-2 ${isDark ? 'text-slate-400' : 'text-gray-600'}`}>{expertiseConfig.prefix}</p>
          <div className="flex flex-wrap gap-1">
            {expertiseConfig.fields.map(f => (
              <span key={f} className={`text-xs px-2 py-0.5 rounded-full border ${isDark ? 'bg-slate-800/70 text-emerald-200 border-emerald-500/25' : 'bg-emerald-50 text-emerald-700 border-emerald-200'}`}>{mapFieldLabel(f)}</span>
            ))}
          </div>
        </div>

        {/* Relevant fields */}
        {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}`}>{mapFieldLabel(f)}</span>
              ))}
            </div>
          </div>
        )}

        {/* Analysis contract */}
        {agent.analysis_contract.length > 0 && (
          <div>
            <p className={`text-xs font-medium mb-1.5 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{FIELD_LABELS.analysis_contract}</p>
            <ul className="space-y-1">
              {agent.analysis_contract.map((c, i) => (
                <li key={i} className={`text-xs flex gap-1.5 items-start ${isDark ? 'text-slate-400' : 'text-gray-600'}`}>
                  <span className={`mt-1 flex-shrink-0 w-1.5 h-1.5 rounded-full ${isDark ? 'bg-slate-600' : 'bg-gray-300'}`} />
                  {c}
                </li>
              ))}
            </ul>
          </div>
        )}
      </div>

      {editing && (
        <AgentEditModal
          agent={agent}
          existingFields={existingFields}
          onSave={updated => { onUpdate(updated); setEditing(false); }}
          onClose={() => setEditing(false)}
          isDark={isDark}
        />
      )}
    </>
  );
}

// ─── Field Requirement Card ───────────────────────────────────────────────────

function FieldRequirementCard({
  fieldKey,
  req,
  onChange,
  isDark,
  fieldOptions,
  agentOptions,
}: {
  fieldKey: string;
  req: FieldRequirement;
  onChange: (r: FieldRequirement) => void;
  isDark: boolean;
  fieldOptions: { value: string; label: string }[];
  agentOptions: { value: string; label: string }[];
}) {
  const [open, setOpen] = useState(false);
  const [picker, setPicker] = useState<'dependencies' | 'preferred_agents' | null>(null);
  const label = REPORT_SCHEMA_LABELS[fieldKey] || fieldKey;

  const setField = <K extends keyof FieldRequirement>(k: K, v: FieldRequirement[K]) =>
    onChange({ ...req, [k]: v });

  const ARRAY_FIELDS: (keyof FieldRequirement)[] = ['must_cover', 'done_criteria', 'blockers', 'evidence_needs'];

  const removeRequiredItem = (key: 'dependencies' | 'preferred_agents', value: string) => {
    const current = req[key];
    if (current.length <= 1) {
      window.alert(key === 'dependencies' ? '依赖字段最少必须保留 1 个' : '推荐智能体最少必须保留 1 个');
      return;
    }
    setField(key, current.filter(x => x !== value));
  };

  return (
    <div className={`rounded-xl border overflow-hidden transition-all duration-200 ${isDark ? 'border-slate-700/60 bg-slate-800/30' : 'border-gray-200 bg-gray-50'}`}>
      <button
        onClick={() => setOpen(o => !o)}
        className={`w-full flex items-center justify-between px-4 py-3 text-left transition-colors duration-200 group/fld ${isDark ? 'hover:bg-slate-700/30' : 'hover:bg-white'}`}
      >
        <div className="flex items-center gap-2 min-w-0">
          <code className={`text-xs px-2 py-0.5 rounded font-mono flex-shrink-0 ${isDark ? 'bg-slate-700 text-slate-400' : 'bg-gray-200 text-gray-500'}`}>{fieldKey}</code>
          <span className={`text-sm font-medium truncate ${isDark ? 'text-slate-200' : 'text-gray-800'}`}>{label}</span>
        </div>
        {open
          ? <ChevronDown className={`w-4 h-4 flex-shrink-0 transition-transform duration-300 ${isDark ? 'text-slate-500' : 'text-gray-400'}`} />
          : <ChevronRight className={`w-4 h-4 flex-shrink-0 transition-transform duration-300 ${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-4 pb-4 pt-1 space-y-3 border-t ${isDark ? 'border-slate-700/60' : 'border-gray-200'}`}>
            {(['title', 'goal', 'style_notes'] as const).map(k => (
              <LabelRow key={k} label={FIELD_LABELS[k]} isDark={isDark}>
                <EditableText
                  value={req[k] as string}
                  onChange={v => setField(k, v)}
                  isDark={isDark}
                  multiline={k === 'style_notes'}
                />
              </LabelRow>
            ))}

            <div className="flex gap-6">
              {(['min_chars', 'min_items'] as const).map(k => (
                <LabelRow key={k} label={FIELD_LABELS[k]} isDark={isDark}>
                  <EditableNumber value={req[k]} onChange={v => setField(k, v)} isDark={isDark} />
                </LabelRow>
              ))}
            </div>

            {ARRAY_FIELDS.map((k, index) => (
              <LabelRow key={String(k)} label={FIELD_LABELS[String(k)]} isDark={isDark}>
                <TagList
                  tags={req[k] as string[]}
                  onChange={v => setField(k as keyof FieldRequirement, v as FieldRequirement[typeof k])}
                  isDark={isDark}
                  tagLight={index % 2 === 0 ? 'bg-emerald-50 text-emerald-700 border-emerald-200' : 'bg-amber-50 text-amber-700 border-amber-200'}
                  tagDark={index % 2 === 0 ? 'bg-slate-800/70 text-emerald-200 border-emerald-500/25' : 'bg-slate-800/70 text-amber-200 border-amber-500/25'}
                />
              </LabelRow>
            ))}

            <LabelRow label={FIELD_LABELS.dependencies} isDark={isDark}>
              <div className="flex flex-wrap gap-1.5 items-center">
                {req.dependencies.map(v => (
                  <span key={v} className={`inline-flex items-center gap-1 px-2.5 py-0.5 text-xs rounded-full border ${isDark ? 'bg-slate-800/70 text-violet-200 border-violet-500/25' : 'bg-violet-50 text-violet-700 border-violet-200'}`}>
                    {fieldOptions.find(x => x.value === v)?.label || v}
                    <button onClick={() => removeRequiredItem('dependencies', v)} className="hover:text-red-500"><X className="w-3 h-3" /></button>
                  </span>
                ))}
                <button onClick={() => setPicker('dependencies')} 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-violet-500 hover:text-violet-400' : 'border-gray-300 text-gray-400 hover:border-violet-400 hover:text-violet-500'}`}>
                  <Plus className="w-3 h-3" /> 添加
                </button>
              </div>
            </LabelRow>

            <LabelRow label={FIELD_LABELS.preferred_agents} isDark={isDark}>
              <div className="flex flex-wrap gap-1.5 items-center">
                {req.preferred_agents.map(v => (
                  <span key={v} className={`inline-flex items-center gap-1 px-2.5 py-0.5 text-xs rounded-full border ${isDark ? 'bg-slate-800/70 text-rose-200 border-rose-500/25' : 'bg-rose-50 text-rose-700 border-rose-200'}`}>
                    {agentOptions.find(x => x.value === v)?.label || v}
                    <button onClick={() => removeRequiredItem('preferred_agents', v)} className="hover:text-red-500"><X className="w-3 h-3" /></button>
                  </span>
                ))}
                <button onClick={() => setPicker('preferred_agents')} 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-rose-500 hover:text-rose-400' : 'border-gray-300 text-gray-400 hover:border-rose-400 hover:text-rose-500'}`}>
                  <Plus className="w-3 h-3" /> 添加
                </button>
              </div>
            </LabelRow>
          </div>
        </div>
      </div>

      {picker === 'dependencies' && (
        <MultiSelectModal
          title="选择依赖字段"
          selected={req.dependencies}
          options={fieldOptions}
          minKeep={1}
          onClose={() => setPicker(null)}
          onSave={v => { setField('dependencies', v); setPicker(null); }}
          isDark={isDark}
        />
      )}
      {picker === 'preferred_agents' && (
        <MultiSelectModal
          title="选择推荐智能体"
          selected={req.preferred_agents}
          options={agentOptions}
          minKeep={1}
          onClose={() => setPicker(null)}
          onSave={v => { setField('preferred_agents', v); setPicker(null); }}
          isDark={isDark}
        />
      )}
    </div>
  );
}

// ─── Main Component ───────────────────────────────────────────────────────────

export default function TemplateEditor() {
  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);
  const [addingAgent, setAddingAgent] = useState(false);
  const [fixedAgents, setFixedAgents] = useState<AgentData[]>([]);
  const [originalTemplate, setOriginalTemplate] = useState<TemplateData | null>(null);

  useEffect(() => {
    fetch('https://ch1.b.uat.4.cn/zncmweb/templates/3q_template.json')
      .then(r => r.json())
      .then((data: TemplateData) => { setTemplate(data); setOriginalTemplate(data); setFixedAgents(data.agents); 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 || !originalTemplate) return;

    const issues = compareJsonShape(originalTemplate, template);
    const valid = issues.length === 0;
    const result = {
      valid,
      message: valid ? '保存校验通过：字段和类型与 https://ch1.b.uat.4.cn/zncmweb/templates/3q_template.json 一致。' : '保存校验失败：字段或类型不一致。',
      issues,
      data: template,
    };

    console.log('[TemplateEditor 保存结果]', result);
    console.log('[TemplateEditor 保存 JSON]', JSON.stringify(template, null, 2));
    window.alert(result.message + ' 详情已打印到控制台。');

    if (valid) setDirty(false);
  };

  const existingFields = template ? Object.keys(template.report_schema) : [];
  const fieldOptions = template ? existingFields.map(f => ({ value: f, label: mapFieldLabel(f) })) : [];
  const agentOptions = template ? template.agents.map(a => ({ value: a.id, label: `${a.name || a.id}（${a.id}）` })) : [];
  const deletedFixedAgents = template ? fixedAgents.filter(agent => !template.agents.some(current => current.id === agent.id)) : [];

  // ── Loading / Error states ─────────────────────────────────────────────────

  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>
    );
  }

  // ── Render ─────────────────────────────────────────────────────────────────

  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'}`}>三Q研判报告 · {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">

      {/* ── 1. Basic Info ────────────────────────────────────────────────────── */}
      <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 => (
            <LabelRow key={k} label={FIELD_LABELS[k]} isDark={isDark}>
              <EditableText value={template[k]} onChange={v => update(k, v)} isDark={isDark} />
            </LabelRow>
          ))}
        </div>
        <LabelRow label={FIELD_LABELS.template_brief} isDark={isDark}>
          <EditableText value={template.template_brief} onChange={v => update('template_brief', v)} isDark={isDark} multiline />
        </LabelRow>
      </SectionWrapper>

      {/* ── 2. Usage Notes ───────────────────────────────────────────────────── */}
      <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>

      {/* ── 3. Report Schema ─────────────────────────────────────────────────── */}
      <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>

      {/* ── 4. Field Requirements ────────────────────────────────────────────── */}
      <SectionWrapper title={FIELD_LABELS.field_requirements} icon={Settings} isDark={isDark} defaultOpen={false}>
        <div className="space-y-2">
          {Object.entries(template.field_requirements).map(([key, req]) => (
            <FieldRequirementCard
              key={key}
              fieldKey={key}
              req={req}
              onChange={updated => update('field_requirements', { ...template.field_requirements, [key]: updated })}
              fieldOptions={fieldOptions}
              agentOptions={agentOptions}
              isDark={isDark}
            />
          ))}
        </div>
      </SectionWrapper>

      {/* ── 5. Agents ────────────────────────────────────────────────────────── */}
      <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}
              existingFields={existingFields}
              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}
            />
          ))}

          {deletedFixedAgents.length > 0 && (
            <button
              onClick={() => setAddingAgent(true)}
              className={`rounded-xl border-2 border-dashed p-4 flex flex-col items-center justify-center gap-2 min-h-[120px] transition-all duration-200 hover:scale-[1.02] ${isDark ? 'border-slate-700 text-slate-500 hover:border-blue-600/60 hover:text-blue-400 hover:bg-blue-950/10' : 'border-gray-200 text-gray-400 hover:border-blue-300 hover:text-blue-500 hover:bg-blue-50/50'}`}
            >
              <Plus className="w-6 h-6" />
              <span className="text-sm font-medium">添加智能体</span>
              <span className="text-xs opacity-70">恢复已删除智能体</span>
            </button>
          )}
        </div>
      </SectionWrapper>

      {/* ── 6. Coordinator Config ─────────────────────────────────────────────── */}
      <SectionWrapper title={FIELD_LABELS.coordinator_config} icon={Settings} isDark={isDark} defaultOpen={false}>
        <div className="space-y-4">
          {(Object.entries(template.coordinator_config) as [keyof CoordinatorConfig, unknown][]).map(([key, value]) => (
            <LabelRow key={key} label={FIELD_LABELS[key] || key} isDark={isDark}>
              {Array.isArray(value) ? (
                key === 'dependency_driving_rules' ? (
                  <CoordinatorRuleList
                    rules={value as string[]}
                    fields={existingFields}
                    onChange={v => update('coordinator_config', { ...template.coordinator_config, [key]: v })}
                    isDark={isDark}
                  />
                ) : (
                  <TagList
                    tags={value as string[]}
                    onChange={v => update('coordinator_config', { ...template.coordinator_config, [key]: v })}
                    isDark={isDark}
                    tagLight="bg-teal-50 text-teal-700 border-teal-200"
                    tagDark="bg-slate-800/70 text-teal-200 border-teal-500/25"
                  />
                )
              ) : (
                <CoordinatorFieldText
                  value={value as string}
                  fields={existingFields}
                  onChange={v => update('coordinator_config', { ...template.coordinator_config, [key]: v })}
                  isDark={isDark}
                />
              )}
            </LabelRow>
          ))}
        </div>
      </SectionWrapper>

      {/* ── 7. Report Examples ───────────────────────────────────────────────── */}
      <SectionWrapper title={FIELD_LABELS.report_examples} icon={FileText} isDark={isDark} defaultOpen={false}>
        <div className="space-y-3">
          {Object.entries(template.report_examples).map(([key, example]) => (
            <div
              key={key}
              className={`rounded-lg border overflow-hidden ${isDark ? 'border-slate-700/50' : 'border-gray-200'}`}
            >
              <div className={`flex items-center gap-2 px-4 py-2 border-b ${isDark ? 'border-slate-700/50 bg-slate-800/50' : 'border-gray-200 bg-gray-50'}`}>
                <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-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{REPORT_SCHEMA_LABELS[key] || key}</span>
              </div>
              <div className="px-4 py-3">
                <EditableMarkdown
                  value={example}
                  onChange={v => update('report_examples', { ...template.report_examples, [key]: v })}
                  isDark={isDark}
                />
              </div>
            </div>
          ))}
        </div>
      </SectionWrapper>

      {/* Restore Agent Modal */}
      </div>

      {addingAgent && (
        <RestoreAgentModal
          agents={deletedFixedAgents}
          onRestore={agent => {
            update('agents', [...template.agents, agent]);
            setAddingAgent(false);
          }}
          onClose={() => setAddingAgent(false)}
          isDark={isDark}
        />
      )}
    </div>
  );
}