"use client"

import "antd/dist/reset.css"

import {useEffect, useMemo, useRef, useState} from "react"
import dynamic from "next/dynamic"
import type {MenuProps} from "antd"
import {
  Badge,
  Button,
  Card,
  Col,
  Collapse,
  Descriptions,
  Divider,
  Drawer,
  Form,
  Input,
  Layout,
  Menu,
  Modal,
  Popover,
  Progress,
  Row,
  Segmented,
  Select,
  Slider,
  Space,
  Statistic,
  Steps,
  Switch,
  Table,
  Tabs,
  Tag,
  Timeline,
  Typography,
  Upload,
} from "antd"
import {
  Activity,
  Bell,
  Box,
  Boxes,
  Check,
  CheckCircle2,
  CloudUpload,
  Cog,
  Database,
  Factory,
  FileJson2,
  Globe,
  Layers,
  LinkIcon,
  Lock,
  Network,
  Package,
  Radar,
  RefreshCw,
  Send,
  Server,
  Settings,
  ShieldCheck,
  SignalHigh,
  Sprout,
  UploadIcon,
  Users,
} from "lucide-react"
import globalMessage from "@/app/_modules/globalMessage";

const { Header, Sider, Content } = Layout
const { TextArea } = Input
const { Title, Text } = Typography

// Lazy components that require browser APIs
const DeviceMap = dynamic(() => import("./components/device-map"), { ssr: false })
const RealtimeLine = dynamic(() => import("./components/realtime-line"), { ssr: false })
const QueueGauge = dynamic(() => import("./components/queue-gauge"), { ssr: false })

type Project = {
  id: string
  name: string
  description?: string
  createdAt: string
}
type Product = {
  id: string
  name: string
  protocol: "TCP" | "UDP" | "LWM2M" | "MQTTS" | "HTTP/HTTPS"
  projectId: string
  thirdParty: boolean
  authToken?: string
}
type ThingModel = {
  id: string
  productId: string
  json: string
}
type Device = {
  id: string
  name: string
  productId: string
  projectId: string
  status: "online" | "offline"
  lastSeen?: string
  lat: number
  lng: number
}

type Telemetry = {
  ts: number
  value: number
  deviceId: string
}

const initialProjects: Project[] = [
  { id: "p1", name: "城市燃气", description: "管网与阀井监测", createdAt: new Date().toISOString() },
  { id: "p2", name: "城市水务", description: "供排水管线监测", createdAt: new Date().toISOString() },
]
const initialProducts: Product[] = [
  { id: "prod1", name: "压力传感器A", protocol: "MQTTS", projectId: "p1", thirdParty: false },
  { id: "prod2", name: "井盖监测B", protocol: "HTTP/HTTPS", projectId: "p1", thirdParty: true, authToken: "TP-XXXX" },
  { id: "prod3", name: "流量计C", protocol: "LWM2M", projectId: "p2", thirdParty: false },
]
const initialThingModels: ThingModel[] = [
  {
    id: "tm1",
    productId: "prod1",
    json: JSON.stringify(
      {
        properties: [
          { id: "pressure", name: "压力", type: "number", unit: "kPa" },
          { id: "battery", name: "电量", type: "number", unit: "%" },
        ],
        events: [{ id: "alarm", name: "告警", level: "high" }],
        services: [{ id: "reset", name: "复位", in: {}, out: {} }],
      },
      null,
      2,
    ),
  },
]
const initialDevices: Device[] = [
  {
    id: "dev-001",
    name: "压力A-001",
    productId: "prod1",
    projectId: "p1",
    status: "online",
    lastSeen: new Date().toISOString(),
    lat: 31.231706,
    lng: 121.472644,
  },
  {
    id: "dev-002",
    name: "井盖B-002",
    productId: "prod2",
    projectId: "p1",
    status: "offline",
    lat: 31.220706,
    lng: 121.462644,
  },
  {
    id: "dev-003",
    name: "流量C-003",
    productId: "prod3",
    projectId: "p2",
    status: "online",
    lastSeen: new Date().toISOString(),
    lat: 31.241706,
    lng: 121.482644,
  },
]

function useInterval(callback: () => void, delay: number | null) {
  const savedRef = useRef<() => void>(null)
  useEffect(() => {
    savedRef.current = callback
  }, [callback])
  useEffect(() => {
    if (delay === null) return
    const id = setInterval(() => savedRef.current && savedRef.current(), delay)
    return () => clearInterval(id)
  }, [delay])
}

