MediaCrawler/webui/src/components/monitor/QrLoginPanel.tsx

import { useEffect, useState } from 'react'
import { useQueryClient } from '@tanstack/react-query'
import { AlertTriangle, CheckCircle2, Loader2, QrCode, RefreshCw, X } from 'lucide-react'

import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { useCancelQrLogin, useQrLoginStatus, useStartQrLogin } from '@/hooks/useMonitor'
import { useCurrentPlatform } from '@/hooks/usePlatform'

/**
 * Scan-to-login for a host with no display.
 *
 * The crawler's own QR flow prints the code into the terminal via PIL's
 * `Image.show()`, which needs a desktop image viewer. On a server Chrome runs
 * under Xvfb and there is no such viewer, so the backend reads the code out of
 * that same browser over CDP and hands it here instead.
 *
 * That browser is the one monitor runs attach to, which is the point: scanning
 * once leaves the login in the profile that every later unattended run reuses.
 */
export function QrLoginPanel() {
  const { capability, platform } = useCurrentPlatform()
  const queryClient = useQueryClient()
  const [polling, setPolling] = useState(false)

  const { data: state } = useQrLoginStatus(polling)
  const start = useStartQrLogin()
  const cancel = useCancelQrLogin()

  const label = capability?.label ?? platform
  const status = state?.status ?? 'idle'

  // Stop polling the moment the outcome is known, and refresh the cookie panel:
  // a completed scan is what makes it start reporting a healthy login.
  useEffect(() => {
    if (status === 'waiting' || status === 'idle') return
    setPolling(false)
    if (status === 'success') {
      queryClient.invalidateQueries({ queryKey: ['monitorCookie'] })
    }
  }, [status, queryClient])

  const begin = () => {
    setPolling(true)
    start.mutate()
  }

  const busy = start.isPending || cancel.isPending

  return (
    <div className="rounded-lg glass-panel float-panel p-4 space-y-3">
      <div className="flex items-center justify-between gap-3">
        <div className="flex items-center gap-2">
          <QrCode className="w-4 h-4 text-cyber-neon-cyan" />
          <span className="font-mono text-xs tracking-wider text-cyber-text-primary">
            {label}扫码登录
          </span>
          {status === 'waiting' && (
            <Badge variant="warning" className="text-[10px]">
              等待扫码
            </Badge>
          )}
          {status === 'success' && (
            <Badge variant="success" className="text-[10px]">
              已登录
            </Badge>
          )}
        </div>

        {status === 'waiting' && (
          <Button
            variant="ghost"
            size="sm"
            disabled={busy}
            onClick={() => {
              setPolling(false)
              cancel.mutate()
            }}
          >
            <X className="w-3 h-3" />
          </Button>
        )}
      </div>

      {status === 'waiting' && state?.image && (
        <div className="flex items-start gap-4">
          {/* The code is a data: URL straight from the page, so nothing is
              fetched from a third party and no file is written server-side. */}
          <img
            src={state.image}
            alt="登录二维码"
            className="w-44 h-44 rounded-md border border-cyber-border-DEFAULT bg-white p-1"
          />
          <div className="space-y-2 pt-1">
            <p className="text-[11px] font-mono text-cyber-text-secondary leading-relaxed">
              用<span className="text-cyber-neon-cyan">{label} App</span>扫码。
              扫码成功后登录态会写入服务器上那台 Chrome 的 profile，
              之后定时监控无需再登录。
            </p>
            <p className="text-[11px] font-mono text-cyber-text-muted">
              剩余 <span className="text-cyber-neon-cyan">{state.expires_in}</span> 秒
            </p>
          </div>
        </div>
      )}

      {status === 'waiting' && !state?.image && (
        <p className="flex items-center gap-2 text-[11px] font-mono text-cyber-text-muted">
          <Loader2 className="w-3 h-3 animate-spin" />
          正在从浏览器取二维码…
        </p>
      )}

      {status === 'success' && (
        <p className="flex items-start gap-2 text-[11px] font-mono text-cyber-neon-green leading-relaxed">
          <CheckCircle2 className="w-3 h-3 mt-0.5 shrink-0" />
          {state?.message || '登录成功'}
        </p>
      )}

      {(status === 'error' || status === 'expired') && (
        <div className="space-y-2">
          <p className="flex items-start gap-2 text-[11px] font-mono text-cyber-neon-orange leading-relaxed">
            <AlertTriangle className="w-3 h-3 mt-0.5 shrink-0" />
            {state?.message || '获取二维码失败'}
          </p>
          <Button variant="outline" size="sm" disabled={busy} onClick={begin}>
            <RefreshCw className="w-3 h-3 mr-1" />
            重新获取
          </Button>
        </div>
      )}

      {status === 'idle' && (
        <div className="space-y-2">
          <p className="text-[11px] font-mono text-cyber-text-muted leading-relaxed">
            走 CDP 接管服务器上已开启远程调试的 Chrome，把二维码取回来显示在这里。
            需要先在「系统设置」里打开
            <span className="text-cyber-neon-cyan">接管已有 Chrome（CDP）</span>，
            并确保那台 Chrome 正以 <span className="text-cyber-neon-cyan">9222</span> 端口运行。
          </p>
          <Button size="sm" disabled={busy} onClick={begin}>
            {start.isPending ? (
              <Loader2 className="w-3 h-3 mr-1 animate-spin" />
            ) : (
              <QrCode className="w-3 h-3 mr-1" />
            )}
            获取二维码
          </Button>
        </div>
      )}
    </div>
  )
}