Cyrene_v2/frontend/web/src/admin/modules/IoT.tsx

import { useState } from "react";
import { useAsyncData } from "../../lib/useAsyncData";
import { adminListIoT, adminIoTControl, adminIoTScenario, adminIoTRule } from "../../lib/api";
import type { AdminIoTDevice } from "../../lib/types";
import { useAutoReload } from "../hooks";
import { useAuditStore } from "../audit";
import { AdminTable, Notice, PageHeader, type AdminColumn } from "../components";
import { Button, Surface, Tag } from "../../components/primitives";

const columns: AdminColumn<AdminIoTDevice>[] = [
  { key: "name", title: "设备", render: (d) => <span className="font-medium">{d.name}</span> },
  { key: "type", title: "类型", render: (d) => <Tag tone="accent">{d.type}</Tag> },
  { key: "id", title: "ID", render: (d) => <span className="font-mono text-xs text-[var(--mu-text-lo)]">{d.id}</span> },
  {
    key: "online",
    title: "状态",
    render: (d) => (
      <Tag tone={d.online ? "ok" : "err"}>
        <span className={`mr-1 inline-block h-1.5 w-1.5 rounded-full ${d.online ? "bg-[var(--mu-ok)]" : "bg-[var(--mu-err)]"}`} />
        {d.online ? "在线" : "离线"}
      </Tag>
    ),
  },
  {
    key: "state",
    title: "实时状态",
    render: (d) => (
      <span className="block max-w-md font-mono text-xs text-[var(--mu-text-mid)]">
        {Object.entries(d.state)
          .map(([k, v]) => `${k}=${typeof v === "string" ? v : JSON.stringify(v)}`)
          .join(" · ") || "—"}
      </span>
    ),
  },
  {
    key: "control",
    title: "控制",
    render: (d) => (
      <DeviceControl device={d} disabled={!d.online} />
    ),
  },
];

function DeviceControl({ device, disabled }: { device: AdminIoTDevice; disabled: boolean }): React.ReactNode {
  const [action, setAction] = useState("on");
  const [params, setParams] = useState("");
  const [res, setRes] = useState<string | null>(null);
  const [err, setErr] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const log = useAuditStore((s) => s.log);

  const send = () => {
    setBusy(true);
    setErr(null);
    let parsed: Record<string, unknown> | undefined;
    if (params.trim()) {
      try {
        parsed = JSON.parse(params) as Record<string, unknown>;
      } catch {
        setErr("参数需为合法 JSON");
        setBusy(false);
        return;
      }
    }
    adminIoTControl(device.id, action.trim() || "on", parsed)
      .then((d) => {
        log("iot.control", "ok");
        setRes(`${d.name} → ${action}：${JSON.stringify(d.state)}`);
      })
      .catch((e: unknown) => {
        log("iot.control", "error");
        setErr(e instanceof Error ? e.message : "控制失败");
      })
      .finally(() => setBusy(false));
  };

  return (
    <div className="flex flex-wrap items-center gap-1.5">
      <input
        value={action}
        onChange={(e) => setAction(e.target.value)}
        placeholder="on / off / set_temperature"
        className="w-28 rounded-[var(--mu-radius-sm)] bg-[var(--mu-surface-2)] px-2 py-1 text-xs outline-none focus:ring-1 focus:ring-[var(--mu-accent)]"
      />
      <input
        value={params}
        onChange={(e) => setParams(e.target.value)}
        placeholder='{"temp":24}'
        className="w-28 rounded-[var(--mu-radius-sm)] bg-[var(--mu-surface-2)] px-2 py-1 text-xs outline-none focus:ring-1 focus:ring-[var(--mu-accent)]"
      />
      <Button size="sm" variant="ghost" disabled={disabled || busy} onClick={send}>
        控制
      </Button>
      {res ? <span className="text-[11px] text-[var(--mu-ok)]">{res}</span> : null}
      {err ? <span className="text-[11px] text-[var(--mu-err)]">{err}</span> : null}
    </div>
  );
}

export function IoTModule(): React.ReactNode {
  const { data, loading, error, reload } = useAsyncData(adminListIoT, []);
  useAutoReload(reload, 8000);
  const log = useAuditStore((s) => s.log);
  const [msg, setMsg] = useState<string | null>(null);

  const scenario = () =>
    adminIoTScenario({ name: "场景-夜灯" })
      .then(() => {
        log("iot.scene", "ok");
        setMsg("场景保存成功");
      })
      .catch((e: unknown) => {
        log("iot.scene", "error");
        setMsg(e instanceof Error ? e.message : "场景保存失败");
      });

  const rule = () =>
    adminIoTRule({ name: "规则-定时", expression: "0 22 * * *" })
      .then(() => {
        log("iot.rule", "ok");
        setMsg("规则保存成功");
      })
      .catch((e: unknown) => {
        log("iot.rule", "error");
        setMsg(e instanceof Error ? e.message : "规则保存失败");
      });

  return (
    <div className="space-y-5">
      <PageHeader
        title="IoT 设备"
        subtitle="GET /api/v1/admin/iot · 设备列表/实时状态 + 控制(真实下发) + 场景 + 自动化规则"
        actions={
          <>
            <Button variant="soft" onClick={scenario}>
              场景与规则
            </Button>
            <Button variant="primary" onClick={rule}>
              新增规则
            </Button>
          </>
        }
      />

      {msg ? <Notice tone="err">{msg}</Notice> : null}

      <Surface className="space-y-2">
        <AdminTable
          columns={columns}
          rows={loading ? null : data}
          loading={loading}
          error={error}
          emptyTitle="无 IoT 设备"
          rowKey={(d) => d.id}
        />
      </Surface>

      <Notice>设备控制真实下发到 IoT provider（在线设备可操作）；场景/规则存储由后端 M10 提供，当前返回明确待实现。</Notice>
    </div>
  );
}