// @bun
// src/components/integrations/molecules/IntegrationCard.tsx
import { PlugZap, ToggleRight } from "lucide-react";
import { Button } from "@contractspec/lib.design-system";
import { jsx, jsxs } from "react/jsx-runtime";
function IntegrationCard({
  id,
  provider,
  name,
  category,
  enabled = true,
  lastSyncAt,
  status = "connected",
  onToggle,
  onConfigure
}) {
  const tone = status === "connected" ? "text-emerald-500 bg-emerald-500/10 border-emerald-500/30" : status === "error" ? "text-red-500 bg-red-500/10 border-red-500/30" : "text-gray-500 bg-gray-500/10 border-gray-500/30";
  return /* @__PURE__ */ jsxs("div", {
    className: "border-border bg-card flex flex-col gap-4 rounded-2xl border p-4 shadow-sm",
    children: [
      /* @__PURE__ */ jsxs("header", {
        className: "flex items-center justify-between",
        children: [
          /* @__PURE__ */ jsxs("div", {
            children: [
              /* @__PURE__ */ jsx("p", {
                className: "text-xl font-semibold",
                children: name
              }),
              /* @__PURE__ */ jsx("p", {
                className: "text-muted-foreground text-sm",
                children: provider
              })
            ]
          }),
          /* @__PURE__ */ jsxs(Button, {
            variant: "outline",
            size: "sm",
            className: `inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-semibold tracking-wide uppercase ${tone}`,
            onPress: () => onToggle?.(id, !enabled),
            children: [
              /* @__PURE__ */ jsx(ToggleRight, {
                className: "h-3.5 w-3.5"
              }),
              enabled ? "Enabled" : "Disabled"
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "text-muted-foreground text-sm",
        children: [
          category && /* @__PURE__ */ jsx("span", {
            className: "font-medium",
            children: category
          }),
          /* @__PURE__ */ jsxs("div", {
            className: "mt-2 flex flex-wrap items-center gap-3 text-xs tracking-wide uppercase",
            children: [
              /* @__PURE__ */ jsxs("span", {
                className: "inline-flex items-center gap-1",
                children: [
                  /* @__PURE__ */ jsx(PlugZap, {
                    className: "h-3 w-3"
                  }),
                  status
                ]
              }),
              /* @__PURE__ */ jsxs("span", {
                children: [
                  "Last sync:",
                  " ",
                  lastSyncAt ? new Date(lastSyncAt).toLocaleString() : "Not synced yet"
                ]
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("footer", {
        className: "flex items-center gap-2",
        children: [
          /* @__PURE__ */ jsx(Button, {
            className: "flex-1",
            onPress: () => onConfigure?.(id),
            children: "Configure"
          }),
          /* @__PURE__ */ jsx(Button, {
            variant: "ghost",
            className: "flex-1",
            onPress: () => onToggle?.(id, !enabled),
            children: enabled ? "Disconnect" : "Connect"
          })
        ]
      })
    ]
  });
}

// src/components/integrations/organisms/IntegrationMarketplace.tsx
import * as React from "react";
import { Boxes, Search } from "lucide-react";
import { Input } from "@contractspec/lib.design-system";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from "@contractspec/lib.ui-kit-web/ui/select";
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
function IntegrationMarketplace({
  integrations,
  onToggle,
  onConfigure
}) {
  const [search, setSearch] = React.useState("");
  const [category, setCategory] = React.useState("all");
  const categories = React.useMemo(() => Array.from(new Set(integrations.map((integration) => integration.category))), [integrations]);
  const filtered = integrations.filter((integration) => {
    const matchesSearch = integration.name.toLowerCase().includes(search.toLowerCase()) || integration.provider.toLowerCase().includes(search.toLowerCase());
    const matchesCategory = category === "all" ? true : integration.category === category;
    return matchesSearch && matchesCategory;
  });
  return /* @__PURE__ */ jsxs2("div", {
    className: "border-border bg-card space-y-4 rounded-2xl border p-4",
    children: [
      /* @__PURE__ */ jsxs2("header", {
        className: "flex flex-wrap items-center justify-between gap-3",
        children: [
          /* @__PURE__ */ jsxs2("div", {
            children: [
              /* @__PURE__ */ jsx2("p", {
                className: "text-sm font-semibold tracking-wide uppercase",
                children: "Integration marketplace"
              }),
              /* @__PURE__ */ jsx2("p", {
                className: "text-muted-foreground text-sm",
                children: "Connect AI providers, payments, analytics, and internal tools with BYOK controls."
              })
            ]
          }),
          /* @__PURE__ */ jsx2(Boxes, {
            className: "text-muted-foreground h-5 w-5"
          })
        ]
      }),
      /* @__PURE__ */ jsxs2("div", {
        className: "flex flex-wrap gap-3",
        children: [
          /* @__PURE__ */ jsxs2("div", {
            className: "relative min-w-[200px] flex-1",
            children: [
              /* @__PURE__ */ jsx2(Search, {
                className: "text-muted-foreground pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2"
              }),
              /* @__PURE__ */ jsx2(Input, {
                type: "search",
                "aria-label": "Search providers",
                className: "w-full py-2 pr-3 pl-9 text-sm",
                value: search,
                onChange: (event) => setSearch(event.target.value),
                placeholder: "Search providers"
              })
            ]
          }),
          /* @__PURE__ */ jsxs2(Select, {
            value: category,
            onValueChange: setCategory,
            children: [
              /* @__PURE__ */ jsx2(SelectTrigger, {
                className: "w-[200px]",
                children: /* @__PURE__ */ jsx2(SelectValue, {
                  placeholder: "All categories"
                })
              }),
              /* @__PURE__ */ jsxs2(SelectContent, {
                children: [
                  /* @__PURE__ */ jsx2(SelectItem, {
                    value: "all",
                    children: "All categories"
                  }),
                  categories.map((item) => /* @__PURE__ */ jsx2(SelectItem, {
                    value: item,
                    children: item
                  }, item))
                ]
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsx2("div", {
        className: "grid gap-4 md:grid-cols-2",
        children: filtered.length ? filtered.map((integration) => /* @__PURE__ */ jsx2(IntegrationCard, {
          id: integration.id,
          provider: integration.provider,
          name: integration.name,
          category: integration.category,
          enabled: integration.enabled,
          status: integration.status,
          lastSyncAt: integration.lastSyncAt,
          onToggle,
          onConfigure
        }, integration.id)) : /* @__PURE__ */ jsx2("div", {
          className: "text-muted-foreground border-border rounded-xl border border-dashed p-6 text-center text-sm md:col-span-2",
          children: "No integrations match your filters."
        })
      })
    ]
  });
}
export {
  IntegrationMarketplace
};
