import { useEffect, useMemo, useState } from 'react';
import { CheckCircle2, Copy, Eye, ExternalLink, FileText, Info, Pencil, Plus, Power, Search, Send, Trash2 } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { adminApi, type AdminChannel, type ChannelConnectionLogResponse, type ChannelTestResponse, type CmppConnectionState } from '@/api/adminApi';
import { Breadcrumb, Button, Input, Modal, Pagination, Select, Tag, Textarea } from '@/components/ui';
import { formatDateTime } from '@/utils/dateTime';
import { formatCents, isValidMoneyInput, moneyUnitsToYuan, yuanToMoneyUnits } from '@/utils/currency';

type Carrier = 'mobile' | 'unicom' | 'telecom' | 'all';
type ChannelStatus = 'normal' | 'stopped' | 'connecting' | 'failed';

type SmsChannel = {
  id: string;
  name: string;
  carrier: Carrier;
  sendRegion: string;
  unitPrice: number;
  status: ChannelStatus;
  total: number;
  successRate: number;
  successCount: number;
  unknownRate: number;
  unknownCount: number;
  failureRate: number;
  failureCount: number;
  gatewayHost: string;
  gatewayPort: string;
  corpCode: string;
  account: string;
  accessNo: string;
  cmppVersion: '2.0' | '3.0';
  desiredConnections: number;
  windowSize: number;
  extensionDigits: number;
  rateLimitPerSecond: number;
  passwordCipher?: string;
};

type ChannelModalState = {
  mode: 'create' | 'edit';
  channel?: SmsChannel;
};

type ChannelConfirmAction = {
  type: 'toggle' | 'delete' | 'copy';
  channel: SmsChannel;
};

type ChannelLogState = {
  channel: SmsChannel;
  data?: ChannelConnectionLogResponse;
};

const connectionStatusLabelMap: Record<string, string> = {
  connected: '已连接',
  connecting: '连接中',
  reconnecting: '重连中',
  disconnected: '已断开',
  failed: '连接失败',
  auth_failed: '鉴权失败',
  heartbeat_timeout: '心跳超时',
};

function formatLogDetail(detail?: unknown) {
  if (!detail) return '无附加信息';
  if (typeof detail === 'string') return detail;
  return JSON.stringify(detail, null, 2);
}

const carrierOptions = [
  { label: '全部运营商', value: 'all' },
  { label: '移动', value: 'mobile' },
  { label: '联通', value: 'unicom' },
  { label: '电信', value: 'telecom' },
  { label: '三网', value: 'all' },
];

const statusOptions = [
  { label: '全部状态', value: 'all' },
  { label: '连接正常', value: 'normal' },
  { label: '已停用', value: 'stopped' },
  { label: '连接中', value: 'connecting' },
  { label: '连接失败', value: 'failed' },
];

const protocolOptions = [
  { label: 'CMPP', value: 'CMPP' },
  { label: 'HTTP', value: 'HTTP' },
  { label: 'SGIP', value: 'SGIP' },
];

const cmppVersionOptions = [
  { label: 'CMPP 2.0', value: '2.0' },
  { label: 'CMPP 3.0', value: '3.0' },
];

const regionOptions = [
  { label: '全国', value: '全国' },
  ...'北京,天津,河北,山西,内蒙古,辽宁,吉林,黑龙江,上海,江苏,浙江,安徽,福建,江西,山东,河南,湖北,湖南,广东,广西,海南,重庆,四川,贵州,云南,西藏,陕西,甘肃,青海,宁夏,新疆,香港,澳门,台湾'.split(',').map((province) => ({ label: province, value: province })),
];

const carrierLabelMap: Record<Carrier, string> = {
  mobile: '移动',
  unicom: '联通',
  telecom: '电信',
  all: '三网',
};

const carrierToneMap: Record<Carrier, 'info' | 'danger' | 'success' | 'neutral'> = {
  mobile: 'info',
  unicom: 'danger',
  telecom: 'success',
  all: 'neutral',
};

const statusLabelMap: Record<ChannelStatus, string> = {
  normal: '连接正常',
  stopped: '已停用',
  connecting: '连接中',
  failed: '连接失败',
};

const statusToneMap: Record<ChannelStatus, 'success' | 'neutral' | 'info' | 'danger'> = {
  normal: 'success',
  stopped: 'neutral',
  connecting: 'info',
  failed: 'danger',
};

