import { useState, useEffect, useCallback } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { X, Sparkles, Save, Loader2, ChevronLeft, ChevronRight, AlertTriangle, Settings2, FileText, Copy, Check, Terminal } from 'lucide-react'
import { api } from '@/lib/api'
import { storage } from '@/lib/storage'
import { cn } from '@/lib/cn'

// ===== 工具函数 =====

function parsePyValue(v: string): any {
  const s = v.trim()
  if (s === 'True') return true
  if (s === 'False') return false
  if (s === 'None') return null
  return JSON.parse(s)
}

function slugId(): string {
  return 'ai_' + Date.now().toString(36)
}

function parseParams(code: string): any[] {
  const m = code.match(/"params"\s*:\s*\[([^\]]*)\]/)
  if (!m) return []
  const inner = m[1]
  const blocks = inner.match(/\{[^}]+\}/g) ?? []
  return blocks.map(b => {
    const get = (key: string) => {
      const re = new RegExp('"' + key + '"\\s*:\\s*(.+?)\\s*[,}]')
      const r = b.match(re)
      return r ? r[1].trim().replace(/^"(.*)"$/, '$1') : ''
    }
    const id = get('id'); if (!id) return null
    const type = get('type')
    return { id, type, label: get('label'), default: parsePyValue(get('default') || 'null'), min: parsePyValue(get('min') || 'null'), max: parsePyValue(get('max') || 'null'), step: parsePyValue(get('step') || 'null') }
  }).filter(Boolean)
}

function parseStringList(code: string, key: string): string[] {
  const re = new RegExp(key + '\\s*=\\s*\\[([^\\]]+)\\]')
  const m = code.match(re)
  if (!m) return []
  const items = m[1].match(/"([^"]+)"/g)
  return items ? items.map(x => x.replace(/"/g, '')) : []
}

function parseScoring(code: string): Record<string, number> {
  const m = code.match(/"scoring"\s*:\s*\{([^}]+)\}/)
  if (!m) return {}
  const items = m[1].match(/"([^"]+)"\s*:\s*([0-9.]+)/g)
  if (!items) return {}
  const result: Record<string, number> = {}
  for (const item of items) {
    const p = item.match(/"([^"]+)"\s*:\s*([0-9.]+)/)
    if (p) result[p[1]] = parseFloat(p[2])
  }
  return result
}

function parseRules(code: string): string {
  const m = code.match(/RULES\s*=\s*"""\s*([\s\S]*?)\s*"""/)
  return m ? m[1].trim() : ''
}

function parseMetaField(code: string, field: string): string {
  const m = code.match(new RegExp('"' + field + '"\\s*:\\s*"([^"]+)"'))
  return m ? m[1] : ''
}

// ===== 常量 =====

const DIRECTIONS = [
  { value: 'long', label: '做多' },
  { value: 'short', label: '做空' },
  { value: 'monitor', label: '监控' },
]

// ===== 组件 =====

const CUSTOM_TEMPLATE = `"""策略简短描述"""
import polars as pl

META = {
    "id": "custom_my_strategy",
    "name": "我的策略",
    "description": "策略描述",
    "tags": ["自定义"],
    "basic_filter": {
        "price_min": 3, "price_max": 200,
        "market_cap_min": 10e8, "amount_min": 0.5e8,
        "exclude_st": True, "exclude_new_days": 30,
    },
    "params": [],
    "scoring": {
        "change_pct": 0.5, "vol_ratio_5d": 0.5,
    },
    "order_by": "score",
    "descending": True,
    "limit": 100,
}

ENTRY_SIGNALS = ["signal_n_day_high"]
EXIT_SIGNALS = ["signal_ma20_breakdown"]
STOP_LOSS = -0.05
MAX_HOLD_DAYS = 20
ALERTS = []

RULES = """
1. 规则一
2. 规则二
3. 规则三
"""

def filter(df: pl.DataFrame, params: dict) -> pl.Expr:
    return (
        (pl.col("close") > pl.col("ma20"))
        & (pl.col("volume") > pl.col("vol_ma5") * 1.5)
    )
`

