'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 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 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 0 */6 * * *' },
  { label: '每天早 8 点', value: '0 0 8 * * *' },
  { label: '每天晚 7 点', value: '0 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 [saved, setSaved] = useState(false)
  // 品类管理
  const [categories, setCategories] = useState<any[]>([])
  const [catLoading, setCatLoading] = useState(true)
  const [showAddCat, setShowAddCat] = useState(false)
  const [addCatName, setAddCatName] = useState('')
  const [addCatKeywords, setAddCatKeywords] = useState('')
  const [editCatId, setEditCatId] = useState<string | null>(null)
  const [editCatName, setEditCatName] = useState('')
  const [editCatKeywords, setEditCatKeywords] = useState('')

  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 fetchCategories = () => {
    setCatLoading(true)
    fetch(`${API_BASE}/api/categories`)
      .then(r => r.json())
      .then(data => setCategories(data))
      .catch(() => {})
      .finally(() => setCatLoading(false))
  }

  // 品类管理 - 添加
  const handleAddCategory = async () => {
    if (!addCatName.trim()) return
    const kwArr = addCatKeywords.split(/[,，、\s]+/).filter(Boolean)
    try {
      const res = await fetch(`${API_BASE}/api/categories`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: addCatName.trim(), keywords: kwArr }),
      })
      if (!res.ok) throw new Error()
      const created = await res.json()
      setCategories(prev => [...prev, created])
      setShowAddCat(false)
      setAddCatName('')
      setAddCatKeywords('')
    } catch { alert('添加品类失败') }
  }

  // 品类管理 - 编辑
  const startEditCat = (cat: any) => {
    setEditCatId(cat.id)
    setEditCatName(cat.name)
    setEditCatKeywords((() => {
      try { return (JSON.parse(cat.keywords) as string[]).join(', ') } catch { return cat.keywords || '' }
    })())
  }

  const handleUpdateCategory = async () => {
    if (!editCatId || !editCatName.trim()) return
    const kwArr = editCatKeywords.split(/[,，、\s]+/).filter(Boolean)
    try {
      const res = await fetch(`${API_BASE}/api/categories/${editCatId}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: editCatName.trim(), keywords: kwArr }),
      })
      if (!res.ok) throw new Error()
      const updated = await res.json()
      setCategories(prev => prev.map(c => c.id === editCatId ? updated : c))
      setEditCatId(null)
    } catch { alert('更新品类失败') }
  }

  // 品类管理 - 删除
  const handleDeleteCategory = async (id: string, name: string) => {
    if (!confirm(`确定要删除品类「${name}」吗？已有线索的该品类不受影响。`)) return
    try {
      await fetch(`${API_BASE}/api/categories/${id}`, { method: 'DELETE' })
      setCategories(prev => prev.filter(c => c.id !== id))
    } catch { alert('删除品类失败') }
  }

  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))
  }, [])

  // 初次加载品类列表
  useEffect(() => { fetchCategories() }, [])

  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: '',
      categories: c.categories ? (() => { try { const p = JSON.parse(c.categories); return Array.isArray(p) ? JSON.stringify(p) : '[]' } catch { return '[]' } })() : '[]',
    })
  }

  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 catArr: string[] = editForm.categories ? JSON.parse(editForm.categories) : []
    payload.categories = catArr.length > 0 ? JSON.stringify(catArr) : null
    // 新配置不再使用 keywords 字段，但不清理旧数据（resolveKeywords 有 fallback）
    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 catArr: string[] = addForm.categories ? JSON.parse(addForm.categories) : []
    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: 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">
                    {'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">
          {/* Header */}
          <div className="flex justify-between items-center">
            <p className="text-sm text-on-surface-variant">
              管理所属品类及其关键词。采集公告时优先按关键词匹配到对应品类，匹配不到则自动 AI 推断。
            </p>
            <button
              onClick={() => setShowAddCat(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>

          {/* Add Category Modal */}
          {showAddCat && (
            <div className="fixed inset-0 z-50 flex items-start justify-center pt-20 bg-black/30" onClick={() => setShowAddCat(false)}>
              <div className="bg-white rounded-xl shadow-2xl w-[500px] 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={() => setShowAddCat(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>
                    <span className="text-[10px] font-bold tracking-wider text-on-surface-variant uppercase block mb-1">品类名称</span>
                    <input
                      value={addCatName}
                      onChange={e => setAddCatName(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>
                    <textarea
                      value={addCatKeywords}
                      onChange={e => setAddCatKeywords(e.target.value)}
                      placeholder="彩板房, 彩钢板, 夹芯板"
                      rows={3}
                      className="w-full border border-border-subtle rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-secondary/20 resize-none"
                    />
                    <p className="text-[10px] text-on-surface-variant mt-1">公告标题包含任一关键词即自动归入该品类</p>
                  </div>
                  <div className="flex gap-3 pt-2">
                    <button onClick={handleAddCategory} disabled={!addCatName.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={() => setShowAddCat(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>
          )}

          {/* Category Table */}
          <div className="bg-white rounded-xl border border-border-subtle shadow-sm overflow-hidden">
            {catLoading ? (
              <div className="p-8 text-center text-sm text-on-surface-variant">加载中...</div>
            ) : categories.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-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 w-20 text-[10px] font-bold tracking-wider text-on-surface-variant uppercase">来源</th>
                    <th className="p-4 w-40 text-[10px] font-bold tracking-wider text-on-surface-variant uppercase">操作</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-border-subtle">
                  {categories.map(cat => {
                    const kwList: string[] = (() => { try { return JSON.parse(cat.keywords) } catch { return [] } })()
                    return editCatId === cat.id ? (
                      <tr key={cat.id} className="bg-blue-50/30">
                        <td className="p-3">
                          <input value={editCatName} onChange={e => setEditCatName(e.target.value)} className="w-full border border-border-subtle rounded px-2 py-1.5 text-sm outline-none focus:ring-2 focus:ring-secondary/20" />
                        </td>
                        <td className="p-3">
                          <input value={editCatKeywords} onChange={e => setEditCatKeywords(e.target.value)} placeholder="逗号分隔" className="w-full border border-border-subtle rounded px-2 py-1.5 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 ${cat.isAIGenerated ? 'bg-amber-50 text-amber-700' : 'bg-blue-50 text-blue-700'}`}>
                            {cat.isAIGenerated ? 'AI' : '手动'}
                          </span>
                        </td>
                        <td className="p-3">
                          <div className="flex gap-2">
                            <button onClick={handleUpdateCategory} className="px-3 py-1 text-[11px] bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-md font-semibold hover:bg-emerald-100">保存</button>
                            <button onClick={() => setEditCatId(null)} className="px-3 py-1 text-[11px] bg-white border border-border-subtle rounded-md text-slate-600 hover:bg-slate-50">取消</button>
                          </div>
                        </td>
                      </tr>
                    ) : (
                      <tr key={cat.id} className="hover:bg-slate-50 transition-colors">
                        <td className="p-4 text-sm font-semibold">{cat.name}</td>
                        <td className="p-4">
                          <div className="flex flex-wrap gap-1 max-w-[500px]">
                            {kwList.length === 0 ? (
                              <span className="text-xs text-slate-400">无关键词</span>
                            ) : (
                              kwList.map((kw: string, i: number) => (
                                <span key={i} className="px-1.5 py-0.5 bg-slate-100 text-slate-700 text-[10px] rounded whitespace-nowrap">{kw}</span>
                              ))
                            )}
                          </div>
                        </td>
                        <td className="p-4">
                          <span className={`px-2 py-0.5 text-[10px] font-medium rounded-full ${cat.isAIGenerated ? 'bg-amber-50 text-amber-700' : 'bg-blue-50 text-blue-700'}`}>
                            {cat.isAIGenerated ? 'AI' : '手动'}
                          </span>
                        </td>
                        <td className="p-4">
                          <div className="flex items-center gap-2">
                            <button onClick={() => startEditCat(cat)} className="text-xs text-blue-600 hover:underline">编辑</button>
                            <span className="text-slate-300">|</span>
                            <button onClick={() => handleDeleteCategory(cat.id, cat.name)} className="text-xs text-rose-500 hover:underline">删除</button>
                          </div>
                        </td>
                      </tr>
                    )
                  })}
                </tbody>
              </table>
            )}
            {!catLoading && categories.length > 0 && (
              <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">共 {categories.length} 个品类</span>
                <span className="text-[10px] text-on-surface-variant">
                  手动 {categories.filter(c => !c.isAIGenerated).length} 个 · AI 创建 {categories.filter(c => c.isAIGenerated).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">
                            <div className="max-h-[150px] overflow-y-auto space-y-1 text-xs">
                              {categories.length === 0 ? (
                                <span className="text-slate-400">请先在「关键词库管理」添加品类</span>
                              ) : categories.map(cat => {
                                const current: string[] = editForm.categories ? JSON.parse(editForm.categories) : []
                                const selected = current.includes(cat.name)
                                return (
                                  <label key={cat.id} className="flex items-center gap-1.5 cursor-pointer hover:bg-slate-50 rounded p-0.5">
                                    <input
                                      type="checkbox"
                                      checked={selected}
                                      onChange={() => {
                                        const next = selected ? current.filter(n => n !== cat.name) : [...current, cat.name]
                                        setEditForm(f => ({ ...f, categories: JSON.stringify(next) }))
                                      }}
                                      className="accent-secondary"
                                    />
                                    {cat.name}
                                  </label>
                                )
                              })}
                            </div>
                          </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.categories ? (
                              <div className="flex flex-wrap gap-1">
                                {(JSON.parse(c.categories) as string[]).slice(0, 3).map((cat, i) => (
                                  <span key={i} className="px-1.5 py-0.5 bg-purple-50 text-purple-600 text-[10px] rounded">{cat}</span>
                                ))}
                                {(JSON.parse(c.categories) as string[]).length > 3 && (
                                  <span className="text-[10px] text-slate-400">+{JSON.parse(c.categories).length - 3}</span>
                                )}
                              </div>
                            ) : c.keywords ? (
                              <div className="flex flex-wrap gap-1 items-center">
                                {(JSON.parse(c.keywords) as string[]).slice(0, 3).map((kw, i) => (
                                  <span key={i} className="px-1.5 py-0.5 bg-slate-100 text-slate-500 text-[10px] rounded">{kw}</span>
                                ))}
                                <span className="text-[10px] text-slate-400">(旧)</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>
      )}

      {/* 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-2">关联品类（选中的品类关键词用于过滤公告）</span>
                  <div className="max-h-[200px] overflow-y-auto border border-border-subtle rounded-lg p-3 space-y-2">
                    {categories.length === 0 ? (
                      <p className="text-xs text-on-surface-variant">暂无品类，请先在「关键词库管理」中添加品类</p>
                    ) : categories.map(cat => {
                      const current: string[] = addForm.categories ? JSON.parse(addForm.categories) : []
                      const selected = current.includes(cat.name)
                      return (
                        <label key={cat.id} className="flex items-center gap-2 cursor-pointer hover:bg-slate-50 p-1 rounded">
                          <input
                            type="checkbox"
                            checked={selected}
                            onChange={() => {
                              const next = selected ? current.filter(n => n !== cat.name) : [...current, cat.name]
                              setAddForm(f => ({ ...f, categories: JSON.stringify(next) }))
                            }}
                            className="accent-secondary"
                          />
                          <span className="text-sm">{cat.name}</span>
                          {(() => { try { const k = JSON.parse(cat.keywords); return Array.isArray(k) ? k : [] } catch { return [] } })().length > 0 && (
                            <span className="text-[10px] text-on-surface-variant">
                              ({(() => { try { const k = JSON.parse(cat.keywords); return Array.isArray(k) ? k.slice(0, 3).join(', ') : '' } catch { return '' } })()})
                            </span>
                          )}
                        </label>
                      )
                    })}
                  </div>
                </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>
      )}

    </div>
  )
}