import { BellRing, MailPlus, Pencil, RefreshCcw, Save, Send, Trash2, X } from 'lucide-react'
import { startTransition, useCallback, useEffect, useMemo, useState } from 'react'
import { Link } from 'react-router-dom'
import { toast } from 'sonner'

import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Select } from '@/components/ui/select'
import { Skeleton } from '@/components/ui/skeleton'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import { Textarea } from '@/components/ui/textarea'
import { formatBrowserName, formatDateTime } from '@/lib/admin-format'
import { adminApi, ApiError } from '@/lib/api'
import type { NotificationDeliveryRecord, SubscriptionRecord, WorkerJobRecord } from '@/lib/types'

type BadgeVariant = 'default' | 'secondary' | 'outline' | 'success' | 'warning' | 'danger'

const CHANNEL_OPTIONS = [
  { value: 'email', label: 'Email' },
  { value: 'webhook', label: 'Webhook' },
  { value: 'discord', label: 'Discord Webhook' },
  { value: 'telegram', label: 'Telegram Bot API' },
  { value: 'ntfy', label: 'ntfy' },
  { value: 'web_push', label: 'Web Push / Browser Push' },
] as const

const DEFAULT_FILTERS = {
  event_types: ['post.published', 'digest.weekly', 'digest.monthly'],
}

function prettyJson(value: unknown) {
  if (!value || (typeof value === 'object' && !Array.isArray(value) && Object.keys(value as Record<string, unknown>).length === 0)) {
    return ''
  }
  return JSON.stringify(value, null, 2)
}

function emptyForm() {
  return {
    channelType: 'email',
    target: '',
    displayName: '',
    status: 'active',
    notes: '',
    filtersText: prettyJson(DEFAULT_FILTERS),
    metadataText: '',
  }
}

function parseOptionalJson(label: string, raw: string) {
  const trimmed = raw.trim()
  if (!trimmed) {
    return null
  }

  try {
    return JSON.parse(trimmed) as Record<string, unknown>
  } catch {
    throw new Error(`${label} 不是合法 JSON`)
  }
}

function normalizePreview(value: unknown) {
  const text = prettyJson(value)
  return text || '—'
}

function formatSubscriptionChannelLabel(channelType: string) {
  switch (channelType) {
    case 'web_push':
      return '浏览器提醒'
    case 'email':
      return '邮件订阅'
    case 'discord':
      return 'Discord Webhook'
    case 'telegram':
      return 'Telegram Bot API'
    case 'ntfy':
      return 'ntfy'
    case 'webhook':
      return 'Webhook'
    default:
      return channelType
  }
}

function readMetadataString(metadata: SubscriptionRecord['metadata'], key: string) {
  const value = metadata?.[key]
  return typeof value === 'string' && value.trim() ? value.trim() : null
}

function formatSubscriptionSource(source: string | null) {
  switch (source) {
    case 'frontend-popup':
      return '前台订阅弹窗'
    case 'manual':
      return '后台手动添加'
    case 'admin':
      return '后台手动添加'
    case 'import':
      return '批量导入'
    case 'seed':
      return '初始化数据'
    default:
      return source ?? '未记录'
  }
}

function formatSubscriptionPlatform(userAgent: string | null) {
  if (!userAgent) {
    return null
  }

  const ua = userAgent.toLowerCase()
  if (ua.includes('android')) return 'Android'
  if (ua.includes('iphone') || ua.includes('ipad') || ua.includes('ios')) return 'iOS'
  if (ua.includes('windows')) return 'Windows'
  if (ua.includes('mac os x') || ua.includes('macintosh')) return 'macOS'
  if (ua.includes('linux')) return 'Linux'
  return null
}

function formatPushEndpointHost(target: string) {
  try {
    const url = new URL(target)
    return url.host || url.origin
  } catch {
    return null
  }
}