function resolveChannelStatus(channel: AdminChannel, connections: CmppConnectionState[] = []): ChannelStatus {
  if (channel.status !== 'active') {
    return 'stopped';
  }
  if (connections.some((connection) =>
    connection.status === 'connected'
    && connection.currentConnections > 0
    && connection.desiredConnections > 0,
  )) {
    return 'normal';
  }
  if (connections.some((connection) => ['auth_failed', 'heartbeat_timeout', 'failed', 'error'].includes(connection.status) || connection.lastError)) {
    return 'failed';
  }
  return 'connecting';
}

function mapApiChannel(channel: AdminChannel, connections: CmppConnectionState[] = channel.connectionStates ?? []): SmsChannel {
  return {
    id: channel.id,
    name: channel.name,
    carrier: channel.carrier === 'unicom' || channel.carrier === 'telecom' || channel.carrier === 'all' ? channel.carrier : 'mobile',
    sendRegion: channel.sendRegion ?? '全国',
    unitPrice: channel.unitPrice,
    status: resolveChannelStatus(channel, connections),
    total: 0,
    successRate: 0,
    successCount: 0,
    unknownRate: 0,
    unknownCount: 0,
    failureRate: 0,
    failureCount: 0,
    gatewayHost: channel.gatewayHost,
    gatewayPort: String(channel.gatewayPort),
    corpCode: channel.enterpriseCode ?? channel.code,
    account: channel.account,
    accessNo: channel.srcId,
    cmppVersion: channel.cmppVersion === '3.0' ? '3.0' : '2.0',
    desiredConnections: Number(channel.config?.desiredConnections ?? 1),
    windowSize: Number(channel.config?.windowSize ?? 16),
    extensionDigits: Number(channel.config?.extensionDigits ?? 0),
    rateLimitPerSecond: channel.rateLimitPerSecond,
  };
}

function mapUiStatusToApi(channel: SmsChannel) {
  return channel.status === 'stopped' ? 'active' : 'disabled';
}

function buildChannelPayload(channel: SmsChannel, passwordCipher?: string) {
  return {
    name: channel.name,
    carrier: channel.carrier,
    sendRegion: channel.sendRegion,
    gatewayHost: channel.gatewayHost,
    gatewayPort: Number(channel.gatewayPort),
    enterpriseCode: channel.corpCode,
    account: channel.account,
    passwordCipher: passwordCipher || undefined,
    srcId: channel.accessNo,
    cmppVersion: channel.cmppVersion,
    rateLimitPerSecond: channel.rateLimitPerSecond,
    unitPrice: Math.round(channel.unitPrice),
    desiredConnections: channel.desiredConnections,
    windowSize: channel.windowSize,
    config: { extensionDigits: channel.extensionDigits },
  };
}

function RateBlock({ label, rate, count, tone = 'neutral' }: { label: string; rate: number; count: number; tone?: 'success' | 'warning' | 'danger' | 'neutral' }) {
  return (
    <div className={`sms-channel-rate sms-channel-rate--${tone}`}>
      <small>{label}</small>
      <strong>{rate}%</strong>
      <span>{count.toLocaleString('zh-CN')}</span>
    </div>
  );
}

