var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result) __defProp(target, key, result);
  return result;
};
/**
 * @license
 * Copyright 2025-2026 Open Home Foundation
 * SPDX-License-Identifier: Apache-2.0
 */
import "@material/web/button/outlined-button";
import "@material/web/divider/divider";
import "@material/web/iconbutton/icon-button";
import "@material/web/list/list";
import "@material/web/list/list-item";
import { consume } from "@lit/context";
import { isTestNodeId } from "@matter-server/ws-client";
import { mdiAlertCircleOutline, mdiChevronRight, mdiGraphOutline } from "@mdi/js";
import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators.js";
import { guard } from "lit/directives/guard.js";
import { clientContext, tickContext } from "../client/client-context.js";
import "../components/ha-svg-icon";
import { getDeviceIcon, getEndpointIcon } from "../util/device-icons.js";
import { getEndpointDeviceTypes } from "../util/endpoints.js";
import { formatNodeAddress, getEffectiveFabricIndex } from "../util/format_hex.js";
import "./components/header";
import "./components/node-details";
import { notFoundStyles, reducedMotionStyles } from "../util/shared-styles.js";
import { getNetworkType } from "./network/network-utils.js";
function getUniqueEndpoints(node) {
  return Array.from(new Set(Object.keys(node.attributes).map((key) => Number(key.split("/")[0])))).sort((a, b) => {
    return a - b;
  });
}
let MatterNodeView = class extends LitElement {
  constructor() {
    super(...arguments);
    this._tick = 0;
  }
  render() {
    if (!this.node) {
      return html`
                <dashboard-header title="Node not found" backButton="#"></dashboard-header>
                <div class="not-found">
                    <ha-svg-icon .path=${mdiAlertCircleOutline}></ha-svg-icon>
                    <p>Node not found</p>
                    <md-outlined-button @click=${this._goBack}>Back</md-outlined-button>
                </div>
            `;
    }
    const networkType = getNetworkType(this.node);
    const showGraphButton = networkType === "thread" || networkType === "wifi" || networkType === "ethernet";
    const graphViewType = networkType === "ethernet" ? "wifi" : networkType;
    const graphUrl = showGraphButton ? `#${graphViewType}/${this.node.node_id}` : null;
    const fabricIndex = getEffectiveFabricIndex(
      this.client.serverInfo.fabric_index,
      isTestNodeId(this.node.node_id)
    );
    const nodeHex = formatNodeAddress(fabricIndex, this.node.node_id);
    return html`
            <dashboard-header .title=${`Node ${this.node.node_id} ${nodeHex}`} backButton="#"></dashboard-header>

            <!-- node details section -->
            <div class="container">
                <div class="node-title-bar">
                    <ha-svg-icon class="node-icon" .path=${getDeviceIcon(this.node)}></ha-svg-icon>
                    <h2>Node ${this.node.node_id} <span class="node-id-hex">${nodeHex}</span></h2>
                    ${showGraphButton ? html`
                              <a href=${graphUrl} class="show-in-graph-button" title="Show in ${graphViewType} graph">
                                  <ha-svg-icon .path=${mdiGraphOutline}></ha-svg-icon>
                                  <span class="button-text">Show in graph</span>
                              </a>
                          ` : ""}
                </div>
                <node-details .node=${this.node}></node-details>
            </div>

            <!-- Node Endpoints listing -->
            <div class="container">
                <md-list>
                    <md-list-item>
                        <div slot="headline">
                            <b>Endpoints</b>
                        </div>
                    </md-list-item>
                    ${guard(
      [this.node, this.node?.attributes],
      () => getUniqueEndpoints(this.node).map((endPointId) => {
        return html`
                                <md-list-item type="link" href=${`#node/${this.node.node_id}/${endPointId}`}>
                                    <ha-svg-icon
                                        slot="start"
                                        class="endpoint-icon"
                                        .path=${getEndpointIcon(this.node, endPointId)}
                                    ></ha-svg-icon>
                                    <div slot="headline">Endpoint ${endPointId}</div>
                                    <div slot="supporting-text">
                                        Device Type(s):
                                        ${getEndpointDeviceTypes(this.node, endPointId).map((deviceType) => {
          return deviceType.label;
        }).join(" / ")}
                                    </div>
                                    <ha-svg-icon slot="end" .path=${mdiChevronRight}></ha-svg-icon>
                                </md-list-item>
                            `;
      })
    )}
                </md-list>
            </div>

            <dashboard-footer />
        `;
  }
  _goBack() {
    history.back();
  }
};
MatterNodeView.styles = [
  notFoundStyles,
  reducedMotionStyles,
  css`
            :host {
                display: flex;
                background-color: var(--md-sys-color-background);
                box-sizing: border-box;
                flex-direction: column;
                min-height: 100vh;
            }

            .container {
                padding: 16px;
                max-width: 95%;
                margin: 0 auto;
                width: 100%;
            }

            @media (max-width: 600px) {
                .container {
                    padding: 16px 0;
                }
            }

            .status {
                color: var(--danger-color);
                font-weight: bold;
                font-size: 0.8em;
            }

            .node-title-bar {
                display: flex;
                align-items: center;
                gap: 16px;
                margin-bottom: 16px;
            }

            .node-icon {
                --icon-primary-color: var(--md-sys-color-on-surface-variant, #666);
                --mdc-icon-size: 28px;
            }

            .endpoint-icon {
                --icon-primary-color: var(--md-sys-color-on-surface-variant, #666);
            }

            .node-title-bar h2 {
                margin: 0;
                font-size: 1.25rem;
                font-weight: 500;
                color: var(--md-sys-color-on-background, #333);
            }

            .node-id-hex {
                font-size: 0.75em;
                font-weight: 400;
                color: var(--md-sys-color-on-surface-variant, #666);
                font-family: var(--monospace-font, monospace);
            }

            .show-in-graph-button {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                padding: 6px 12px;
                background-color: var(--md-sys-color-primary);
                color: var(--md-sys-color-on-primary);
                text-decoration: none;
                border-radius: 4px;
                font-size: 0.8rem;
                font-weight: 500;
                transition: opacity 0.2s;
                white-space: nowrap;
            }

            .show-in-graph-button:hover {
                opacity: 0.9;
            }

            .show-in-graph-button ha-svg-icon {
                --icon-primary-color: var(--md-sys-color-on-primary);
                width: 16px;
                height: 16px;
            }

            @media (max-width: 768px) {
                .show-in-graph-button {
                    display: none;
                }
            }

            @media (max-width: 480px) {
                .show-in-graph-button .button-text {
                    display: none;
                }

                .show-in-graph-button {
                    padding: 6px;
                }
            }
        `
];
__decorateClass([
  consume({ context: clientContext })
], MatterNodeView.prototype, "client", 2);
__decorateClass([
  consume({ context: tickContext, subscribe: true })
], MatterNodeView.prototype, "_tick", 2);
__decorateClass([
  property()
], MatterNodeView.prototype, "node", 2);
MatterNodeView = __decorateClass([
  customElement("matter-node-view")
], MatterNodeView);
//# sourceMappingURL=matter-node-view.js.map
