import { useEffect, useRef } from "react";

export function DeviceDetailDialog({ open, onClose, snapshot }) {
  const ref = useRef(null);

  useEffect(() => {
    const node = ref.current;
    if (!node) return;
    if (open && typeof node.showModal === "function") {
      try {
        node.showModal();
      } catch (_) {
        /* ignore */
      }
    } else if (typeof node.close === "function") {
      try {
        node.close();
      } catch (_) {
        /* ignore */
      }
    }
  }, [open]);

  return (
    <dialog
      ref={ref}
      className="device-detail-dialog"
      id="device-detail-dialog"
      aria-label="device pod 详情"
      onClose={onClose}
    >
      <header className="device-detail-head">
        <h2>Device Pod 详情</h2>
        <button type="button" className="icon-button" onClick={onClose}>关闭</button>
      </header>
      <pre className="device-detail-body">{snapshot ? JSON.stringify(snapshot, null, 2) : "无数据"}</pre>
    </dialog>
  );
}