// shared.jsx — presentational primitives reused across every page.
// Loaded from index.html as an ordered `text/babel` classic script (position 2 of 8).
// Classic scripts share one global scope — see docs/engineering/Patterns.md §9.

// ─── Shared Components ───────────────────────────────────────────────────────
const Logo = React.memo(function Logo({ light }) {
  return (
    <a
      href="#/"
      style={{
        fontFamily: "'DM Sans', sans-serif",
        fontWeight: 700,
        fontSize: 22,
        letterSpacing: "-0.02em",
        color: light ? "#fff" : "#0a0a0a",
        textDecoration: "none",
      }}
    >
      <span style={{ color: "#22c55e" }}>zen</span>sys
    </a>
  );
});

const BUTTON_BASE_STYLE = {
  fontFamily: "'DM Sans', sans-serif",
  fontWeight: 600,
  border: "none",
  cursor: "pointer",
  borderRadius: 8,
  transition: "all 0.2s ease",
  display: "inline-flex",
  alignItems: "center",
  gap: 8,
  whiteSpace: "nowrap",
};
const BUTTON_SIZES = {
  sm: { padding: "8px 16px", fontSize: 13 },
  md: { padding: "12px 24px", fontSize: 14 },
  lg: { padding: "16px 32px", fontSize: 16 },
};
const BUTTON_VARIANTS = {
  primary: { background: "#22c55e", color: "#000" },
  secondary: {
    background: "transparent",
    color: "#fff",
    border: "1px solid rgba(255,255,255,0.2)",
  },
  ghost: { background: "transparent", color: "#22c55e" },
  outline: {
    background: "transparent",
    color: "#0a0a0a",
    border: "1px solid #ddd",
  },
};

const Button = React.memo(function Button({ children, variant = "primary", size = "md", style, ...props }) {
  return (
    <button
      type="button"
      style={{ ...BUTTON_BASE_STYLE, ...BUTTON_SIZES[size], ...BUTTON_VARIANTS[variant], ...style }}
      {...props}
    >
      {children}
    </button>
  );
});

// Every caller gets label↔control association for free: the generated id is
// wired to both halves, and an explicit `id` prop still wins for callers that
// need to address the field from outside (#499).
function Input({ label, id, ...props }) {
  const generatedId = useId();
  const inputId = id || generatedId;
  return (
    <div style={{ marginBottom: 16 }}>
      {label && (
        <label
          htmlFor={inputId}
          style={{
            display: "block",
            fontSize: 13,
            fontWeight: 500,
            color: "#666",
            marginBottom: 6,
            fontFamily: "'DM Sans', sans-serif",
          }}
        >
          {label}
        </label>
      )}
      <input
        id={inputId}
        style={{
          width: "100%",
          padding: "12px 16px",
          fontSize: 14,
          fontFamily: "'DM Sans', sans-serif",
          border: "1px solid #e0e0e0",
          borderRadius: 8,
          background: "#fafafa",
          boxSizing: "border-box",
          transition: "border-color 0.2s",
        }}
        onFocus={(e) => (e.target.style.borderColor = "#22c55e")}
        onBlur={(e) => (e.target.style.borderColor = "#e0e0e0")}
        {...props}
      />
    </div>
  );
}

const StatusDot = React.memo(function StatusDot({ status }) {
  const colors = {
    provisioning: "#f59e0b",
    active: "#22c55e",
    suspended: "#ef4444",
    pending_payment: "#d97706",
  };
  return (
    <span
      style={{
        display: "inline-block",
        width: 8,
        height: 8,
        borderRadius: "50%",
        background: colors[status] || "#999",
        marginRight: 8,
      }}
    />
  );
});

function DynamicNavLinks({ items, style, mdmUrl }) {
  const navItems = items && items.length > 0 ? items : DEFAULT_NAV;
  return navItems.map((item, i) => {
    if (item.status === "coming_soon" || item.status === "disabled") {
      return (
        <span key={i} style={{ ...style, color: "rgba(255,255,255,0.25)", cursor: "default" }}>
          {item.label}
        </span>
      );
    }
    // "#/mdm" is a sentinel (seeded at first boot, and the DEFAULT_NAV
    // fallback) resolved here at render time to the loaded mdm_url, so it
    // stays live once /site-config resolves instead of freezing a stale href.
    const href = item.href === "#/mdm" ? mdmUrl : item.href;
    const isExternal = href.startsWith("http");
    return (
      <a key={i} href={href}
        {...(isExternal ? { target: "_self" } : {})}
        style={{ ...style, color: "rgba(255,255,255,0.6)", textDecoration: "none", transition: "color 0.2s" }}
        onMouseEnter={(e) => (e.target.style.color = "#fff")}
        onMouseLeave={(e) => (e.target.style.color = "rgba(255,255,255,0.6)")}
      >
        {item.label}
      </a>
    );
  });
}

function InfoItem({ label, value, mono, onCopy, copied }) {
  return (
    <div>
      <div style={{ fontSize: 11, color: "#6e6e6e", marginBottom: 4, fontWeight: 500 }}>
        {label}
      </div>
      <div
        style={{
          fontSize: 13,
          fontWeight: 500,
          fontFamily: mono ? "'JetBrains Mono', monospace" : "inherit",
          display: "flex",
          alignItems: "center",
          gap: 8,
          wordBreak: "break-all",
        }}
      >
        {value}
        {onCopy && (
          <button
            type="button"
            aria-label={copied ? `${label} copied` : `Copy ${label}`}
            onClick={onCopy}
            style={{
              background: "none",
              border: "none",
              cursor: "pointer",
              fontSize: 12,
              color: copied ? "#22c55e" : "#6e6e6e",
              padding: "2px 4px",
              flexShrink: 0,
            }}
          >
            {copied ? "✓" : "⧉"}
          </button>
        )}
      </div>
    </div>
  );
}

function CredRow({ label, value, onCopy, copied }) {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
      }}
    >
      <div>
        <span style={{ color: "#22c55e" }}>{label}:</span>{" "}
        <span style={{ color: "#e6edf3" }}>{value}</span>
      </div>
      <button
        type="button"
        aria-label={copied ? `${label} copied` : `Copy ${label}`}
        onClick={onCopy}
        style={{
          background: "none",
          border: "none",
          cursor: "pointer",
          color: copied ? "#22c55e" : "#888",
          fontSize: 12,
          fontFamily: "inherit",
        }}
      >
        {copied ? "copied" : "copy"}
      </button>
    </div>
  );
}