import { useCallback, useState } from "react";import { parse } from "tldts"; import { CardStack, CardStackContent, CardStackEntryField } from "../components/card-stack";import { Input } from "../components/input";import { normalizeNamespaceInput, slugifyNamespace } from "./namespace";export { normalizeNamespaceInput, slugifyNamespace } from "./namespace"; /** * Derives a display-name candidate from a URL by extracting its apex domain * label (e.g. `https://api.shopify.com/graphql` → `"Shopify"`) and * title-casing it. Returns `null` if the URL has no parseable domain. */export function displayNameFromUrl(url: string): string | null {  const trimmed = url.trim();  if (!trimmed) return null;  const parsed = parse(trimmed);  const label = parsed.domainWithoutSuffix;  if (!label) return null;  return label.charAt(0).toUpperCase() + label.slice(1);} export function domainLabelFromUrl(url: string): string | null {  const trimmed = url.trim();  if (!trimmed) return null;  return parse(trimmed).domainWithoutSuffix ?? null;} export function pascalCaseDomainLabel(label: string): string | null {  const words = label    .split(/[^a-z0-9]+/i)    .map((word) => word.trim())    .filter(Boolean);  if (words.length === 0) return null;  return words    .map((word) => {      const normalized = word.toLowerCase();      return normalized.charAt(0).toUpperCase() + normalized.slice(1);    })    .join("");} export function integrationDisplayNameFromUrl(url: string, integrationKind: string): string | null {  const label = domainLabelFromUrl(url);  const displayLabel = label ? pascalCaseDomainLabel(label) : null;  return displayLabel ? `${displayLabel} ${integrationKind}` : null;} // Package runners whose own name is never the integration name: the meaningful// token is the package or module they execute, not the runner itself.const STDIO_RUNNERS = new Set([  "npx",  "bunx",  "pnpm",  "yarn",  "npm",  "uvx",  "uv",  "pipx",  "bun",  "deno",  "node",  "python",  "python3",]); // Subcommands that sit between a runner and its package: `pnpm dlx <pkg>`,// `npm exec <pkg>`, `uv run <pkg>`, `deno run <spec>`.const STDIO_RUNNER_SUBCOMMANDS = new Set(["dlx", "exec", "run", "x", "--"]); /** * Picks the package/module spec from a stdio launch command: the first * positional argument that isn't a runner flag or subcommand, falling back to * the command itself when it isn't a generic runner (a server invoked * directly). Returns `null` when only a bare runner is present. */export function stdioPackageToken(command: string, args: readonly string[]): string | null {  for (const raw of args) {    const arg = raw.trim();    if (!arg || arg.startsWith("-")) continue; // skip flags like -y, --yes    if (STDIO_RUNNER_SUBCOMMANDS.has(arg)) continue; // skip dlx / exec / run    return arg;  }  const cmd = command.trim();  if (!cmd || STDIO_RUNNERS.has(cmd.toLowerCase())) return null;  return cmd;} /** * Reduces a package/module spec to human words: drops an npm scope, a version * or tag suffix, a path and file extension, and the noise affixes MCP packages * conventionally carry (`mcp-server-`, `server-`, `-mcp`), then title-cases. * Returns `null` when nothing alphanumeric survives. */export function humanizeStdioToken(token: string): string | null {  let name = token.trim();  if (name.startsWith("@")) {    // Scoped npm package: @modelcontextprotocol/server-github → server-github.    name = name.split("/").pop() ?? name;  } else if (/[\\/]/.test(name)) {    // A filesystem path (node ./build/index.js) → its base filename.    name = name.split(/[\\/]/).pop() ?? name;    name = name.replace(/\.[a-z0-9]+$/i, ""); // strip extension  }  name = name.replace(/@[^@/]*$/, "") || name; // drop a trailing @version / @tag  name = name    .replace(/^mcp[-_]server[-_]/i, "")    .replace(/^mcp[-_]/i, "")    .replace(/^server[-_]/i, "")    .replace(/[-_]mcp[-_]server$/i, "")    .replace(/[-_]mcp$/i, "")    .replace(/[-_]server$/i, "");  const words = name    .split(/[^a-z0-9]+/i)    .map((word) => word.trim())    .filter(Boolean);  if (words.length === 0) return null;  return words.map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");} /** * Derives a display-name candidate from a stdio launch command by extracting * the package/module being run and humanizing it, e.g. * `npx -y @modelcontextprotocol/server-github` → `"Github MCP"`, * `uvx mcp-server-time` → `"Time MCP"`, `node ./build/index.js` → `"Index MCP"`. * Returns `null` when nothing meaningful can be extracted, so callers can fall * back to the raw command. */export function integrationDisplayNameFromStdio(  command: string,  args: readonly string[],  integrationKind: string,): string | null {  const token = stdioPackageToken(command, args);  const label = token ? humanizeStdioToken(token) : null;  return label ? `${label} ${integrationKind}` : null;} // ---------------------------------------------------------------------------// Hook — owns the name + namespace state with namespace auto-derivation// --------------------------------------------------------------------------- export interface IntegrationIdentity {  /** Display name — the user's override if they've typed one, otherwise the fallback. */  readonly name: string;  /** Namespace — the user's override if they've typed one, otherwise slugified from `name`. */  readonly namespace: string;  readonly setName: (name: string) => void;  readonly setNamespace: (namespace: string) => void;  /** Clears any user overrides so both fields return to deriving from the fallback. */  readonly reset: () => void;} export interface UseIntegrationIdentityOptions {  /**   * Fallback display name — used when the user hasn't typed one. Pass a   * value computed from the caller's reactive state (probe result, URL   * apex domain, template default, etc.) and it'll flow through to `name`   * automatically.   */  readonly fallbackName?: string;  /** Fallback namespace — defaults to `slugifyNamespace(fallbackName ?? "")`. */  readonly fallbackNamespace?: string;} /** * Manages a display name and a derived namespace. Both fields are pure * derived state: the user's `setName` / `setNamespace` call stores an * override, otherwise the hook returns the caller-supplied fallback * (passed fresh on every render). Call `reset()` to drop overrides. */export function useIntegrationIdentity(  options?: UseIntegrationIdentityOptions,): IntegrationIdentity {  const [nameOverride, setNameOverride] = useState<string | null>(null);  const [namespaceOverride, setNamespaceOverride] = useState<string | null>(null);   const fallbackName = options?.fallbackName ?? "";  const name = nameOverride ?? fallbackName;  const fallbackNamespace = options?.fallbackNamespace ?? slugifyNamespace(name);  const namespace = namespaceOverride ?? fallbackNamespace;   const setName = useCallback((next: string) => {    setNameOverride(next);  }, []);   const setNamespace = useCallback((next: string) => {    setNamespaceOverride(normalizeNamespaceInput(next));  }, []);   const reset = useCallback(() => {    setNameOverride(null);    setNamespaceOverride(null);  }, []);   return { name, namespace, setName, setNamespace, reset };} // ---------------------------------------------------------------------------// UI — two fields, wrapped in a shared CardStack// --------------------------------------------------------------------------- export interface IntegrationIdentityFieldsProps {  readonly identity: IntegrationIdentity;  readonly namePlaceholder?: string;  readonly namespacePlaceholder?: string;  readonly nameLabel?: string;  readonly namespaceHint?: string;  /**   * When true, the namespace field is rendered disabled — useful on Edit   * forms, where the namespace is the integration's identity and changing it   * would require a delete + recreate flow.   */  readonly namespaceReadOnly?: boolean;} export function IntegrationIdentityFields({  identity,  namePlaceholder = "e.g. Sentry API",  namespacePlaceholder = "sentry_api",  nameLabel = "Display Name",  namespaceHint,  namespaceReadOnly = false,}: IntegrationIdentityFieldsProps) {  const effectiveNamespaceHint =    namespaceHint ??    (namespaceReadOnly      ? "The namespace is part of the integration's identity and cannot be changed."      : undefined);   return (    <CardStack>      <CardStackContent className="border-t-0">        <IntegrationIdentityFieldRows          identity={identity}          namePlaceholder={namePlaceholder}          namespacePlaceholder={namespacePlaceholder}          nameLabel={nameLabel}          namespaceHint={effectiveNamespaceHint}          namespaceReadOnly={namespaceReadOnly}        />      </CardStackContent>    </CardStack>  );} export function IntegrationIdentityFieldRows({  identity,  namePlaceholder = "e.g. Sentry API",  namespacePlaceholder = "sentry_api",  nameLabel = "Display Name",  namespaceHint,  namespaceReadOnly = false,}: IntegrationIdentityFieldsProps) {  const effectiveNamespaceHint =    namespaceHint ??    (namespaceReadOnly      ? "The namespace is part of the integration's identity and cannot be changed."      : undefined);   return (    <div className="grid grid-cols-1 md:grid-cols-2">      <CardStackEntryField label={nameLabel}>        <Input          value={identity.name}          onChange={(e) => identity.setName((e.target as HTMLInputElement).value)}          placeholder={namePlaceholder}          className="text-sm"        />      </CardStackEntryField>      <CardStackEntryField label="Namespace" hint={effectiveNamespaceHint}>        <Input          value={identity.namespace}          onChange={(e) => identity.setNamespace((e.target as HTMLInputElement).value)}          placeholder={namespacePlaceholder}          className="font-mono text-sm"          disabled={namespaceReadOnly}        />      </CardStackEntryField>    </div>  );}