// @bun
// src/components/docs/architecture/ArchitectureIntegrationBindingPage.tsx
import { CodeBlock } from "@contractspec/lib.design-system";
import Link from "@contractspec/lib.ui-link";
import { ChevronRight } from "lucide-react";
import { jsx, jsxs } from "react/jsx-runtime";
function ArchitectureIntegrationBindingPage() {
  return /* @__PURE__ */ jsxs("div", {
    className: "space-y-8",
    children: [
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h1", {
            className: "text-4xl font-bold",
            children: "Integration Binding"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "Integration binding connects your app's capabilities to external service providers. Each tenant can configure their own integration connections while sharing the same app blueprint."
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "How it works"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "Integration binding follows a three-layer model:"
          }),
          /* @__PURE__ */ jsxs("ol", {
            className: "text-muted-foreground list-inside list-decimal space-y-3",
            children: [
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("strong", {
                    children: "IntegrationSpec"
                  }),
                  " (global) - Defines what an integration provides"
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("strong", {
                    children: "IntegrationConnection"
                  }),
                  " (per-tenant) - A tenant's configured connection"
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("strong", {
                    children: "AppIntegrationBinding"
                  }),
                  " (per-app) - Maps named slots to concrete tenant connections"
                ]
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Example: Payment processing"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "Let's walk through a complete example of binding Stripe for payments."
          }),
          /* @__PURE__ */ jsxs("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx("h3", {
                className: "text-lg font-semibold",
                children: "Step 1: Blueprint declares requirement"
              }),
              /* @__PURE__ */ jsx(CodeBlock, {
                language: "typescript",
                code: `// AppBlueprintSpec
{
  meta: { name: "invoice-app", version: '1.0.0', appId: "invoice" },
  integrationSlots: [
    {
      slotId: "payments.primary",
      requiredCategory: "payments",
      allowedModes: ["managed", "byok"],
      requiredCapabilities: [
        { key: "payments.createPaymentIntent", version: '1.0.0' },
        { key: "payments.createRefund", version: '1.0.0' }
      ],
      required: true,
      description: "Primary PSP used for Checkout and Subscription flows"
    }
  ],
  workflows: {
    checkout: { name: "invoice.checkout", version: '1.0.0' }
  },
  branding: {
    appNameKey: "invoice.appName",
    assets: [{ type: "logo", url: "https://cdn.acme.dev/logo.png" }],
    colorTokens: { primary: "colors.brand.primary" }
  }
}`
              })
            ]
          }),
          /* @__PURE__ */ jsxs("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx("h3", {
                className: "text-lg font-semibold",
                children: "Step 2: Tenant creates connection"
              }),
              /* @__PURE__ */ jsx(CodeBlock, {
                language: "typescript",
                code: `// IntegrationConnection
{
  meta: {
    id: "conn_stripe_acme_prod",
    tenantId: "acme-corp",
    integrationKey: "payments.stripe",
    integrationVersion: 1,
    label: "Stripe Production",
    environment: "production",
    createdAt: "2025-01-15T09:00:00Z",
    updatedAt: "2025-01-15T10:30:00Z"
  },
  ownershipMode: "byok",
  externalAccountId: "acct_123",
  config: {
    accountId: "acct_123",
    webhookUrl: "https://acme.app/webhooks/stripe"
  },
  secretRef: "vault://integrations/acme/conn_stripe_acme_prod",
  status: "active"
}`
              })
            ]
          }),
          /* @__PURE__ */ jsxs("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx("h3", {
                className: "text-lg font-semibold",
                children: "Step 3: TenantAppConfig binds connection"
              }),
              /* @__PURE__ */ jsx(CodeBlock, {
                language: "typescript",
                code: `// TenantAppConfig
{
  meta: {
    tenantId: "acme-corp",
    blueprintName: "invoice-app",
    blueprintVersion: 1,
    environment: "production",
    version: 4,
    status: "published"
  },
  integrations: [
    {
      slotId: "payments.primary",
      connectionId: "conn_stripe_acme_prod",
      scope: {
        workflows: ["checkout", "subscription-renewal", "refund-process"],
        operations: ["payments.stripe.*"]
      },
      priority: 1
    }
  ],
  branding: {
    appName: { en: "Acme Billing Portal" },
    customDomain: "billing.acme.com",
    assets: [{ type: "logo", url: "https://assets.acme.com/logo.svg" }]
  }
}`
              })
            ]
          }),
          /* @__PURE__ */ jsxs("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx("h3", {
                className: "text-lg font-semibold",
                children: "Step 4: Runtime resolves and executes"
              }),
              /* @__PURE__ */ jsx(CodeBlock, {
                language: "typescript",
                code: `// ResolvedAppConfig (runtime)
{
  integrations: {
    "payments.createPaymentIntent": {
      provider: { /* IntegrationSpec for Stripe */ },
      connection: { /* IntegrationConnection */ },
      config: { /* Merged configuration */ }
    }
  }
}

// When workflow executes:
const result = await executeCapability(
  "payments.createPaymentIntent",
  { amount: 5000, currency: "usd" },
  resolvedConfig
);
// \u2192 Uses Stripe connection automatically`
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Multi-integration scenarios"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "A single app can use multiple integrations across different categories:"
          }),
          /* @__PURE__ */ jsx(CodeBlock, {
            language: "typescript",
            code: `integrations: [
  {
    slotId: "payments.primary",
    connectionId: "conn_stripe_prod",
    scope: {
      workflows: ["checkout", "subscription-*"]
    }
  },
  {
    slotId: "email.outbound",
    connectionId: "conn_postmark_prod"
  },
  {
    slotId: "email.inbound",
    connectionId: "conn_gmail_support",
    scope: {
      workflows: ["support-ticket-creation"]
    }
  },
  {
    slotId: "knowledge.vector-store",
    connectionId: "conn_qdrant_prod",
    scope: {
      workflows: ["semantic-search", "rag-query"]
    }
  }
]`
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Sandbox vs Production"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "Tenants typically maintain separate connections for sandbox and production environments:"
          }),
          /* @__PURE__ */ jsx(CodeBlock, {
            language: "typescript",
            code: `// Sandbox environment
{
  meta: { environment: "sandbox", status: "preview" },
  integrations: [
    {
      slotId: "payments.primary",
      connectionId: "conn_stripe_acme_test"
    }
  ]
}

// Production environment
{
  meta: { environment: "production", status: "published" },
  integrations: [
    {
      slotId: "payments.primary",
      connectionId: "conn_stripe_acme_prod"
    }
  ]
}`
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Security & validation"
          }),
          /* @__PURE__ */ jsxs("ul", {
            className: "text-muted-foreground list-inside list-disc space-y-2",
            children: [
              /* @__PURE__ */ jsx("li", {
                children: "Integration connections are validated before binding - health checks ensure connectivity"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Secrets are never stored in TenantAppConfig - only references to encrypted secrets"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Policy Decision Point (PDP) enforces which workflows can use which integrations"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "All integration calls are audited with full request/response logging"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Rate limiting and quotas are enforced per connection"
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Best practices"
          }),
          /* @__PURE__ */ jsxs("ul", {
            className: "text-muted-foreground list-inside list-disc space-y-2",
            children: [
              /* @__PURE__ */ jsxs("li", {
                children: [
                  "Use wildcard patterns sparingly in ",
                  /* @__PURE__ */ jsx("code", {
                    children: "allowedWorkflows"
                  }),
                  " - be explicit about access"
                ]
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Always maintain separate sandbox and production connections"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Monitor integration health checks and set up alerts for failures"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Document the purpose of each integration binding for your team"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Test integration changes in sandbox before promoting to production"
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "flex items-center gap-4 pt-4",
        children: [
          /* @__PURE__ */ jsx(Link, {
            href: "/docs/architecture/app-config",
            className: "btn-ghost",
            children: "Previous: App Configuration"
          }),
          /* @__PURE__ */ jsxs(Link, {
            href: "/docs/architecture/knowledge-binding",
            className: "btn-primary",
            children: [
              "Knowledge Binding ",
              /* @__PURE__ */ jsx(ChevronRight, {
                size: 16
              })
            ]
          })
        ]
      })
    ]
  });
}
export {
  ArchitectureIntegrationBindingPage
};