function ChannelFormModal({
  modal,
  onClose,
  onSubmit,
}: {
  modal: ChannelModalState;
  onClose: () => void;
  onSubmit: (channel: SmsChannel) => void;
}) {
  const channel = modal.channel;
  const [name, setName] = useState(channel?.name ?? '');
  const [carrier, setCarrier] = useState<Carrier>(channel?.carrier ?? 'mobile');
  const [unitPrice, setUnitPrice] = useState(channel ? moneyUnitsToYuan(channel.unitPrice).toFixed(4) : '0.0300');
  const [unitPriceError, setUnitPriceError] = useState('');
  const [region, setRegion] = useState(channel?.sendRegion ?? '全国');
  const [protocol, setProtocol] = useState('CMPP');
  const [gatewayHost, setGatewayHost] = useState(channel?.gatewayHost ?? '');
  const [gatewayPort, setGatewayPort] = useState(channel?.gatewayPort ?? '17890');
  const [corpCode, setCorpCode] = useState(channel?.corpCode ?? '');
  const [account, setAccount] = useState(channel?.account ?? '');
  const [cmppVersion, setCmppVersion] = useState<'2.0' | '3.0'>(channel?.cmppVersion ?? '2.0');
  const [password, setPassword] = useState('');
  const [accessNo, setAccessNo] = useState(channel?.accessNo ?? '');
  const [extensionDigits, setExtensionDigits] = useState(String(channel?.extensionDigits ?? 0));
  const [flowLimit, setFlowLimit] = useState(String(channel?.rateLimitPerSecond ?? 100));
  const [desiredConnections, setDesiredConnections] = useState(String(channel?.desiredConnections ?? 1));
  const [windowSize, setWindowSize] = useState(String(channel?.windowSize ?? 16));

  function submit() {
    if (!isValidMoneyInput(unitPrice)) {
      setUnitPriceError('单价必须是非负金额，且最多保留小数点后 4 位');
      return;
    }
    onSubmit({
      id: channel?.id ?? String(Math.floor(10000 + Math.random() * 80000)),
      name: name || '新建短信通道',
      carrier,
      sendRegion: region,
      unitPrice: yuanToMoneyUnits(unitPrice),
      status: channel?.status ?? 'connecting',
      total: channel?.total ?? 0,
      successRate: channel?.successRate ?? 0,
      successCount: channel?.successCount ?? 0,
      unknownRate: channel?.unknownRate ?? 0,
      unknownCount: channel?.unknownCount ?? 0,
      failureRate: channel?.failureRate ?? 0,
      failureCount: channel?.failureCount ?? 0,
      gatewayHost,
      gatewayPort,
      corpCode,
      account,
      accessNo,
      cmppVersion,
      desiredConnections: Number(desiredConnections) || 1,
      windowSize: Number(windowSize) || 16,
      extensionDigits: Number(extensionDigits),
      rateLimitPerSecond: Number(flowLimit),
      passwordCipher: password || undefined,
    });
  }

  return (
    <Modal
      footer={(
        <>
          <Button onClick={onClose} variant="ghost">取消</Button>
          <Button onClick={submit}>确认</Button>
        </>
      )}
      onClose={onClose}
      open
      size="xl"
      title={<div className="template-modal-title"><h2>{modal.mode === 'edit' ? '编辑通道' : '创建通道'}</h2></div>}
    >
      <div className="sms-channel-form">
        <section>
          <h3>业务信息</h3>
          <div className="sms-channel-form-grid">
            <Input label="* 通道名称" onChange={(event) => setName(event.target.value)} placeholder="请输入通道名称" value={name} />
            <div className="sms-channel-radio-row">
              <span>* 运营商</span>
              {(['mobile', 'unicom', 'telecom', 'all'] as const).map((item) => (
                <label key={item}>
                  <input checked={carrier === item} onChange={() => setCarrier(item)} type="radio" />
                  {carrierLabelMap[item]}
                </label>
              ))}
            </div>
            <Input error={unitPriceError} label="* 单价（元）" min="0" onChange={(event) => { setUnitPrice(event.target.value); setUnitPriceError(''); }} step="0.0001" type="number" value={unitPrice} />
            <Select label="* 发送地区" onChange={(event) => setRegion(event.target.value)} options={regionOptions} value={region} />
          </div>
        </section>

        <section>
          <h3>参数配置</h3>
          <div className="sms-channel-form-grid">
            <Select label="* 协议选择" onChange={(event) => setProtocol(event.target.value)} options={protocolOptions} value={protocol} />
            <div className="sms-channel-inline-field">
              <Input label="* 网关地址" onChange={(event) => setGatewayHost(event.target.value)} placeholder="请输入网关地址" value={gatewayHost} />
              <Input label="端口" onChange={(event) => setGatewayPort(event.target.value)} value={gatewayPort} />
            </div>
            <Input label="* 企业代码" onChange={(event) => setCorpCode(event.target.value)} placeholder="请输入企业代码" value={corpCode} />
            <Input label="* 网关账号" onChange={(event) => setAccount(event.target.value)} placeholder="请输入网关账号" value={account} />
            <Select label="* CMPP版本" onChange={(event) => setCmppVersion(event.target.value as '2.0' | '3.0')} options={cmppVersionOptions} value={cmppVersion} />
            <Input
              hint={modal.mode === 'edit' ? '已配置的密码不会回显；留空保持不变，填写新密码才更新。' : undefined}
              label="网关密码"
              onChange={(event) => setPassword(event.target.value)}
              placeholder={modal.mode === 'edit' ? '留空不修改' : '请输入网关密码'}
              required={modal.mode === 'create'}
              type="password"
              value={password}
            />
            <div className="sms-channel-inline-field">
              <Input label="* 接入号" onChange={(event) => setAccessNo(event.target.value)} placeholder="请输入通道接入号" value={accessNo} />
            <Input label="扩展位数" max="20" min="0" onChange={(event) => setExtensionDigits(event.target.value)} type="number" value={extensionDigits} />
          </div>
            <Input label="* 通道流速" max="2000" min="1" onChange={(event) => setFlowLimit(event.target.value)} suffix="条/秒" type="number" value={flowLimit} />
            <Input label="* 期望连接数" onChange={(event) => setDesiredConnections(event.target.value)} placeholder="1" value={desiredConnections} />
            <Input label="* 提交窗口" onChange={(event) => setWindowSize(event.target.value)} placeholder="16" value={windowSize} />
          </div>
        </section>
      </div>
    </Modal>
  );
}

