import { useCallback, useEffect, useMemo, useState } from 'react';
import { Link } from 'react-router-dom';
import {
  cancelWechatDigest,
  clearWechatRoute,
  createWechatWebNotification,
  getWechatAdminSummary,
  getWechatIntentRouterConfig,
  getWechatIntentRouterRuntime,
  listAdminUsers,
  listLlmProviderKeys,
  listWechatBindings,
  listWechatDeliveries,
  listWechatDigests,
  listWechatMessages,
  listWechatWebNotifications,
  patchWechatIntentRouterConfig,
  resumeWechatDigest,
  updateWechatScheduleLlmConfig,
} from '../../api/client';
import type {
  AdminUserRow,
  LlmProviderKeyRow,
  WechatAdminSummary,
  WechatBinding,
  WechatDeliveryLog,
  WechatDigestSubscription,
  WechatIntentRouterAdminConfig,
  WechatIntentRouterRuntimeState,
  WechatMessage,
  WechatWebNotification,
} from '../../types';
import { formatTime } from '../utils/format';

function count(record: Record<string, number>, key: string) {
  return record[key] ?? 0;
}

function safeSummary(summary: WechatAdminSummary | null) {
  return {
    config: summary?.config ?? {
      mpEnabled: false,
      scheduleEnabled: false,
      reminderWorkerEnabled: false,
      appId: null,
      publicBaseUrl: null,
      bindPath: null,
      tokenEndpointConfigured: false,
      customerServiceEndpointConfigured: false,
      scheduleLlmEnabled: false,
    },
    counts: summary?.counts ?? {
      boundUsers: 0,
      routes: { total: 0, active: 0 },
      recentMessages: {},
      digests: {},
      recentDeliveries: {},
    },
  };
}

function statusLabel(status?: string | null) {
  if (!status) return '—';
  return status;
}

function statusClass(status?: string | null) {
  if (status === 'failed') return 'text-error';
  if (status === 'active' || status === 'success' || status === 'done') return 'wechat-ok';
  return 'muted';
}

function userLabel(row: { displayName?: string | null; username?: string | null }) {
  return row.displayName || row.username || '—';
}

function dateLabel(value?: number | null) {
  return value ? formatTime(value) : '—';
}

type IntentRouterForm = {
  enabled: boolean;
  shadowMode: boolean;
  modelProviderKeyId: string;
  model: string;
  minConfidence: string;
  timeoutMs: string;
  canaryOpenids: string;
};

function intentRouterToForm(
  config: WechatIntentRouterAdminConfig | undefined,
  keys: LlmProviderKeyRow[],
): IntentRouterForm {
  const keyId = String(config?.modelProviderKeyId ?? '').trim();
  const selectedKey = keys.find((item) => item.id === keyId) ?? null;
  const model = String(config?.model ?? '').trim()
    || selectedKey?.defaultModel
    || selectedKey?.models?.[0]
    || '';
  return {
    enabled: Boolean(config?.enabled),
    shadowMode: config?.shadowMode !== false,
    modelProviderKeyId: keyId,
    model,
    minConfidence: String(config?.minConfidence ?? 0.65),
    timeoutMs: String(config?.timeoutMs ?? 4000),
    canaryOpenids: Array.isArray(config?.canaryOpenids) ? config.canaryOpenids.join('\n') : '',
  };
}

function intentRouterRuntimeMode(overrides: Record<string, string>) {
  const enabled = ['1', 'true', 'yes', 'on'].includes(
    String(overrides.MEMIND_WECHAT_INTENT_LLM_ENABLED ?? '').toLowerCase(),
  );
  const shadow = ['1', 'true', 'yes', 'on'].includes(
    String(overrides.MEMIND_WECHAT_INTENT_LLM_SHADOW ?? '').toLowerCase(),
  );
  if (!enabled) return '关闭（仅规则意图）';
  if (shadow) return 'Shadow 观测（行为不变）';
  return '已激活（chat.general 可升级为 page.generate）';
}

