import { useState } from 'react'
import { useMutation, useQueryClient } from '@tanstack/react-query'
import { Loader2, Search, AlertTriangle, CheckCircle2, XCircle, FlaskConical, Activity, Bell } from 'lucide-react'
import { PageHeader } from '@/components/PageHeader'
import { api } from '@/lib/api'
import { cn } from '@/lib/cn'
import { resetBadge } from '@/lib/monitorBadge'

// ── 分钟K探测 (迁移自 MinuteDataProbe) ─────────────────
interface ProbeResult {
  date: string
  rows: number
  source: string
  ok: boolean
}

function MinuteProbePanel() {
  const [symbol, setSymbol] = useState('603261.SH')
  const [days, setDays] = useState(10)
  const [loading, setLoading] = useState(false)
  const [results, setResults] = useState<ProbeResult[]>([])
  const [error, setError] = useState<string | null>(null)

  const runProbe = async () => {
    const sym = symbol.trim().toUpperCase()
    if (!sym) return
    setLoading(true)
    setError(null)
    setResults([])

    const dates: string[] = []
    const today = new Date()
    for (let i = 0; i < days; i++) {
      const d = new Date(today)
      d.setDate(d.getDate() - i)
      dates.push(d.toISOString().slice(0, 10))
    }

    const out: ProbeResult[] = []
    try {
      for (const date of dates) {
        const r = await api.klineMinute(sym, date)
        const rows = r.rows?.length ?? 0
        out.push({
          date,
          rows,
          source: r.source ?? (rows > 0 ? 'local' : 'none'),
          ok: rows > 0,
        })
        setResults([...out])
      }
    } catch (e: any) {
      setError(e?.message ?? String(e))
    } finally {
      setLoading(false)
    }
  }

  const total = results.length
  const hasData = results.filter((r) => r.ok).length
  const missing = results.filter((r) => !r.ok)

  return (
    <div className="space-y-4">
      <div>
        <h2 className="text-sm font-semibold text-foreground">分钟K数据探测</h2>
        <p className="mt-1 text-xs text-muted">
          逐日调用 <code className="px-1 rounded bg-elevated text-secondary">/api/kline/minute</code> 接口，
          检测每只股票最近若干天的分钟K数据是否齐全。本地无数据时会自动走 TickFlow 实时拉取。
        </p>
      </div>

      <div className="flex flex-wrap items-end gap-3 rounded-btn bg-elevated p-4">
        <div className="flex flex-col gap-1">
          <label className="text-xs text-muted">股票代码</label>
          <input
            value={symbol}
            onChange={(e) => setSymbol(e.target.value)}
            placeholder="603261.SH"
            className="w-44 rounded-btn border border-border bg-base px-3 py-1.5 text-sm text-foreground outline-none focus:border-accent"
            onKeyDown={(e) => e.key === 'Enter' && !loading && runProbe()}
          />
        </div>
        <div className="flex flex-col gap-1">
          <label className="text-xs text-muted">回溯天数</label>
          <input
            type="number"
            min={1}
            max={30}
            value={days}
            onChange={(e) => setDays(Math.max(1, Math.min(30, Number(e.target.value) || 1)))}
            className="w-24 rounded-btn border border-border bg-base px-3 py-1.5 text-sm text-foreground outline-none focus:border-accent"
          />
        </div>
        <button
          onClick={runProbe}
          disabled={loading || !symbol.trim()}
          className="flex items-center gap-1.5 rounded-btn bg-accent px-4 py-1.5 text-sm font-medium text-base hover:bg-accent/90 disabled:opacity-50 cursor-pointer"
        >
          {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Search className="h-4 w-4" />}
          {loading ? '探测中…' : '开始探测'}
        </button>
      </div>

      {error && (
        <div className="flex items-center gap-2 rounded-btn border border-danger/40 bg-danger/10 p-3 text-sm text-danger">
          <AlertTriangle className="h-4 w-4 shrink-0" />
          <span>{error}</span>
        </div>
      )}

      {total > 0 && (
        <div className="grid grid-cols-3 gap-3">
          <div className="rounded-btn bg-elevated p-3">
            <div className="text-xs text-muted">检测天数</div>
            <div className="mt-1 text-lg font-semibold text-foreground">{total}</div>
          </div>
          <div className="rounded-btn bg-elevated p-3">
            <div className="text-xs text-muted">有数据</div>
            <div className="mt-1 text-lg font-semibold text-emerald-400">{hasData}</div>
          </div>
          <div className="rounded-btn bg-elevated p-3">
            <div className="text-xs text-muted">缺失</div>
            <div className="mt-1 text-lg font-semibold text-danger">{missing.length}</div>
          </div>
        </div>
      )}

      {results.length > 0 && (
        <div className="overflow-hidden rounded-btn border border-border">
          <table className="w-full text-sm">
            <thead className="bg-elevated text-xs text-muted">
              <tr>
                <th className="px-4 py-2 text-left font-medium">日期</th>
                <th className="px-4 py-2 text-right font-medium">分钟K条数</th>
                <th className="px-4 py-2 text-left font-medium">数据来源</th>
                <th className="px-4 py-2 text-center font-medium">状态</th>
              </tr>
            </thead>
            <tbody>
              {results.map((r) => (
                <tr key={r.date} className="border-t border-border/60">
                  <td className="px-4 py-2 text-foreground">{r.date}</td>
                  <td className="px-4 py-2 text-right tabular-nums text-foreground">{r.rows}</td>
                  <td className="px-4 py-2 text-secondary">
                    <span className="rounded bg-elevated px-1.5 py-0.5 text-xs">{r.source}</span>
                  </td>
                  <td className="px-4 py-2 text-center">
                    {r.ok ? (
                      <span className="inline-flex items-center gap-1 text-emerald-400">
                        <CheckCircle2 className="h-4 w-4" /> 有
                      </span>
                    ) : (
                      <span className="inline-flex items-center gap-1 text-danger">
                        <XCircle className="h-4 w-4" /> 缺失
                      </span>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {missing.length > 0 && (
        <div className="rounded-btn border border-warning/40 bg-warning/10 p-3 text-xs text-foreground">
          <div className="mb-1 flex items-center gap-1.5 font-medium text-warning">
            <AlertTriangle className="h-4 w-4" /> 缺失日期的诊断
          </div>
          <p className="leading-relaxed text-secondary">
            缺失日期若为<span className="text-foreground">周末/节假日</span>属正常；
            若为<span className="text-foreground">停牌日</span>（成交量为 0）也属正常；
            若为<span className="text-foreground">正常交易日</span>（日K有成交量）却缺失分钟K，
            则是 TickFlow 数据源未提供该日分钟数据。
          </p>
        </div>
      )}
    </div>
  )
}

// ── 演示数据生成 ──────────────────────────────────────
function SeedPanel() {
  const qc = useQueryClient()
  const [count, setCount] = useState(12)
  const [recent, setRecent] = useState(true)
  const [msg, setMsg] = useState('')

  const seedMut = useMutation({
    mutationFn: () => api.alertSeed(count, recent),
    onSuccess: (data) => {
      setMsg(`已生成 ${data.generated} 条触发记录`)
      qc.invalidateQueries({ queryKey: ['alerts'] })
      qc.invalidateQueries({ queryKey: ['alerts-total'] })
      setTimeout(() => setMsg(''), 4000)
    },
    onError: () => {
      setMsg('生成失败')
      setTimeout(() => setMsg(''), 4000)
    },
  })

  const clearMut = useMutation({
    mutationFn: () => api.alertsClear(),
    onSuccess: (data) => {
      setMsg(`已清空 ${data.cleared} 条触发记录`)
      qc.invalidateQueries({ queryKey: ['alerts'] })
      qc.invalidateQueries({ queryKey: ['alerts-total'] })
      resetBadge()
      setTimeout(() => setMsg(''), 4000)
    },
  })

  const ruleSeedMut = useMutation({
    mutationFn: () => api.monitorRuleSeed(),
    onSuccess: (data) => {
      setMsg(`已生成 ${data.generated} 条监控规则`)
      qc.invalidateQueries({ queryKey: ['monitor-rules'] })
      setTimeout(() => setMsg(''), 4000)
    },
    onError: () => {
      setMsg('规则生成失败')
      setTimeout(() => setMsg(''), 4000)
    },
  })

  return (
    <div className="space-y-4">
      <div>
        <h2 className="text-sm font-semibold text-foreground">监控触发记录演示数据</h2>
        <p className="mt-1 text-xs text-muted">
          生成模拟的触发记录,用于测试监控中心页面的展示效果、未读徽标、新增闪烁等功能。生成的数据可随时清空。
        </p>
      </div>

      <div className="space-y-3 rounded-btn bg-elevated p-4">
        <div className="flex flex-wrap items-end gap-3">
          <div className="flex flex-col gap-1">
            <label className="text-xs text-muted">生成条数</label>
            <input
              type="number"
              min={1}
              max={50}
              value={count}
              onChange={(e) => setCount(Math.max(1, Math.min(50, Number(e.target.value) || 1)))}
              className="w-24 rounded-btn border border-border bg-base px-3 py-1.5 text-sm text-foreground outline-none focus:border-accent"
            />
          </div>
          <label className="flex items-center gap-1.5 pb-1.5">
            <input
              type="checkbox"
              checked={recent}
              onChange={(e) => setRecent(e.target.checked)}
              className="h-3.5 w-3.5 accent-accent"
            />
            <span className="text-xs text-secondary">时间戳设为"刚刚"(测试闪烁效果)</span>
          </label>
        </div>

        <div className="flex flex-wrap gap-2">
          <button
            onClick={() => seedMut.mutate()}
            disabled={seedMut.isPending}
            className="flex items-center gap-1.5 rounded-btn bg-accent px-4 py-1.5 text-sm font-medium text-base hover:bg-accent/90 disabled:opacity-50 cursor-pointer"
          >
            {seedMut.isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : <FlaskConical className="h-4 w-4" />}
            生成演示数据
          </button>
          <button
            onClick={() => clearMut.mutate()}
            disabled={clearMut.isPending}
            className="flex items-center gap-1.5 rounded-btn border border-danger/40 bg-danger/10 px-4 py-1.5 text-sm font-medium text-danger hover:bg-danger/20 disabled:opacity-50 cursor-pointer"
          >
            {clearMut.isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : <XCircle className="h-4 w-4" />}
            清空全部
          </button>
        </div>
      </div>

      {msg && (
        <div className="rounded-btn border border-accent/40 bg-accent/10 p-3 text-sm text-accent">{msg}</div>
      )}

      {/* 监控规则生成 */}
      <div className="space-y-3 rounded-btn bg-elevated p-4">
        <div>
          <h3 className="text-sm font-medium text-foreground">监控规则</h3>
          <p className="mt-0.5 text-xs text-muted">
            生成多种类型的演示监控规则 (个股信号/价格/市场异动/策略变更),用于测试监控中心规则列表展示。
          </p>
        </div>
        <div className="flex flex-wrap gap-2">
          <button
            onClick={() => ruleSeedMut.mutate()}
            disabled={ruleSeedMut.isPending}
            className="flex items-center gap-1.5 rounded-btn bg-accent px-4 py-1.5 text-sm font-medium text-base hover:bg-accent/90 disabled:opacity-50 cursor-pointer"
          >
            {ruleSeedMut.isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : <FlaskConical className="h-4 w-4" />}
            生成演示规则
          </button>
        </div>
      </div>

      <div className="rounded-btn border border-border/40 bg-surface/40 p-4 text-xs leading-relaxed text-muted">
        <div className="mb-1 font-medium text-secondary">使用说明</div>
        <ul className="list-disc space-y-0.5 pl-4">
          <li>勾选「时间戳设为刚刚」后,切到其他页面再回监控中心,新记录会闪烁高亮</li>
          <li>生成后菜单「监控中心」会出现红色未读徽标</li>
          <li>数据覆盖策略/信号/价格/市场异动四种来源</li>
          <li>清空操作不可撤销</li>
        </ul>
      </div>
    </div>
  )
}

// ── 封单监控模拟触发 ──────────────────────────────────
function LadderTestPanel() {
  const [result, setResult] = useState<Awaited<ReturnType<typeof api.monitorRuleTestLadder>> | null>(null)
  const [error, setError] = useState('')
  const [pushMsg, setPushMsg] = useState('')

  const testMut = useMutation({
    mutationFn: () => api.monitorRuleTestLadder(),
    onSuccess: (data) => { setResult(data); setError('') },
    onError: (e: any) => { setError(e?.message ?? String(e)); setResult(null) },
  })

  const triggerMut = useMutation({
    mutationFn: () => api.monitorRuleTriggerLadder(),
    onSuccess: (data) => {
      setPushMsg(`✅ 已真实触发 ${data.triggered} 条预警 (落盘 + 飞书 + SSE)`)
      setTimeout(() => setPushMsg(''), 6000)
    },
    onError: (e: any) => {
      setPushMsg(`❌ 触发失败: ${e?.message ?? String(e)}`)
      setTimeout(() => setPushMsg(''), 6000)
    },
  })

  const fmtVal = (v: number | null | undefined, metric: string) => {
    if (v == null) return '—'
    if (metric === 'sealed_amount') return `${(v / 1e8).toFixed(4)} 亿`
    return `${v.toLocaleString()} 手`
  }

  return (
    <div className="space-y-4">
      <div>
        <h2 className="text-sm font-semibold text-foreground">封单监控模拟触发</h2>
        <p className="mt-1 text-xs text-muted">
          用当前 depth 封单数据 + 最新日 enriched, 评估所有 ladder 规则。
        </p>
      </div>

      <div className="flex flex-wrap items-center gap-3 rounded-btn bg-elevated p-4">
        <button
          onClick={() => testMut.mutate()}
          disabled={testMut.isPending}
          className="flex items-center gap-1.5 rounded-btn bg-accent px-4 py-1.5 text-sm font-medium text-base hover:bg-accent/90 disabled:opacity-50 cursor-pointer"
        >
          {testMut.isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : <Bell className="h-4 w-4" />}
          模拟触发
        </button>
        <button
          onClick={() => {
            if (confirm('将真实推送飞书 + 写入监控中心 + 触发 SSE 通知。确认?')) {
              triggerMut.mutate()
            }
          }}
          disabled={triggerMut.isPending}
          className="flex items-center gap-1.5 rounded-btn border border-amber-400/40 bg-amber-400/10 px-4 py-1.5 text-sm font-medium text-amber-400 hover:bg-amber-400/20 disabled:opacity-50 cursor-pointer"
        >
          {triggerMut.isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : <Bell className="h-4 w-4" />}
          真实触发预警
        </button>
        {result && (
          <span className="text-xs text-muted">
            日期 {result.as_of} · 封单股 {result.sealed_count} · 触发 {result.triggered.length} · 未触发 {result.not_triggered.length}
          </span>
        )}
      </div>

      <div className="rounded-btn border border-amber-400/30 bg-amber-400/5 p-3 text-xs text-muted">
        <span className="font-medium text-amber-400">模拟触发</span>:纯条件判断,不落盘不推送。
        <span className="font-medium text-amber-400 ml-2">真实触发</span>:走完整链路(落盘 alerts.jsonl + 推送飞书 + SSE 通知),会在监控中心和飞书看到预警。
      </div>

      {pushMsg && (
        <div className="rounded-btn border border-accent/40 bg-accent/10 p-3 text-sm text-accent">{pushMsg}</div>
      )}

      {error && (
        <div className="flex items-center gap-2 rounded-btn border border-danger/40 bg-danger/10 p-3 text-sm text-danger">
          <AlertTriangle className="h-4 w-4 shrink-0" />
          <span>{error}</span>
        </div>
      )}

      {result && result.triggered.length > 0 && (
        <div className="space-y-2">
          <h3 className="text-sm font-medium text-emerald-400">✅ 会触发 ({result.triggered.length})</h3>
          {result.triggered.map((ev) => (
            <div key={ev.rule_id} className="rounded-btn border border-emerald-400/30 bg-emerald-400/5 p-3 text-sm">
              <div className="flex items-center gap-2 mb-1">
                <span className="font-medium text-foreground">{ev.symbol}</span>
                {ev.name && <span className="text-secondary">{ev.name}</span>}
                <span className="ml-auto rounded bg-emerald-400/15 px-1.5 py-0.5 text-xs text-emerald-400">{ev.type}</span>
              </div>
              <div className="text-xs text-secondary">{ev.message}</div>
              <div className="mt-1 text-xs text-muted tabular-nums">
                当前封单: {fmtVal(ev.sealed_metric === 'sealed_amount' ? ev.current_sealed_amount : ev.current_sealed_vol, ev.sealed_metric)}
              </div>
            </div>
          ))}
        </div>
      )}

      {result && result.not_triggered.length > 0 && (
        <div className="space-y-2">
          <h3 className="text-sm font-medium text-muted">⚪ 未触发 ({result.not_triggered.length})</h3>
          {result.not_triggered.map((r) => (
            <div key={r.rule_id} className="rounded-btn border border-border bg-surface/40 p-3 text-sm">
              <div className="flex items-center gap-2 mb-1">
                <span className="font-medium text-foreground">{r.symbol}</span>
                <span className="text-secondary text-xs">{r.rule_name}</span>
              </div>
              <div className="text-xs text-muted tabular-nums">
                阈值 {fmtVal(r.threshold, r.metric)} · 当前 {fmtVal(r.current_value, r.metric)} · {r.reason}
              </div>
            </div>
          ))}
        </div>
      )}

      {result && result.triggered.length === 0 && result.not_triggered.length === 0 && (
        <div className="rounded-btn border border-border bg-surface/40 p-4 text-center text-sm text-muted">
          无 ladder 监控规则,请先在连板梯队页设置封单监控
        </div>
      )}
    </div>
  )
}

// ── Dev 主页面 ────────────────────────────────────────
export function Dev() {
  const [tab, setTab] = useState<'minute' | 'seed' | 'ladder'>('seed')

  return (
    <div className="flex flex-col h-full">
      <PageHeader
        title="系统工具"
        subtitle="数据诊断与预警调试"
        right={
          <div className="flex items-center gap-1 rounded-btn bg-elevated p-0.5">
            <button
              onClick={() => setTab('seed')}
              className={cn(
                'inline-flex items-center gap-1.5 rounded px-2.5 py-1 text-xs font-medium transition-colors cursor-pointer',
                tab === 'seed' ? 'bg-surface text-foreground shadow-sm' : 'text-muted hover:text-secondary',
              )}
            >
              <FlaskConical className="h-3.5 w-3.5" />演示数据
            </button>
            <button
              onClick={() => setTab('ladder')}
              className={cn(
                'inline-flex items-center gap-1.5 rounded px-2.5 py-1 text-xs font-medium transition-colors cursor-pointer',
                tab === 'ladder' ? 'bg-surface text-foreground shadow-sm' : 'text-muted hover:text-secondary',
              )}
            >
              <Bell className="h-3.5 w-3.5" />封单监控
            </button>
            <button
              onClick={() => setTab('minute')}
              className={cn(
                'inline-flex items-center gap-1.5 rounded px-2.5 py-1 text-xs font-medium transition-colors cursor-pointer',
                tab === 'minute' ? 'bg-surface text-foreground shadow-sm' : 'text-muted hover:text-secondary',
              )}
            >
              <Activity className="h-3.5 w-3.5" />分钟K探测
            </button>
          </div>
        }
      />
      <div className="flex-1 overflow-auto px-5 py-4">
        <div className="mx-auto max-w-3xl space-y-4">
          {tab === 'minute' ? <MinuteProbePanel /> : tab === 'ladder' ? <LadderTestPanel /> : <SeedPanel />}
        </div>
      </div>
    </div>
  )
}