function describeSubscriptionTarget(item: SubscriptionRecord) {
  const createdAt = formatDateTime(item.created_at)

  if (item.channel_type === 'web_push') {
    const userAgent = readMetadataString(item.metadata, 'user_agent')
    const browser = userAgent ? formatBrowserName(userAgent) : '浏览器信息未记录'
    const platform = formatSubscriptionPlatform(userAgent)
    const pushHost = formatPushEndpointHost(item.target)

    return {
      primary: platform ? `${browser} · ${platform}` : browser,
      details: [
        pushHost ? `推送节点：${pushHost}` : '推送地址：已隐藏完整链接',
        `创建于：${createdAt}`,
      ],
      title: item.target,
    }
  }

  return {
    primary: item.target,
    details: [`创建于：${createdAt}`],
    title: item.target,
  }
}

function getSubscriptionSourceBadge(item: SubscriptionRecord): { label: string; variant: BadgeVariant } {
  const source = readMetadataString(item.metadata, 'source')
  const kind = readMetadataString(item.metadata, 'kind')

  if (source === 'frontend-popup') {
    return { label: '前台弹窗', variant: 'default' }
  }

  if (source === 'manual' || source === 'admin') {
    return { label: '后台手动', variant: 'secondary' }
  }

  if (source === 'import' || source === 'seed') {
    return { label: formatSubscriptionSource(source), variant: 'warning' }
  }

  if (kind === 'browser-push') {
    return { label: '前台浏览器订阅', variant: 'default' }
  }

  if (kind === 'public-form') {
    return { label: '前台邮箱订阅', variant: 'default' }
  }

  if (source) {
    return { label: formatSubscriptionSource(source), variant: 'outline' }
  }

  return { label: '未记录来源', variant: 'outline' }
}

