import { Alert, Button, Descriptions, Space } from 'antd';
import { Link } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { api } from '../api/client';
import { PageHeader } from './ResourcePage';

type ChannelRow = {
  id?: string;
  inboxEnabled?: string;
  mobileImSdk?: string;
  online?: number;
  note?: string;
};

export default function MessagesChannelPage() {
  const q = useQuery({
    queryKey: ['/system/message-channel'],
    queryFn: () => api.get('/system/message-channel'),
  });
  const rows = ((q.data as { data?: ChannelRow[] })?.data || q.data || []) as ChannelRow[];
  const row = rows[0] || {};

  return (
    <>
      <PageHeader
        title="消息通道"
        description="站内待办、审批提醒和即时通讯的运行状态。同事私聊请用「消息」；待办和审批走统一待办/待我审批。"
        extra={
          <Space>
            <Link to="/office/im">
              <Button type="default">打开消息</Button>
            </Link>
            <Link to="/office/todos">
              <Button type="default">待办事项</Button>
            </Link>
          </Space>
        }
      />
      <Alert
        type="info"
        showIcon
        style={{ marginBottom: 16 }}
        message="Web 与手机 App 均已接入自研 IM（MobileIMSDK + TCP 长连接）。通话依赖双方打开页面并走 STUN，失败时先确认网络而不是改弹层。"
      />
      <Descriptions bordered size="small" column={1} style={{ maxWidth: 720 }}>
        <Descriptions.Item label="站内待办 / 审批">{row.inboxEnabled || '已开启'}</Descriptions.Item>
        <Descriptions.Item label="即时通讯">{row.mobileImSdk || '已启用'}</Descriptions.Item>
        <Descriptions.Item label="当前在线">{typeof row.online === 'number' ? `${row.online} 人` : '—'}</Descriptions.Item>
        <Descriptions.Item label="说明">{row.note || '—'}</Descriptions.Item>
      </Descriptions>
    </>
  );
}