// src/components/integrations/organisms/IntegrationSettings.tsx
import * as React from "react";
import { ShieldCheck, Key, TestTube2 } from "lucide-react";
import { Button, Input, Textarea } from "@contractspec/lib.design-system";
import { Checkbox } from "@contractspec/lib.ui-kit-web/ui/checkbox";
import { Label } from "@contractspec/lib.ui-kit-web/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from "@contractspec/lib.ui-kit-web/ui/select";
import { jsx, jsxs } from "react/jsx-runtime";
function IntegrationSettings({
  provider,
  initialValues,
  onTestConnection,
  onSave,
  isSaving,
  isTesting
}) {
  const [values, setValues] = React.useState({
    apiKey: initialValues?.apiKey ?? "",
    secret: initialValues?.secret ?? "",
    ownershipMode: initialValues?.ownershipMode ?? "managed",
    secretProvider: initialValues?.secretProvider ?? "env",
    secretRef: initialValues?.secretRef ?? "",
    config: initialValues?.config ?? `{
  "region": "eu-west-1"
}`
  });
  const handleChange = (event) => {
    const target = event.target;
    const { name, value } = target;
    setValues((prev) => ({
      ...prev,
      [name]: value
    }));
  };
  return /* @__PURE__ */ jsxs("div", {
    className: "border-border bg-card space-y-4 rounded-2xl border p-4",
    children: [
      /* @__PURE__ */ jsxs("header", {
        className: "flex flex-wrap items-center justify-between gap-3",
        children: [
          /* @__PURE__ */ jsxs("div", {
            children: [
              /* @__PURE__ */ jsxs("p", {
                className: "text-sm font-semibold tracking-wide uppercase",
                children: [
                  provider,
                  " credentials"
                ]
              }),
              /* @__PURE__ */ jsx("p", {
                className: "text-muted-foreground text-sm",
                children: "Store encrypted keys with BYOK and run safe connection tests."
              })
            ]
          }),
          /* @__PURE__ */ jsx(ShieldCheck, {
            className: "text-muted-foreground h-5 w-5"
          })
        ]
      }),
      /* @__PURE__ */ jsx("div", {
        className: "grid gap-4 md:grid-cols-2",
        children: /* @__PURE__ */ jsxs("div", {
          className: "space-y-2",
          children: [
            /* @__PURE__ */ jsx(Label, {
              htmlFor: "ownershipMode",
              children: "Ownership"
            }),
            /* @__PURE__ */ jsxs(Select, {
              value: values.ownershipMode ?? "managed",
              onValueChange: (next) => setValues((prev) => ({
                ...prev,
                ownershipMode: next
              })),
              children: [
                /* @__PURE__ */ jsx(SelectTrigger, {
                  id: "ownershipMode",
                  className: "w-full",
                  children: /* @__PURE__ */ jsx(SelectValue, {})
                }),
                /* @__PURE__ */ jsxs(SelectContent, {
                  children: [
                    /* @__PURE__ */ jsx(SelectItem, {
                      value: "managed",
                      children: "Managed (store encrypted)"
                    }),
                    /* @__PURE__ */ jsx(SelectItem, {
                      value: "byok",
                      children: "BYOK (store secret reference)"
                    })
                  ]
                })
              ]
            })
          ]
        })
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "grid gap-4 md:grid-cols-2",
        children: [
          /* @__PURE__ */ jsxs("div", {
            className: "space-y-1 text-sm",
            children: [
              /* @__PURE__ */ jsx(Label, {
                htmlFor: "apiKey",
                className: "font-semibold",
                children: "API key"
              }),
              /* @__PURE__ */ jsxs("div", {
                className: "relative",
                children: [
                  /* @__PURE__ */ jsx(Key, {
                    className: "text-muted-foreground pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2"
                  }),
                  /* @__PURE__ */ jsx(Input, {
                    type: "text",
                    name: "apiKey",
                    id: "apiKey",
                    className: "w-full py-2 pr-3 pl-9",
                    value: values.apiKey,
                    onChange: handleChange,
                    required: true
                  })
                ]
              })
            ]
          }),
          /* @__PURE__ */ jsxs("div", {
            className: "space-y-1 text-sm",
            children: [
              /* @__PURE__ */ jsx(Label, {
                htmlFor: "secret",
                className: "font-semibold",
                children: "Secret"
              }),
              /* @__PURE__ */ jsx(Input, {
                type: "password",
                id: "secret",
                name: "secret",
                className: "w-full px-3 py-2",
                value: values.secret,
                onChange: handleChange
              })
            ]
          })
        ]
      }),
      values.ownershipMode === "byok" ? /* @__PURE__ */ jsxs("div", {
        className: "space-y-4 rounded-xl border border-blue-500/20 bg-blue-500/5 p-4",
        children: [
          /* @__PURE__ */ jsx("p", {
            className: "text-sm font-semibold",
            children: "BYOK secret reference"
          }),
          /* @__PURE__ */ jsxs("div", {
            className: "grid gap-4 md:grid-cols-2",
            children: [
              /* @__PURE__ */ jsxs("div", {
                className: "space-y-2",
                children: [
                  /* @__PURE__ */ jsx(Label, {
                    htmlFor: "secretProvider",
                    children: "Secret provider"
                  }),
                  /* @__PURE__ */ jsxs(Select, {
                    value: values.secretProvider ?? "env",
                    onValueChange: (next) => setValues((prev) => ({
                      ...prev,
                      secretProvider: next
                    })),
                    children: [
                      /* @__PURE__ */ jsx(SelectTrigger, {
                        id: "secretProvider",
                        className: "w-full",
                        children: /* @__PURE__ */ jsx(SelectValue, {})
                      }),
                      /* @__PURE__ */ jsxs(SelectContent, {
                        children: [
                          /* @__PURE__ */ jsx(SelectItem, {
                            value: "env",
                            children: "Environment"
                          }),
                          /* @__PURE__ */ jsx(SelectItem, {
                            value: "gcp",
                            children: "GCP Secret Manager"
                          })
                        ]
                      })
                    ]
                  })
                ]
              }),
              /* @__PURE__ */ jsxs("div", {
                className: "space-y-2",
                children: [
                  /* @__PURE__ */ jsx(Label, {
                    htmlFor: "secretRef",
                    children: "Secret reference"
                  }),
                  /* @__PURE__ */ jsx(Input, {
                    id: "secretRef",
                    name: "secretRef",
                    placeholder: values.secretProvider === "gcp" ? "gcp://projects/.../secrets/..." : "env://MY_TOKEN_ENV_VAR",
                    value: values.secretRef ?? "",
                    onChange: handleChange
                  })
                ]
              })
            ]
          })
        ]
      }) : /* @__PURE__ */ jsxs("div", {
        className: "flex items-center gap-3 rounded-xl border border-emerald-500/20 bg-emerald-500/5 p-4 text-sm",
        children: [
          /* @__PURE__ */ jsx(Checkbox, {
            checked: true,
            onCheckedChange: () => {},
            "aria-label": "Managed"
          }),
          /* @__PURE__ */ jsxs("div", {
            children: [
              /* @__PURE__ */ jsx("p", {
                className: "font-semibold",
                children: "Managed encryption enabled"
              }),
              /* @__PURE__ */ jsx("p", {
                className: "text-muted-foreground",
                children: "Secrets are encrypted server-side for this tenant."
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-1 text-sm",
        children: [
          /* @__PURE__ */ jsx(Label, {
            htmlFor: "config",
            className: "font-semibold",
            children: "Configuration (JSON)"
          }),
          /* @__PURE__ */ jsx(Textarea, {
            id: "config",
            name: "config",
            className: "min-h-[140px] w-full font-mono text-sm",
            value: values.config,
            onChange: handleChange
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "flex flex-wrap items-center gap-3",
        children: [
          /* @__PURE__ */ jsxs(Button, {
            variant: "ghost",
            onPress: () => onTestConnection?.(values),
            disabled: isTesting,
            children: [
              /* @__PURE__ */ jsx(TestTube2, {
                className: "h-4 w-4"
              }),
              "Test connection"
            ]
          }),
          /* @__PURE__ */ jsx(Button, {
            variant: "default",
            onPress: () => onSave?.(values),
            disabled: isSaving,
            children: "Save settings"
          })
        ]
      })
    ]
  });
}
export {
  IntegrationSettings
};
