import React from "react";
import { LoadingTitle } from "./loading-indicator";
import { externalApplicationConfig } from "./runtime-config";

type AnyRecord = Record<string, any>;

const h = React.createElement;

export const HWLAB_URL = externalApplicationConfig("hwlab").publicUrl;

function StatusBadge({ status, children }: AnyRecord) {
  const normalized = String(status || "unknown").toLowerCase();
  return h("span", { className: `status-badge ${normalized}` }, children || status || "unknown");
}

function Panel({ title, eyebrow, actions, children, className }: AnyRecord) {
  return h("section", { className: `panel ${className || ""}` },
    h("div", { className: "panel-head" },
      h("div", null,
        eyebrow ? h("p", { className: "panel-eyebrow" }, eyebrow) : null,
        h(LoadingTitle, { title, loading: false }),
      ),
      actions ? h("div", { className: "panel-actions" }, actions) : null,
    ),
    h("div", { className: "panel-body" }, children),
  );
}

function EmptyState({ title, text }: AnyRecord) {
  return h("div", { className: "empty-state" }, h("strong", null, title), h("span", null, text));
}

function ActionLink({ href, children, testId, primary = false }: AnyRecord) {
  return h("a", {
    className: primary ? "primary-btn compact" : "ghost-btn compact",
    href,
    target: "_blank",
    rel: "noreferrer",
    "data-testid": testId,
  }, children);
}

function ActionButton({ onClick, children, testId, primary = false }: AnyRecord) {
  return h("button", {
    type: "button",
    className: primary ? "primary-btn compact" : "ghost-btn compact",
    onClick,
    "data-testid": testId,
  }, children);
}

export function HwlabPage(): any {
  return h("div", { className: "microservice-page hwlab-page", "data-testid": "hwlab-page" },
    h(Panel, {
      title: "HWLAB",
      eyebrow: "External Static Entry",
      actions: h("span", { className: "panel-link-badge" },
        h(StatusBadge, { status: "external" }, "external"),
      ),
    },
      h("div", { className: "hwlab-hero" },
        h("div", { className: "hwlab-hero-copy" },
          h("p", { className: "panel-eyebrow" }, "Static Link"),
          h("h2", null, "HWLAB"),
          h("p", { className: "muted paragraph" }, "这是一个外部静态入口，不经过 UniDesk 后端代理，不纳入 microservice health。"),
        ),
        h("div", { className: "hwlab-actions" },
          h(ActionButton, {
            primary: true,
            testId: "hwlab-open-current",
            onClick: () => window.location.assign(HWLAB_URL),
          }, "当前窗口打开"),
          h(ActionLink, { href: HWLAB_URL, testId: "hwlab-open-new" }, "新窗口打开"),
        ),
      ),
      h("div", { className: "metric-grid hwlab-metrics" },
        h("article", { className: "metric-card" },
          h("div", { className: "metric-label" }, "入口类型"),
          h("div", { className: "metric-value" }, "external"),
          h("div", { className: "metric-hint" }, "static link only"),
        ),
        h("article", { className: "metric-card" },
          h("div", { className: "metric-label" }, "目标 URL"),
          h("div", { className: "metric-value hwlab-url" }, HWLAB_URL),
          h("div", { className: "metric-hint" }, "config/frontend.yaml"),
        ),
        h("article", { className: "metric-card" },
          h("div", { className: "metric-label" }, "后端依赖"),
          h("div", { className: "metric-value" }, "none"),
          h("div", { className: "metric-hint" }, "no proxy / no health"),
        ),
        h("article", { className: "metric-card" },
          h("div", { className: "metric-label" }, "打开方式"),
          h("div", { className: "metric-value" }, "current or new tab"),
          h("div", { className: "metric-hint" }, "same style as catalog"),
        ),
      ),
      h(EmptyState, {
        title: "外部入口说明",
        text: "HWLAB 只作为静态跳转目标展示在前端，不会登记到用户服务 health、proxy 或运行态数据中。",
      }),
    ),
  );
}
