'use client'

import { useEffect, useState } from 'react'
import { API_BASE } from '@/lib/apiBase'

interface WeightItem {
  label: string
  key: string
  value: number
  min: number
  max: number
}

interface Keyword {
  id: number
  word: string
  category: string
  weight: number
  matchCount: number
  enabled: boolean
}

interface ExampleLead {
  name: string
  amount: string
  score: number
}

interface DistributeRule {
  level: string
  label: string
  person: string
}

interface ExecutionLog {
  time: string
  lead: string
  rule: string
  result: string
}

interface CrawlerConfig {
  id: string
  name: string
  targetUrl: string
  status: string
  type: string
  sourceName: string | null
  scriptPath: string | null
  schedule: string | null
  keywords: string | null
  categories: string | null
  lastRunAt: string | null
  totalRuns: number
  successRuns: number
  failedRuns: number
  createdAt: string
}

const DEFAULT_WEIGHTS: WeightItem[] = [
  { label: '预估金额权重', key: 'amount', value: 30, min: 0, max: 50 },
  { label: '内容匹配度权重', key: 'match', value: 25, min: 0, max: 50 },
  { label: '甲方级别权重', key: 'level', value: 20, min: 0, max: 50 },
  { label: '时效性权重', key: 'timeliness', value: 15, min: 0, max: 50 },
  { label: '历史成交权重', key: 'history', value: 10, min: 0, max: 50 },
]

const EXAMPLE_LEADS: ExampleLead[] = [
  { name: '赵王新河治理工程块石采购', amount: '280万', score: 86 },
  { name: '郑州地铁站改项目防火门采购', amount: '380万', score: 92 },
  { name: '信阳乡村振兴供水项目管材采购', amount: '65万', score: 45 },
]

const CATEGORIES = ['工程建材', '医疗器械', 'IT设备', '办公用品', '物流服务', '咨询服务']

const MOCK_KEYWORDS: Keyword[] = [
  { id: 1, word: '防火门', category: '工程建材', weight: 9, matchCount: 47, enabled: true },
  { id: 2, word: '配电箱', category: '工程建材', weight: 8, matchCount: 35, enabled: true },
  { id: 3, word: '电线电缆', category: '工程建材', weight: 8, matchCount: 42, enabled: true },
  { id: 4, word: '阀门', category: '工程建材', weight: 7, matchCount: 28, enabled: true },
  { id: 5, word: '钢材', category: '工程建材', weight: 9, matchCount: 56, enabled: true },
  { id: 6, word: '混凝土', category: '工程建材', weight: 7, matchCount: 33, enabled: true },
  { id: 7, word: 'CT设备', category: '医疗器械', weight: 8, matchCount: 12, enabled: true },
  { id: 8, word: 'MRI核磁共振', category: '医疗器械', weight: 9, matchCount: 8, enabled: true },
  { id: 9, word: '服务器', category: 'IT设备', weight: 7, matchCount: 15, enabled: true },
  { id: 10, word: '交换机', category: 'IT设备', weight: 6, matchCount: 11, enabled: true },
  { id: 11, word: '办公桌椅', category: '办公用品', weight: 4, matchCount: 23, enabled: false },
  { id: 12, word: '打印设备', category: '办公用品', weight: 5, matchCount: 19, enabled: true },
  { id: 13, word: '物流运输', category: '物流服务', weight: 6, matchCount: 31, enabled: true },
  { id: 14, word: '仓储服务', category: '物流服务', weight: 5, matchCount: 14, enabled: true },
  { id: 15, word: '管理咨询', category: '咨询服务', weight: 4, matchCount: 9, enabled: false },
]

const PERSONS = ['张三', '李四', '王五', '赵六', '钱七']

const DEFAULT_DISTRIBUTION: DistributeRule[] = [
  { level: 'S级', label: 'S级负责人', person: '张三' },
  { level: 'A级', label: 'A级负责人', person: '李四' },
  { level: 'B级', label: 'B级负责人', person: '王五' },
  { level: 'C级', label: 'C级负责人', person: '赵六' },
  { level: 'D级', label: 'D级负责人', person: '钱七' },
]

const EXECUTION_LOGS: ExecutionLog[] = [
  { time: '2025-05-21 14:32', lead: '赵王新河治理工程块石采购', rule: 'S级自动分发', result: '已分配至张三' },
  { time: '2025-05-21 11:15', lead: '南水北调隔离网商品混凝土采购', rule: 'S级自动分发', result: '已分配至张三' },
  { time: '2025-05-20 16:48', lead: '郑州航空港区道路工程沥青采购', rule: '金额阈值评分', result: '评分更新至94分' },
  { time: '2025-05-20 09:30', lead: '河南工程局抽水蓄能项目配电箱采购', rule: '品类加分规则', result: '匹配成功·加分15' },
  { time: '2025-05-19 14:22', lead: '漯河分公司河道治理项目阀门采购', rule: 'B级自动分发', result: '已分配至王五' },
  { time: '2025-05-19 10:05', lead: '新矿集团医院改造项目电线电缆采购', rule: 'A级自动分发', result: '已分配至李四' },
  { time: '2025-05-18 17:00', lead: '十一局郑州地铁站改项目防火门采购', rule: '时效性加权', result: '投标日期加分生效' },
  { time: '2025-05-18 13:45', lead: '洛阳地铁2号线机电安装工程采购', rule: 'A级自动分发', result: '已分配至李四' },
  { time: '2025-05-17 09:20', lead: '中电建华中总部基地钢筋采购', rule: '历史成交加分', result: '成交历史加分生效' },
  { time: '2025-05-16 15:30', lead: '三门峡水库加固工程钢材采购', rule: '金额阈值评分', result: '评分更新至72分' },
]

const CRAWLER_API = `${API_BASE}/api/crawlers`
const TYPE_OPTIONS = [
  { value: 'bid', label: '通用招采' },
  { value: 'bid_powerchina', label: '中电建招采' },
  { value: 'bid_xkgroup', label: '新矿集团招采' },
  { value: 'bid_cnncecp', label: '中核集团招采' },
]
const CRON_PRESETS = [
  { label: '每 6 个小时', value: '0 */6 * * *' },
  { label: '每天早 8 点', value: '0 8 * * *' },
  { label: '每天晚 7 点', value: '0 19 * * *' },
  { label: '手动（不自动执行）', value: '' },
]

function getLevelClass(level: string) {
  const map: Record<string, string> = {
    'S级': 'bg-blue-50 text-blue-700 border-blue-200',
    'A级': 'bg-amber-50 text-amber-700 border-amber-200',
    'B级': 'bg-slate-100 text-slate-600 border-slate-200',
    'C级': 'bg-rose-50 text-rose-600 border-rose-200',
    'D级': 'bg-slate-50 text-slate-400 border-slate-200',
  }
  return map[level] || 'bg-slate-100 text-slate-600 border-slate-200'
}