interface Props { open: boolean; onClose: () => void; onSavedId?: (id: string) => void | Promise<void>; mode?: 'create' | 'modify' }

export function StrategyBuilderDialog({ open, onClose, onSavedId, mode = 'create' }: Props) {
  // 根据 mode 选择存储 key
  const draftStore = mode === 'modify' ? storage.strategyModify : storage.strategyDraft
  const [step, setStep] = useState(1)
  const [tab, setTab] = useState<'ai' | 'custom'>('ai')
  const [customCopied, setCustomCopied] = useState(false)
  const [name, setName] = useState('')
  const [description, setDescription] = useState('')
  const [direction, setDirection] = useState('long')
  const [rules, setRules] = useState('')
  const [code, setCode] = useState('')
  const [instruction, setInstruction] = useState('')
  const [previewTab, setPreviewTab] = useState<'params' | 'code'>('params')
  const [strategyId, setStrategyId] = useState('')

  const [error, setError] = useState('')
  const [loading, setLoading] = useState(false)
  const [saving, setSaving] = useState(false)
  const [aiStatus, setAiStatus] = useState<{ configured: boolean } | null>(null)
  const [checkedAi, setCheckedAi] = useState(false)
  const [loaded, setLoaded] = useState(false)

  // 打开时恢复草稿
  useEffect(() => {
    if (!open) { setLoaded(false); return }
    const d = draftStore.get(null)
    if (d) {
      setStep(d.step ?? 1); setName(d.name ?? ''); setDescription(d.description ?? '')
      setDirection(d.direction ?? 'long')
      setRules(d.rules ?? ''); setCode(d.code ?? ''); setStrategyId(d.strategyId ?? '')
    }
    setLoaded(true)
  }, [open])

  // 打开时检查 AI 状态
  useEffect(() => {
    if (!open || checkedAi) return
    api.strategyAiStatus().then(s => { setAiStatus(s); setCheckedAi(true) }).catch(() => setAiStatus({ configured: false }))
  }, [open, checkedAi])

  // 持久化
  const persist = useCallback(() => {
    if (!name && !rules && !code) {
      draftStore.set(null)
    } else {
      draftStore.set({ name, description, direction, rules, code, step, strategyId })
    }
  }, [name, description, direction, rules, code, step, strategyId])
  useEffect(() => { if (loaded) persist() }, [loaded, persist])

  const clearDraft = () => {
    setName(''); setDescription(''); setDirection('long')
    setRules(''); setCode(''); setStep(1); setError(''); setInstruction('')
    setStrategyId('')
  }

  const handleClose = () => { if (name || rules || code) persist(); onClose() }

  // Step 1: 生成
  const handleGenerate = async () => {
    if (!name.trim() || !rules.trim()) return
    if (!aiStatus?.configured) { setError('AI 未配置，请在设置页面配置 API Key'); return }
    setLoading(true); setError('')
    try {
      const id = strategyId || slugId()
      setStrategyId(id)
      const res = await api.strategyBuild(1, { name: name.trim(), description: description.trim(), direction, rules: rules.trim(), strategy_id: id })
      if (!res.valid) { setError(res.error ?? '生成失败'); return }
      setCode(res.code); setStep(2)
      const genDesc = parseMetaField(res.code, 'description')
      const genRules = parseRules(res.code)
      if (genDesc) setDescription(genDesc)
      if (genRules) setRules(genRules)
      await api.strategySaveCode(id, res.code)
      if (genRules) { const sr = storage.strategyRules.get({}); sr[id] = genRules; storage.strategyRules.set(sr) }
    } catch (e: any) {
      const msg = String(e?.message ?? '')
      setError(msg.includes('API Key') || msg.includes('api_key') ? 'AI API Key 未配置或无效' : (msg || '生成失败'))
    } finally { setLoading(false) }
  }

  // Step 2: AI 修改
  const handleModify = async () => {
    if (!instruction.trim() || !code) return
    setLoading(true); setError('')
    try {
      const res = await api.strategyBuild(2, { current_code: code, instruction: instruction.trim() })
      if (!res.valid) { setError(res.error ?? '修改失败'); return }
      setCode(res.code); setInstruction('')
      const genDesc = parseMetaField(res.code, 'description')
      const updatedRules = parseRules(res.code)
      if (genDesc) setDescription(genDesc)
      if (updatedRules) setRules(updatedRules)
      const idMatch = res.code.match(/"id"\s*:\s*"([^"]+)"/)
      if (idMatch) {
        await api.strategySaveCode(idMatch[1], res.code)
        const sr = storage.strategyRules.get({}); sr[idMatch[1]] = updatedRules; storage.strategyRules.set(sr)
      }
    } catch (e: any) { setError(String(e?.message ?? '修改失败')) }
    finally { setLoading(false) }
  }

  // 手动保存
  const handleSave = async () => {
    if (!code) return
    setSaving(true)
    try {
      const idMatch = code.match(/"id"\s*:\s*"([^"]+)"/)
      const id = idMatch?.[1] || strategyId || slugId()
      await api.strategySaveCode(id, code)
      const genRules = parseRules(code)
      const finalRules = (genRules || rules).trim()
      if (finalRules) { const saved = storage.strategyRules.get({}); saved[id] = finalRules; storage.strategyRules.set(saved) }
      await onSavedId?.(id)
      clearDraft()
      setTimeout(() => onClose(), 1000)
    } catch (e: any) { setError(String(e?.message ?? '保存失败')) }
    setSaving(false)
  }

  if (!open) return null

  const params = parseParams(code)
  const entrySignals = parseStringList(code, 'ENTRY_SIGNALS')
  const exitSignals = parseStringList(code, 'EXIT_SIGNALS')
  const scoring = parseScoring(code)
  const stopMatch = code.match(/STOP_LOSS\s*=\s*(-?[0-9.]+|None)/)
  const codeStopLoss = stopMatch ? (stopMatch[1] === 'None' ? null : parseFloat(stopMatch[1])) : null
  const holdMatch = code.match(/MAX_HOLD_DAYS\s*=\s*(-?[0-9.]+|None)/)
  const codeHoldDays = holdMatch ? (holdMatch[1] === 'None' ? null : parseInt(holdMatch[1])) : null
  const hasParams = params.length > 0 || entrySignals.length > 0 || exitSignals.length > 0 || Object.keys(scoring).length > 0

  return (
    <AnimatePresence>
      <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
        className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm"
        onClick={e => { if (e.target === e.currentTarget) handleClose() }}>
        <motion.div initial={{ opacity: 0, scale: 0.95, y: 10 }} animate={{ opacity: 1, scale: 1, y: 0 }} exit={{ opacity: 0, scale: 0.95, y: 10 }}
          className="w-[820px] max-h-[88vh] bg-surface/95 backdrop-blur-xl border border-border/50 rounded-2xl shadow-2xl flex flex-col overflow-hidden">

          {/* 标题 */}
          <div className="grid grid-cols-[1fr_auto_1fr] items-center px-5 py-2.5 border-b border-border/50">
            {/* 左侧：Tab 切换 */}
            <div className="flex rounded-lg bg-elevated p-0.5 w-fit">
              <button onClick={() => setTab('ai')} className={cn('px-3 py-1 rounded-md text-xs font-medium transition-all cursor-pointer', tab === 'ai' ? 'bg-amber-400/15 text-amber-400' : 'text-muted hover:text-foreground')}>
                <Sparkles className="h-3 w-3 inline mr-1" />AI 生成
              </button>
              <button onClick={() => setTab('custom')} className={cn('px-3 py-1 rounded-md text-xs font-medium transition-all cursor-pointer', tab === 'custom' ? 'bg-accent/15 text-accent' : 'text-muted hover:text-foreground')}>
                <FileText className="h-3 w-3 inline mr-1" />自定义编写
              </button>
            </div>
            {/* 中间：标题 */}
            <span className="text-sm font-semibold text-foreground">
              {strategyId ? '修改策略' : '创建策略'}
            </span>
            {/* 右侧：步骤 + 关闭 */}
            <div className="flex items-center justify-end gap-2">
              {tab === 'ai' && (
                <div className="flex items-center gap-1">
                  <span className={'w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold ' + (step === 1 ? 'bg-amber-400/20 text-amber-400' : 'bg-emerald-400/20 text-emerald-400')}>1</span>
                  <span className="text-muted/20 text-[10px]">—</span>
                  <span className={'w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold ' + (step === 2 ? 'bg-amber-400/20 text-amber-400' : 'bg-border/50 text-muted')}>2</span>
                </div>
              )}
              <button onClick={handleClose} className="p-1.5 rounded-lg hover:bg-elevated"><X className="h-4 w-4 text-muted" /></button>
            </div>
          </div>

          {/* Tab 描述 */}
          <div className="px-5 py-2 border-b border-border/30 bg-elevated/30">
            {tab === 'ai' ? (
              <div className="flex items-center gap-2 text-[11px]">
                <Sparkles className="h-3.5 w-3.5 text-amber-400 shrink-0" />
                <span className="text-amber-400/80">步骤 1 描述策略规则 → 步骤 2 预览代码 → 保存</span>
              </div>
            ) : (
              <div className="flex items-center gap-2 text-[11px]">
                <Terminal className="h-3.5 w-3.5 text-accent shrink-0" />
                <span className="text-muted">适合有 Python 基础的开发者，手动编写策略文件进行深度定制和二次开发</span>
              </div>
            )}
          </div>

          {/* 内容 */}
          <div className="flex-1 overflow-y-auto px-5 py-5 space-y-4">
            {tab === 'ai' ? (<>
            {aiStatus && !aiStatus.configured && (
              <div className="rounded-xl border border-amber-400/30 bg-amber-400/5 px-4 py-3 flex items-center gap-3">
                <AlertTriangle className="h-4 w-4 text-amber-400 shrink-0" />
                <div className="flex-1 text-xs text-amber-400/80">AI API Key 未配置，无法生成策略。填写的内容会自动保存。</div>
                <button onClick={() => { persist(); window.location.href = '/settings/ai' }}
                  className="h-7 px-3 rounded-lg bg-amber-400/15 border border-amber-400/30 text-amber-400 text-xs font-medium flex items-center gap-1.5 hover:bg-amber-400/20 shrink-0">
                  <Settings2 className="h-3 w-3" />去配置
                </button>
              </div>
            )}

            {step === 1 ? (
              <>
                <div className="space-y-2">
                  <input type="text" value={name} onChange={e => setName(e.target.value)} placeholder="策略名称，如：强势反包"
                    className="w-full h-9 px-3 rounded-lg bg-base border-0 ring-1 ring-border/30 text-sm font-medium text-foreground placeholder:text-muted/30 focus:outline-none focus:ring-2 focus:ring-accent/30" />
                  <input type="text" value={description} onChange={e => setDescription(e.target.value)} placeholder="一句话描述，如：筛选前日阴线下跌、今日放量阳线反包的短线强势股"
                    className="w-full h-8 px-3 rounded-lg bg-base border-0 ring-1 ring-border/30 text-sm text-foreground placeholder:text-muted/30 focus:outline-none focus:ring-2 focus:ring-accent/30" />
                </div>
                <div>
                  <span className="text-[10px] text-muted/50 uppercase tracking-wider mb-1.5 block">选股方向</span>
                  <div className="flex gap-1">
                    {DIRECTIONS.map(d => (
                      <button key={d.value} onClick={() => setDirection(d.value)} className={'px-2.5 py-1 rounded text-[11px] font-medium border transition-colors ' + (direction === d.value ? 'border-amber-400/40 bg-amber-400/10 text-amber-400' : 'border-border bg-base text-muted hover:border-amber-400/30')}>{d.label}</button>
                    ))}
                  </div>
                </div>
                <div>
                  <span className="text-[10px] text-muted/50 uppercase tracking-wider mb-1.5 block">策略规则</span>
                  <textarea value={rules} onChange={e => setRules(e.target.value)}
                    placeholder="描述你的选股逻辑，AI 会自动提取参数。例如：\n前一交易日为明显阴线且跌幅不低于2%，今日阳线收盘反包前一日实体，收盘价接近或高于前一日高点，成交量较前一日放大1.2倍以上，当前 close > ma5 或 close > ma10；使用 filter_history，并优先用 Polars shift/with_columns/filter 实现。"
                    className="w-full h-28 px-3 py-2 rounded-lg bg-base border-0 ring-1 ring-border/30 text-sm text-foreground placeholder:text-muted/30 resize-none focus:outline-none focus:ring-2 focus:ring-accent/30" />
                </div>
                {error && <div className="text-[11px] text-danger bg-danger/10 border border-danger/20 rounded-lg px-3 py-2">{error}</div>}
                <button onClick={handleGenerate} disabled={loading || !name.trim() || !rules.trim()}
                  className="w-full h-10 rounded-xl bg-gradient-to-r from-amber-500/20 to-amber-500/10 border border-amber-400/30 text-amber-400 text-sm font-medium flex items-center justify-center gap-2 hover:from-amber-500/30 hover:to-amber-500/20 disabled:opacity-40 transition-all">
                  {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Sparkles className="h-4 w-4" />}
                  {loading ? 'AI 生成中...' : code ? '重新生成' : 'AI 生成策略'}
                </button>
              </>
            ) : (
              <>
                {/* Tab 切换 */}
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-0.5">
                    <button onClick={() => setPreviewTab('params')} className={'px-3 py-1 rounded text-xs font-medium transition-colors ' + (previewTab === 'params' ? 'bg-amber-400/15 text-amber-400' : 'text-muted hover:text-secondary')}>参数</button>
                    <button onClick={() => setPreviewTab('code')} className={'px-3 py-1 rounded text-xs font-medium transition-colors ' + (previewTab === 'code' ? 'bg-amber-400/15 text-amber-400' : 'text-muted hover:text-secondary')}>代码</button>
                  </div>
                </div>

                {previewTab === 'params' ? (
                  hasParams ? (
                    <div className="rounded-xl border border-border/30 bg-surface/30 overflow-hidden max-h-96 overflow-y-auto">
                      <div className="divide-y divide-border/10">
                        {params.length > 0 && (
                          <div className="px-4 py-3 space-y-2">
                            <div className="text-[10px] text-muted/50 uppercase tracking-wider">策略参数</div>
                            {params.map((p: any) => (
                              <div key={p.id} className="flex items-center gap-2">
                                <span className="text-[11px] text-secondary w-24 shrink-0 text-right">{p.label}</span>
                                {p.type === 'bool' ? (
                                  <span className={'text-[11px] font-mono ' + (p.default ? 'text-accent' : 'text-muted')}>{p.default ? '✓ 是' : '✗ 否'}</span>
                                ) : (
                                  <>
                                    <span className="text-[11px] font-mono text-foreground">{p.default}</span>
                                    <span className="text-[10px] text-muted">{p.min} ~ {p.max}{p.type === 'float' || p.type === 'int' ? ' · 步长 ' + p.step : ''}</span>
                                  </>
                                )}
                              </div>
                            ))}
                          </div>
                        )}
                        {(entrySignals.length > 0 || exitSignals.length > 0) && (
                          <div className="px-4 py-3 space-y-2">
                            <div className="text-[10px] text-muted/50 uppercase tracking-wider">交易信号</div>
                            {entrySignals.length > 0 && (
                              <div className="flex items-center gap-2">
                                <span className="text-[10px] text-emerald-400 w-10 shrink-0">买入</span>
                                <div className="flex flex-wrap gap-0.5">
                                  {entrySignals.map((s: string) => <span key={s} className="px-1.5 py-0.5 rounded bg-emerald-400/10 text-emerald-400 text-[10px] font-mono">{s}</span>)}
                                </div>
                              </div>
                            )}
                            {exitSignals.length > 0 && (
                              <div className="flex items-center gap-2">
                                <span className="text-[10px] text-danger w-10 shrink-0">卖出</span>
                                <div className="flex flex-wrap gap-0.5">
                                  {exitSignals.map((s: string) => <span key={s} className="px-1.5 py-0.5 rounded bg-danger/10 text-danger text-[10px] font-mono">{s}</span>)}
                                </div>
                              </div>
                            )}
                            <div className="flex items-center gap-4 text-[10px] text-muted mt-1">
                              {codeStopLoss !== null && <span>止损: {(codeStopLoss * 100).toFixed(1)}%</span>}
                              {codeHoldDays !== null && <span>持有: {codeHoldDays} 天</span>}
                            </div>
                          </div>
                        )}
                        {Object.keys(scoring).length > 0 && (
                          <div className="px-4 py-3 space-y-2">
                            <div className="text-[10px] text-muted/50 uppercase tracking-wider">评分权重</div>
                            {Object.entries(scoring).map(([k, v]) => (
                              <div key={k} className="flex items-center gap-2">
                                <span className="text-[10px] text-muted w-24 shrink-0 text-right font-mono">{k}</span>
                                <div className="flex-1 h-1.5 bg-elevated rounded-full overflow-hidden">
                                  <div className="h-full bg-amber-400/60 rounded-full" style={{ width: Math.min(v * 100, 100) + '%' }} />
                                </div>
                                <span className="w-8 text-right text-[10px] font-mono text-muted">{Math.round(v * 100)}%</span>
                              </div>
                            ))}
                          </div>
                        )}
                      </div>
                    </div>
                  ) : (
                    <div className="rounded-xl border border-border/30 bg-surface/30 px-4 py-6 text-[11px] text-muted text-center">未检测到策略参数，切换「代码」查看完整内容</div>
                  )
                ) : (
                  <pre className="bg-base border border-border/30 rounded-lg p-3 text-[11px] font-mono text-foreground/80 overflow-auto max-h-96 whitespace-pre-wrap">{code}</pre>
                )}

                {error && <div className="text-[11px] text-danger bg-danger/10 border border-danger/20 rounded-lg px-3 py-2">{error}</div>}

                <div className="flex gap-2">
                  <input type="text" value={instruction} onChange={e => setInstruction(e.target.value)}
                    onKeyDown={e => e.key === 'Enter' && handleModify()}
                    placeholder="调整策略逻辑，如：增加RSI超卖条件、要求今日放量、修改均线为30日..."
                    className="flex-1 h-9 px-3 rounded-lg bg-base border-0 ring-1 ring-border/30 text-sm text-foreground placeholder:text-muted/30 focus:outline-none focus:ring-2 focus:ring-accent/30" />
                  <button onClick={handleModify} disabled={loading || !instruction.trim()}
                    className="h-9 px-4 rounded-lg bg-amber-400/15 border border-amber-400/30 text-amber-400 text-xs font-medium flex items-center gap-1.5 hover:bg-amber-400/20 disabled:opacity-40 transition-all">
                    {loading ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Sparkles className="h-3.5 w-3.5" />}
                    AI 修改
                  </button>
                </div>
                <p className="text-[10px] text-muted/40">修改指令可调整参数、信号、告警、评分等任意内容。确认无误后点击「保存策略」。</p>
              </>
            )}
            </>
            ) : (
              /* 自定义编写 */
              <div className="space-y-4">
                <div className="rounded-xl border border-border/40 bg-elevated/50 p-4 space-y-2.5">
                  <div className="flex items-center gap-2">
                    <Terminal className="h-4 w-4 text-accent" />
                    <span className="text-sm font-medium text-foreground">自定义策略开发方式</span>
                  </div>
                  <div className="space-y-1.5 text-[11px] text-secondary leading-relaxed">
                    <p>在项目目录 <code className="px-1 py-0.5 rounded bg-base text-xs font-mono text-foreground/80">data/strategies/custom/</code> 下创建 <code className="px-1 py-0.5 rounded bg-base text-xs font-mono text-foreground/80">.py</code> 文件。支持两种模式：</p>
                    <div className="space-y-1 pl-1">
                      <div className="flex items-start gap-1.5">
                        <span className="mt-0.5 h-1.5 w-1.5 rounded-full bg-accent/60 shrink-0" />
                        <span><strong className="text-foreground/80">模式 A：单日过滤</strong> — <code className="text-[10px] font-mono text-foreground/80">filter(df, params) → pl.Expr</code></span>
                      </div>
                      <div className="flex items-start gap-1.5">
                        <span className="mt-0.5 h-1.5 w-1.5 rounded-full bg-amber-400/60 shrink-0" />
                        <span><strong className="text-foreground/80">模式 B：历史窗口</strong> — <code className="text-[10px] font-mono text-foreground/80">filter_history(df, params) → pl.DataFrame</code> + <code className="text-[10px] font-mono text-foreground/80">LOOKBACK_DAYS</code></span>
                      </div>
                    </div>
                    <p>完整规范见 <span className="text-accent">docs/strategy-guide.md</span></p>
                  </div>
                </div>
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="text-xs font-medium text-foreground">快速模板</span>
                    <button onClick={() => { navigator.clipboard.writeText(CUSTOM_TEMPLATE); setCustomCopied(true); setTimeout(() => setCustomCopied(false), 2000) }}
                      className={cn('inline-flex items-center gap-1 px-2 py-1 rounded text-[10px] font-medium transition-all cursor-pointer', customCopied ? 'bg-emerald-400/10 text-emerald-400' : 'bg-elevated text-muted hover:text-foreground hover:bg-accent/10')}>
                      {customCopied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
                      {customCopied ? '已复制' : '复制模板'}
                    </button>
                  </div>
                  <pre className="rounded-xl border border-border/40 bg-base p-4 text-[10px] leading-relaxed font-mono text-foreground/70 overflow-auto max-h-[400px]">{CUSTOM_TEMPLATE}</pre>
                </div>
              </div>
            )}
          </div>

          {/* 底部 */}
          {tab === 'ai' && (
          <div className="flex items-center justify-between px-5 py-3 border-t border-border/50 bg-surface/50">
            <button onClick={clearDraft} className="text-[10px] text-muted/40 hover:text-danger transition-colors">重新创建</button>
            <div className="flex items-center gap-2">
              {step === 1 && code && name.trim() && (
                <button onClick={() => setStep(2)} className="h-7 px-3 rounded-lg border border-border text-xs text-secondary hover:text-foreground flex items-center gap-1">
                  前往下一步 <ChevronRight className="h-3 w-3" />
                </button>
              )}
              {step === 2 && (
                <>
                  <button onClick={() => setStep(1)} className="h-7 px-3 rounded-lg border border-border text-xs text-secondary hover:text-foreground flex items-center gap-1">
                    <ChevronLeft className="h-3 w-3" />上一步
                  </button>
                  <button onClick={handleSave} disabled={saving || loading}
                    className="inline-flex items-center gap-1.5 h-7 px-3 rounded-lg bg-accent text-white text-xs font-medium hover:bg-accent/90 disabled:opacity-50 transition-all">
                    <Save className="h-3 w-3" />
                    {saving ? '保存中...' : '保存策略'}
                  </button>
                </>
              )}
            </div>
          </div>
          )}
        </motion.div>
      </motion.div>
    </AnimatePresence>
  )
}