export function SubscriptionsPage() {
  const [subscriptions, setSubscriptions] = useState<SubscriptionRecord[]>([])
  const [deliveries, setDeliveries] = useState<NotificationDeliveryRecord[]>([])
  const [loading, setLoading] = useState(true)
  const [refreshing, setRefreshing] = useState(false)
  const [submitting, setSubmitting] = useState(false)
  const [digesting, setDigesting] = useState<'weekly' | 'monthly' | null>(null)
  const [actioningId, setActioningId] = useState<number | null>(null)
  const [editingId, setEditingId] = useState<number | null>(null)
  const [workerJobs, setWorkerJobs] = useState<WorkerJobRecord[]>([])
  const [lastActionJobId, setLastActionJobId] = useState<number | null>(null)
  const [form, setForm] = useState(emptyForm())
  const [subscriptionSearch, setSubscriptionSearch] = useState('')
  const [subscriptionChannelFilter, setSubscriptionChannelFilter] = useState('all')

  const loadData = useCallback(async (showToast = false) => {
    try {
      if (showToast) {
        setRefreshing(true)
      }
      const [nextSubscriptions, nextDeliveries, nextWorkerJobs] = await Promise.all([
        adminApi.listSubscriptions(),
        adminApi.listSubscriptionDeliveries(),
        adminApi.listWorkerJobs({
          workerName: 'worker.notification_delivery',
          limit: 200,
        }),
      ])
      startTransition(() => {
        setSubscriptions(nextSubscriptions)
        setDeliveries(nextDeliveries)
        setWorkerJobs(nextWorkerJobs.jobs)
      })
      if (showToast) {
        toast.success('订阅中心已刷新。')
      }
    } catch (error) {
      if (error instanceof ApiError && error.status === 401) {
        return
      }
      toast.error(error instanceof ApiError ? error.message : '无法加载订阅中心。')
    } finally {
      setLoading(false)
      setRefreshing(false)
    }
  }, [])

  useEffect(() => {
    void loadData(false)
  }, [loadData])

  const activeCount = useMemo(
    () => subscriptions.filter((item) => item.status === 'active').length,
    [subscriptions],
  )

  const queuedOrRetryCount = useMemo(
    () => deliveries.filter((item) => item.status === 'queued' || item.status === 'retry_pending').length,
    [deliveries],
  )

  const filteredSubscriptions = useMemo(() => {
    const query = subscriptionSearch.trim().toLowerCase()

    return subscriptions.filter((item) => {
      if (subscriptionChannelFilter !== 'all' && item.channel_type !== subscriptionChannelFilter) {
        return false
      }

      if (!query) {
        return true
      }

      const sourceBadge = getSubscriptionSourceBadge(item)
      const targetInfo = describeSubscriptionTarget(item)
      const searchable = [
        item.display_name,
        item.target,
        item.channel_type,
        formatSubscriptionChannelLabel(item.channel_type),
        sourceBadge.label,
        targetInfo.primary,
        ...targetInfo.details,
        readMetadataString(item.metadata, 'user_agent'),
        readMetadataString(item.metadata, 'source'),
      ]
        .filter(Boolean)
        .join(' ')
        .toLowerCase()

      return searchable.includes(query)
    })
  }, [subscriptionChannelFilter, subscriptionSearch, subscriptions])

  const groupedSubscriptions = useMemo(
    () => [
      {
        key: 'web_push',
        title: '浏览器提醒',
        description: '默认主流程，授权后可直接收到站内更新提醒。',
        badgeVariant: 'default' as BadgeVariant,
        items: filteredSubscriptions.filter((item) => item.channel_type === 'web_push'),
      },
      {
        key: 'email',
        title: '邮件订阅',
        description: '通常作为额外备份，确认邮箱后开始生效。',
        badgeVariant: 'secondary' as BadgeVariant,
        items: filteredSubscriptions.filter((item) => item.channel_type === 'email'),
      },
      {
        key: 'other',
        title: '其他渠道',
        description: 'Webhook / Discord / Telegram / ntfy 等外部通知目标。',
        badgeVariant: 'outline' as BadgeVariant,
        items: filteredSubscriptions.filter(
          (item) => item.channel_type !== 'web_push' && item.channel_type !== 'email',
        ),
      },
    ].filter((group) => group.items.length > 0),
    [filteredSubscriptions],
  )

  const deliveryJobMap = useMemo(() => {
    const map = new Map<number, WorkerJobRecord>()
    for (const item of workerJobs) {
      const relatedId = Number.parseInt(String(item.related_entity_id || ''), 10)
      if (Number.isFinite(relatedId) && !map.has(relatedId)) {
        map.set(relatedId, item)
      }
    }
    return map
  }, [workerJobs])

  const resetForm = useCallback(() => {
    setEditingId(null)
    setForm(emptyForm())
  }, [])

  const submitForm = useCallback(async () => {
    try {
      setSubmitting(true)
      const payload = {
        channelType: form.channelType,
        target: form.target,
        displayName: form.displayName || null,
        status: form.status,
        notes: form.notes || null,
        filters: parseOptionalJson('filters', form.filtersText),
        metadata: parseOptionalJson('metadata', form.metadataText),
      }

      if (editingId) {
        await adminApi.updateSubscription(editingId, payload)
        toast.success('订阅目标已更新。')
      } else {
        await adminApi.createSubscription(payload)
        toast.success('订阅目标已创建。')
      }

      resetForm()
      await loadData(false)
    } catch (error) {
      toast.error(error instanceof Error ? error.message : '保存订阅失败。')
    } finally {
      setSubmitting(false)
    }
  }, [editingId, form, loadData, resetForm])

  const renderSubscriptionRow = useCallback((item: SubscriptionRecord) => {
    const targetInfo = describeSubscriptionTarget(item)
    const sourceBadge = getSubscriptionSourceBadge(item)

    return (
      <TableRow key={item.id} data-testid={`subscription-row-${item.id}`}>
        <TableCell>
          <div className="space-y-1">
            <div className="font-medium">
              {item.display_name ?? formatSubscriptionChannelLabel(item.channel_type)}
            </div>
            <div className="text-xs uppercase tracking-[0.16em] text-muted-foreground">
              {item.channel_type}
            </div>
          </div>
        </TableCell>
        <TableCell className="max-w-[320px] break-words text-sm text-muted-foreground">
          <div className="space-y-2" title={targetInfo.title}>
            <div className="font-medium text-foreground">{targetInfo.primary}</div>
            <div className="flex flex-wrap gap-2">
              <Badge variant={sourceBadge.variant}>{sourceBadge.label}</Badge>
              {item.channel_type === 'web_push' ? <Badge variant="outline">浏览器订阅</Badge> : null}
            </div>
            {targetInfo.details.map((line) => (
              <div key={line} className="text-xs text-muted-foreground/80">
                {line}
              </div>
            ))}
            <div className="text-xs text-muted-foreground/80">
              manage_token: {item.manage_token ? '已生成' : '—'} · verified: {item.verified_at ? 'yes' : 'no'}
            </div>
          </div>
        </TableCell>
        <TableCell>
          <div className="space-y-1">
            <Badge variant={item.status === 'active' ? 'success' : 'secondary'}>
              {item.status}
            </Badge>
            <div className="text-xs text-muted-foreground">
              失败 {item.failure_count ?? 0} 次 · 最近 {item.last_delivery_status ?? '—'}
            </div>
          </div>
        </TableCell>
        <TableCell className="max-w-[260px] whitespace-pre-wrap break-words text-xs text-muted-foreground">
          {normalizePreview(item.filters)}
        </TableCell>
        <TableCell className="text-right">
          <div className="flex flex-wrap justify-end gap-2">
            <Button
              variant="outline"
              size="sm"
              data-testid={`subscription-edit-${item.id}`}
              onClick={() => {
                setEditingId(item.id)
                setForm({
                  channelType: item.channel_type,
                  target: item.target,
                  displayName: item.display_name ?? '',
                  status: item.status,
                  notes: item.notes ?? '',
                  filtersText: prettyJson(item.filters),
                  metadataText: prettyJson(item.metadata),
                })
              }}
            >
              <Pencil className="h-4 w-4" />
              编辑
            </Button>
            <Button
              variant="outline"
              size="sm"
              disabled={actioningId === item.id}
              data-testid={`subscription-test-${item.id}`}
              onClick={async () => {
                try {
                  setActioningId(item.id)
                  const result = await adminApi.testSubscription(item.id)
                  if (result.job_id) {
                    setLastActionJobId(result.job_id)
                  }
                  toast.success(
                    result.job_id
                      ? `测试通知已入队：#${result.job_id}`
                      : '测试通知已入队。',
                  )
                  await loadData(false)
                } catch (error) {
                  toast.error(error instanceof ApiError ? error.message : '测试发送失败。')
                } finally {
                  setActioningId(null)
                }
              }}
            >
              <Send className="h-4 w-4" />
              测试
            </Button>
            <Button
              variant="ghost"
              size="sm"
              disabled={actioningId === item.id}
              data-testid={`subscription-delete-${item.id}`}
              onClick={async () => {
                try {
                  setActioningId(item.id)
                  await adminApi.deleteSubscription(item.id)
                  toast.success('订阅目标已删除。')
                  if (editingId === item.id) {
                    resetForm()
                  }
                  await loadData(false)
                } catch (error) {
                  toast.error(error instanceof ApiError ? error.message : '删除失败。')
                } finally {
                  setActioningId(null)
                }
              }}
            >
              <Trash2 className="h-4 w-4" />
              删除
            </Button>
          </div>
        </TableCell>
      </TableRow>
    )
  }, [actioningId, editingId, loadData, resetForm])

  if (loading) {
    return (
      <div className="space-y-6">
        <Skeleton className="h-40 rounded-3xl" />
        <Skeleton className="h-[640px] rounded-3xl" />
      </div>
    )
  }

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between">
        <div className="space-y-3">
          <Badge variant="secondary">订阅与推送</Badge>
          <div>
            <h2 className="text-3xl font-semibold tracking-tight">订阅中心 / 异步投递 / 汇总简报</h2>
            <p className="mt-2 max-w-3xl text-sm leading-7 text-muted-foreground">
              这里统一管理邮件订阅、Webhook / Discord / Telegram / ntfy / Web Push 推送目标；当前投递走异步队列，并支持 retry pending 状态追踪。
            </p>
          </div>
        </div>

        <div className="flex flex-wrap items-center gap-3">
          <Button variant="outline" onClick={() => void loadData(true)} disabled={refreshing}>
            <RefreshCcw className="h-4 w-4" />
            {refreshing ? '刷新中...' : '刷新'}
          </Button>
          <Button
            variant="secondary"
            disabled={digesting !== null}
            data-testid="subscriptions-send-weekly"
            onClick={async () => {
              try {
                setDigesting('weekly')
                const result = await adminApi.runDigestWorker('weekly')
                setLastActionJobId(result.job.id)
                toast.success(`周报任务已入队：#${result.job.id}`)
                await loadData(false)
              } catch (error) {
                toast.error(error instanceof ApiError ? error.message : '发送周报失败。')
              } finally {
                setDigesting(null)
              }
            }}
          >
            <Send className="h-4 w-4" />
            {digesting === 'weekly' ? '入队中...' : '发送周报'}
          </Button>
          <Button
            disabled={digesting !== null}
            data-testid="subscriptions-send-monthly"
            onClick={async () => {
              try {
                setDigesting('monthly')
                const result = await adminApi.runDigestWorker('monthly')
                setLastActionJobId(result.job.id)
                toast.success(`月报任务已入队：#${result.job.id}`)
                await loadData(false)
              } catch (error) {
                toast.error(error instanceof ApiError ? error.message : '发送月报失败。')
              } finally {
                setDigesting(null)
              }
            }}
          >
            <BellRing className="h-4 w-4" />
            {digesting === 'monthly' ? '入队中...' : '发送月报'}
          </Button>
          {lastActionJobId ? (
            <Button variant="outline" asChild data-testid="subscriptions-last-job">
              <Link to={`/workers?job=${lastActionJobId}`}>查看最近任务</Link>
            </Button>
          ) : null}
        </div>
      </div>

      <div className="grid gap-6 xl:grid-cols-[0.98fr_1.02fr]">
        <Card>
          <CardHeader>
            <CardTitle>{editingId ? `编辑订阅 #${editingId}` : '新增订阅目标'}</CardTitle>
            <CardDescription>
              当前共有 {subscriptions.length} 个订阅目标，其中 {activeCount} 个处于启用状态，当前待处理/重试中的投递 {queuedOrRetryCount} 条。
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label>频道类型</Label>
              <Select
                value={form.channelType}
                onChange={(event) => setForm((current) => ({ ...current, channelType: event.target.value }))}
              >
                {CHANNEL_OPTIONS.map((item) => (
                  <option key={item.value} value={item.value}>
                    {item.label}
                  </option>
                ))}
              </Select>
            </div>
            <div className="space-y-2">
              <Label>目标地址</Label>
              <Input
                value={form.target}
                onChange={(event) => setForm((current) => ({ ...current, target: event.target.value }))}
                placeholder={
                  form.channelType === 'email'
                    ? 'name@example.com'
                    : form.channelType === 'ntfy'
                      ? 'topic-name 或 https://ntfy.example.com/topic'
                      : form.channelType === 'web_push'
                        ? 'https://push-service/...'
                        : 'https://...'
                }
              />
            </div>
            <div className="space-y-2">
              <Label>显示名称</Label>
              <Input
                value={form.displayName}
                onChange={(event) =>
                  setForm((current) => ({ ...current, displayName: event.target.value }))
                }
                placeholder="例如 站长邮箱 / Discord 运维群"
              />
            </div>
            <div className="grid gap-4 md:grid-cols-2">
              <div className="space-y-2">
                <Label>状态</Label>
                <Select
                  value={form.status}
                  onChange={(event) => setForm((current) => ({ ...current, status: event.target.value }))}
                >
                  <option value="active">active</option>
                  <option value="paused">paused</option>
                  <option value="pending">pending</option>
                  <option value="unsubscribed">unsubscribed</option>
                </Select>
              </div>
              <div className="space-y-2">
                <Label>备注</Label>
                <Input
                  value={form.notes}
                  onChange={(event) => setForm((current) => ({ ...current, notes: event.target.value }))}
                  placeholder="用途、机器人说明、负责人等"
                />
              </div>
            </div>
            <div className="space-y-2">
              <Label>filters（JSON）</Label>
              <Textarea
                value={form.filtersText}
                onChange={(event) => setForm((current) => ({ ...current, filtersText: event.target.value }))}
                placeholder='{"event_types":["post.published","digest.weekly"]}'
                className="min-h-32 font-mono text-xs"
              />
            </div>
            <div className="space-y-2">
              <Label>metadata（JSON，可选）</Label>
              <Textarea
                value={form.metadataText}
                onChange={(event) => setForm((current) => ({ ...current, metadataText: event.target.value }))}
                placeholder='{"owner":"ops","source":"manual"}'
                className="min-h-28 font-mono text-xs"
              />
            </div>
            <div className="flex flex-wrap gap-3">
              <Button
                className="flex-1"
                disabled={submitting}
                onClick={() => void submitForm()}
                data-testid="subscriptions-save"
              >
                {editingId ? <Save className="h-4 w-4" /> : <MailPlus className="h-4 w-4" />}
                {submitting ? '保存中...' : editingId ? '保存修改' : '保存订阅目标'}
              </Button>
              {editingId ? (
                <Button variant="outline" disabled={submitting} onClick={resetForm}>
                  <X className="h-4 w-4" />
                  取消编辑
                </Button>
              ) : null}
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-start justify-between gap-4">
            <div>
              <CardTitle>当前订阅目标</CardTitle>
              <CardDescription>按浏览器提醒 / 邮件订阅 / 其他渠道分组查看，并支持搜索、筛选、测试与编辑。</CardDescription>
            </div>
            <Badge variant="outline">
              {filteredSubscriptions.length} / {subscriptions.length} 个
            </Badge>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid gap-4 rounded-2xl border border-border/70 bg-background/50 p-4 md:grid-cols-[minmax(0,1.2fr)_220px_auto] md:items-end">
              <div className="space-y-2">
                <Label>搜索订阅</Label>
                <Input
                  value={subscriptionSearch}
                  onChange={(event) => setSubscriptionSearch(event.target.value)}
                  placeholder="搜索名称、地址、来源、浏览器、推送节点..."
                />
              </div>
              <div className="space-y-2">
                <Label>类型筛选</Label>
                <Select
                  value={subscriptionChannelFilter}
                  onChange={(event) => setSubscriptionChannelFilter(event.target.value)}
                >
                  <option value="all">全部类型</option>
                  {CHANNEL_OPTIONS.map((item) => (
                    <option key={item.value} value={item.value}>
                      {formatSubscriptionChannelLabel(item.value)}
                    </option>
                  ))}
                </Select>
              </div>
              <div className="flex flex-wrap items-center gap-2 md:justify-end">
                {(subscriptionSearch.trim() || subscriptionChannelFilter !== 'all') ? (
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => {
                      setSubscriptionSearch('')
                      setSubscriptionChannelFilter('all')
                    }}
                  >
                    清除筛选
                  </Button>
                ) : null}
              </div>
            </div>

            {subscriptions.length === 0 ? (
              <div className="rounded-2xl border border-dashed border-border/80 px-4 py-10 text-center text-sm text-muted-foreground">
                当前还没有订阅记录。新的浏览器提醒或邮箱备份成功后，会直接出现在这里。
              </div>
            ) : groupedSubscriptions.length === 0 ? (
              <div className="rounded-2xl border border-dashed border-border/80 px-4 py-10 text-center text-sm text-muted-foreground">
                没有符合当前搜索或筛选条件的订阅记录。
              </div>
            ) : (
              groupedSubscriptions.map((group) => (
                <div
                  key={group.key}
                  className="overflow-hidden rounded-2xl border border-border/70 bg-background/35"
                >
                  <div className="flex flex-col gap-3 border-b border-border/60 px-4 py-4 md:flex-row md:items-start md:justify-between">
                    <div className="space-y-1">
                      <div className="flex flex-wrap items-center gap-2">
                        <h3 className="text-base font-semibold text-foreground">{group.title}</h3>
                        <Badge variant={group.badgeVariant}>{group.items.length} 个</Badge>
                      </div>
                      <p className="text-sm text-muted-foreground">{group.description}</p>
                    </div>
                  </div>

                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>频道</TableHead>
                        <TableHead>目标</TableHead>
                        <TableHead>状态</TableHead>
                        <TableHead>偏好</TableHead>
                        <TableHead className="text-right">操作</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>{group.items.map(renderSubscriptionRow)}</TableBody>
                  </Table>
                </div>
              ))
            )}
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader className="flex flex-row items-start justify-between gap-4">
          <div>
            <CardTitle>最近投递记录</CardTitle>
            <CardDescription>关注 attempts / next retry / response，确认异步投递与重试状态。</CardDescription>
          </div>
          <Badge variant="outline">{deliveries.length} 条</Badge>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>时间</TableHead>
                <TableHead>事件</TableHead>
                <TableHead>频道</TableHead>
                <TableHead>状态</TableHead>
                <TableHead>重试</TableHead>
                <TableHead>Worker</TableHead>
                <TableHead>响应</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {deliveries.map((item) => {
                const workerJob = deliveryJobMap.get(item.id)
                return (
                <TableRow key={item.id}>
                  <TableCell className="text-muted-foreground">{item.delivered_at ?? item.created_at}</TableCell>
                  <TableCell>
                    <div className="font-medium">{item.event_type}</div>
                    <div className="text-xs text-muted-foreground">#{item.subscription_id ?? '—'}</div>
                  </TableCell>
                  <TableCell>
                    <div className="space-y-1 text-sm">
                      <div>{item.channel_type}</div>
                      <div className="line-clamp-1 text-xs text-muted-foreground">{item.target}</div>
                    </div>
                  </TableCell>
                  <TableCell>
                    <Badge variant={item.status === 'sent' ? 'success' : item.status === 'retry_pending' ? 'warning' : 'secondary'}>
                      {item.status}
                    </Badge>
                  </TableCell>
                  <TableCell className="text-xs text-muted-foreground">
                    <div>attempts: {item.attempts_count}</div>
                    <div>next: {item.next_retry_at ?? '—'}</div>
                  </TableCell>
                  <TableCell>
                    {workerJob ? (
                      <Button
                        variant="outline"
                        size="sm"
                        asChild
                        data-testid={`subscription-delivery-job-${item.id}`}
                      >
                        <Link to={`/workers?job=${workerJob.id}`}>#{workerJob.id}</Link>
                      </Button>
                    ) : (
                      <span className="text-xs text-muted-foreground">—</span>
                    )}
                  </TableCell>
                  <TableCell className="max-w-[360px] whitespace-pre-wrap break-words text-sm text-muted-foreground">
                    {item.response_text ?? '—'}
                  </TableCell>
                </TableRow>
                )
              })}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}