export default function Page() {
  const [collapsed, setCollapsed] = useState(false)
  const [activeKey, setActiveKey] = useState<string>("overview")

  // Core states
  const [projects, setProjects] = useState<Project[]>(initialProjects)
  const [products, setProducts] = useState<Product[]>(initialProducts)
  const [thingModels, setThingModels] = useState<ThingModel[]>(initialThingModels)
  const [devices, setDevices] = useState<Device[]>(initialDevices)

  const [telemetry, setTelemetry] = useState<Telemetry[]>([])
  const [backlog, setBacklog] = useState<number>(8)
  const [throughput, setThroughput] = useState<number>(120)
  const [alerts, setAlerts] = useState<number>(1)
  const [todayCount, setTodayCount] = useState<number>(3200)

  const [logs, setLogs] = useState<
    { key: string; time: string; deviceId: string; product: string; msg: string; level: "INFO" | "WARN" | "ERROR" }[]
  >([])

  // UI states for feedback
  const [projectModalOpen, setProjectModalOpen] = useState(false)
  const [productModalOpen, setProductModalOpen] = useState(false)
  const [deviceModalOpen, setDeviceModalOpen] = useState(false)
  const [cmdModal, setCmdModal] = useState<{ open: boolean; device?: Device }>({ open: false })
  const [dataDrawer, setDataDrawer] = useState<{ open: boolean; device?: Device }>({ open: false })
  const [registerDrawer, setRegisterDrawer] = useState(false)
  const [notifOpen, setNotifOpen] = useState(false)

  // Extra feedback modals
  const [svcModal, setSvcModal] = useState<{ open: boolean; svc?: any }>({ open: false })
  const [weightModal, setWeightModal] = useState<{ open: boolean; weight: number }>({ open: false, weight: 50 })
  const [scheduleModal, setScheduleModal] = useState<boolean>(false)
  const [apiAccessModal, setApiAccessModal] = useState<boolean>(false)
  const [rbacModal, setRbacModal] = useState<{ open: boolean; user?: any }>({ open: false })

  const [form] = Form.useForm()
  const [productForm] = Form.useForm()
  const [deviceForm] = Form.useForm()
  const [cmdForm] = Form.useForm()

  // Simulate telemetry stream, queue and device health
  useInterval(() => {
    const onlineDevices = devices.filter((d) => d.status === "online")
    if (onlineDevices.length === 0) return
    const randDevice = onlineDevices[Math.floor(Math.random() * onlineDevices.length)]
    const v = Math.round(80 + Math.random() * 40 - 20)
    const now = Date.now()
    setTelemetry((prev) => {
      const next = [...prev, { ts: now, value: v, deviceId: randDevice.id }].slice(-120)
      return next
    })
    setTodayCount((c) => c + 1)
    setBacklog((b) => Math.max(0, b + 1 - Math.floor(throughput / 100)))
    setLogs((prev) => {
      const product = products.find((p) => p.id === randDevice.productId)?.name ?? "-"
      const next = [
        {
          key: `${now}`,
          time: new Date(now).toLocaleTimeString(),
          deviceId: randDevice.id,
          product,
          msg: `上报: value=${v}`,
          level: "INFO" as const,
        },
        ...prev,
      ].slice(0, 50)
      return next
    })
    if (Math.random() < 0.03) {
      setAlerts((a) => a + 1)
      setLogs((prev) => [
        {
          key: `${now}-warn`,
          time: new Date(now).toLocaleTimeString(),
          deviceId: randDevice.id,
          product: products.find((p) => p.id === randDevice.productId)?.name ?? "-",
          msg: "告警: 压力异常",
          level: "WARN",
        },
        ...prev,
      ])
    }
    setDevices((prev) => prev.map((d) => (d.id === randDevice.id ? { ...d, lastSeen: new Date().toISOString() } : d)))
  }, 1200)

  const onlineCount = devices.filter((d) => d.status === "online").length

  const menuItems: MenuProps["items"] = [
    { key: "overview", icon: <Activity size={18} />, label: "总览" },
    { key: "south", icon: <Server size={18} />, label: "南向接入" },
    { key: "terminal", icon: <LinkIcon size={18} />, label: "终端接入" },
    { key: "distribution", icon: <Send size={18} />, label: "数据分发" },
    { key: "mq", icon: <Network size={18} />, label: "北向消息队列" },
    { key: "warehouse", icon: <Database size={18} />, label: "数据仓库" },
    { key: "openapi", icon: <Globe size={18} />, label: "数据共享开放" },
    { key: "micro", icon: <Boxes size={18} />, label: "微服务" },
    { key: "auth", icon: <ShieldCheck size={18} />, label: "认证鉴权" },
  ]

  const projectOptions = projects.map((p) => ({ label: p.name, value: p.id }))
  const productOptions = products.map((p) => ({ label: p.name, value: p.id }))

  function addProject(values: any) {
    const p: Project = {
      id: `p-${Math.random().toString(36).slice(2, 8)}`,
      name: values.name,
      description: values.description,
      createdAt: new Date().toISOString(),
    }
    setProjects((prev) => [p, ...prev])
    setProjectModalOpen(false)
    form.resetFields()
    globalMessage.success("项目已创建")
  }
  function addProduct(values: any) {
    const prod: Product = {
      id: `prod-${Math.random().toString(36).slice(2, 8)}`,
      name: values.name,
      protocol: values.protocol,
      projectId: values.projectId,
      thirdParty: values.thirdParty || false,
      authToken: values.thirdParty ? `TP-${Math.random().toString(36).slice(2, 8)}` : undefined,
    }
    setProducts((prev) => [prod, ...prev])
    setProductModalOpen(false)
    productForm.resetFields()
    globalMessage.success("产品已创建")
  }
  function addDevice(values: any) {
    const dev: Device = {
      id: values.id,
      name: values.name,
      productId: values.productId,
      projectId: values.projectId,
      status: "offline",
      lat: values.lat ?? 31.23 + Math.random() * 0.05,
      lng: values.lng ?? 121.47 + Math.random() * 0.05,
    }
    setDevices((prev) => [dev, ...prev])
    setDeviceModalOpen(false)
    deviceForm.resetFields()
    globalMessage.success("设备已注册")
  }
  function toggleDevice(id: string, online: boolean) {
    setDevices((prev) =>
      prev.map((d) =>
        d.id === id
          ? { ...d, status: online ? "online" : "offline", lastSeen: online ? new Date().toISOString() : d.lastSeen }
          : d,
      ),
    )
    globalMessage.success(online ? "设备上线成功" : "设备已下线")
  }
  function sendCommand(values: any) {
    const device = cmdModal.device
    if (!device) return
    const now = Date.now()
    setLogs((prev) => [
      {
        key: `${now}-cmd`,
        time: new Date(now).toLocaleTimeString(),
        deviceId: device.id,
        product: products.find((p) => p.id === device.productId)?.name ?? "-",
        msg: `下发指令: ${values.serviceId} ${values.payload}`,
        level: "INFO",
      },
      ...prev,
    ])
    setCmdModal({ open: false })
    cmdForm.resetFields()
    globalMessage.success("指令已发送")
  }

  const telemetrySeries = useMemo(() => {
    const xs = telemetry.map((t) => new Date(t.ts).toLocaleTimeString())
    const ys = telemetry.map((t) => t.value)
    return { xs, ys }
  }, [telemetry])

  const alertLogs = logs.filter((l) => l.level !== "INFO").slice(0, 10)

  return (
    <Layout style={{ minHeight: "100vh" }}>
      <Sider collapsible collapsed={collapsed} onCollapse={setCollapsed} width={240}>
        <div style={{ height: 60, display: "flex", alignItems: "center", padding: "0 12px", gap: 8 }}>
          <Sprout size={22} color="white" />
          {!collapsed && <Text style={{ color: "white", fontWeight: 600 }}>生命线物联网平台</Text>}
        </div>
        <Menu
          theme="dark"
          mode="inline"
          selectedKeys={[activeKey]}
          items={menuItems}
          onClick={(e) => setActiveKey(e.key)}
        />
      </Sider>
      <Layout>
        <Header
          style={{
            background: "white",
            borderBottom: "1px solid #f0f0f0",
            display: "flex",
            alignItems: "center",
            padding: "0 16px",
            gap: 12,
          }}
        >
          <Radar size={22} />
          <Title level={4} style={{ margin: 0 }}>
            城市生命线物联网平台
          </Title>
          <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 12 }}>
            <Badge count={alerts} overflowCount={99}>
              <Button icon={<Bell size={16} />} onClick={() => setNotifOpen(true)} aria-label="查看通知" />
            </Badge>
            <Button icon={<RefreshCw size={16} />} onClick={() => globalMessage.success("已刷新")} aria-label="刷新" />
            <Button type="primary" icon={<CloudUpload size={16} />} onClick={() => setRegisterDrawer(true)}>
              设备注册
            </Button>
          </div>
        </Header>
        <Content style={{ padding: 16 }}>
          {activeKey === "overview" && (
            <div className="space-y-4">
              <Row gutter={[16, 16]}>
                <Col xs={12} md={6}>
                  <Card>
                    <Statistic title="设备在线" value={onlineCount} prefix={<SignalHigh size={16} />} />
                  </Card>
                </Col>
                <Col xs={12} md={6}>
                  <Card>
                    <Statistic title="今日上报" value={todayCount} prefix={<UploadIcon size={16} />} />
                  </Card>
                </Col>
                <Col xs={12} md={6}>
                  <Card>
                    <Statistic title="队列积压" value={backlog} suffix="条" prefix={<Layers size={16} />} />
                  </Card>
                </Col>
                <Col xs={12} md={6}>
                  <Card>
                    <Statistic title="告警数" value={alerts} prefix={<AlertIcon />} />
                  </Card>
                </Col>
              </Row>
              <Row gutter={[16, 16]}>
                <Col xs={24} lg={16}>
                  <Card title="实时监测趋势">
                    <RealtimeLine title="压力/流量趋势" xs={telemetrySeries.xs} ys={telemetrySeries.ys} />
                  </Card>
                </Col>
                <Col xs={24} lg={8}>
                  <Card title="消息队列压力">
                    <QueueGauge backlog={backlog} throughput={throughput} />
                    <Divider />
                    <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                      <Text>处理吞吐</Text>
                      <Segmented
                        options={[
                          { label: "低", value: 80 },
                          { label: "中", value: 120 },
                          { label: "高", value: 200 },
                        ]}
                        value={throughput}
                        onChange={(v) => {
                          setThroughput(Number(v))
                          globalMessage.success(`已切换吞吐：${v}/s`)
                        }}
                      />
                    </div>
                  </Card>
                </Col>
              </Row>
              <Row gutter={[16, 16]}>
                <Col xs={24} lg={12}>
                  <Card title="设备分布地图">
                    <div style={{ height: 360 }}>
                      <DeviceMap devices={devices} />
                    </div>
                  </Card>
                </Col>
                <Col xs={24} lg={12}>
                  <Card title="实时日志">
                    <Table
                      size="small"
                      dataSource={logs}
                      pagination={{ pageSize: 6 }}
                      columns={[
                        { title: "时间", dataIndex: "time", width: 100 },
                        { title: "设备ID", dataIndex: "deviceId", width: 120 },
                        { title: "产品", dataIndex: "product", width: 120 },
                        {
                          title: "级别",
                          dataIndex: "level",
                          width: 80,
                          render: (lv) =>
                            lv === "INFO" ? (
                              <Tag color="blue">INFO</Tag>
                            ) : lv === "WARN" ? (
                              <Tag color="orange">WARN</Tag>
                            ) : (
                              <Tag color="red">ERROR</Tag>
                            ),
                        },
                        { title: "消息", dataIndex: "msg" },
                      ]}
                    />
                  </Card>
                </Col>
              </Row>
            </div>
          )}

          {activeKey === "south" && (
            <Card>
              <Tabs
                defaultActiveKey="projects"
                items={[
                  {
                    key: "projects",
                    label: (
                      <div className="flex items-center gap-2">
                        <Package size={16} /> 项目管理
                      </div>
                    ),
                    children: (
                      <>
                        <div className="flex justify-between mb-3">
                          <Text type="secondary">按项目分类设备，方便资产统一管理</Text>
                          <Button type="primary" onClick={() => setProjectModalOpen(true)} icon={<PlusIcon />}>
                            新建项目
                          </Button>
                        </div>
                        <Table<Project>
                          rowKey="id"
                          dataSource={projects}
                          columns={[
                            { title: "项目名称", dataIndex: "name" },
                            { title: "描述", dataIndex: "description" },
                            { title: "创建时间", dataIndex: "createdAt", render: (t) => new Date(t).toLocaleString() },
                            {
                              title: "设备数",
                              render: (_, r) => devices.filter((d) => d.projectId === r.id).length,
                            },
                          ]}
                        />
                        <Modal
                          title="新建项目"
                          open={projectModalOpen}
                          onCancel={() => setProjectModalOpen(false)}
                          onOk={() => form.submit()}
                          okText="保存"
                        >
                          <Form form={form} layout="vertical" onFinish={addProject}>
                            <Form.Item label="项目名称" name="name" rules={[{ required: true, message: "请输入名称" }]}>
                              <Input placeholder="例如：城市燃气" />
                            </Form.Item>
                            <Form.Item label="描述" name="description">
                              <Input placeholder="可选" />
                            </Form.Item>
                          </Form>
                        </Modal>
                      </>
                    ),
                  },
                  {
                    key: "products",
                    label: (
                      <div className="flex items-center gap-2">
                        <Box size={16} /> 产品管理
                      </div>
                    ),
                    children: (
                      <>
                        <div className="flex justify-between mb-3">
                          <Text type="secondary">定义产品、添加设备，管理自建与第三方授权产品</Text>
                          <Button type="primary" icon={<PlusIcon />} onClick={() => setProductModalOpen(true)}>
                            新建产品
                          </Button>
                        </div>
                        <Table<Product>
                          rowKey="id"
                          dataSource={products}
                          columns={[
                            { title: "名称", dataIndex: "name" },
                            { title: "协议", dataIndex: "protocol" },
                            {
                              title: "归属项目",
                              dataIndex: "projectId",
                              render: (id) => projects.find((p) => p.id === id)?.name,
                            },
                            {
                              title: "类型",
                              dataIndex: "thirdParty",
                              render: (v: boolean) =>
                                v ? <Tag color="purple">第三方</Tag> : <Tag color="green">自建</Tag>,
                            },
                            {
                              title: "授权Token",
                              dataIndex: "authToken",
                              render: (t) => (t ? <Text code>{t}</Text> : <Text type="secondary">-</Text>),
                            },
                            {
                              title: "设备数",
                              render: (_, r) => devices.filter((d) => d.productId === r.id).length,
                            },
                          ]}
                        />
                        <Modal
                          title="新建产品"
                          open={productModalOpen}
                          onCancel={() => setProductModalOpen(false)}
                          onOk={() => productForm.submit()}
                          okText="保存"
                        >
                          <Form form={productForm} layout="vertical" onFinish={addProduct}>
                            <Form.Item label="产品名称" name="name" rules={[{ required: true }]}>
                              <Input placeholder="例如：压力传感器A" />
                            </Form.Item>
                            <Form.Item label="接入协议" name="protocol" rules={[{ required: true }]}>
                              <Select
                                options={[
                                  { label: "TCP", value: "TCP" },
                                  { label: "UDP", value: "UDP" },
                                  { label: "LWM2M", value: "LWM2M" },
                                  { label: "MQTTS", value: "MQTTS" },
                                  { label: "HTTP/HTTPS", value: "HTTP/HTTPS" },
                                ]}
                              />
                            </Form.Item>
                            <Form.Item label="归属项目" name="projectId" rules={[{ required: true }]}>
                              <Select options={projectOptions} />
                            </Form.Item>
                            <Form.Item label="第三方产品" name="thirdParty" valuePropName="checked">
                              <Switch />
                            </Form.Item>
                          </Form>
                        </Modal>
                      </>
                    ),
                  },
                  {
                    key: "thing",
                    label: (
                      <div className="flex items-center gap-2">
                        <FileJson2 size={16} /> 物模型管理
                      </div>
                    ),
                    children: (
                      <>
                        <Row gutter={[16, 16]}>
                          <Col xs={24} md={12}>
                            <Card
                              title="定义物模型（JSON）"
                              extra={
                                <Button
                                  onClick={() => {
                                    const t: ThingModel = {
                                      id: `tm-${Math.random().toString(36).slice(2, 8)}`,
                                      productId: products[0]?.id ?? "",
                                      json: JSON.stringify(
                                        {
                                          properties: [{ id: "temp", name: "温度", type: "number", unit: "℃" }],
                                          events: [],
                                          services: [],
                                        },
                                        null,
                                        2,
                                      ),
                                    }
                                    setThingModels((prev) => [t, ...prev])
                                    globalMessage.success("已创建示例物模型")
                                  }}
                                >
                                  创建示例
                                </Button>
                              }
                            >
                              <Table
                                size="small"
                                rowKey="id"
                                dataSource={thingModels}
                                pagination={{ pageSize: 5 }}
                                columns={[
                                  { title: "ID", dataIndex: "id", width: 120 },
                                  {
                                    title: "产品",
                                    dataIndex: "productId",
                                    render: (id: string) => products.find((p) => p.id === id)?.name ?? "-",
                                  },
                                  {
                                    title: "属性数",
                                    render: (_, r: ThingModel) => {
                                      try {
                                        const o = JSON.parse(r.json)
                                        return o.properties?.length ?? 0
                                      } catch {
                                        return "-"
                                      }
                                    },
                                  },
                                  {
                                    title: "操作",
                                    render: (_, r: ThingModel) => (
                                      <Space>
                                        <Popover
                                          title="物模型预览"
                                          content={
                                            <pre style={{ maxWidth: 360, maxHeight: 200, overflow: "auto", margin: 0 }}>
                                              {r.json}
                                            </pre>
                                          }
                                        >
                                          <Button size="small">预览</Button>
                                        </Popover>
                                        <Button
                                          size="small"
                                          onClick={() => {
                                            const prod = products.find((p) => p.id === r.productId)
                                            globalMessage.success(`已应用到产品 ${prod?.name ?? "-"}`)
                                          }}
                                        >
                                          应用到产品
                                        </Button>
                                      </Space>
                                    ),
                                  },
                                ]}
                              />
                            </Card>
                          </Col>
                          <Col xs={24} md={12}>
                            <Card title="快速校验">
                              <Form
                                layout="vertical"
                                onFinish={(v) => {
                                  try {
                                    const obj = JSON.parse(v.json)
                                    if (!Array.isArray(obj.properties)) throw new Error("缺少 properties")
                                    globalMessage.success("物模型JSON校验通过")
                                  } catch (e: any) {
                                    globalMessage.error(`JSON错误: ${e.message}`)
                                  }
                                }}
                              >
                                <Form.Item
                                  label="JSON定义"
                                  name="json"
                                  rules={[{ required: true, message: "请输入物模型JSON" }]}
                                  initialValue={thingModels[0]?.json}
                                >
                                  <TextArea rows={12} placeholder="输入物模型JSON" />
                                </Form.Item>
                                <Button type="primary" htmlType="submit" icon={<Check size={16} />}>
                                  校验
                                </Button>
                              </Form>
                            </Card>
                          </Col>
                        </Row>
                      </>
                    ),
                  },
                  {
                    key: "devices",
                    label: (
                      <div className="flex items-center gap-2">
                        <Factory size={16} /> 设备管理
                      </div>
                    ),
                    children: (
                      <>
                        <div className="flex justify-between mb-3">
                          <Text type="secondary">注册、上线、上报数据与指令下发</Text>
                          <Space>
                            <Button icon={<PlusIcon />} onClick={() => setDeviceModalOpen(true)}>
                              注册设备
                            </Button>
                            <Button type="primary" icon={<Send size={16} />} onClick={() => setRegisterDrawer(true)}>
                              批量/页面注册
                            </Button>
                          </Space>
                        </div>
                        <Table<Device>
                          rowKey="id"
                          dataSource={devices}
                          pagination={{ pageSize: 8 }}
                          columns={[
                            { title: "设备ID", dataIndex: "id", width: 140 },
                            { title: "名称", dataIndex: "name" },
                            {
                              title: "项目",
                              dataIndex: "projectId",
                              render: (id) => projects.find((p) => p.id === id)?.name,
                            },
                            {
                              title: "产品",
                              dataIndex: "productId",
                              render: (id) => products.find((p) => p.id === id)?.name,
                            },
                            {
                              title: "状态",
                              dataIndex: "status",
                              render: (s: Device["status"]) =>
                                s === "online" ? <Tag color="green">在线</Tag> : <Tag>离线</Tag>,
                            },
                            {
                              title: "最后上报",
                              dataIndex: "lastSeen",
                              render: (t) => (t ? new Date(t).toLocaleString() : "-"),
                            },
                            {
                              title: "操作",
                              render: (_, r) => (
                                <Space>
                                  {r.status === "online" ? (
                                    <Button size="small" onClick={() => toggleDevice(r.id, false)}>
                                      下线
                                    </Button>
                                  ) : (
                                    <Button size="small" type="primary" onClick={() => toggleDevice(r.id, true)}>
                                      上线
                                    </Button>
                                  )}
                                  <Button
                                    size="small"
                                    icon={<Send size={14} />}
                                    onClick={() => setCmdModal({ open: true, device: r })}
                                  >
                                    下发指令
                                  </Button>
                                  <Button size="small" onClick={() => setDataDrawer({ open: true, device: r })}>
                                    上报数据
                                  </Button>
                                </Space>
                              ),
                            },
                          ]}
                        />
                        <Modal
                          title="注册设备"
                          open={deviceModalOpen}
                          onCancel={() => setDeviceModalOpen(false)}
                          onOk={() => deviceForm.submit()}
                          okText="保存"
                        >
                          <Form form={deviceForm} layout="vertical" onFinish={addDevice}>
                            <Form.Item label="设备ID" name="id" rules={[{ required: true }]}>
                              <Input placeholder="例如：dev-004" />
                            </Form.Item>
                            <Form.Item label="设备名称" name="name" rules={[{ required: true }]}>
                              <Input placeholder="例如：压力A-004" />
                            </Form.Item>
                            <Form.Item label="项目" name="projectId" rules={[{ required: true }]}>
                              <Select options={projectOptions} />
                            </Form.Item>
                            <Form.Item label="产品" name="productId" rules={[{ required: true }]}>
                              <Select options={productOptions} />
                            </Form.Item>
                            <Row gutter={8}>
                              <Col span={12}>
                                <Form.Item label="纬度" name="lat">
                                  <Input type="number" placeholder="31.23" />
                                </Form.Item>
                              </Col>
                              <Col span={12}>
                                <Form.Item label="经度" name="lng">
                                  <Input type="number" placeholder="121.47" />
                                </Form.Item>
                              </Col>
                            </Row>
                          </Form>
                        </Modal>

                        <Modal
                          title={`下发指令 - ${cmdModal.device?.name ?? ""}`}
                          open={cmdModal.open}
                          onCancel={() => setCmdModal({ open: false })}
                          onOk={() => cmdForm.submit()}
                          okText="发送"
                        >
                          <Form form={cmdForm} layout="vertical" onFinish={sendCommand}>
                            <Form.Item label="服务标识" name="serviceId" rules={[{ required: true }]}>
                              <Input placeholder="例如：reset" />
                            </Form.Item>
                            <Form.Item label="负载(JSON)" name="payload" rules={[{ required: true }]}>
                              <TextArea rows={6} placeholder='例如：{"delay":5}' />
                            </Form.Item>
                          </Form>
                        </Modal>

                        <Drawer
                          title={`上报数据 - ${dataDrawer.device?.name ?? ""}`}
                          open={dataDrawer.open}
                          onClose={() => setDataDrawer({ open: false })}
                          width={520}
                        >
                          <Table
                            size="small"
                            pagination={{ pageSize: 10 }}
                            dataSource={logs.filter((l) => l.deviceId === dataDrawer.device?.id)}
                            columns={[
                              { title: "时间", dataIndex: "time", width: 120 },
                              { title: "级别", dataIndex: "level", width: 80 },
                              { title: "消息", dataIndex: "msg" },
                            ]}
                          />
                        </Drawer>
                      </>
                    ),
                  },
                ]}
              />
            </Card>
          )}

          {activeKey === "terminal" && (
            <Row gutter={[16, 16]}>
              <Col xs={24} lg={14}>
                <Card title="设备连接与认证流程">
                  <Steps
                    direction="vertical"
                    items={[
                      {
                        title: "选择协议连接",
                        description: "支持 TCP / UDP / LWM2M / MQTTS / HTTP(S)",
                        icon: <LinkIcon size={16} />,
                      },
                      {
                        title: "设备注册（批量/单一）",
                        description: "提供服务交互或页面交互两种方式",
                        icon: <Users size={16} />,
                      },
                      {
                        title: "授权与安全认证",
                        description: "加解密与签名认证模块，确保高安全场景",
                        icon: <Lock size={16} />,
                      },
                      {
                        title: "上线与心跳",
                        description: "接入后定期保活，保持在线状态",
                        icon: <CheckCircle2 size={16} />,
                      },
                    ]}
                  />
                  <Divider />
                  <Form
                    layout="vertical"
                    onFinish={() => {
                      globalMessage.success("认证通过")
                    }}
                  >
                    <Row gutter={12}>
                      <Col span={12}>
                        <Form.Item label="设备ID" name="id" rules={[{ required: true }]}>
                          <Input placeholder="dev-xxx" />
                        </Form.Item>
                      </Col>
                      <Col span={12}>
                        <Form.Item label="协议" name="protocol" rules={[{ required: true }]}>
                          <Select
                            options={[
                              { label: "TCP", value: "TCP" },
                              { label: "UDP", value: "UDP" },
                              { label: "LWM2M", value: "LWM2M" },
                              { label: "MQTTS", value: "MQTTS" },
                              { label: "HTTP/HTTPS", value: "HTTP/HTTPS" },
                            ]}
                          />
                        </Form.Item>
                      </Col>
                    </Row>
                    <Form.Item label="设备密钥" name="secret" rules={[{ required: true }]}>
                      <Input.Password placeholder="******" />
                    </Form.Item>
                    <Button type="primary" htmlType="submit" icon={<ShieldCheck size={16} />}>
                      认证
                    </Button>
                  </Form>
                </Card>
              </Col>
              <Col xs={24} lg={10}>
                <Card title="批量注册（CSV）">
                  <Upload.Dragger
                    multiple
                    beforeUpload={() => {
                      globalMessage.success("CSV已接收，已加入处理队列")
                      return false
                    }}
                  >
                    <p className="ant-upload-drag-icon">
                      <UploadIcon />
                    </p>
                    <p className="ant-upload-text">点击或拖拽CSV文件到此处上传</p>
                    <p className="ant-upload-hint">示例列：deviceId,productId,projectId,secret</p>
                  </Upload.Dragger>
                </Card>
                <Card title="连接参数示例" className="mt-4">
                  <Descriptions size="small" column={1} bordered>
                    <Descriptions.Item label="MQTTS 服务器">mqtts://iot.example.com:8883</Descriptions.Item>
                    <Descriptions.Item label="HTTP 上报">POST https://api.example.com/iot/ingest</Descriptions.Item>
                    <Descriptions.Item label="LWM2M 服务器">coaps://lwm2m.example.com:5684</Descriptions.Item>
                  </Descriptions>
                </Card>
              </Col>
            </Row>
          )}

          {activeKey === "distribution" && (
            <Row gutter={[16, 16]}>
              <Col xs={24} md={12}>
                <Card title="数据接入与加工流程">
                  <Timeline
                    items={[
                      {
                        color: "blue",
                        children: "协议接入（TCP/UDP/LWM2M/MQTTS/HTTP）",
                      },
                      {
                        color: "green",
                        children: "报文解析（TLV/JSON/自定义）",
                      },
                      {
                        color: "green",
                        children: "清洗与标准化（字段映射/单位换算/去噪）",
                      },
                      {
                        color: "green",
                        children: "入库（时序/对象/冷存）",
                      },
                      {
                        color: "purple",
                        children: "开放共享（发布/订阅）",
                      },
                    ]}
                  />
                </Card>
                <Card title="实时发布/订阅" className="mt-4">
                  <Space direction="vertical" style={{ width: "100%" }}>
                    <div className="flex items-center justify-between">
                      <Text>发布主题</Text>
                      <Text code>{`/city/${products[0]?.id ?? "prod"}/pressure`}</Text>
                    </div>
                    <div className="flex items-center gap-8">
                      <div className="flex items-center gap-2">
                        <Text type="secondary">发布</Text>
                        <Switch defaultChecked onChange={(c) => globalMessage.success(c ? "已开启发布" : "已关闭发布")} />
                      </div>
                      <div className="flex items-center gap-2">
                        <Text type="secondary">订阅</Text>
                        <Switch defaultChecked onChange={(c) => globalMessage.success(c ? "已开启订阅" : "已关闭订阅")} />
                      </div>
                      <Button icon={<Send size={16} />} onClick={() => globalMessage.success("已发布一条消息")}>
                        推送一条
                      </Button>
                    </div>
                  </Space>
                </Card>
              </Col>
              <Col xs={24} md={12}>
                <Card title="加工结果预览">
                  <pre
                    style={{
                      maxHeight: 320,
                      overflow: "auto",
                      background: "#0b1020",
                      color: "#d6e5ff",
                      padding: 12,
                      borderRadius: 8,
                    }}
                  >
                    {`{
  "deviceId": "${devices[0]?.id ?? "dev"}",
  "ts": "${new Date().toISOString()}",
  "model": "pressure",
  "value": ${Number.isFinite(telemetrySeries.ys.at(-1) ?? Number.NaN) ? telemetrySeries.ys.at(-1) : 100},
  "unit": "kPa",
  "quality": "good"
}`}
                  </pre>
                </Card>
              </Col>
            </Row>
          )}

          {activeKey === "mq" && (
            <Row gutter={[16, 16]}>
              <Col xs={24} lg={10}>
                <Card title="流量削峰与高并发处理">
                  <QueueGauge backlog={backlog} throughput={throughput} />
                  <Divider />
                  <Text>解耦采集与处理服务，实现高并发接入</Text>
                  <Progress className="mt-3" percent={Math.min(100, Math.round((throughput / 250) * 100))} steps={12} />
                </Card>
                <Card title="指标类型转换" className="mt-4">
                  <Form
                    layout="vertical"
                    onFinish={() => globalMessage.success("转换规则已保存")}
                    initialValues={{ topic: "按产品", format: "物模型", compress: false }}
                  >
                    <Form.Item label="主题维度" name="topic">
                      <Select
                        options={[
                          { label: "按产品", value: "按产品" },
                          { label: "按物模型指标", value: "按物模型指标" },
                          { label: "按项目", value: "按项目" },
                        ]}
                      />
                    </Form.Item>
                    <Form.Item label="格式转换" name="format">
                      <Select
                        options={[
                          { label: "物模型（标准）", value: "物模型" },
                          { label: "CSV", value: "CSV" },
                          { label: "自定义", value: "自定义" },
                        ]}
                      />
                    </Form.Item>
                    <Form.Item label="开启压缩" name="compress" valuePropName="checked">
                      <Switch />
                    </Form.Item>
                    <Button type="primary" htmlType="submit" icon={<Check size={16} />}>
                      保存
                    </Button>
                  </Form>
                </Card>
              </Col>
              <Col xs={24} lg={14}>
                <Card title="转换前/后对比">
                  <Row gutter={12}>
                    <Col span={12}>
                      <Title level={5}>原始数据</Title>
                      <pre
                        style={{
                          background: "#0b1020",
                          color: "#d6e5ff",
                          padding: 12,
                          borderRadius: 8,
                          minHeight: 220,
                        }}
                      >
                        {`{"dev":"${devices[0]?.id ?? "dev"}","p":${telemetrySeries.ys.at(-1) ?? 100},"ts":${Date.now()}}`}
                      </pre>
                    </Col>
                    <Col span={12}>
                      <Title level={5}>标准化后</Title>
                      <pre
                        style={{
                          background: "#0b1020",
                          color: "#d6e5ff",
                          padding: 12,
                          borderRadius: 8,
                          minHeight: 220,
                        }}
                      >
                        {`{
  "deviceId": "${devices[0]?.id ?? "dev"}",
  "metrics": [{"id":"pressure","value": ${telemetrySeries.ys.at(-1) ?? 100}, "unit":"kPa"}],
  "timestamp": "${new Date().toISOString()}"
}`}
                      </pre>
                    </Col>
                  </Row>
                </Card>
              </Col>
            </Row>
          )}

          {activeKey === "warehouse" && (
            <Row gutter={[16, 16]}>
              <Col xs={24} lg={14}>
                <Card title="原始数据（近50条）">
                  <Table
                    size="small"
                    dataSource={logs.map((l, i) => ({ ...l, idx: i }))}
                    pagination={{ pageSize: 8 }}
                    columns={[
                      { title: "#", dataIndex: "idx", width: 60 },
                      { title: "时间", dataIndex: "time", width: 120 },
                      { title: "设备ID", dataIndex: "deviceId", width: 140 },
                      { title: "消息", dataIndex: "msg" },
                    ]}
                  />
                </Card>
              </Col>
              <Col xs={24} lg={10}>
                <Card title="ETL 作业">
                  <Collapse
                    items={[
                      {
                        key: "extract",
                        label: "抽取",
                        children: <Text>从接入缓冲区读取原始数据，写入ODS层。</Text>,
                      },
                      {
                        key: "clean",
                        label: "清洗",
                        children: <Text>字段校验、缺失填充、单位换算、异常剔除。</Text>,
                      },
                      { key: "load", label: "加载", children: <Text>入库到时序与事实表，供分析与API服务。</Text> },
                    ]}
                    defaultActiveKey={["extract", "clean", "load"]}
                  />
                  <Divider />
                  <Space>
                    <Button type="primary" icon={<PlayIcon />} onClick={() => globalMessage.success("已触发 ETL 作业")}>
                      运行一次
                    </Button>
                    <Button icon={<Settings size={16} />} onClick={() => setScheduleModal(true)}>
                      计划配置
                    </Button>
                  </Space>
                </Card>
              </Col>
            </Row>
          )}

          {activeKey === "openapi" && (
            <Row gutter={[16, 16]}>
              <Col xs={24} lg={12}>
                <Card title="接口服务管理">
                  <Table
                    size="small"
                    rowKey="name"
                    dataSource={[
                      { name: "实时监测查询", path: "/api/metrics/realtime", status: "running" },
                      { name: "设备状态查询", path: "/api/devices/status", status: "running" },
                      { name: "历史数据查询", path: "/api/metrics/history", status: "stopped" },
                    ]}
                    columns={[
                      { title: "名称", dataIndex: "name" },
                      { title: "路径", dataIndex: "path", render: (p) => <Text code>{p}</Text> },
                      {
                        title: "状态",
                        dataIndex: "status",
                        render: (s) =>
                          s === "running" ? (
                            <Badge status="success" text="运行中" />
                          ) : (
                            <Badge status="default" text="已停止" />
                          ),
                      },
                      {
                        title: "操作",
                        render: (_, r) => (
                          <Space>
                            <Button size="small" onClick={() => setSvcModal({ open: true, svc: r })}>
                              配置
                            </Button>
                            <Button
                              size="small"
                              type="primary"
                              onClick={() => globalMessage.success(r.status === "running" ? "已停止" : "已启动")}
                            >
                              {r.status === "running" ? "停止" : "启动"}
                            </Button>
                          </Space>
                        ),
                      },
                    ]}
                  />
                </Card>
              </Col>
              <Col xs={24} lg={12}>
                <Card title="接口定义示例">
                  <pre
                    style={{ background: "#0b1020", color: "#d6e5ff", padding: 12, borderRadius: 8, minHeight: 240 }}
                  >
                    {`GET /api/metrics/realtime?productId=prod1

Response
{
  "code": 0,
  "data": [
    {"deviceId":"dev-001","metric":"pressure","value": 112.3,"unit":"kPa","ts":"${new Date().toISOString()}"}
  ]
}`}
                  </pre>
                </Card>
              </Col>
            </Row>
          )}

          {activeKey === "micro" && (
            <Row gutter={[16, 16]}>
              <Col xs={24} lg={12}>
                <Card title="注册中心（服务发现/健康检查/负载均衡）">
                  <Table
                    size="small"
                    rowKey="name"
                    dataSource={[
                      {
                        name: "ingest-service",
                        addr: "10.0.0.2:7001",
                        status: Math.random() > 0.05 ? "UP" : "DOWN",
                        load: "32%",
                      },
                      { name: "parser-service", addr: "10.0.0.3:7002", status: "UP", load: "41%" },
                      { name: "mq-gateway", addr: "10.0.0.4:7003", status: "UP", load: "27%" },
                      { name: "api-service", addr: "10.0.0.5:7004", status: "UP", load: "36%" },
                    ]}
                    columns={[
                      { title: "服务", dataIndex: "name" },
                      { title: "地址", dataIndex: "addr" },
                      {
                        title: "状态",
                        dataIndex: "status",
                        render: (s) =>
                          s === "UP" ? <Badge status="success" text="UP" /> : <Badge status="error" text="DOWN" />,
                      },
                      { title: "负载", dataIndex: "load" },
                      {
                        title: "操作",
                        render: (_, r) => (
                          <Space>
                            <Button
                              size="small"
                              icon={<RefreshCw size={14} />}
                              onClick={() => globalMessage.success(`已触发健康检查：${r.name}`)}
                            >
                              健康检查
                            </Button>
                            <Button size="small" onClick={() => setWeightModal({ open: true, weight: 50 })}>
                              权重
                            </Button>
                          </Space>
                        ),
                      },
                    ]}
                  />
                </Card>
              </Col>
              <Col xs={24} lg={12}>
                <Card title="配置中心（动态配置/多环境）">
                  <Form
                    layout="vertical"
                    onFinish={() => globalMessage.success("配置已更新")}
                    initialValues={{ env: "dev", log: "info", db: "postgres://neon-db/..." }}
                  >
                    <Form.Item label="环境" name="env">
                      <Select
                        options={[
                          { label: "开发", value: "dev" },
                          { label: "测试", value: "test" },
                          { label: "生产", value: "prod" },
                        ]}
                      />
                    </Form.Item>
                    <Form.Item label="日志级别" name="log">
                      <Select
                        options={[
                          { label: "debug", value: "debug" },
                          { label: "info", value: "info" },
                          { label: "warn", value: "warn" },
                          { label: "error", value: "error" },
                        ]}
                      />
                    </Form.Item>
                    <Form.Item label="数据库连接串" name="db">
                      <Input placeholder="postgres://..." />
                    </Form.Item>
                    <Space>
                      <Button type="primary" htmlType="submit" icon={<Check size={16} />}>
                        保存并推送
                      </Button>
                      <Button icon={<Cog size={16} />} onClick={() => setApiAccessModal(true)}>
                        访问接口
                      </Button>
                    </Space>
                  </Form>
                </Card>
              </Col>
            </Row>
          )}

          {activeKey === "auth" && (
            <Row gutter={[16, 16]}>
              <Col xs={24} lg={12}>
                <Card title="OAuth 2.0">
                  <Form
                    layout="vertical"
                    onFinish={() => globalMessage.success("已签发示例Token")}
                    initialValues={{ clientId: "demo-client", scope: "read:devices", grant: "client_credentials" }}
                  >
                    <Form.Item label="Client ID" name="clientId" rules={[{ required: true }]}>
                      <Input />
                    </Form.Item>
                    <Form.Item label="授权范围" name="scope">
                      <Input placeholder="read:devices write:commands" />
                    </Form.Item>
                    <Form.Item label="授权模式" name="grant">
                      <Select
                        options={[
                          { label: "Client Credentials", value: "client_credentials" },
                          { label: "Authorization Code", value: "authorization_code" },
                        ]}
                      />
                    </Form.Item>
                    <Button type="primary" htmlType="submit" icon={<ShieldCheck size={16} />}>
                      获取Token
                    </Button>
                  </Form>
                  <Divider />
                  <Text>示例Token</Text>
                  <pre style={{ background: "#0b1020", color: "#d6e5ff", padding: 12, borderRadius: 8 }}>
                    {"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.demo.payload.signature"}
                  </pre>
                </Card>
              </Col>
              <Col xs={24} lg={12}>
                <Card title="RBAC 权限管理">
                  <Row gutter={12}>
                    <Col span={12}>
                      <Title level={5}>角色</Title>
                      <Table
                        size="small"
                        pagination={false}
                        dataSource={[
                          { key: "r1", name: "管理员", perms: "ALL" },
                          { key: "r2", name: "运维", perms: "devices:read, commands:write" },
                          { key: "r3", name: "访客", perms: "devices:read" },
                        ]}
                        columns={[
                          { title: "角色", dataIndex: "name" },
                          { title: "权限", dataIndex: "perms" },
                        ]}
                      />
                    </Col>
                    <Col span={12}>
                      <Title level={5}>用户</Title>
                      <Table
                        size="small"
                        pagination={false}
                        dataSource={[
                          { key: "u1", name: "alice", role: "管理员" },
                          { key: "u2", name: "bob", role: "运维" },
                        ]}
                        columns={[
                          { title: "用户", dataIndex: "name" },
                          { title: "角色", dataIndex: "role" },
                          {
                            title: "操作",
                            render: (_, r) => (
                              <Button size="small" onClick={() => setRbacModal({ open: true, user: r })}>
                                分配权限
                              </Button>
                            ),
                          },
                        ]}
                      />
                    </Col>
                  </Row>
                </Card>
              </Col>
            </Row>
          )}
        </Content>
      </Layout>

      {/* Drawer: 设备注册引导 */}
      <Drawer title="设备注册与授权" open={registerDrawer} onClose={() => setRegisterDrawer(false)} width={640}>
        <Steps
          current={1}
          items={[{ title: "选择产品" }, { title: "注册设备" }, { title: "获取密钥" }, { title: "接入测试" }]}
        />
        <Divider />
        <Form
          layout="vertical"
          onFinish={(v) => {
            addDevice({
              id: v.id,
              name: v.name,
              projectId: products.find((p) => p.id === v.productId)?.projectId ?? projects[0]?.id,
              productId: v.productId,
              lat: 31.23 + Math.random() * 0.05,
              lng: 121.47 + Math.random() * 0.05,
            })
            globalMessage.success("注册成功")
          }}
        >
          <Form.Item label="产品" name="productId" rules={[{ required: true }]}>
            <Select options={productOptions} />
          </Form.Item>
          <Row gutter={12}>
            <Col span={12}>
              <Form.Item label="设备ID" name="id" rules={[{ required: true }]}>
                <Input placeholder="dev-xxx" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="设备名称" name="name" rules={[{ required: true }]}>
                <Input />
              </Form.Item>
            </Col>
          </Row>
          <Form.Item>
            <Space>
              <Button htmlType="submit" type="primary" icon={<Check size={16} />}>
                注册
              </Button>
              <Button icon={<UploadIcon size={16} />} onClick={() => globalMessage.success("已接收CSV")}>
                导入CSV
              </Button>
            </Space>
          </Form.Item>
        </Form>
        <Divider />
        <Title level={5}>连接示例（MQTTS）</Title>
        <pre style={{ background: "#0b1020", color: "#d6e5ff", padding: 12, borderRadius: 8 }}>
          {`mqtts://iot.example.com:8883
username: <deviceId>
password: <deviceSecret>
topic: /up/<product>/<deviceId>`}
        </pre>
      </Drawer>

      {/* Notifications modal */}
      <Modal title="通知中心" open={notifOpen} onCancel={() => setNotifOpen(false)} onOk={() => setNotifOpen(false)}>
        {alertLogs.length === 0 ? (
          <Text type="secondary">暂无告警</Text>
        ) : (
          <Table
            size="small"
            pagination={false}
            dataSource={alertLogs}
            columns={[
              { title: "时间", dataIndex: "time", width: 120 },
              { title: "设备ID", dataIndex: "deviceId", width: 140 },
              { title: "消息", dataIndex: "msg" },
            ]}
          />
        )}
      </Modal>

      {/* OpenAPI config modal */}
      <Modal
        title={`服务配置 - ${svcModal.svc?.name ?? ""}`}
        open={svcModal.open}
        onCancel={() => setSvcModal({ open: false })}
        onOk={() => {
          setSvcModal({ open: false })
          globalMessage.success("配置已保存")
        }}
      >
        <Form layout="vertical" initialValues={svcModal.svc}>
          <Form.Item label="名称" name="name">
            <Input disabled />
          </Form.Item>
          <Form.Item label="路径" name="path">
            <Input />
          </Form.Item>
          <Form.Item label="限流（req/s）" name="qps">
            <Input placeholder="例如 200" />
          </Form.Item>
        </Form>
      </Modal>

      {/* Service weight modal */}
      <Modal
        title="实例权重"
        open={weightModal.open}
        onCancel={() => setWeightModal((s) => ({ ...s, open: false }))}
        onOk={() => {
          setWeightModal((s) => ({ ...s, open: false }))
          globalMessage.success(`已设置权重：${weightModal.weight}`)
        }}
      >
        <Slider
          min={0}
          max={100}
          value={weightModal.weight}
          onChange={(v) => setWeightModal({ open: true, weight: Number(v) })}
        />
      </Modal>

      {/* Warehouse schedule modal */}
      <Modal
        title="ETL 计划配置"
        open={scheduleModal}
        onCancel={() => setScheduleModal(false)}
        onOk={() => {
          setScheduleModal(false)
          globalMessage.success("计划已保存")
        }}
      >
        <Form layout="vertical" initialValues={{ cron: "0 */1 * * *", retry: 3 }}>
          <Form.Item label="Cron 表达式" name="cron">
            <Input />
          </Form.Item>
          <Form.Item label="失败重试次数" name="retry">
            <Input type="number" />
          </Form.Item>
        </Form>
      </Modal>

      {/* Config center API access modal */}
      <Modal
        title="配置访问接口"
        open={apiAccessModal}
        onCancel={() => setApiAccessModal(false)}
        onOk={() => setApiAccessModal(false)}
      >
        <Descriptions size="small" column={1} bordered>
          <Descriptions.Item label="GET">
            <Text code>/config/{`{env}`}</Text>
          </Descriptions.Item>
          <Descriptions.Item label="POST 推送更新">
            <Text code>/config/push</Text>
          </Descriptions.Item>
        </Descriptions>
      </Modal>

      {/* RBAC assign modal */}
      <Modal
        title={`分配权限 - ${rbacModal.user?.name ?? ""}`}
        open={rbacModal.open}
        onCancel={() => setRbacModal({ open: false })}
        onOk={() => {
          setRbacModal({ open: false })
          globalMessage.success("权限已更新")
        }}
      >
        <Form layout="vertical" initialValues={{ role: rbacModal.user?.role ?? "访客" }}>
          <Form.Item label="角色" name="role">
            <Select
              options={[
                { label: "管理员", value: "管理员" },
                { label: "运维", value: "运维" },
                { label: "访客", value: "访客" },
              ]}
            />
          </Form.Item>
        </Form>
      </Modal>
    </Layout>
  )
}

function PlusIcon() {
  return (
    <span aria-hidden className="inline-flex">
      <svg width="0" height="0" />
    </span>
  )
}
function AlertIcon() {
  return (
    <span aria-hidden className="inline-flex">
      <svg width="0" height="0" />
    </span>
  )
}
function PlayIcon() {
  return (
    <span aria-hidden className="inline-flex">
      <svg width="0" height="0" />
    </span>
  )
}