export default function RuleCenterPage() {
  const [activeTab, setActiveTab] = useState<'weights' | 'keywords' | 'client' | 'crawlers'>('weights')
  const [weights, setWeights] = useState<WeightItem[]>(DEFAULT_WEIGHTS)
  const [keywords, setKeywords] = useState<Keyword[]>(MOCK_KEYWORDS)
  const [saved, setSaved] = useState(false)
  const [nextKeywordId, setNextKeywordId] = useState(16)

  const [newWord, setNewWord] = useState('')
  const [newCategory, setNewCategory] = useState(CATEGORIES[0])
  const [newWeight, setNewWeight] = useState(5)

  const [showBatchModal, setShowBatchModal] = useState(false)
  const [batchText, setBatchText] = useState('')
  const [showClearModal, setShowClearModal] = useState(false)

  const [sAmount, setSAmount] = useState(100)
  const [sCoop, setSCoop] = useState(3)
  const [aAmount, setAAmount] = useState(50)
  const [aCoop, setACoop] = useState(1)
  const [bAmount, setBAmount] = useState(10)
  const [cAmount, setCAmount] = useState(1)

  const [autoDistribute, setAutoDistribute] = useState(true)
  const [distribution, setDistribution] = useState<DistributeRule[]>(DEFAULT_DISTRIBUTION)
  const [showLogs, setShowLogs] = useState(false)

  const [crawlers, setCrawlers] = useState<CrawlerConfig[]>([])
  const [crawlersLoading, setCrawlersLoading] = useState(true)
  const [editCrawlerId, setEditCrawlerId] = useState<string | null>(null)
  const [editForm, setEditForm] = useState<{ name: string; targetUrl: string; type: string; sourceName: string; scriptPath: string; schedule: string; keywords: string; categories: string }>({ name: '', targetUrl: '', type: 'bid', sourceName: '', scriptPath: '', schedule: '', keywords: '', categories: '' })
  const [showAddModal, setShowAddModal] = useState(false)
  const [addForm, setAddForm] = useState<{ name: string; targetUrl: string; type: string; sourceName: string; scriptPath: string; schedule: string; keywords: string; categories: string }>({ name: '', targetUrl: '', type: 'bid', sourceName: '', scriptPath: '', schedule: '0 */6 * * *', keywords: '', categories: '' })
  const [runModal, setRunModal] = useState<{ id: string; name: string } | null>(null)
  const [runResult, setRunResult] = useState<'running' | 'success' | 'error'>('running')

  const totalWeight = weights.reduce((s, w) => s + w.value, 0)

  const handleWeightChange = (changedKey: string, newValue: number) => {
    setWeights(prev => {
      const changed = prev.find(w => w.key === changedKey)
      if (!changed) return prev

      const others = prev.filter(w => w.key !== changedKey)
      const oldOthersSum = others.reduce((s, w) => s + w.value, 0)
      const remaining = 100 - newValue

      let result = prev.map(w => {
        if (w.key === changedKey) return { ...w, value: newValue }
        if (oldOthersSum === 0) return { ...w, value: Math.floor(remaining / others.length) }
        return { ...w, value: Math.round(remaining * w.value / oldOthersSum) }
      })

      let sum = result.reduce((s, w) => s + w.value, 0)
      let diff = 100 - sum
      for (let i = 0; i < result.length && diff !== 0; i++) {
        if (result[i].key === changedKey) continue
        const adjusted = result[i].value + diff
        if (adjusted >= result[i].min && adjusted <= result[i].max) {
          result[i] = { ...result[i], value: adjusted }
          diff = 0
        }
      }
      if (diff !== 0) {
        result = result.map(w => {
          if (w.key === changedKey) {
            const adjusted = w.value + diff
            return { ...w, value: Math.max(w.min, Math.min(w.max, adjusted)) }
          }
          return w
        })
      }

      return result
    })
  }

  const computeNewScore = (currentScore: number) => {
    const w = weights.reduce((acc, item) => ({ ...acc, [item.key]: item.value }), {} as Record<string, number>)
    const delta =
      (w.amount - 30) * 0.3 +
      (w.match - 25) * 0.25 +
      (w.level - 20) * 0.2 +
      (w.timeliness - 15) * 0.15 +
      (w.history - 10) * 0.1
    return Math.round(Math.max(0, Math.min(100, currentScore + delta)))
  }

  const handleSave = () => {
    setSaved(true)
    setTimeout(() => setSaved(false), 2000)
  }

  const handleAddKeyword = () => {
    if (!newWord.trim()) return
    setKeywords(prev => [
      ...prev,
      { id: nextKeywordId, word: newWord.trim(), category: newCategory, weight: newWeight, matchCount: 0, enabled: true },
    ])
    setNextKeywordId(prev => prev + 1)
    setNewWord('')
    setNewWeight(5)
  }

  const toggleKeyword = (id: number) => {
    setKeywords(prev => prev.map(k => k.id === id ? { ...k, enabled: !k.enabled } : k))
  }

  const deleteKeyword = (id: number) => {
    setKeywords(prev => prev.filter(k => k.id !== id))
  }

  const editKeyword = (id: number) => {
    const kw = keywords.find(k => k.id === id)
    if (!kw) return
    setNewWord(kw.word)
    setNewCategory(kw.category)
    setNewWeight(kw.weight)
    setKeywords(prev => prev.filter(k => k.id !== id))
  }

  const handleBatchImport = () => {
    const lines = batchText.split('\n').map(l => l.trim()).filter(Boolean)
    const newKeywords: Keyword[] = lines.map((line, i) => ({
      id: nextKeywordId + i,
      word: line,
      category: '工程建材',
      weight: 5,
      matchCount: 0,
      enabled: true,
    }))
    setKeywords(prev => [...prev, ...newKeywords])
    setNextKeywordId(prev => prev + lines.length)
    setBatchText('')
    setShowBatchModal(false)
  }

  const handleClearAll = () => {
    setKeywords([])
    setShowClearModal(false)
  }

  const handleDistributeChange = (level: string, person: string) => {
    setDistribution(prev => prev.map(r => r.level === level ? { ...r, person } : r))
  }

  const formulaText = `综合评分 = 预估金额×${weights.find(w => w.key === 'amount')?.value}% + 匹配度×${weights.find(w => w.key === 'match')?.value}% + 甲方级别×${weights.find(w => w.key === 'level')?.value}% + 时效性×${weights.find(w => w.key === 'timeliness')?.value}% + 历史成交×${weights.find(w => w.key === 'history')?.value}%`

  useEffect(() => {
    fetch(CRAWLER_API)
      .then(r => r.json())
      .then((data: CrawlerConfig[]) => setCrawlers(data))
      .catch(() => {})
      .finally(() => setCrawlersLoading(false))
  }, [])

  const startEditCrawler = (c: CrawlerConfig) => {
    setEditCrawlerId(c.id)
    setEditForm({
      name: c.name,
      targetUrl: c.targetUrl,
      type: c.type,
      sourceName: c.sourceName || '',
      scriptPath: c.scriptPath || '',
      schedule: c.schedule || '',
      keywords: c.keywords ? (() => { try { return JSON.parse(c.keywords).join(', ') } catch { return c.keywords } })() : '',
      categories: c.categories ? (() => { try { return JSON.parse(c.categories).join(', ') } catch { return c.categories } })() : '',
    })
  }

  const saveCrawler = async (id: string) => {
    const payload: Record<string, string | null> = { name: editForm.name, targetUrl: editForm.targetUrl, type: editForm.type, sourceName: editForm.sourceName || null, scriptPath: editForm.scriptPath || null }
    if (editForm.schedule) payload.schedule = editForm.schedule
    const kwArr = editForm.keywords.split(/[,，、\s]+/).filter(Boolean)
    payload.keywords = kwArr.length > 0 ? JSON.stringify(kwArr) : ''
    const catArr = editForm.categories.split(/[,，、\s]+/).filter(Boolean)
    payload.categories = catArr.length > 0 ? JSON.stringify(catArr) : ''
    try {
      const res = await fetch(`${CRAWLER_API}/${id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      })
      if (!res.ok) throw new Error()
      const updated: CrawlerConfig = await res.json()
      setCrawlers(prev => prev.map(c => c.id === id ? updated : c))
      setEditCrawlerId(null)
    } catch { alert('保存失败') }
  }

  const toggleCrawlerStatus = async (id: string, currentStatus: string) => {
    const action = currentStatus === 'active' ? 'pause' : 'resume'
    try {
      await fetch(`${CRAWLER_API}/${id}/${action}`, { method: 'POST' })
      setCrawlers(prev => prev.map(c => c.id === id ? { ...c, status: action === 'pause' ? 'paused' : 'active' } : c))
    } catch { alert('操作失败') }
  }

  const runCrawler = async (id: string, name: string) => {
    setRunResult('running')
    setRunModal({ id, name })
    try {
      await fetch(`${CRAWLER_API}/${id}/run`, { method: 'POST' })
      setRunResult('success')
    } catch { setRunResult('error') }
  }

  const addCrawler = async () => {
    if (!addForm.name.trim() || !addForm.targetUrl.trim()) return
    const kwArr = addForm.keywords.split(/[,，、\s]+/).filter(Boolean)
    const catArr = addForm.categories.split(/[,，、\s]+/).filter(Boolean)
    try {
      const res = await fetch(CRAWLER_API, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: addForm.name,
          targetUrl: addForm.targetUrl,
          type: addForm.type,
          sourceName: addForm.sourceName || null,
          scriptPath: addForm.scriptPath || null,
          schedule: addForm.schedule || null,
          keywords: kwArr.length > 0 ? JSON.stringify(kwArr) : null,
          categories: catArr.length > 0 ? JSON.stringify(catArr) : null,
        }),
      })
      if (!res.ok) throw new Error()
      const created: CrawlerConfig = await res.json()
      setCrawlers(prev => [...prev, created])
      setShowAddModal(false)
      setAddForm({ name: '', targetUrl: '', type: 'bid', sourceName: '', scriptPath: '', schedule: '0 */6 * * *', keywords: '', categories: '' })
    } catch { alert('创建失败') }
  }

  const getStatusStyle = (status: string) => {
    const map: Record<string, string> = {
      active: 'bg-emerald-50 text-emerald-700 border-emerald-200',
      paused: 'bg-amber-50 text-amber-700 border-amber-200',
      error: 'bg-rose-50 text-rose-700 border-rose-200',
    }
    return map[status] || 'bg-slate-100 text-slate-500'
  }

  const getTypeLabel = (type: string) => TYPE_OPTIONS.find(t => t.value === type)?.label || type

  const getCronLabel = (cron: string | null) => {
    if (!cron) return '手动'
    return CRON_PRESETS.find(p => p.value === cron)?.label || cron
  }

  return (
    <div className="max-w-[1400px] mx-auto space-y-6">
      {/* Header */}
      <div className="flex justify-between items-end">
        <div>
          <h1 className="text-2xl font-bold text-on-background">规则中心</h1>
          <p className="text-sm text-on-surface-variant mt-1">维护线索评分权重，支持手动调整并触发重算</p>
        </div>
        <div className="flex gap-3">
          <button
            onClick={() => alert('规则版本已提交，待审批发布')}
            className="px-4 py-2 bg-white border border-border-subtle text-on-surface-variant rounded-lg text-sm flex items-center gap-2 hover:bg-surface-container-low transition-colors"
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" /></svg>
            发布新版本
          </button>
          <button
            onClick={handleSave}
            className="px-4 py-2 bg-secondary text-white rounded-lg text-sm flex items-center gap-2 hover:opacity-90 transition-opacity shadow-md"
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" /></svg>
            {saved ? '已保存' : '保存并重算评分'}
          </button>
        </div>
      </div>

      {/* Warning Banner */}
      <div className="bg-amber-50 border border-amber-200 rounded-xl p-4 flex items-start gap-3">
        <svg className="w-5 h-5 text-amber-600 mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z" /></svg>
        <div>
          <p className="font-semibold text-amber-800 text-sm">规则变更提醒</p>
          <p className="text-sm text-amber-700 mt-1">修改权重后会影响全部待处理线索评分，请确认后再发布。</p>
        </div>
      </div>

      {/* Tabs */}
      <div className="flex gap-1 bg-slate-100 p-1 rounded-lg w-fit">
        {[
          { key: 'weights' as const, label: '评分权重配置' },
          { key: 'keywords' as const, label: '关键词库管理' },
          { key: 'client' as const, label: '甲方分级规则' },
          { key: 'crawlers' as const, label: '采集器配置' },
        ].map(tab => (
          <button
            key={tab.key}
            onClick={() => setActiveTab(tab.key)}
            className={`px-5 py-2 text-sm font-semibold rounded-md transition-all ${
              activeTab === tab.key
                ? 'bg-secondary text-white shadow-sm'
                : 'text-on-surface-variant hover:text-on-background'
            }`}
          >
            {tab.label}
          </button>
        ))}
      </div>

      {/* Tab 1: 评分权重配置 */}
      {activeTab === 'weights' && (
        <div className="grid grid-cols-12 gap-4">
          <div className="col-span-8 space-y-4">
            {/* Formula Display */}
            <div className="bg-white rounded-xl border border-border-subtle p-6 shadow-sm">
              <div className="flex items-center justify-between mb-5">
                <h3 className="text-base font-semibold">评分权重配置</h3>
                <span className="px-3 py-1 bg-blue-50 text-blue-700 rounded-full text-xs font-bold">标准模型 V2.0</span>
              </div>
              <div className="bg-slate-50 rounded-lg p-3 mb-5">
                <div className="text-[10px] font-bold tracking-wider text-on-surface-variant uppercase mb-2">综合评分计算公式</div>
                <p className="text-sm font-medium text-on-background">{formulaText}</p>
              </div>
              <div className="space-y-5">
                {weights.map(w => (
                  <div key={w.key}>
                    <div className="flex justify-between items-center mb-2">
                      <label className="text-sm font-semibold text-on-background">{w.label}</label>
                      <span className="text-sm font-bold text-secondary">{w.value}%</span>
                    </div>
                    <input
                      type="range"
                      min={w.min}
                      max={w.max}
                      value={w.value}
                      onChange={e => handleWeightChange(w.key, parseInt(e.target.value))}
                      className="w-full accent-secondary"
                    />
                    <div className="flex justify-between text-[10px] text-on-surface-variant mt-0.5">
                      <span>{w.min}%</span>
                      <span>{w.max}%</span>
                    </div>
                  </div>
                ))}
              </div>
              <div className="mt-4 pt-4 border-t border-border-subtle flex justify-between items-center text-sm">
                <span className="text-on-surface-variant">权重合计</span>
                <span className={`font-bold text-lg ${totalWeight === 100 ? 'text-emerald-600' : 'text-rose-600'}`}>
                  {totalWeight}%
                  {totalWeight === 100 && <span className="ml-2 text-xs text-emerald-500 font-normal">✓ 已平衡</span>}
                </span>
              </div>
            </div>

            {/* Impact Preview */}
            <div className="bg-white rounded-xl border border-border-subtle p-6 shadow-sm">
              <h3 className="text-base font-semibold mb-4">影响预估</h3>
              <div className="space-y-3">
                {EXAMPLE_LEADS.map((lead, i) => {
                  const newScore = computeNewScore(lead.score)
                  const diff = newScore - lead.score
                  return (
                    <div key={i} className="flex items-center justify-between p-3 bg-slate-50 rounded-lg border border-border-subtle">
                      <div className="flex-1">
                        <p className="text-sm font-medium">{lead.name}</p>
                        <p className="text-xs text-on-surface-variant">预估金额 {lead.amount}</p>
                      </div>
                      <div className="flex items-center gap-4">
                        <div className="text-center">
                          <div className="text-[10px] text-on-surface-variant">当前</div>
                          <div className="text-sm font-bold">{lead.score}</div>
                        </div>
                        <svg className="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
                        <div className="text-center">
                          <div className="text-[10px] text-on-surface-variant">调整后</div>
                          <div className={`text-sm font-bold ${diff > 0 ? 'text-emerald-600' : diff < 0 ? 'text-rose-600' : ''}`}>{newScore}</div>
                        </div>
                        <div className={`text-xs font-semibold px-2 py-1 rounded ${diff > 0 ? 'bg-emerald-50 text-emerald-700' : diff < 0 ? 'bg-rose-50 text-rose-700' : 'bg-slate-100 text-slate-500'}`}>
                          {diff > 0 ? '+' : ''}{diff}分
                        </div>
                      </div>
                    </div>
                  )
                })}
              </div>
            </div>
          </div>

          {/* Sidebar */}
          <div className="col-span-4 space-y-4">
            <div className="bg-white rounded-xl border border-border-subtle p-6 shadow-sm">
              <h3 className="text-base font-semibold mb-4">影响概览</h3>
              <div className="space-y-3">
                <div className="p-4 rounded-lg bg-slate-50 border border-border-subtle">
                  <div className="text-xs text-on-surface-variant">待重算线索</div>
                  <div className="text-2xl font-bold mt-1">
                    {keywords.length > 0 ? '1,248' : '1,248'}
                  </div>
                </div>
                <div className="p-4 rounded-lg bg-emerald-50 border border-emerald-200">
                  <div className="text-xs text-emerald-700">预计评分上升</div>
                  <div className="text-2xl font-bold mt-1 text-emerald-700">
                    +{(() => {
                      const avgDiff = EXAMPLE_LEADS.reduce((s, l) => s + computeNewScore(l.score) - l.score, 0) / EXAMPLE_LEADS.length
                      return avgDiff > 0 ? avgDiff.toFixed(1) : '0.0'
                    })()}%
                  </div>
                </div>
                <div className="p-4 rounded-lg bg-rose-50 border border-rose-200">
                  <div className="text-xs text-rose-700">预计评分下降</div>
                  <div className="text-2xl font-bold mt-1 text-rose-700">
                    -{(() => {
                      const avgDiff = EXAMPLE_LEADS.reduce((s, l) => s + computeNewScore(l.score) - l.score, 0) / EXAMPLE_LEADS.length
                      return avgDiff < 0 ? Math.abs(avgDiff).toFixed(1) : '0.0'
                    })()}%
                  </div>
                </div>
              </div>
            </div>

            <div className="bg-white rounded-xl border border-border-subtle p-6 shadow-sm">
              <h3 className="text-base font-semibold mb-4">版本历史</h3>
              <div className="space-y-2">
                {[
                  { v: 'V2.0', time: '04-26 18:10', current: true },
                  { v: 'V1.9', time: '04-20 14:30', current: false },
                  { v: 'V1.8', time: '04-12 09:15', current: false },
                  { v: 'V1.7', time: '04-03 16:45', current: false },
                ].map((ver, i) => (
                  <div key={i} className={`flex justify-between items-center p-2 rounded ${ver.current ? 'bg-blue-50 border border-blue-100' : 'hover:bg-slate-50'}`}>
                    <div>
                      <span className={`font-semibold text-sm ${ver.current ? 'text-blue-700' : ''}`}>{ver.v}</span>
                      {ver.current && <span className="text-[10px] text-blue-400 ml-2">当前</span>}
                    </div>
                    <div className="flex items-center gap-2">
                      <span className="text-xs text-on-surface-variant">{ver.time}</span>
                      {!ver.current && (
                        <button onClick={() => alert(`已回滚至 ${ver.v}`)} className="text-xs text-blue-700 hover:underline">回滚</button>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Tab 2: 关键词库管理 */}
      {activeTab === 'keywords' && (
        <div className="space-y-4">
          {/* Add Keyword Row */}
          <div className="bg-white rounded-xl border border-border-subtle p-6 shadow-sm">
            <h3 className="text-base font-semibold mb-4">添加关键词</h3>
            <div className="flex items-end gap-3">
              <div className="flex-1">
                <span className="text-[10px] font-bold tracking-wider text-on-surface-variant uppercase block mb-1">关键词</span>
                <input
                  type="text"
                  value={newWord}
                  onChange={e => setNewWord(e.target.value)}
                  placeholder="输入关键词"
                  className="w-full bg-surface-container-low border border-border-subtle rounded-lg px-3 py-2 text-sm focus:ring-secondary outline-none"
                />
              </div>
              <div className="w-36">
                <span className="text-[10px] font-bold tracking-wider text-on-surface-variant uppercase block mb-1">所属品类</span>
                <select
                  value={newCategory}
                  onChange={e => setNewCategory(e.target.value)}
                  className="w-full bg-surface-container-low border border-border-subtle rounded-lg px-3 py-2 text-sm focus:ring-secondary outline-none"
                >
                  {CATEGORIES.map(c => <option key={c}>{c}</option>)}
                </select>
              </div>
              <div className="w-24">
                <span className="text-[10px] font-bold tracking-wider text-on-surface-variant uppercase block mb-1">权重 (1-10)</span>
                <input
                  type="number"
                  min={1}
                  max={10}
                  value={newWeight}
                  onChange={e => setNewWeight(Math.max(1, Math.min(10, parseInt(e.target.value) || 1)))}
                  className="w-full bg-surface-container-low border border-border-subtle rounded-lg px-3 py-2 text-sm focus:ring-secondary outline-none"
                />
              </div>
              <button
                onClick={handleAddKeyword}
                disabled={!newWord.trim()}
                className="px-4 py-2 bg-secondary text-white rounded-lg text-sm font-semibold hover:opacity-90 transition-opacity disabled:opacity-40 shadow-sm"
              >
                + 添加
              </button>
            </div>
          </div>

          {/* Keyword Table */}
          <div className="bg-white rounded-xl border border-border-subtle shadow-sm overflow-hidden">
            <div className="p-4 border-b border-border-subtle flex justify-between items-center">
              <h3 className="text-base font-semibold">关键词列表</h3>
              <div className="flex gap-2">
                <button
                  onClick={() => setShowBatchModal(true)}
                  className="px-3 py-1.5 bg-white border border-border-subtle text-on-surface-variant rounded-lg text-xs flex items-center gap-1.5 hover:bg-slate-50 transition-colors"
                >
                  <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" /></svg>
                  批量导入
                </button>
                <button
                  onClick={() => setShowClearModal(true)}
                  className="px-3 py-1.5 bg-white border border-border-subtle text-rose-600 rounded-lg text-xs flex items-center gap-1.5 hover:bg-rose-50 transition-colors"
                >
                  <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
                  一键清空
                </button>
              </div>
            </div>
            <table className="w-full text-left">
              <thead className="bg-slate-50 border-b border-border-subtle">
                <tr>
                  <th className="p-4 text-[10px] font-bold tracking-wider text-on-surface-variant uppercase">关键词</th>
                  <th className="p-4 text-[10px] font-bold tracking-wider text-on-surface-variant uppercase">所属品类</th>
                  <th className="p-4 text-[10px] font-bold tracking-wider text-on-surface-variant uppercase text-right">权重</th>
                  <th className="p-4 text-[10px] font-bold tracking-wider text-on-surface-variant uppercase text-right">匹配次数</th>
                  <th className="p-4 text-[10px] font-bold tracking-wider text-on-surface-variant uppercase">启用状态</th>
                  <th className="p-4 text-[10px] font-bold tracking-wider text-on-surface-variant uppercase">操作</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-border-subtle">
                {keywords.length === 0 ? (
                  <tr>
                    <td colSpan={6} className="p-8 text-center text-sm text-on-surface-variant">暂无关键词，请添加</td>
                  </tr>
                ) : (
                  keywords.map(kw => (
                    <tr key={kw.id} className="hover:bg-slate-50 transition-colors">
                      <td className="p-4 text-sm font-medium">{kw.word}</td>
                      <td className="p-4 text-sm text-on-surface-variant">
                        <span className="px-2 py-0.5 bg-slate-100 text-on-surface-variant text-[10px] font-medium rounded">{kw.category}</span>
                      </td>
                      <td className="p-4 text-sm text-right font-semibold">{kw.weight}</td>
                      <td className="p-4 text-sm text-right text-on-surface-variant">{kw.matchCount}</td>
                      <td className="p-4">
                        <button
                          onClick={() => toggleKeyword(kw.id)}
                          className={`relative w-9 h-5 rounded-full transition-colors ${kw.enabled ? 'bg-secondary' : 'bg-slate-300'}`}
                        >
                          <span className={`absolute top-0.5 left-0.5 w-4 h-4 bg-white rounded-full transition-transform shadow-sm ${kw.enabled ? 'translate-x-4' : 'translate-x-0'}`} />
                        </button>
                      </td>
                      <td className="p-4">
                        <div className="flex items-center gap-2">
                          <button onClick={() => editKeyword(kw.id)} className="text-xs text-blue-600 hover:underline">编辑</button>
                          <span className="text-slate-300">|</span>
                          <button onClick={() => deleteKeyword(kw.id)} className="text-xs text-rose-500 hover:underline">删除</button>
                        </div>
                      </td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
            <div className="bg-slate-50 px-4 py-2 border-t border-border-subtle flex justify-between items-center">
              <span className="text-xs text-on-surface-variant">共 {keywords.length} 个关键词</span>
              {keywords.length > 0 && (
                <span className="text-[10px] text-on-surface-variant">
                  启用 {keywords.filter(k => k.enabled).length} 个 · 停用 {keywords.filter(k => !k.enabled).length} 个
                </span>
              )}
            </div>
          </div>
        </div>
      )}

      {/* Tab 4: 采集器配置 */}
      {activeTab === 'crawlers' && (
        <div className="space-y-4">
          {/* Header */}
          <div className="flex justify-between items-center">
            <p className="text-sm text-on-surface-variant">管理招采信息采集器，配置抓取时间和过滤关键词</p>
            <button
              onClick={() => setShowAddModal(true)}
              className="px-4 py-2 bg-secondary text-white rounded-lg text-sm font-semibold flex items-center gap-2 hover:opacity-90 shadow-sm"
            >
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" /></svg>
              添加采集器
            </button>
          </div>

          {/* Crawler List */}
          <div className="bg-white rounded-xl border border-border-subtle shadow-sm overflow-hidden">
            {crawlersLoading ? (
              <div className="p-8 text-center text-sm text-on-surface-variant">加载中...</div>
            ) : crawlers.length === 0 ? (
              <div className="p-8 text-center text-sm text-on-surface-variant">暂无采集器配置</div>
            ) : (
              <table className="w-full text-left">
                <thead className="bg-slate-50 border-b border-border-subtle">
                  <tr>
                    <th className="p-3 text-[10px] font-bold tracking-wider text-on-surface-variant uppercase">采集器名称</th>
                    <th className="p-3 text-[10px] font-bold tracking-wider text-on-surface-variant uppercase">目标网址</th>
                    <th className="p-3 text-[10px] font-bold tracking-wider text-on-surface-variant uppercase">抓取定时</th>
                    <th className="p-3 text-[10px] font-bold tracking-wider text-on-surface-variant uppercase">过滤关键词</th>
                    <th className="p-3 text-[10px] font-bold tracking-wider text-on-surface-variant uppercase">状态</th>
                    <th className="p-3 text-[10px] font-bold tracking-wider text-on-surface-variant uppercase">运行统计</th>
                    <th className="p-3 text-[10px] font-bold tracking-wider text-on-surface-variant uppercase">操作</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-border-subtle">
                  {crawlers.map(c => (
                    <tr key={c.id} className="hover:bg-slate-50 transition-colors">
                      {editCrawlerId === c.id ? (
                        <>
                          <td className="p-3">
                            <input value={editForm.name} onChange={e => setEditForm(f => ({ ...f, name: e.target.value }))} className="w-full border border-border-subtle rounded px-2 py-1 text-sm outline-none focus:ring-2 focus:ring-secondary/20" />
                          </td>
                          <td className="p-3">
                            <input value={editForm.targetUrl} onChange={e => setEditForm(f => ({ ...f, targetUrl: e.target.value }))} className="w-full border border-border-subtle rounded px-2 py-1 text-sm outline-none focus:ring-2 focus:ring-secondary/20" />
                          </td>
                          <td className="p-3">
                            <select value={editForm.schedule} onChange={e => setEditForm(f => ({ ...f, schedule: e.target.value }))} className="border border-border-subtle rounded px-2 py-1 text-xs outline-none max-w-[140px]">
                              {CRON_PRESETS.map(p => <option key={p.value} value={p.value}>{p.label}</option>)}
                            </select>
                          </td>
                          <td className="p-3">
                            <input value={editForm.keywords} onChange={e => setEditForm(f => ({ ...f, keywords: e.target.value }))} placeholder="用逗号分隔" className="w-full border border-border-subtle rounded px-2 py-1 text-sm outline-none focus:ring-2 focus:ring-secondary/20" />
                          </td>
                          <td className="p-3">
                            <span className={`px-2 py-0.5 text-[10px] font-medium rounded-full border ${getStatusStyle(c.status)}`}>
                              {{ active: '运行中', paused: '已暂停', error: '异常' }[c.status] || c.status}
                            </span>
                          </td>
                          <td className="p-3 text-xs text-on-surface-variant">
                            成功 {c.successRuns}/{c.totalRuns} 次
                          </td>
                          <td className="p-3">
                            <div className="flex gap-2">
                              <button onClick={() => saveCrawler(c.id)} className="text-xs text-emerald-600 hover:underline font-semibold">保存</button>
                              <button onClick={() => setEditCrawlerId(null)} className="text-xs text-slate-500 hover:underline">取消</button>
                            </div>
                          </td>
                        </>
                      ) : (
                        <>
                          <td className="p-3 text-sm font-semibold">{c.name}</td>
                          <td className="p-3 text-xs text-on-surface-variant max-w-[200px] truncate">{c.targetUrl}</td>
                          <td className="p-3 text-xs text-on-surface-variant">{getCronLabel(c.schedule)}</td>
                          <td className="p-3">
                            {c.keywords ? (
                              <div className="flex flex-wrap gap-1">
                                {(JSON.parse(c.keywords) as string[]).slice(0, 3).map((kw, i) => (
                                  <span key={i} className="px-1.5 py-0.5 bg-blue-50 text-blue-600 text-[10px] rounded">{kw}</span>
                                ))}
                                {(JSON.parse(c.keywords) as string[]).length > 3 && (
                                  <span className="text-[10px] text-slate-400">+{JSON.parse(c.keywords).length - 3}</span>
                                )}
                              </div>
                            ) : <span className="text-xs text-slate-400">全部</span>}
                          </td>
                           <td className="p-3">
                            <button
                              onClick={() => toggleCrawlerStatus(c.id, c.status)}
                              className={`px-3 py-1 text-[11px] font-semibold rounded-md transition-all cursor-pointer ${
                                c.status === 'active'
                                  ? 'bg-amber-50 text-amber-700 hover:bg-amber-100 active:bg-amber-200'
                                  : 'bg-emerald-50 text-emerald-700 hover:bg-emerald-100 active:bg-emerald-200'
                              }`}
                            >
                              {{ active: '点击暂停', paused: '点击启动', error: '重启' }[c.status] || c.status}
                            </button>
                          </td>
                          <td className="p-3 text-xs text-on-surface-variant">
                            <div>成功 <span className="font-semibold text-emerald-600">{c.successRuns}</span> / {c.totalRuns} 次</div>
                            {c.failedRuns > 0 && <div>失败 <span className="font-semibold text-rose-500">{c.failedRuns}</span> 次</div>}
                            {c.lastRunAt && <div className="text-[10px] text-slate-400">上次: {c.lastRunAt.slice(0, 16)}</div>}
                          </td>
                          <td className="p-3">
                            <div className="flex items-center gap-2">
                              <button onClick={() => runCrawler(c.id, c.name)} className="text-xs text-blue-600 hover:underline flex items-center gap-1">
                                <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                                运行
                              </button>
                              <button onClick={() => startEditCrawler(c)} className="text-xs text-slate-500 hover:underline">编辑</button>
                            </div>
                          </td>
                        </>
                      )}
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
          </div>

          {/* Cron Reference */}
          <div className="bg-white rounded-xl border border-border-subtle p-4 shadow-sm">
            <h4 className="text-xs font-semibold text-on-surface-variant mb-2">Cron 定时说明</h4>
            <div className="grid grid-cols-4 gap-2 text-[10px] text-on-surface-variant">
              <span><b>分</b> 0-59</span>
              <span><b>时</b> 0-23</span>
              <span><b>日</b> 1-31</span>
              <span><b>月</b> 1-12</span>
              <span><b>周</b> 0-7 (0/7=日)</span>
              <span className="col-span-3">示例: <code className="bg-slate-100 px-1 rounded">0 8 * * 1-5</code> = 工作日早8点</span>
            </div>
          </div>
        </div>
      )}

      {/* Tab 3: 甲方分级规则 */}
      {activeTab === 'client' && (
        <div className="space-y-4">
          {/* Criteria Card */}
          <div className="bg-white rounded-xl border border-border-subtle p-6 shadow-sm">
            <h3 className="text-base font-semibold mb-4">分级标准说明</h3>
            <div className="grid grid-cols-5 gap-3">
              {[
                { level: 'S级', label: '核心跟踪', desc: '高优先级推送，专属 BD 跟进', color: 'bg-blue-700 text-white', textColor: 'text-blue-100' },
                { level: 'A级', label: '重点跟踪', desc: '正常优先级，自动分配负责人', color: 'bg-amber-50 border border-amber-200 text-amber-700', textColor: 'text-amber-600' },
                { level: 'B级', label: '探查跟踪', desc: '需人工探查后决定', color: 'bg-slate-50 border border-slate-200', textColor: 'text-slate-500' },
                { level: 'C级', label: '常规跟踪', desc: '低优先级，系统自动推送', color: 'bg-rose-50 border border-rose-200 text-rose-600', textColor: 'text-rose-500' },
                { level: 'D级', label: '暂不跟踪', desc: '不符合任何分级条件', color: 'bg-slate-50 border border-slate-200 text-slate-400', textColor: 'text-slate-400' },
              ].map(item => (
                <div key={item.level} className={`p-3 rounded-lg ${item.color}`}>
                  <div className={`font-bold text-lg`}>{item.level}</div>
                  <div className={`text-xs font-semibold ${item.textColor}`}>{item.label}</div>
                  <div className={`text-[10px] mt-1 ${item.textColor}`}>{item.desc}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Threshold Configuration */}
          <div className="bg-white rounded-xl border border-border-subtle p-6 shadow-sm">
            <h3 className="text-base font-semibold mb-4">阈值配置</h3>
            <div className="space-y-4">
              {/* S级 */}
              <div className="p-4 bg-blue-50 rounded-lg border border-blue-100">
                <div className="flex items-center gap-2 mb-3">
                  <span className="px-2 py-0.5 bg-blue-700 text-white text-xs font-bold rounded">S级</span>
                  <span className="text-sm font-semibold text-blue-800">核心跟踪</span>
                </div>
                <div className="grid grid-cols-2 gap-6">
                  <div>
                    <div className="flex justify-between items-center mb-1">
                      <label className="text-xs font-medium text-blue-700">预估金额 ≥</label>
                      <span className="text-sm font-bold text-blue-700">{sAmount}万</span>
                    </div>
                    <input type="range" min={50} max={500} step={10} value={sAmount} onChange={e => setSAmount(parseInt(e.target.value))} className="w-full accent-blue-700" />
                  </div>
                  <div>
                    <div className="flex justify-between items-center mb-1">
                      <label className="text-xs font-medium text-blue-700">年合作次数 ≥</label>
                      <span className="text-sm font-bold text-blue-700">{sCoop}次</span>
                    </div>
                    <input type="range" min={1} max={10} value={sCoop} onChange={e => setSCoop(parseInt(e.target.value))} className="w-full accent-blue-700" />
                  </div>
                </div>
              </div>

              {/* A级 */}
              <div className="p-4 bg-amber-50 rounded-lg border border-amber-100">
                <div className="flex items-center gap-2 mb-3">
                  <span className="px-2 py-0.5 bg-amber-500 text-white text-xs font-bold rounded">A级</span>
                  <span className="text-sm font-semibold text-amber-800">重点跟踪</span>
                </div>
                <div className="grid grid-cols-2 gap-6">
                  <div>
                    <div className="flex justify-between items-center mb-1">
                      <label className="text-xs font-medium text-amber-700">预估金额 ≥</label>
                      <span className="text-sm font-bold text-amber-700">{aAmount}万</span>
                    </div>
                    <input type="range" min={10} max={200} step={10} value={aAmount} onChange={e => setAAmount(parseInt(e.target.value))} className="w-full accent-amber-500" />
                  </div>
                  <div>
                    <div className="flex justify-between items-center mb-1">
                      <label className="text-xs font-medium text-amber-700">年合作次数 ≥</label>
                      <span className="text-sm font-bold text-amber-700">{aCoop}次</span>
                    </div>
                    <input type="range" min={1} max={10} value={aCoop} onChange={e => setACoop(parseInt(e.target.value))} className="w-full accent-amber-500" />
                  </div>
                </div>
              </div>

              {/* B级 */}
              <div className="p-4 bg-slate-50 rounded-lg border border-slate-200">
                <div className="flex items-center gap-2 mb-3">
                  <span className="px-2 py-0.5 bg-slate-500 text-white text-xs font-bold rounded">B级</span>
                  <span className="text-sm font-semibold text-slate-700">探查跟踪</span>
                </div>
                <div className="max-w-[50%]">
                  <div className="flex justify-between items-center mb-1">
                    <label className="text-xs font-medium text-slate-600">预估金额 ≥</label>
                    <span className="text-sm font-bold text-slate-600">{bAmount}万</span>
                  </div>
                  <input type="range" min={1} max={50} step={1} value={bAmount} onChange={e => setBAmount(parseInt(e.target.value))} className="w-full accent-slate-500" />
                </div>
              </div>

              {/* C级 */}
              <div className="p-4 bg-rose-50 rounded-lg border border-rose-100">
                <div className="flex items-center gap-2 mb-3">
                  <span className="px-2 py-0.5 bg-rose-400 text-white text-xs font-bold rounded">C级</span>
                  <span className="text-sm font-semibold text-rose-700">常规跟踪</span>
                </div>
                <div className="max-w-[50%]">
                  <div className="flex justify-between items-center mb-1">
                    <label className="text-xs font-medium text-rose-600">预估金额 ≥</label>
                    <span className="text-sm font-bold text-rose-600">{cAmount}万</span>
                  </div>
                  <input type="range" min={0.5} max={10} step={0.5} value={cAmount} onChange={e => setCAmount(parseFloat(e.target.value))} className="w-full accent-rose-400" />
                </div>
              </div>

              {/* D级 */}
              <div className="p-4 bg-slate-50 rounded-lg border border-slate-200 border-dashed">
                <div className="flex items-center gap-2">
                  <span className="px-2 py-0.5 bg-slate-300 text-white text-xs font-bold rounded">D级</span>
                  <span className="text-sm font-semibold text-slate-500">暂不跟踪</span>
                  <span className="text-xs text-slate-400 ml-2">—— 不符合以上任何分级条件的线索自动归入 D 级</span>
                </div>
              </div>
            </div>
          </div>

          {/* Auto Distribution */}
          <div className="bg-white rounded-xl border border-border-subtle p-6 shadow-sm">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-base font-semibold">自动分发策略</h3>
              <div className="flex items-center gap-2">
                <span className="text-xs text-on-surface-variant">启用自动分发</span>
                <button
                  onClick={() => setAutoDistribute(!autoDistribute)}
                  className={`relative w-10 h-6 rounded-full transition-colors ${autoDistribute ? 'bg-secondary' : 'bg-slate-300'}`}
                >
                  <span className={`absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform shadow-sm ${autoDistribute ? 'translate-x-4' : 'translate-x-0'}`} />
                </button>
              </div>
            </div>
            <table className="w-full text-left">
              <thead className="bg-slate-50 border-b border-border-subtle">
                <tr>
                  <th className="p-3 text-[10px] font-bold tracking-wider text-on-surface-variant uppercase">级别</th>
                  <th className="p-3 text-[10px] font-bold tracking-wider text-on-surface-variant uppercase">说明</th>
                  <th className="p-3 text-[10px] font-bold tracking-wider text-on-surface-variant uppercase">负责人</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-border-subtle">
                {distribution.map(r => (
                  <tr key={r.level} className="hover:bg-slate-50 transition-colors">
                    <td className="p-3"><span className={`px-2 py-0.5 text-[10px] font-bold rounded border ${getLevelClass(r.level)}`}>{r.level}</span></td>
                    <td className="p-3 text-sm text-on-surface-variant">{r.label}</td>
                    <td className="p-3">
                      <select
                        value={r.person}
                        onChange={e => handleDistributeChange(r.level, e.target.value)}
                        disabled={!autoDistribute}
                        className="bg-surface-container-low border border-border-subtle rounded px-3 py-1.5 text-sm focus:ring-secondary outline-none disabled:opacity-50"
                      >
                        {PERSONS.map(p => <option key={p}>{p}</option>)}
                      </select>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          {/* Execution Logs */}
          <div className="bg-white rounded-xl border border-border-subtle shadow-sm">
            <button
              onClick={() => setShowLogs(!showLogs)}
              className="w-full p-4 flex items-center justify-between hover:bg-slate-50 transition-colors"
            >
              <h3 className="text-base font-semibold flex items-center gap-2">
                <svg className="w-4 h-4 text-on-surface-variant" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
                规则执行日志
              </h3>
              <div className="flex items-center gap-2">
                <span className="text-xs text-on-surface-variant">最近 10 条</span>
                <svg className={`w-4 h-4 text-on-surface-variant transition-transform ${showLogs ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
              </div>
            </button>
            {showLogs && (
              <div className="border-t border-border-subtle">
                <table className="w-full text-left">
                  <thead className="bg-slate-50">
                    <tr>
                      <th className="p-3 text-[10px] font-bold tracking-wider text-on-surface-variant uppercase">时间</th>
                      <th className="p-3 text-[10px] font-bold tracking-wider text-on-surface-variant uppercase">线索</th>
                      <th className="p-3 text-[10px] font-bold tracking-wider text-on-surface-variant uppercase">匹配规则</th>
                      <th className="p-3 text-[10px] font-bold tracking-wider text-on-surface-variant uppercase">结果</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-border-subtle">
                    {EXECUTION_LOGS.map((log, i) => (
                      <tr key={i} className="hover:bg-slate-50 transition-colors text-sm">
                        <td className="p-3 text-on-surface-variant">{log.time}</td>
                        <td className="p-3 font-medium">{log.lead}</td>
                        <td className="p-3">
                          <span className="px-2 py-0.5 bg-blue-50 text-blue-700 text-[10px] font-medium rounded">{log.rule}</span>
                        </td>
                        <td className="p-3 text-on-surface-variant">{log.result}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        </div>
      )}

      {/* Batch Import Modal */}
      {showBatchModal && (
        <div className="fixed inset-0 z-50 bg-black/30 flex items-start justify-center pt-20" onClick={() => setShowBatchModal(false)}>
          <div className="bg-white rounded-xl shadow-2xl w-[480px] transform" onClick={e => e.stopPropagation()}>
            <div className="p-5 border-b border-border-subtle flex justify-between items-center">
              <h3 className="text-base font-semibold">批量导入关键词</h3>
              <button onClick={() => setShowBatchModal(false)} className="p-2 hover:bg-slate-100 rounded-full">
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
              </button>
            </div>
            <div className="p-5 space-y-4">
              <p className="text-sm text-on-surface-variant">每行一个关键词，将自动归入默认品类（可后续编辑）</p>
              <textarea
                value={batchText}
                onChange={e => setBatchText(e.target.value)}
                placeholder={"防火门\n配电箱\n电线电缆\n阀门\n钢材"}
                rows={8}
                className="w-full bg-surface-container-low border border-border-subtle rounded-lg px-3 py-2 text-sm focus:ring-secondary outline-none resize-none"
              />
              <div className="flex gap-3 pt-2">
                <button onClick={handleBatchImport} disabled={!batchText.trim()} className="flex-1 py-2 bg-secondary text-white rounded-lg text-sm font-semibold hover:opacity-90 disabled:opacity-50">确认导入</button>
                <button onClick={() => setShowBatchModal(false)} className="px-4 py-2 bg-white border border-border-subtle rounded-lg text-sm hover:bg-slate-50">取消</button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Add Crawler Modal */}
      {showAddModal && (
        <div className="fixed inset-0 z-50 bg-black/30 flex items-start justify-center pt-20" onClick={() => setShowAddModal(false)}>
          <div className="bg-white rounded-xl shadow-2xl w-[520px] transform" onClick={e => e.stopPropagation()}>
            <div className="p-5 border-b border-border-subtle flex justify-between items-center">
              <h3 className="text-base font-semibold">添加采集器</h3>
              <button onClick={() => setShowAddModal(false)} className="p-2 hover:bg-slate-100 rounded-full">
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
              </button>
            </div>
            <div className="p-5 space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="col-span-2">
                  <span className="text-[10px] font-bold tracking-wider text-on-surface-variant uppercase block mb-1">采集器名称</span>
                  <input value={addForm.name} onChange={e => setAddForm(f => ({ ...f, name: e.target.value }))} placeholder="如：中国电建阳光采购网" className="w-full border border-border-subtle rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-secondary/20" />
                </div>
                <div className="col-span-2">
                  <span className="text-[10px] font-bold tracking-wider text-on-surface-variant uppercase block mb-1">目标网址</span>
                  <input value={addForm.targetUrl} onChange={e => setAddForm(f => ({ ...f, targetUrl: e.target.value }))} placeholder="https://..." className="w-full border border-border-subtle rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-secondary/20" />
                </div>
                <div>
                  <span className="text-[10px] font-bold tracking-wider text-on-surface-variant uppercase block mb-1">来源名称</span>
                  <input value={addForm.sourceName} onChange={e => setAddForm(f => ({ ...f, sourceName: e.target.value }))} placeholder="如：中核集团（显示在线索来源）" className="w-full border border-border-subtle rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-secondary/20" />
                </div>
                <div>
                  <span className="text-[10px] font-bold tracking-wider text-on-surface-variant uppercase block mb-1">脚本文件名</span>
                  <input value={addForm.scriptPath} onChange={e => setAddForm(f => ({ ...f, scriptPath: e.target.value }))} placeholder="如：fetch-cnncecp.py（留空自动推断）" className="w-full border border-border-subtle rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-secondary/20" />
                </div>
                <div className="col-span-2">
                  <span className="text-[10px] font-bold tracking-wider text-on-surface-variant uppercase block mb-1">抓取定时</span>
                  <select value={addForm.schedule} onChange={e => setAddForm(f => ({ ...f, schedule: e.target.value }))} className="w-full border border-border-subtle rounded-lg px-3 py-2 text-sm outline-none">
                    {CRON_PRESETS.map(p => <option key={p.value} value={p.value}>{p.label}</option>)}
                  </select>
                </div>
                <div className="col-span-2">
                  <span className="text-[10px] font-bold tracking-wider text-on-surface-variant uppercase block mb-1">过滤关键词（逗号分隔，留空表示抓取全部）</span>
                  <input value={addForm.keywords} onChange={e => setAddForm(f => ({ ...f, keywords: e.target.value }))} placeholder="电缆, 防火门, 配电箱" className="w-full border border-border-subtle rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-secondary/20" />
                </div>
                <div className="col-span-2">
                  <span className="text-[10px] font-bold tracking-wider text-on-surface-variant uppercase block mb-1">所属品类（逗号分隔，留空表示全部品类）</span>
                  <input value={addForm.categories} onChange={e => setAddForm(f => ({ ...f, categories: e.target.value }))} placeholder="工程建材, 电力设备, 钢材" className="w-full border border-border-subtle rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-secondary/20" />
                </div>
              </div>
              <div className="flex gap-3 pt-2">
                <button onClick={addCrawler} disabled={!addForm.name.trim() || !addForm.targetUrl.trim()} className="flex-1 py-2 bg-secondary text-white rounded-lg text-sm font-semibold hover:opacity-90 disabled:opacity-50">确认添加</button>
                <button onClick={() => setShowAddModal(false)} className="px-4 py-2 bg-white border border-border-subtle rounded-lg text-sm hover:bg-slate-50">取消</button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Run Crawler Modal */}
      {runModal && (
        <div className="fixed inset-0 z-50 bg-black/30 flex items-start justify-center pt-20" onClick={() => runResult !== 'running' ? setRunModal(null) : undefined}>
          <div className="bg-white rounded-xl shadow-2xl w-[420px] transform" onClick={e => e.stopPropagation()}>
            <div className="p-6 text-center space-y-4">
              {runResult === 'running' ? (
                <>
                  <div className="mx-auto w-12 h-12 border-4 border-secondary/20 border-t-secondary rounded-full animate-spin" />
                  <div>
                    <h3 className="text-base font-semibold">抓取任务已提交</h3>
                    <p className="text-sm text-on-surface-variant mt-2">
                      「{runModal.name}」正在后台执行抓取，请稍候...
                    </p>
                  </div>
                  <button onClick={() => setRunModal(null)} className="w-full py-2.5 bg-white border border-border-subtle text-on-surface rounded-lg text-sm font-semibold hover:bg-surface-container-low transition-colors">
                    后台运行
                  </button>
                </>
              ) : runResult === 'success' ? (
                <>
                  <div className="mx-auto w-12 h-12 bg-emerald-50 rounded-full flex items-center justify-center">
                    <svg className="w-6 h-6 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg>
                  </div>
                  <div>
                    <h3 className="text-base font-semibold text-emerald-700">抓取完成</h3>
                    <p className="text-sm text-on-surface-variant mt-2">
                      「{runModal.name}」抓取任务已执行完毕，新线索已写入线索池。
                    </p>
                  </div>
                  <button onClick={() => setRunModal(null)} className="w-full py-2.5 bg-secondary text-white rounded-lg text-sm font-semibold hover:opacity-90">知道了</button>
                </>
              ) : (
                <>
                  <div className="mx-auto w-12 h-12 bg-rose-50 rounded-full flex items-center justify-center">
                    <svg className="w-6 h-6 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M6 18L18 6M6 6l12 12" /></svg>
                  </div>
                  <div>
                    <h3 className="text-base font-semibold text-rose-700">抓取失败</h3>
                    <p className="text-sm text-on-surface-variant mt-2">请检查脚本配置或查看后端日志。</p>
                  </div>
                  <button onClick={() => setRunModal(null)} className="w-full py-2.5 bg-secondary text-white rounded-lg text-sm font-semibold hover:opacity-90">关闭</button>
                </>
              )}
            </div>
          </div>
        </div>
      )}

      {/* Clear All Modal */}
      {showClearModal && (
        <div className="fixed inset-0 z-50 bg-black/30 flex items-start justify-center pt-20" onClick={() => setShowClearModal(false)}>
          <div className="bg-white rounded-xl shadow-2xl w-[400px] transform" onClick={e => e.stopPropagation()}>
            <div className="p-5 border-b border-border-subtle flex justify-between items-center">
              <h3 className="text-base font-semibold text-rose-600">确认清空</h3>
              <button onClick={() => setShowClearModal(false)} className="p-2 hover:bg-slate-100 rounded-full">
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
              </button>
            </div>
            <div className="p-5 space-y-4">
              <div className="flex items-start gap-3 bg-rose-50 p-3 rounded-lg">
                <svg className="w-5 h-5 text-rose-600 mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z" /></svg>
                <p className="text-sm">确定要清空所有关键词吗？此操作不可撤销，共 <b>{keywords.length}</b> 个关键词将被删除。</p>
              </div>
              <div className="flex gap-3 pt-2">
                <button onClick={handleClearAll} className="flex-1 py-2 bg-rose-600 text-white rounded-lg text-sm font-semibold hover:bg-rose-700">确认清空</button>
                <button onClick={() => setShowClearModal(false)} className="px-4 py-2 bg-white border border-border-subtle rounded-lg text-sm hover:bg-slate-50">取消</button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}