export function WechatPage() {
  const [summary, setSummary] = useState<WechatAdminSummary | null>(null);
  const [bindings, setBindings] = useState<WechatBinding[]>([]);
  const [messages, setMessages] = useState<WechatMessage[]>([]);
  const [digests, setDigests] = useState<WechatDigestSubscription[]>([]);
  const [deliveries, setDeliveries] = useState<WechatDeliveryLog[]>([]);
  const [webNotifications, setWebNotifications] = useState<WechatWebNotification[]>([]);
  const [users, setUsers] = useState<AdminUserRow[]>([]);
  const [search, setSearch] = useState('');
  const [messageStatus, setMessageStatus] = useState('');
  const [digestStatus, setDigestStatus] = useState('');
  const [deliveryStatus, setDeliveryStatus] = useState('');
  const [notificationStatus, setNotificationStatus] = useState('');
  const [notifyAudience, setNotifyAudience] = useState<'single' | 'multi' | 'all'>('single');
  const [notifyUserId, setNotifyUserId] = useState('');
  const [notifyUserIds, setNotifyUserIds] = useState<string[]>([]);
  const [notifyTitle, setNotifyTitle] = useState('');
  const [notifyBody, setNotifyBody] = useState('');
  const [notifyType, setNotifyType] = useState('manual');
  const [notifyChannels, setNotifyChannels] = useState<Array<'web' | 'wechat'>>(['web']);
  const [scheduleLlmEnabled, setScheduleLlmEnabled] = useState(false);
  const [llmKeys, setLlmKeys] = useState<LlmProviderKeyRow[]>([]);
  const [intentForm, setIntentForm] = useState<IntentRouterForm | null>(null);
  const [savedIntentForm, setSavedIntentForm] = useState<IntentRouterForm | null>(null);
  const [intentRuntime, setIntentRuntime] = useState<WechatIntentRouterRuntimeState | null>(null);
  const [intentSaving, setIntentSaving] = useState(false);
  const [loading, setLoading] = useState(true);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [notice, setNotice] = useState<string | null>(null);
  const safe = safeSummary(summary);

  const intentDirty = useMemo(() => {
    if (!intentForm || !savedIntentForm) return false;
    return JSON.stringify(intentForm) !== JSON.stringify(savedIntentForm);
  }, [intentForm, savedIntentForm]);

  const selectedIntentKey = useMemo(
    () => llmKeys.find((item) => item.id === intentForm?.modelProviderKeyId) ?? null,
    [llmKeys, intentForm?.modelProviderKeyId],
  );

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const [
        nextSummary,
        nextBindings,
        nextMessages,
        nextDigests,
        nextDeliveries,
        nextNotifications,
        nextUsers,
        nextLlmKeys,
        nextIntentConfig,
        nextIntentRuntime,
      ] =
        await Promise.all([
          getWechatAdminSummary(),
          listWechatBindings({ search, limit: 80 }),
          listWechatMessages({ status: messageStatus || undefined, limit: 80 }),
          listWechatDigests({ status: digestStatus || undefined, limit: 80 }),
          listWechatDeliveries({ status: deliveryStatus || undefined, limit: 80 }),
          listWechatWebNotifications({ status: notificationStatus || undefined, limit: 80 }),
          listAdminUsers({ page: 1, pageSize: 200, status: 'active' }),
          listLlmProviderKeys().catch(() => [] as LlmProviderKeyRow[]),
          getWechatIntentRouterConfig().catch(() => null),
          getWechatIntentRouterRuntime().catch(() => null),
        ]);
      setSummary(nextSummary);
      setScheduleLlmEnabled(nextSummary.config.scheduleLlmEnabled ?? false);
      setBindings(nextBindings);
      setMessages(nextMessages);
      setDigests(nextDigests);
      setDeliveries(nextDeliveries);
      setWebNotifications(nextNotifications);
      setUsers(nextUsers.items);
      setNotifyUserId((current) => current || nextUsers.items[0]?.id || '');
      setLlmKeys(nextLlmKeys);
      if (nextIntentConfig) {
        const nextForm = intentRouterToForm(nextIntentConfig, nextLlmKeys);
        setIntentForm(nextForm);
        setSavedIntentForm(nextForm);
      }
      setIntentRuntime(nextIntentRuntime);
    } catch (err) {
      setError(err instanceof Error ? err.message : '加载服务号管理失败');
    } finally {
      setLoading(false);
    }
  }, [deliveryStatus, digestStatus, messageStatus, notificationStatus, search]);

  useEffect(() => {
    void load();
  }, [load]);

  const runAction = async (action: () => Promise<unknown>) => {
    setBusy(true);
    setError(null);
    try {
      await action();
      await load();
    } catch (err) {
      setError(err instanceof Error ? err.message : '操作失败');
    } finally {
      setBusy(false);
    }
  };

  const toggleChannel = (channel: 'web' | 'wechat') => {
    setNotifyChannels((current) => {
      if (current.includes(channel)) {
        if (current.length === 1) return current;
        return current.filter((item) => item !== channel);
      }
      return [...current, channel];
    });
  };

  const handleSendNotification = async () => {
    const title = notifyTitle.trim();
    const body = notifyBody.trim();
    if (!title) {
      setError('请填写通知标题');
      return;
    }
    if (!body) {
      setError('请填写通知内容');
      return;
    }
    if (notifyAudience === 'single' && !notifyUserId) {
      setError('请选择目标用户');
      return;
    }
    if (notifyAudience === 'multi' && notifyUserIds.length === 0) {
      setError('请至少选择一个用户');
      return;
    }
    setBusy(true);
    setError(null);
    setNotice(null);
    try {
      const result = await createWechatWebNotification(
        notifyAudience === 'all'
          ? {
              audience: 'all',
              allUsers: true,
              title,
              body,
              notificationType: notifyType.trim() || 'manual',
              channels: notifyChannels,
            }
          : notifyAudience === 'multi'
            ? {
                userIds: notifyUserIds,
                title,
                body,
                notificationType: notifyType.trim() || 'manual',
                channels: notifyChannels,
              }
            : {
                userId: notifyUserId,
                title,
                body,
                notificationType: notifyType.trim() || 'manual',
                channels: notifyChannels,
              },
      );
      const failed = result.wechatFailures?.length ?? 0;
      setNotice(
        `发送完成：目标 ${result.targets} 人，网页通知 ${result.created} 条，公众号成功 ${result.wechatSent} 条${
          failed ? `，失败 ${failed} 条` : ''
        }。`,
      );
      setNotifyTitle('');
      setNotifyBody('');
      if (notifyAudience === 'multi') setNotifyUserIds([]);
      await load();
    } catch (err) {
      setError(err instanceof Error ? err.message : '发送失败');
    } finally {
      setBusy(false);
    }
  };

  const handleSaveScheduleLlm = async () => {
    await runAction(async () => {
      await updateWechatScheduleLlmConfig({ scheduleLlmEnabled });
      setNotice(`提醒待办 LLM 已${scheduleLlmEnabled ? '开启' : '关闭'}。`);
    });
  };

  const handleSaveIntentRouter = async () => {
    if (!intentForm) return;
    setIntentSaving(true);
    setError(null);
    setNotice(null);
    try {
      const result = await patchWechatIntentRouterConfig({
        enabled: intentForm.enabled,
        shadowMode: intentForm.shadowMode,
        modelProviderKeyId: intentForm.modelProviderKeyId || null,
        model: intentForm.model || null,
        minConfidence: Number(intentForm.minConfidence) || 0.65,
        timeoutMs: Number(intentForm.timeoutMs) || 4000,
        canaryOpenids: intentForm.canaryOpenids
          .split(/[\s,]+/u)
          .map((item) => item.trim())
          .filter(Boolean),
      });
      const nextForm = intentRouterToForm(result, llmKeys);
      setIntentForm(nextForm);
      setSavedIntentForm(nextForm);
      setIntentRuntime(await getWechatIntentRouterRuntime().catch(() => null));
      setNotice('微信 LLM 意图路由配置已保存。Portal 会在下次请求时自动热加载。');
    } catch (err) {
      setError(err instanceof Error ? err.message : '保存失败');
    } finally {
      setIntentSaving(false);
    }
  };

  return (
    <div className="admin-page">
      <div className="admin-page-head">
        <h2>服务号管理</h2>
        <p className="muted">绑定、路由、每日待办推送和投递记录</p>
      </div>

      {error && <p className="banner banner-error">{error}</p>}
      {notice && <p className="banner banner-info">{notice}</p>}

      <div className="admin-stat-grid">
        <Stat label="服务号" value={loading ? '—' : safe.config.mpEnabled ? '已启用' : '未启用'} />
        <Stat label="绑定用户" value={loading ? '—' : safe.counts.boundUsers} />
        <Stat
          label="活跃路由"
          value={
            loading
              ? '—'
              : `${safe.counts.routes.active}/${safe.counts.routes.total}`
          }
        />
        <Stat label="每日推送" value={loading ? '—' : count(safe.counts.digests, 'active')} />
        <Stat
          label="24h 消息失败"
          value={loading ? '—' : count(safe.counts.recentMessages, 'failed')}
        />
        <Stat
          label="24h 投递失败"
          value={loading ? '—' : count(safe.counts.recentDeliveries, 'failed')}
        />
      </div>

      {summary && (
        <section className="admin-card">
          <h2>配置状态</h2>
          <dl className="admin-dl">
            <div>
              <dt>AppID</dt>
              <dd>{summary.config.appId ?? '未配置'}</dd>
            </div>
            <div>
              <dt>公网地址</dt>
              <dd>{summary.config.publicBaseUrl ?? '未配置'}</dd>
            </div>
            <div>
              <dt>绑定路径</dt>
              <dd>{summary.config.bindPath ?? '未配置'}</dd>
            </div>
            <div>
              <dt>定时服务</dt>
              <dd>{summary.config.scheduleEnabled ? '已启用' : '未启用'}</dd>
            </div>
            <div>
              <dt>推送 worker</dt>
              <dd>{summary.config.reminderWorkerEnabled ? '已启用' : '未启用'}</dd>
            </div>
            <div>
              <dt>提醒待办 LLM</dt>
              <dd>{summary.config.scheduleLlmEnabled ? '已开启' : '已关闭'}</dd>
            </div>
          </dl>
          <div className="wechat-toolbar" style={{ marginTop: 16, justifyContent: 'space-between', alignItems: 'center' }}>
            <label>
              <input
                type="checkbox"
                checked={scheduleLlmEnabled}
                onChange={(event) => setScheduleLlmEnabled(event.target.checked)}
                disabled={busy}
              />{' '}
              启用提醒待办 LLM 辅助识别
            </label>
            <button type="button" className="ghost-btn" onClick={() => void handleSaveScheduleLlm()} disabled={busy}>
              {busy ? '保存中…' : '保存开关'}
            </button>
          </div>
          <p className="muted" style={{ marginTop: 8 }}>
            默认关闭。开启后仅在规则未识别出提醒意图时，才调用后台已选中的 LLM 做补充解析；复杂定时提醒仍走原有会话链路。
          </p>
        </section>
      )}

      {intentForm ? (
        <section className="admin-card">
          <div className="admin-card-head">
            <div>
              <h2>微信 LLM 意图路由</h2>
              <p className="muted" style={{ marginTop: 6 }}>
                独立于 H5 Router。仅对规则判为 chat.general 的消息做 LLM 二次判定（page.generate vs chat.general）。
              </p>
            </div>
            <button
              type="button"
              className="ghost-btn"
              onClick={() => void handleSaveIntentRouter()}
              disabled={busy || intentSaving || !intentDirty}
            >
              {intentSaving ? '保存中…' : intentDirty ? '保存配置' : '已保存'}
            </button>
          </div>
          <div className="admin-form" style={{ marginTop: 16 }}>
            <label>
              <input
                type="checkbox"
                checked={intentForm.enabled}
                disabled={busy || intentSaving}
                onChange={(event) =>
                  setIntentForm((current) => current && { ...current, enabled: event.target.checked })
                }
              />{' '}
              启用 LLM 意图层
            </label>
            <label>
              <input
                type="checkbox"
                checked={intentForm.shadowMode}
                disabled={busy || intentSaving || !intentForm.enabled}
                onChange={(event) =>
                  setIntentForm((current) => current && { ...current, shadowMode: event.target.checked })
                }
              />{' '}
              Shadow 模式（只观测不改行为）
            </label>
            <label>
              LLM Provider Key
              <select
                value={intentForm.modelProviderKeyId}
                disabled={busy || intentSaving}
                onChange={(event) => {
                  const keyId = event.target.value;
                  const key = llmKeys.find((item) => item.id === keyId) ?? null;
                  setIntentForm((current) =>
                    current
                      ? {
                          ...current,
                          modelProviderKeyId: keyId,
                          model: key?.defaultModel || key?.models?.[0] || current.model,
                        }
                      : current,
                  );
                }}
              >
                <option value="">使用全局选中 Key</option>
                {llmKeys.map((key) => (
                  <option key={key.id} value={key.id}>
                    {key.name} ({key.providerLabel})
                  </option>
                ))}
              </select>
            </label>
            <label>
              模型
              <input
                list="wechat-intent-models"
                value={intentForm.model}
                disabled={busy || intentSaving}
                placeholder={selectedIntentKey?.defaultModel || 'deepseek-v4-pro'}
                onChange={(event) =>
                  setIntentForm((current) => current && { ...current, model: event.target.value })
                }
              />
              <datalist id="wechat-intent-models">
                {(selectedIntentKey?.models ?? []).map((model) => (
                  <option key={model} value={model} />
                ))}
              </datalist>
            </label>
            <label>
              最低置信度
              <input
                type="number"
                min={0}
                max={1}
                step={0.05}
                value={intentForm.minConfidence}
                disabled={busy || intentSaving}
                onChange={(event) =>
                  setIntentForm((current) => current && { ...current, minConfidence: event.target.value })
                }
              />
            </label>
            <label>
              超时 (ms)
              <input
                type="number"
                min={500}
                max={30000}
                step={100}
                value={intentForm.timeoutMs}
                disabled={busy || intentSaving}
                onChange={(event) =>
                  setIntentForm((current) => current && { ...current, timeoutMs: event.target.value })
                }
              />
            </label>
            <label>
              Canary OpenID（每行或逗号分隔，留空=全员）
              <textarea
                value={intentForm.canaryOpenids}
                disabled={busy || intentSaving}
                rows={3}
                placeholder="oXXXX..."
                onChange={(event) =>
                  setIntentForm((current) => current && { ...current, canaryOpenids: event.target.value })
                }
              />
            </label>
          </div>
          {intentRuntime ? (
            <p className="muted" style={{ marginTop: 12 }}>
              运行时：{intentRouterRuntimeMode(intentRuntime.overrides)} · 来源 {intentRuntime.source}
              {intentRuntime.updatedAt ? ` · 更新 ${dateLabel(intentRuntime.updatedAt)}` : ''}
            </p>
          ) : null}
        </section>
      ) : null}

      <section className="admin-card">
        <h2>TKMind 智趣体验通道</h2>
        <p className="muted" style={{ marginTop: 6 }}>
          Cursor 独立执行通道已迁移至独立管理页，可同时配置 H5 与服务号白名单用户，不影响其他用户原有链路。
        </p>
        <p style={{ marginTop: 12 }}>
          <Link to="/cursor-channel" className="ghost-btn">
            前往智趣体验通道配置 →
          </Link>
        </p>
      </section>

      <section className="admin-card">
        <div className="admin-card-head">
          <h2>通知平台</h2>
          <button type="button" className="ghost-btn" onClick={() => void load()} disabled={busy}>
            刷新
          </button>
        </div>
        <div className="admin-form">
          <select value={notifyAudience} onChange={(event) => setNotifyAudience(event.target.value as 'single' | 'multi' | 'all')}>
            <option value="single">单个用户</option>
            <option value="multi">多个用户</option>
            <option value="all">全部活跃用户</option>
          </select>
          <input
            value={notifyType}
            onChange={(event) => setNotifyType(event.target.value)}
            placeholder="通知类型，例如 manual / recharge / balance_low"
          />
          {notifyAudience === 'single' ? (
            <select value={notifyUserId} onChange={(event) => setNotifyUserId(event.target.value)}>
              <option value="">请选择用户</option>
              {users.map((user) => (
                <option key={user.id} value={user.id}>
                  {(user.displayName || user.username) + ` (@${user.username})`}
                </option>
              ))}
            </select>
          ) : null}
          {notifyAudience === 'multi' ? (
            <select
              multiple
              value={notifyUserIds}
              onChange={(event) =>
                setNotifyUserIds(Array.from(event.target.selectedOptions).map((item) => item.value))
              }
              style={{ minHeight: 140 }}
            >
              {users.map((user) => (
                <option key={user.id} value={user.id}>
                  {(user.displayName || user.username) + ` (@${user.username})`}
                </option>
              ))}
            </select>
          ) : null}
          <input
            value={notifyTitle}
            onChange={(event) => setNotifyTitle(event.target.value)}
            placeholder="通知标题"
          />
          <textarea
            value={notifyBody}
            onChange={(event) => setNotifyBody(event.target.value)}
            placeholder="通知内容"
            rows={4}
          />
        </div>
        <div className="wechat-toolbar" style={{ justifyContent: 'space-between', alignItems: 'center' }}>
          <div className="wechat-toolbar">
            <label>
              <input
                type="checkbox"
                checked={notifyChannels.includes('web')}
                onChange={() => toggleChannel('web')}
              />{' '}
              网页端
            </label>
            <label>
              <input
                type="checkbox"
                checked={notifyChannels.includes('wechat')}
                onChange={() => toggleChannel('wechat')}
              />{' '}
              公众号
            </label>
          </div>
          <button type="button" className="send-btn" onClick={() => void handleSendNotification()} disabled={busy}>
            {busy ? '发送中…' : '立即发送'}
          </button>
        </div>
      </section>

      <section className="admin-card">
        <TableHead
          title="最近网页通知"
          value={notificationStatus}
          options={['', 'unread', 'read']}
          onChange={setNotificationStatus}
          onRefresh={() => void load()}
          busy={busy}
        />
        <div className="admin-table-wrap">
          <table className="admin-table">
            <thead>
              <tr>
                <th>用户</th>
                <th>类型</th>
                <th>标题</th>
                <th>状态</th>
                <th>创建时间</th>
              </tr>
            </thead>
            <tbody>
              {webNotifications.length === 0 ? (
                <tr><td colSpan={5} className="muted">暂无记录</td></tr>
              ) : (
                webNotifications.map((notification) => (
                  <tr key={notification.id}>
                    <td>
                      <div>{userLabel(notification)}</div>
                      <div className="muted">@{notification.username}</div>
                    </td>
                    <td>{notification.notificationType}</td>
                    <td>
                      <div>{notification.title}</div>
                      <div className="muted">{notification.body}</div>
                    </td>
                    <td className={statusClass(notification.status)}>{notification.status}</td>
                    <td>{dateLabel(notification.createdAt)}</td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </section>

      <section className="admin-card">
        <div className="admin-card-head">
          <h2>绑定与会话路由</h2>
          <div className="wechat-toolbar">
            <input
              value={search}
              onChange={(event) => setSearch(event.target.value)}
              placeholder="搜索用户、昵称、openid"
            />
            <button type="button" className="ghost-btn" onClick={() => void load()} disabled={busy}>
              查询
            </button>
          </div>
        </div>
        <div className="admin-table-wrap">
          <table className="admin-table">
            <thead>
              <tr>
                <th>用户</th>
                <th>微信</th>
                <th>路由</th>
                <th>最近登录</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              {bindings.length === 0 ? (
                <tr><td colSpan={5} className="muted">暂无记录</td></tr>
              ) : (
                bindings.map((binding) => (
                  <tr key={`${binding.userId}-${binding.openidMasked}`}>
                    <td>
                      <div>{userLabel(binding)}</div>
                      <div className="muted">@{binding.username}</div>
                    </td>
                    <td>
                      <div>{binding.nickname || '—'}</div>
                      <div className="mono">{binding.openidMasked}</div>
                    </td>
                    <td>
                      <div className={statusClass(binding.routeStatus)}>
                        {statusLabel(binding.routeStatus)}
                      </div>
                      <div className="mono">{binding.agentSessionId || '无会话'}</div>
                    </td>
                    <td>{dateLabel(binding.lastLoginAt)}</td>
                    <td className="admin-actions">
                      <button
                        type="button"
                        className="ghost-btn"
                        disabled={busy || !binding.routeId}
                        onClick={() => {
                          if (!window.confirm(`确认清除「${userLabel(binding)}」的服务号会话路由？`)) return;
                          void runAction(() => clearWechatRoute(binding.userId));
                        }}
                      >
                        清除路由
                      </button>
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </section>

      <section className="admin-card">
        <TableHead
          title="每日待办推送"
          value={digestStatus}
          options={['', 'active', 'locked', 'failed', 'cancelled']}
          onChange={setDigestStatus}
          onRefresh={() => void load()}
          busy={busy}
        />
        <div className="admin-table-wrap">
          <table className="admin-table">
            <thead>
              <tr>
                <th>用户</th>
                <th>时间</th>
                <th>状态</th>
                <th>下次运行</th>
                <th>错误</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              {digests.length === 0 ? (
                <tr><td colSpan={6} className="muted">暂无记录</td></tr>
              ) : (
                digests.map((digest) => (
                  <tr key={digest.id}>
                    <td>
                      <div>{userLabel(digest)}</div>
                      <div className="muted">@{digest.username}</div>
                    </td>
                    <td>
                      {String(digest.hour).padStart(2, '0')}:{String(digest.minute).padStart(2, '0')}
                      <div className="muted">{digest.timezone}</div>
                    </td>
                    <td className={statusClass(digest.status)}>{digest.status}</td>
                    <td>{dateLabel(digest.nextRunAt)}</td>
                    <td>{digest.lastError || '—'}</td>
                    <td className="admin-actions">
                      {digest.status === 'active' || digest.status === 'locked' ? (
                        <button
                          type="button"
                          className="ghost-btn"
                          disabled={busy}
                          onClick={() => {
                            if (!window.confirm(`确认暂停「${userLabel(digest)}」的每日待办推送？`)) return;
                            void runAction(() => cancelWechatDigest(digest.id));
                          }}
                        >
                          暂停
                        </button>
                      ) : (
                        <button
                          type="button"
                          className="send-btn"
                          disabled={busy}
                          onClick={() => void runAction(() => resumeWechatDigest(digest.id))}
                        >
                          恢复
                        </button>
                      )}
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </section>

      <section className="admin-card">
        <TableHead
          title="最近服务号消息"
          value={messageStatus}
          options={['', 'processing', 'done', 'failed']}
          onChange={setMessageStatus}
          onRefresh={() => void load()}
          busy={busy}
        />
        <div className="admin-table-wrap">
          <table className="admin-table">
            <thead>
              <tr>
                <th>用户</th>
                <th>OpenID</th>
                <th>状态</th>
                <th>会话</th>
                <th>更新时间</th>
              </tr>
            </thead>
            <tbody>
              {messages.length === 0 ? (
                <tr><td colSpan={5} className="muted">暂无记录</td></tr>
              ) : (
                messages.map((message) => (
                  <tr key={`${message.openidMasked}-${message.msgId}`}>
                    <td>{userLabel(message)}</td>
                    <td className="mono">{message.openidMasked}</td>
                    <td className={statusClass(message.status)}>{message.status}</td>
                    <td className="mono">{message.agentSessionId || '—'}</td>
                    <td>{dateLabel(message.updatedAt)}</td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </section>

      <section className="admin-card">
        <TableHead
          title="推送投递日志"
          value={deliveryStatus}
          options={['', 'success', 'failed']}
          onChange={setDeliveryStatus}
          onRefresh={() => void load()}
          busy={busy}
        />
        <div className="admin-table-wrap">
          <table className="admin-table">
            <thead>
              <tr>
                <th>用户</th>
                <th>类型</th>
                <th>状态</th>
                <th>错误/回执</th>
                <th>时间</th>
              </tr>
            </thead>
            <tbody>
              {deliveries.length === 0 ? (
                <tr><td colSpan={5} className="muted">暂无记录</td></tr>
              ) : (
                deliveries.map((delivery) => (
                  <tr key={delivery.id}>
                    <td>{userLabel(delivery)}</td>
                    <td>{delivery.digestType ?? (delivery.reminderId ? 'reminder' : '—')}</td>
                    <td className={statusClass(delivery.status)}>{delivery.status}</td>
                    <td>{delivery.errorMessage || delivery.errorCode || delivery.providerMessageId || '—'}</td>
                    <td>{dateLabel(delivery.createdAt)}</td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </section>
    </div>
  );
}

function Stat({ label, value }: { label: string; value: string | number }) {
  return (
    <div className="admin-stat-card">
      <div className="admin-stat-label">{label}</div>
      <div className="admin-stat-value">{value}</div>
    </div>
  );
}

function TableHead({
  title,
  value,
  options,
  onChange,
  onRefresh,
  busy,
}: {
  title: string;
  value: string;
  options: string[];
  onChange: (value: string) => void;
  onRefresh: () => void;
  busy: boolean;
}) {
  return (
    <div className="admin-card-head">
      <h2>{title}</h2>
      <div className="wechat-toolbar">
        <select value={value} onChange={(event) => onChange(event.target.value)}>
          {options.map((option) => (
            <option key={option || 'all'} value={option}>
              {option || '全部状态'}
            </option>
          ))}
        </select>
        <button type="button" className="ghost-btn" onClick={onRefresh} disabled={busy}>
          刷新
        </button>
      </div>
    </div>
  );
}