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

import { useState } from 'react'
import { AlertTriangle, CheckCircle2, KeyRound, Trash2 } from 'lucide-react'

import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { useClearCookie, useCookieStatus, useSetCookie } from '@/hooks/useMonitor'
import { useCurrentPlatform } from '@/hooks/usePlatform'
import { formatDateTime, formatRelative } from '@/lib/monitorFormat'

/**
 * Cookie health for unattended runs.
 *
 * The expiry signal that matters is `last_ok_at` (the last run that actually
 * authenticated), not `updated_at`: a cookie can be saved long ago and still be
 * working, or be fresh and already rejected.
 */
export function CookiePanel() {
  const { capability, platform } = useCurrentPlatform()
  // Scoped to the selected platform: each keeps its own login.
  const { data: status } = useCookieStatus()
  const setCookie = useSetCookie()
  const clearCookie = useClearCookie()
  const [draft, setDraft] = useState('')
  const [editing, setEditing] = useState(false)

  const showForm = !status?.present || editing
  const label = capability?.label ?? platform

  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">
          <KeyRound className="w-4 h-4 text-cyber-neon-cyan" />
          {/* 标题要和扫码面板区分开：这个是"存进库里、每轮注入子进程"的 cookie，
              那个是"写进浏览器 profile、CDP 模式复用"的登录态。两者是不同机制、
              也都能同时算"登录着"，都叫「登录态」就分不清在说哪一个。 */}
          <span className="font-mono text-xs tracking-wider text-cyber-text-primary">
            {label} Cookie（定时任务用）
          </span>
          {status?.present ? (
            <Badge variant="success" className="text-[10px]">
              已配置
            </Badge>
          ) : (
            <Badge variant="warning" className="text-[10px]">
              未配置
            </Badge>
          )}
        </div>

        <div className="flex items-center gap-2">
          {status?.present && !editing && (
            <>
              <Button variant="outline" size="sm" onClick={() => setEditing(true)}>
                替换
              </Button>
              <Button
                variant="ghost"
                size="sm"
                onClick={() => clearCookie.mutate()}
                disabled={clearCookie.isPending}
              >
                <Trash2 className="w-3 h-3" />
              </Button>
            </>
          )}
        </div>
      </div>

      {status?.present && !editing && (
        <div className="flex flex-wrap items-center gap-x-6 gap-y-1 text-[11px] font-mono text-cyber-text-secondary">
          <span>
            长度 <span className="text-cyber-neon-cyan">{status.length}</span>
          </span>
          <span>
            保存于 <span className="text-cyber-text-primary">{formatDateTime(status.updated_at)}</span>
          </span>
          <span className="flex items-center gap-1">
            最近成功
            {status.last_ok_at ? (
              <>
                <CheckCircle2 className="w-3 h-3 text-cyber-neon-green" />
                <span className="text-cyber-neon-green">{formatRelative(status.last_ok_at)}</span>
              </>
            ) : (
              <>
                <AlertTriangle className="w-3 h-3 text-cyber-neon-orange" />
                <span className="text-cyber-neon-orange">尚无成功记录</span>
              </>
            )}
          </span>
        </div>
      )}

      {showForm && (
        <div className="space-y-2">
          <p className="text-[11px] font-mono text-cyber-text-muted leading-relaxed">
            定时监控需要长期有效的登录态。在浏览器登录{label}后，从开发者工具复制完整 Cookie
            粘贴到此处（需包含 <span className="text-cyber-neon-cyan">web_session</span>、
            <span className="text-cyber-neon-cyan">a1</span>、
            <span className="text-cyber-neon-cyan">webId</span>）。
            Cookie 通常数周后失效，届时任务会提示重新粘贴。该 Cookie 只用于{label}。
          </p>
          <textarea
            value={draft}
            onChange={(event) => setDraft(event.target.value)}
            placeholder="web_session=xxxx; a1=xxxx; webId=xxxx; ..."
            rows={4}
            className="w-full rounded-md border border-cyber-border-DEFAULT bg-cyber-bg-tertiary p-2 font-mono text-[11px] text-cyber-text-primary outline-none focus-visible:border-cyber-neon-cyan/50"
          />
          <div className="flex items-center gap-2">
            <Button
              size="sm"
              disabled={!draft.trim() || setCookie.isPending}
              onClick={() =>
                setCookie.mutate(draft.trim(), {
                  onSuccess: () => {
                    setDraft('')
                    setEditing(false)
                  },
                })
              }
            >
              保存
            </Button>
            {status?.present && (
              <Button variant="ghost" size="sm" onClick={() => setEditing(false)}>
                取消
              </Button>
            )}
          </div>
        </div>
      )}
    </div>
  )
}