function SmsTestModal({
  channel,
  onClose,
  onOpenRecords,
}: {
  channel: SmsChannel;
  onClose: () => void;
  onOpenRecords: () => void;
}) {
  const [phones, setPhones] = useState('');
  const [content, setContent] = useState('');
  const [accessNo, setAccessNo] = useState('');
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState('');
  const [result, setResult] = useState<ChannelTestResponse | null>(null);
  const billingCount = Math.max(1, Math.ceil(content.length / 67));

  async function submitTestSms() {
    if (!phones.trim()) {
      setError('请输入测试手机号');
      return;
    }
    if (!content.trim()) {
      setError('请输入测试短信内容');
      return;
    }
    setSubmitting(true);
    setError('');
    setResult(null);
    try {
      const response = await adminApi.testChannel(channel.id, {
        phones,
        content,
        accessNo: accessNo.trim() || undefined,
      });
      setResult(response);
    } catch (failure) {
      setError(failure instanceof Error ? failure.message : '测试短信发送失败');
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <Modal
      footer={(
        <>
          <Button onClick={onClose} variant="ghost">取消</Button>
          {result ? <Button icon={<ExternalLink size={16} />} onClick={onOpenRecords} variant="ghost">查看短信记录</Button> : null}
          <Button disabled={submitting || Boolean(result)} icon={<Send size={16} />} onClick={submitTestSms}>
            {submitting ? '发送中...' : result ? '已提交' : '发送测试'}
          </Button>
        </>
      )}
      onClose={onClose}
      open
      size="xl"
      title={(
        <div className="sms-test-title">
          <span><Send size={30} /></span>
          <div>
            <h2>短信测试</h2>
            <p>向指定手机号发送测试短信</p>
          </div>
        </div>
      )}
    >
      <div className="sms-test-modal">
        <div className="sms-test-channel">
          <span>测试通道</span>
          <strong>{channel.name}</strong>
        </div>
        <Textarea
          label="* 手机号码"
          onChange={(event) => setPhones(event.target.value)}
          placeholder="请输入手机号码，多个号码用逗号（,）隔开，最多允许10个号码"
          rows={3}
          value={phones}
        />
        <p className="muted">支持多个号码，用中英文逗号分隔，最多10个</p>
        <Textarea
          label="* 短信内容"
          onChange={(event) => setContent(event.target.value)}
          placeholder="请输入短信内容"
          rows={4}
          value={content}
        />
        <div className="sms-test-counter">
          <span>按67字/条计费</span>
          <strong>{content.length} 字符 <i /> 计费 {billingCount} 条</strong>
        </div>
        <Input
          label="接入号（选填）"
          onChange={(event) => setAccessNo(event.target.value)}
          placeholder="请输入接入号"
          value={accessNo}
        />
        <div className="signature-alert sms-test-note">
          <Info size={18} />
          <span>如需测试接入号，可在通道接入号后上追加接入号进行测试</span>
        </div>
        {error ? <p className="form-error">{error}</p> : null}
        {result ? (
          <div className="sms-test-result">
            <div className="sms-test-result__summary">
              <CheckCircle2 size={20} />
              <div>
                <strong>已写入真实发送队列</strong>
                <span>测试流水号：{result.testNo}，共 {result.submitted} 条</span>
              </div>
            </div>
            <div className="sms-test-result__records">
              {result.messages.map((message) => (
                <div key={message.messageRecordId}>
                  <span>{message.phoneNumber}</span>
                  <code>{message.submitId}</code>
                </div>
              ))}
            </div>
          </div>
        ) : null}
      </div>
    </Modal>
  );
}

export function AdminChannelsPage() {
  const navigate = useNavigate();
  const [channels, setChannels] = useState<SmsChannel[]>([]);
  const [error, setError] = useState('');
  const [keyword, setKeyword] = useState('');
  const [carrier, setCarrier] = useState('all');
  const [status, setStatus] = useState('all');
  const [modal, setModal] = useState<ChannelModalState | null>(null);
  const [testChannel, setTestChannel] = useState<SmsChannel | null>(null);
  const [confirmAction, setConfirmAction] = useState<ChannelConfirmAction | null>(null);
  const [logState, setLogState] = useState<ChannelLogState | null>(null);
  const [logKeyword, setLogKeyword] = useState('');
  const [page, setPage] = useState(1);
  const pageSize = 10;

  function loadChannels() {
    adminApi.listChannels()
      .then(async (items) => {
        const visibleChannels = items.filter((item) => item.status !== 'deleted');
        const connections = await Promise.all(visibleChannels.map((channel) =>
          adminApi.listChannelConnections(channel.id).catch(() => [] as CmppConnectionState[]),
        ));
        setChannels(visibleChannels.map((item, index) => mapApiChannel(item, connections[index])));
        setError('');
      })
      .catch((failure: Error) => setError(failure.message || '通道列表加载失败'));
  }

  useEffect(() => {
    loadChannels();
  }, []);

  const filteredChannels = useMemo(
    () => channels.filter((channel) => {
      const matchesKeyword = !keyword || channel.name.includes(keyword);
      const matchesCarrier = carrier === 'all' || channel.carrier === carrier;
      const matchesStatus = status === 'all' || channel.status === status;
      return matchesKeyword && matchesCarrier && matchesStatus;
    }),
    [carrier, channels, keyword, status],
  );
  const totalPages = Math.max(1, Math.ceil(filteredChannels.length / pageSize));
  const currentPage = Math.min(page, totalPages);
  const visibleChannels = filteredChannels.slice((currentPage - 1) * pageSize, currentPage * pageSize);

  useEffect(() => {
    setPage(1);
  }, [carrier, channels.length, keyword, status]);

  async function upsertChannel(nextChannel: SmsChannel) {
    try {
      if (modal?.mode === 'edit' && modal.channel) {
        await adminApi.updateChannel(modal.channel.id, buildChannelPayload(nextChannel, nextChannel.passwordCipher));
      } else {
        await adminApi.createChannel({
          code: `CH-${Date.now()}`,
          ...buildChannelPayload(nextChannel, nextChannel.passwordCipher || 'secret'),
          status: 'active',
        });
      }
      loadChannels();
      setModal(null);
      setError('');
    } catch (failure) {
      setError(failure instanceof Error ? failure.message : '通道保存失败');
    }
  }

  async function toggleChannel(channel: SmsChannel) {
    await adminApi.changeChannelStatus(channel.id, mapUiStatusToApi(channel));
    loadChannels();
  }

  async function deleteChannel(id: string) {
    await adminApi.deleteChannel(id, '运营端删除通道');
    setChannels((items) => items.filter((item) => item.id !== id));
  }

  async function copyChannel(channel: SmsChannel) {
    await adminApi.copyChannel(channel.id);
    loadChannels();
  }

  async function openLinkLogs(channel: SmsChannel) {
    setLogState({ channel });
    setLogKeyword('');
    try {
      const data = await adminApi.listChannelConnectionLogs(channel.id);
      setLogState({ channel, data });
    } catch (failure) {
      setLogState(null);
      setError(failure instanceof Error ? failure.message : '连接日志加载失败');
    }
  }

  function submitConfirmAction() {
    if (!confirmAction) {
      return;
    }

    if (confirmAction.type === 'toggle') {
      void toggleChannel(confirmAction.channel);
    }

    if (confirmAction.type === 'delete') {
      void deleteChannel(confirmAction.channel.id);
    }

    if (confirmAction.type === 'copy') {
      void copyChannel(confirmAction.channel);
    }

    setConfirmAction(null);
  }

  const confirmTitle = confirmAction?.type === 'delete'
    ? '确认删除通道'
    : confirmAction?.type === 'copy'
      ? '确认复制通道'
      : confirmAction?.channel.status === 'stopped'
        ? '确认启用通道'
        : '确认停用通道';

  const confirmDescription = confirmAction?.type === 'delete'
    ? '删除后该通道将从列表移除，副本通道的本地记录也会同步清理。'
    : confirmAction?.type === 'copy'
      ? '系统将复制当前通道配置和报备详情，并新建一条名称带“副本”的通道。'
      : confirmAction?.channel.status === 'stopped'
        ? '启用后通道会进入连接中状态，后续可继续观察网关连接。'
        : '停用后该通道将不再承接新的发送任务。';

  return (
    <section className="page-stack sms-channel-page">
      <div className="page-heading">
        <Breadcrumb items={['短信通道管理']} />
        <Button icon={<Plus size={16} />} onClick={() => setModal({ mode: 'create' })}>添加通道</Button>
      </div>
      {error ? <p className="form-error">{error}</p> : null}

      <div className="surface sms-channel-filter">
        <div className="sms-channel-filter-grid">
          <Input label="通道名称" onChange={(event) => setKeyword(event.target.value)} placeholder="请输入通道名称" value={keyword} />
          <Select label="运营商" onChange={(event) => setCarrier(event.target.value)} options={carrierOptions} value={carrier} />
          <Select label="当前状态" onChange={(event) => setStatus(event.target.value)} options={statusOptions} value={status} />
          <div className="audit-filter-actions">
            <Button icon={<Search size={16} />}>查询</Button>
            <Button onClick={() => { setKeyword(''); setCarrier('all'); setStatus('all'); }} variant="ghost">重置</Button>
          </div>
        </div>
      </div>

      <div className="surface sms-channel-table">
        <div className="sms-channel-table__head">
          <span>通道信息</span>
          <span>运营商 / 成本</span>
          <span>状态</span>
          <span>今日总数</span>
          <span>今日发送质量</span>
          <span>操作</span>
        </div>
        {visibleChannels.map((channel) => (
          <article className="sms-channel-table__row" key={channel.id}>
            <div className="sms-channel-identity">
              <strong>{channel.name}</strong>
              <span>通道 ID：{channel.id}</span>
            </div>
            <div className="sms-channel-carrier-price">
              <Tag tone={carrierToneMap[channel.carrier]}>{carrierLabelMap[channel.carrier]}</Tag>
              <strong>{formatCents(channel.unitPrice)} 元</strong>
            </div>
            <div className="sms-channel-status-cell">
              <Tag tone={statusToneMap[channel.status]}>{statusLabelMap[channel.status]}</Tag>
              <button onClick={() => void openLinkLogs(channel)} type="button">
                <FileText size={14} />连接日志
              </button>
            </div>
            <strong className="sms-channel-total">{channel.total.toLocaleString('zh-CN')}</strong>
            <div className="sms-channel-quality">
              <RateBlock count={channel.successCount} label="成功" rate={channel.successRate} tone={channel.successRate >= 80 ? 'success' : 'warning'} />
              <RateBlock count={channel.unknownCount} label="未知" rate={channel.unknownRate} />
              <RateBlock count={channel.failureCount} label="失败" rate={channel.failureRate} tone={channel.failureRate >= 50 ? 'danger' : 'neutral'} />
            </div>
            <div className="sms-channel-actions">
              <button className="sms-channel-report-entry" onClick={() => navigate(`/admin/channels/${channel.id}/reports`)} type="button">
                <Eye size={15} />报备详情
              </button>
              <button onClick={() => setModal({ mode: 'edit', channel })} type="button"><Pencil size={15} />编辑</button>
              <button onClick={() => setConfirmAction({ type: 'copy', channel })} type="button"><Copy size={15} />复制通道</button>
              <button onClick={() => setTestChannel(channel)} type="button"><Send size={15} />发送测试</button>
              <button className={channel.status === 'stopped' ? 'is-success' : 'is-warning'} onClick={() => setConfirmAction({ type: 'toggle', channel })} type="button">
                <Power size={15} />{channel.status === 'stopped' ? '启用' : '停用'}
              </button>
              <button className="is-danger" onClick={() => setConfirmAction({ type: 'delete', channel })} type="button"><Trash2 size={15} />删除</button>
            </div>
          </article>
        ))}
        <Pagination
          nextDisabled={currentPage >= totalPages}
          onNext={() => setPage((value) => Math.min(totalPages, value + 1))}
          onPrevious={() => setPage((value) => Math.max(1, value - 1))}
          page={currentPage}
          totalPages={totalPages}
          onPageChange={setPage}
          previousDisabled={currentPage <= 1}
          total={filteredChannels.length}
        />
      </div>

      {modal ? (
        <ChannelFormModal
          modal={modal}
          onClose={() => setModal(null)}
          onSubmit={upsertChannel}
        />
      ) : null}

      {testChannel ? (
        <SmsTestModal
          channel={testChannel}
          onClose={() => setTestChannel(null)}
          onOpenRecords={() => {
            setTestChannel(null);
            navigate('/admin/sms-records');
          }}
        />
      ) : null}

      {confirmAction ? (
        <Modal
          footer={(
            <>
              <Button onClick={() => setConfirmAction(null)} variant="ghost">取消</Button>
              <Button onClick={submitConfirmAction} variant={confirmAction.type === 'delete' ? 'danger' : 'primary'}>确认</Button>
            </>
          )}
          onClose={() => setConfirmAction(null)}
          open
          title={confirmTitle}
        >
          <div className="channel-confirm">
            <strong>{confirmAction.channel.name}</strong>
            <span>通道 ID：{confirmAction.channel.id}</span>
            <p>{confirmDescription}</p>
          </div>
        </Modal>
      ) : null}

      {logState ? (
        <Modal
          footer={<Button onClick={() => setLogState(null)} variant="ghost">关闭</Button>}
          onClose={() => setLogState(null)}
          open
          size="xl"
          title={<div className="template-modal-title"><h2>连接日志</h2><p>{logState.channel.name}</p></div>}
        >
          <div className="channel-log-modal">
            {logState.data ? (
              <div className="channel-connection-summary">
                {logState.data.connectionStates.map((connection) => (
                  <article key={connection.id}>
                    <div>
                      <span>连接 ID</span>
                      <strong>{connection.connectionId}</strong>
                    </div>
                    <Tag tone={connection.status === 'connected' ? 'success' : connection.lastError ? 'danger' : 'info'}>
                      {connectionStatusLabelMap[connection.status] ?? connection.status}
                    </Tag>
                    <div>
                      <span>当前 / 期望</span>
                      <strong>{connection.currentConnections} / {connection.desiredConnections}</strong>
                    </div>
                    <div>
                      <span>最近心跳</span>
                      <strong>{formatDateTime(connection.lastHeartbeatAt)}</strong>
                    </div>
                    {connection.lastError ? <p>{connection.lastError}</p> : null}
                  </article>
                ))}
                {logState.data.connectionStates.length === 0 ? <p className="muted">暂无连接状态回写</p> : null}
              </div>
            ) : null}
            <Input label="筛选日志" onChange={(event) => setLogKeyword(event.target.value)} placeholder="事件、资源或详情关键词" value={logKeyword} />
            <div className="channel-log-list">
            {(logState.data?.logs ?? []).filter((log) => {
              const keyword = logKeyword.trim().toLowerCase();
              return !keyword || `${log.event} ${log.resourceId ?? ''} ${formatLogDetail(log.detail)}`.toLowerCase().includes(keyword);
            }).map((log) => (
              <article className="channel-log-item" key={log.id}>
                <div>
                  <strong>{log.event}</strong>
                  <span>{formatDateTime(log.time)}</span>
                </div>
                <div>
                  <span>{log.resourceId}</span>
                  <pre>{formatLogDetail(log.detail)}</pre>
                </div>
              </article>
            ))}
            {logState.data && logState.data.logs.filter((log) => {
              const keyword = logKeyword.trim().toLowerCase();
              return !keyword || `${log.event} ${log.resourceId ?? ''} ${formatLogDetail(log.detail)}`.toLowerCase().includes(keyword);
            }).length === 0 ? <p className="muted">未找到匹配的连接日志</p> : null}
            {!logState.data ? <p className="muted">正在加载连接日志...</p> : null}
            </div>
          </div>
        </Modal>
      ) : null}
    </section>
  );
}