@hed-hog/core 0.0.374 → 0.0.376

package/hedhog/frontend/app/integration/profiles/page.tsx.ejs

@@ -19,8 +19,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
-import { DoNodePoolPicker } from '@/components/integration-profile/do-node-pool-picker';
-import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { IntegrationProfileSheet } from '@/components/integration-profile/integration-profile-sheet';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
@@ -32,10 +31,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
 import { IntegrationLogo } from '@/components/ui/integration-logo';
-import { Label } from '@/components/ui/label';
-import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import {
   Select,
   SelectContent,
@@ -43,13 +39,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import {
-  Sheet,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import { Switch } from '@/components/ui/switch';
 import {
   Table,
   TableBody,
@@ -63,17 +52,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { usePagination } from '@/hooks/use-pagination';
 import { formatDate } from '@/lib/format-date';
 import { useApp } from '@hed-hog/next-app-provider';
-import {
-  Check,
-  Copy,
-  Eye,
-  EyeOff,
-  Pencil,
-  PlugZap,
-  Plus,
-  Trash2,
-  X,
-} from 'lucide-react';
+import { Pencil, PlugZap, Trash2 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useSearchParams } from 'next/navigation';
 import { useEffect, useRef, useState } from 'react';
@@ -112,28 +91,6 @@ type IntegrationProfile = {
   integration_provider?: IntegrationProvider;
 };
 
-type ProfileForm = {
-  name: string;
-  slug: string;
-  type_id: string;
-  provider_id: string;
-  config: Record<string, string | boolean | number | string[]>;
-  is_active: boolean;
-};
-
-type FieldDef = {
-  key: string;
-  labelKey: string;
-  type: 'text' | 'password' | 'number' | 'boolean' | 'email' | 'url' | 'select';
-  required: boolean;
-  placeholder?: string;
-  colSpan?: boolean;
-  options?: Array<{
-    value: string;
-    labelKey: string;
-  }>;
-};
-
 type ImportValidatedProfile = {
   index: number;
   slug: string;
@@ -166,597 +123,6 @@ type ImportValidationResponse = {
   }>;
 };
 
-// ─── Provider field definitions ───────────────────────────────────────────────
-
-/** Placeholder devolvido pelo backend no lugar de um segredo armazenado. */
-const SECRET_MASK = '********';
-
-const PROVIDER_FIELDS: Record<string, FieldDef[]> = {
-  smtp: [
-    {
-      key: 'host',
-      labelKey: 'fieldHost',
-      type: 'text',
-      required: true,
-      placeholder: 'smtp.yourdomain.com',
-    },
-    {
-      key: 'port',
-      labelKey: 'fieldPort',
-      type: 'number',
-      required: true,
-      placeholder: '587',
-    },
-    {
-      key: 'username',
-      labelKey: 'fieldUsername',
-      type: 'text',
-      required: true,
-    },
-    {
-      key: 'password',
-      labelKey: 'fieldPassword',
-      type: 'password',
-      required: true,
-    },
-    {
-      key: 'from_email',
-      labelKey: 'fieldFromEmail',
-      type: 'email',
-      required: true,
-    },
-    {
-      key: 'from_name',
-      labelKey: 'fieldFromName',
-      type: 'text',
-      required: false,
-    },
-    {
-      key: 'reply_to_email',
-      labelKey: 'fieldReplyTo',
-      type: 'email',
-      required: false,
-    },
-    {
-      key: 'secure',
-      labelKey: 'fieldSecure',
-      type: 'boolean',
-      required: false,
-      colSpan: true,
-    },
-  ],
-  gmail: [
-    {
-      key: 'client_id',
-      labelKey: 'fieldClientId',
-      type: 'text',
-      required: true,
-    },
-    {
-      key: 'client_secret',
-      labelKey: 'fieldClientSecret',
-      type: 'password',
-      required: true,
-    },
-    {
-      key: 'refresh_token',
-      labelKey: 'fieldRefreshToken',
-      type: 'password',
-      required: true,
-      colSpan: true,
-    },
-    {
-      key: 'from_email',
-      labelKey: 'fieldFromEmail',
-      type: 'email',
-      required: true,
-    },
-    {
-      key: 'from_name',
-      labelKey: 'fieldFromName',
-      type: 'text',
-      required: false,
-    },
-  ],
-  ses: [
-    {
-      key: 'access_key_id',
-      labelKey: 'fieldAccessKeyId',
-      type: 'text',
-      required: true,
-    },
-    {
-      key: 'secret_access_key',
-      labelKey: 'fieldSecretAccessKey',
-      type: 'password',
-      required: true,
-    },
-    {
-      key: 'region',
-      labelKey: 'fieldRegion',
-      type: 'text',
-      required: true,
-      placeholder: 'us-east-1',
-    },
-    {
-      key: 'from_email',
-      labelKey: 'fieldFromEmail',
-      type: 'email',
-      required: true,
-    },
-    {
-      key: 'from_name',
-      labelKey: 'fieldFromName',
-      type: 'text',
-      required: false,
-    },
-  ],
-  'evolution-api': [
-    {
-      key: 'host',
-      labelKey: 'fieldHost',
-      type: 'url',
-      required: true,
-      placeholder: 'https://evolution.yourdomain.com',
-      colSpan: true,
-    },
-    { key: 'token', labelKey: 'fieldToken', type: 'password', required: true },
-    {
-      key: 'instance_name',
-      labelKey: 'fieldInstanceName',
-      type: 'text',
-      required: true,
-    },
-  ],
-  'whatsapp-official': [
-    {
-      key: 'phone_number_id',
-      labelKey: 'fieldPhoneNumberId',
-      type: 'text',
-      required: true,
-    },
-    {
-      key: 'access_token',
-      labelKey: 'fieldAccessToken',
-      type: 'password',
-      required: true,
-    },
-    {
-      key: 'business_id',
-      labelKey: 'fieldBusinessId',
-      type: 'text',
-      required: false,
-    },
-  ],
-  local: [
-    {
-      key: 'base_path',
-      labelKey: 'fieldBasePath',
-      type: 'text',
-      required: true,
-      placeholder: '/var/uploads',
-      colSpan: true,
-    },
-  ],
-  s3: [
-    {
-      key: 'access_key_id',
-      labelKey: 'fieldAccessKeyId',
-      type: 'text',
-      required: true,
-    },
-    {
-      key: 'secret_access_key',
-      labelKey: 'fieldSecretAccessKey',
-      type: 'password',
-      required: true,
-    },
-    {
-      key: 'region',
-      labelKey: 'fieldRegion',
-      type: 'text',
-      required: true,
-      placeholder: 'us-east-1',
-    },
-    { key: 'bucket', labelKey: 'fieldBucket', type: 'text', required: true },
-  ],
-  gcs: [
-    {
-      key: 'project_id',
-      labelKey: 'fieldProjectId',
-      type: 'text',
-      required: true,
-    },
-    { key: 'bucket', labelKey: 'fieldBucket', type: 'text', required: true },
-    {
-      key: 'key_file_json',
-      labelKey: 'fieldKeyFileJson',
-      type: 'password',
-      required: true,
-      colSpan: true,
-    },
-  ],
-  'azure-blob': [
-    {
-      key: 'account',
-      labelKey: 'fieldAccount',
-      type: 'text',
-      required: true,
-      placeholder: 'mystorageaccount',
-    },
-    {
-      key: 'key',
-      labelKey: 'fieldAccountKey',
-      type: 'password',
-      required: true,
-    },
-    {
-      key: 'container',
-      labelKey: 'fieldContainer',
-      type: 'text',
-      required: true,
-    },
-  ],
-  's3-compatible': [
-    {
-      key: 'endpoint',
-      labelKey: 'fieldEndpoint',
-      type: 'url',
-      required: true,
-      colSpan: true,
-    },
-    {
-      key: 'access_key_id',
-      labelKey: 'fieldAccessKeyId',
-      type: 'text',
-      required: true,
-    },
-    {
-      key: 'secret_access_key',
-      labelKey: 'fieldSecretAccessKey',
-      type: 'password',
-      required: true,
-    },
-    { key: 'bucket', labelKey: 'fieldBucket', type: 'text', required: true },
-    {
-      key: 'region',
-      labelKey: 'fieldRegion',
-      type: 'text',
-      required: false,
-      placeholder: 'us-east-1',
-    },
-  ],
-  openai: [
-    {
-      key: 'api_key',
-      labelKey: 'fieldApiKey',
-      type: 'password',
-      required: true,
-      colSpan: true,
-    },
-    {
-      key: 'organization',
-      labelKey: 'fieldOrganization',
-      type: 'text',
-      required: false,
-    },
-  ],
-  gemini: [
-    {
-      key: 'api_key',
-      labelKey: 'fieldApiKey',
-      type: 'password',
-      required: true,
-      colSpan: true,
-    },
-  ],
-  claude: [
-    {
-      key: 'api_key',
-      labelKey: 'fieldApiKey',
-      type: 'password',
-      required: true,
-      colSpan: true,
-    },
-  ],
-  'google-oauth': [
-    {
-      key: 'client_id',
-      labelKey: 'fieldClientId',
-      type: 'text',
-      required: true,
-    },
-    {
-      key: 'client_secret',
-      labelKey: 'fieldClientSecret',
-      type: 'password',
-      required: true,
-    },
-  ],
-  'github-oauth': [
-    {
-      key: 'client_id',
-      labelKey: 'fieldClientId',
-      type: 'text',
-      required: true,
-    },
-    {
-      key: 'client_secret',
-      labelKey: 'fieldClientSecret',
-      type: 'password',
-      required: true,
-    },
-  ],
-  'microsoft-oauth': [
-    {
-      key: 'client_id',
-      labelKey: 'fieldClientId',
-      type: 'text',
-      required: true,
-    },
-    {
-      key: 'client_secret',
-      labelKey: 'fieldClientSecret',
-      type: 'password',
-      required: true,
-    },
-    {
-      key: 'tenant_id',
-      labelKey: 'fieldTenantId',
-      type: 'text',
-      required: true,
-      placeholder: 'common',
-    },
-  ],
-  'facebook-oauth': [
-    {
-      key: 'client_id',
-      labelKey: 'fieldClientId',
-      type: 'text',
-      required: true,
-    },
-    {
-      key: 'client_secret',
-      labelKey: 'fieldClientSecret',
-      type: 'password',
-      required: true,
-    },
-  ],
-  'microsoft-entra-id-oauth': [
-    {
-      key: 'client_id',
-      labelKey: 'fieldClientId',
-      type: 'text',
-      required: true,
-    },
-    {
-      key: 'client_secret',
-      labelKey: 'fieldClientSecret',
-      type: 'password',
-      required: true,
-    },
-    {
-      key: 'tenant_id',
-      labelKey: 'fieldTenantId',
-      type: 'text',
-      required: true,
-    },
-  ],
-  'apple-oauth': [
-    {
-      key: 'client_id',
-      labelKey: 'fieldClientId',
-      type: 'text',
-      required: true,
-      placeholder: 'com.yourdomain.service',
-    },
-    {
-      key: 'team_id',
-      labelKey: 'fieldTeamId',
-      type: 'text',
-      required: true,
-    },
-    {
-      key: 'key_id',
-      labelKey: 'fieldKeyId',
-      type: 'text',
-      required: true,
-    },
-    {
-      key: 'private_key',
-      labelKey: 'fieldPrivateKey',
-      type: 'password',
-      required: true,
-      placeholder: '-----BEGIN PRIVATE KEY-----...',
-    },
-  ],
-  'linkedin-oauth': [
-    {
-      key: 'client_id',
-      labelKey: 'fieldClientId',
-      type: 'text',
-      required: true,
-    },
-    {
-      key: 'client_secret',
-      labelKey: 'fieldClientSecret',
-      type: 'password',
-      required: true,
-    },
-  ],
-  stripe: [
-    {
-      key: 'publishable_key',
-      labelKey: 'fieldPublishableKey',
-      type: 'text',
-      required: false,
-    },
-    {
-      key: 'secret_key',
-      labelKey: 'fieldSecretKey',
-      type: 'password',
-      required: true,
-    },
-    {
-      key: 'webhook_secret',
-      labelKey: 'fieldWebhookSecret',
-      type: 'password',
-      required: false,
-    },
-    {
-      key: 'mode',
-      labelKey: 'fieldMode',
-      type: 'select',
-      required: false,
-      options: [
-        { value: 'sandbox', labelKey: 'fieldModeSandbox' },
-        { value: 'production', labelKey: 'fieldModeProduction' },
-      ],
-    },
-  ],
-  mercado_pago: [
-    {
-      key: 'public_key',
-      labelKey: 'fieldPublicKey',
-      type: 'text',
-      required: false,
-    },
-    {
-      key: 'access_token',
-      labelKey: 'fieldAccessToken',
-      type: 'password',
-      required: true,
-    },
-    {
-      key: 'webhook_secret',
-      labelKey: 'fieldWebhookSecret',
-      type: 'password',
-      required: false,
-    },
-    {
-      key: 'mode',
-      labelKey: 'fieldMode',
-      type: 'select',
-      required: false,
-      options: [
-        { value: 'sandbox', labelKey: 'fieldModeSandbox' },
-        { value: 'production', labelKey: 'fieldModeProduction' },
-      ],
-    },
-  ],
-  recaptcha: [
-    {
-      key: 'site_key',
-      labelKey: 'fieldSiteKey',
-      type: 'text',
-      required: true,
-      colSpan: true,
-    },
-    {
-      key: 'secret_key',
-      labelKey: 'fieldSecretKey',
-      type: 'password',
-      required: true,
-      colSpan: true,
-    },
-    {
-      key: 'score_threshold',
-      labelKey: 'fieldScoreThreshold',
-      type: 'number',
-      required: false,
-      placeholder: '0.5',
-    },
-  ],
-  'cloudflare-turnstile': [
-    {
-      key: 'site_key',
-      labelKey: 'fieldSiteKey',
-      type: 'text',
-      required: true,
-      colSpan: true,
-    },
-    {
-      key: 'secret_key',
-      labelKey: 'fieldSecretKey',
-      type: 'password',
-      required: true,
-      colSpan: true,
-    },
-  ],
-  altcha: [
-    {
-      key: 'hmac_key',
-      labelKey: 'fieldHmacKey',
-      type: 'password',
-      required: true,
-      colSpan: true,
-    },
-    {
-      key: 'api_url',
-      labelKey: 'fieldApiUrl',
-      type: 'url',
-      required: false,
-      colSpan: true,
-      placeholder: 'https://eu.altcha.org/api/v1',
-    },
-  ],
-  // O node pool de vídeo NÃO é um campo de texto: é escolhido por nome via picker
-  // dedicado (carrega os pools da DO API com o token + cluster_id). Ver DoNodePoolPicker.
-  digitalocean: [
-    {
-      key: 'api_token',
-      labelKey: 'fieldApiToken',
-      type: 'password',
-      required: true,
-      colSpan: true,
-    },
-    {
-      key: 'cluster_id',
-      labelKey: 'fieldClusterId',
-      type: 'text',
-      required: true,
-    },
-    {
-      key: 'region',
-      labelKey: 'fieldRegion',
-      type: 'text',
-      required: true,
-      placeholder: 'nyc1',
-    },
-  ],
-  kubernetes: [
-    {
-      key: 'api_server',
-      labelKey: 'fieldApiServer',
-      type: 'url',
-      required: true,
-      colSpan: true,
-      placeholder: 'https://10.0.0.1:6443',
-    },
-    {
-      key: 'token',
-      labelKey: 'fieldToken',
-      type: 'password',
-      required: true,
-      colSpan: true,
-    },
-    {
-      key: 'ca_cert',
-      labelKey: 'fieldCaCert',
-      type: 'password',
-      required: false,
-      colSpan: true,
-    },
-    {
-      key: 'namespace',
-      labelKey: 'fieldNamespace',
-      type: 'text',
-      required: false,
-      placeholder: 'hcode',
-    },
-  ],
-};
-
 // ─── Helpers ─────────────────────────────────────────────────────────────────
 
 function getLocaleName(locales: LocaleEntry[], code: string): string {
@@ -765,24 +131,6 @@ function getLocaleName(locales: LocaleEntry[], code: string): string {
   );
 }
 
-function toSlug(name: string): string {
-  return name
-    .toLowerCase()
-    .normalize('NFD')
-    .replace(/[̀-ͯ]/g, '')
-    .replace(/[^a-z0-9]+/g, '-')
-    .replace(/^-+|-+$/g, '');
-}
-
-const defaultForm = (): ProfileForm => ({
-  name: '',
-  slug: '',
-  type_id: '',
-  provider_id: '',
-  config: {},
-  is_active: true,
-});
-
 // ─── Tab list component ───────────────────────────────────────────────────────
 
 function TypeTab({
@@ -1050,14 +398,9 @@ export default function IntegrationProfilesPage() {
   const [isSheetOpen, setIsSheetOpen] = useState(false);
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [profileToDelete, setProfileToDelete] = useState<number | null>(null);
-  const [editingProfile, setEditingProfile] =
-    useState<IntegrationProfile | null>(null);
-  const [formData, setFormData] = useState<ProfileForm>(defaultForm());
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [visibleFields, setVisibleFields] = useState<Record<string, boolean>>(
-    {}
+  const [editingProfileId, setEditingProfileId] = useState<number | null>(
+    null
   );
-  const [copiedUrlIndex, setCopiedUrlIndex] = useState<number | null>(null);
   const [selectedProfileIds, setSelectedProfileIds] = useState<Set<number>>(
     new Set()
   );
@@ -1074,40 +417,6 @@ export default function IntegrationProfilesPage() {
     Record<string, 'ignore' | 'replace' | 'rename_auto'>
   >({});
   const fileInputRef = useRef<HTMLInputElement>(null);
-  const slugAutoRef = useRef(true);
-
-  // Providers filtered by the type currently selected in the form
-  const formTypeProviders = providers.filter(
-    (p) => String(p.type_id) === formData.type_id
-  );
-  const selectedProvider = formTypeProviders.find(
-    (p) => String(p.id) === formData.provider_id
-  );
-  const providerFields = selectedProvider
-    ? (PROVIDER_FIELDS[selectedProvider.slug] ?? [])
-    : [];
-
-  const isOAuthProvider = (selectedProvider?.slug ?? '').endsWith('-oauth');
-  const oauthProviderName = isOAuthProvider
-    ? selectedProvider!.slug.replace(/-oauth$/, '')
-    : '';
-  const appUrl =
-    typeof window !== 'undefined'
-      ? window.location.origin
-      : String(getSettingValue?.('url') ?? '').replace(/\/+$/, '');
-  const defaultCallbackUrls =
-    isOAuthProvider && appUrl
-      ? [
-          `${appUrl}/callback/${oauthProviderName}/login`,
-          `${appUrl}/callback/${oauthProviderName}/register`,
-          `${appUrl}/callback/${oauthProviderName}/connect`,
-        ]
-      : [];
-  const callbackUrls: string[] = (() => {
-    const saved = formData.config.callback_urls;
-    if (Array.isArray(saved)) return saved as string[];
-    return defaultCallbackUrls;
-  })();
 
   useEffect(() => {
     request<IntegrationType[]>({
@@ -1159,58 +468,12 @@ export default function IntegrationProfilesPage() {
   }, [requestedType, types]);
 
   const handleCreate = () => {
-    const activeType = types.find((ty) => ty.slug === activeTab);
-    setEditingProfile(null);
-    slugAutoRef.current = true;
-    setFormData({
-      ...defaultForm(),
-      type_id: activeType ? String(activeType.id) : '',
-    });
+    setEditingProfileId(null);
     setIsSheetOpen(true);
   };
 
-  const handleEdit = async (profile: IntegrationProfile) => {
-    setEditingProfile(profile);
-    slugAutoRef.current = false;
-    try {
-      const { data } = await request<IntegrationProfile>({
-        url: `/integration-profile/${profile.id}`,
-        method: 'GET',
-      });
-      const loadedConfig =
-        (data.config as Record<string, string | boolean | number | string[]>) ??
-        {};
-      const providerSlug =
-        providers.find((p) => p.id === data.provider_id)?.slug ?? '';
-      // Segredos chegam mascarados (********) do backend e PERMANECEM mascarados no
-      // form: o campo fica desabilitado mostrando ********; o botão "trocar" limpa e
-      // reabilita para digitar um novo valor. Em branco ou mascarado, o backend
-      // preserva o segredo armazenado.
-      if (
-        providerSlug.endsWith('-oauth') &&
-        !Array.isArray(loadedConfig.callback_urls)
-      ) {
-        const pName = providerSlug.replace(/-oauth$/, '');
-        if (appUrl) {
-          loadedConfig.callback_urls = [
-            `${appUrl}/callback/${pName}/login`,
-            `${appUrl}/callback/${pName}/register`,
-            `${appUrl}/callback/${pName}/connect`,
-          ];
-        }
-      }
-      setFormData({
-        name: data.name,
-        slug: data.slug,
-        type_id: String(data.type_id),
-        provider_id: String(data.provider_id),
-        config: loadedConfig,
-        is_active: data.is_active,
-      });
-    } catch {
-      toast.error(t('loadError'));
-      return;
-    }
+  const handleEdit = (profile: IntegrationProfile) => {
+    setEditingProfileId(profile.id);
     setIsSheetOpen(true);
   };
 
@@ -1394,116 +657,6 @@ export default function IntegrationProfilesPage() {
     }
   };
 
-  const handleNameChange = (name: string) => {
-    setFormData((p) => ({
-      ...p,
-      name,
-      slug: slugAutoRef.current ? toSlug(name) : p.slug,
-    }));
-  };
-
-  const handleSlugChange = (slug: string) => {
-    slugAutoRef.current = false;
-    setFormData((p) => ({ ...p, slug }));
-  };
-
-  const handleTypeChange = (type_id: string) => {
-    setFormData((p) => ({ ...p, type_id, provider_id: '', config: {} }));
-  };
-
-  const handleProviderChange = (provider_id: string) => {
-    const provider = formTypeProviders.find(
-      (p) => String(p.id) === provider_id
-    );
-    const initialConfig: Record<string, string | boolean | number | string[]> =
-      {};
-    if (provider?.slug?.endsWith('-oauth')) {
-      const pName = provider.slug.replace(/-oauth$/, '');
-      initialConfig.callback_urls = appUrl
-        ? [
-            `${appUrl}/callback/${pName}/login`,
-            `${appUrl}/callback/${pName}/register`,
-            `${appUrl}/callback/${pName}/connect`,
-          ]
-        : [];
-    }
-    setFormData((p) => ({ ...p, provider_id, config: initialConfig }));
-    setVisibleFields({});
-  };
-
-  const updateConfig = (
-    key: string,
-    value: string | boolean | number | string[]
-  ) => {
-    setFormData((p) => ({ ...p, config: { ...p.config, [key]: value } }));
-  };
-
-  const updateCallbackUrl = (index: number, value: string) => {
-    const urls = [...callbackUrls];
-    urls[index] = value;
-    setFormData((p) => ({
-      ...p,
-      config: { ...p.config, callback_urls: urls },
-    }));
-  };
-
-  const addCallbackUrl = () => {
-    setFormData((p) => ({
-      ...p,
-      config: { ...p.config, callback_urls: [...callbackUrls, ''] },
-    }));
-  };
-
-  const removeCallbackUrl = (index: number) => {
-    setFormData((p) => ({
-      ...p,
-      config: {
-        ...p.config,
-        callback_urls: callbackUrls.filter((_, i) => i !== index),
-      },
-    }));
-  };
-
-  const handleSubmit = async (event: React.FormEvent) => {
-    event.preventDefault();
-    if (!formData.type_id || !formData.provider_id) return;
-
-    setIsSubmitting(true);
-    const payload = {
-      slug: formData.slug,
-      name: formData.name,
-      type_id: Number(formData.type_id),
-      provider_id: Number(formData.provider_id),
-      config: isOAuthProvider
-        ? { ...formData.config, callback_urls: callbackUrls }
-        : formData.config,
-      is_active: formData.is_active,
-    };
-
-    try {
-      if (editingProfile) {
-        await request({
-          url: `/integration-profile/${editingProfile.id}`,
-          method: 'PATCH',
-          data: payload,
-        });
-        toast.success(t('updateSuccess'));
-      } else {
-        await request({
-          url: '/integration-profile',
-          method: 'POST',
-          data: payload,
-        });
-        toast.success(t('createSuccess'));
-      }
-      setIsSheetOpen(false);
-      setRefreshKey((k) => k + 1);
-    } catch {
-      toast.error(editingProfile ? t('updateError') : t('createError'));
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
 
   return (
     <Page>
@@ -1758,420 +911,13 @@ export default function IntegrationProfilesPage() {
         </DialogContent>
       </Dialog>
 
-      {/* ── Create / Edit Sheet ── */}
-      <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
-        <ResizableSheetContent
-          sheetId="integration-profile-form"
-          defaultWidth={680}
-        >
-          <SheetHeader>
-            <SheetTitle>
-              {editingProfile ? t('editProfile') : t('newProfileTitle')}
-            </SheetTitle>
-            <SheetDescription>
-              {editingProfile
-                ? t('editProfileDescription')
-                : t('newProfileDescription')}
-            </SheetDescription>
-          </SheetHeader>
-
-          <form
-            onSubmit={handleSubmit}
-            className="flex flex-col gap-6 px-3 pb-8 sm:px-4"
-          >
-            {/* ── Identity ── */}
-            <div className="grid gap-4 sm:grid-cols-2">
-              <div className="space-y-2">
-                <Label htmlFor="ip-name">
-                  {t('nameLabel')} <span className="text-destructive">*</span>
-                </Label>
-                <Input
-                  id="ip-name"
-                  value={formData.name}
-                  onChange={(e) => handleNameChange(e.target.value)}
-                  placeholder={t('namePlaceholder')}
-                  required
-                  autoFocus
-                />
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="ip-slug">
-                  {t('slugLabel')} <span className="text-destructive">*</span>
-                </Label>
-                <Input
-                  id="ip-slug"
-                  value={formData.slug}
-                  onChange={(e) => handleSlugChange(e.target.value)}
-                  placeholder={t('slugPlaceholder')}
-                  required
-                  className="font-mono text-sm"
-                />
-              </div>
-            </div>
-
-            {/* ── Type + Provider ── */}
-            <div className="grid gap-4 sm:grid-cols-2">
-              <div className="space-y-2">
-                <Label htmlFor="ip-type">
-                  {t('typeLabel')} <span className="text-destructive">*</span>
-                </Label>
-                <Select
-                  value={formData.type_id}
-                  onValueChange={handleTypeChange}
-                  disabled={!!editingProfile}
-                >
-                  <SelectTrigger className="w-full" id="ip-type">
-                    <SelectValue placeholder={t('typePlaceholder')} />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {types.map((ty) => (
-                      <SelectItem key={ty.id} value={String(ty.id)}>
-                        {getLocaleName(
-                          ty.integration_type_locale,
-                          currentLocaleCode
-                        )}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="ip-provider">
-                  {t('providerLabel')}{' '}
-                  <span className="text-destructive">*</span>
-                </Label>
-                <Select
-                  value={formData.provider_id}
-                  onValueChange={handleProviderChange}
-                  disabled={!formData.type_id || !!editingProfile}
-                >
-                  <SelectTrigger className="w-full" id="ip-provider">
-                    <SelectValue
-                      placeholder={
-                        !formData.type_id
-                          ? t('providerSelectTypFirst')
-                          : t('providerPlaceholder')
-                      }
-                    />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {formTypeProviders.map((prov) => (
-                      <SelectItem key={prov.id} value={String(prov.id)}>
-                        <span className="flex items-center gap-2">
-                          <Avatar className="size-6 border bg-muted/40">
-                            <AvatarFallback className="text-[10px] font-semibold">
-                              <IntegrationLogo
-                                provider={prov.slug}
-                                size={14}
-                                decorative
-                              />
-                            </AvatarFallback>
-                          </Avatar>
-                          {getLocaleName(
-                            prov.integration_provider_locale,
-                            currentLocaleCode
-                          )}
-                        </span>
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-
-            {/* ── Dynamic credential fields ── */}
-            {providerFields.length > 0 && (
-              <div className="rounded-lg border">
-                <div className="border-b px-4 py-3">
-                  <p className="text-sm font-semibold">
-                    {t('configSectionTitle')}
-                  </p>
-                </div>
-                <div className="grid gap-4 p-4 sm:grid-cols-2">
-                  {providerFields.map((field) => {
-                    if (field.type === 'boolean') {
-                      return (
-                        <div
-                          key={field.key}
-                          className="col-span-full flex items-center justify-between rounded-md border px-4 py-3"
-                        >
-                          <p className="text-sm font-medium">
-                            {t(field.labelKey as any)}
-                          </p>
-                          <Switch
-                            checked={Boolean(formData.config[field.key])}
-                            onCheckedChange={(checked) =>
-                              updateConfig(field.key, checked)
-                            }
-                          />
-                        </div>
-                      );
-                    }
-
-                    if (field.type === 'select') {
-                      return (
-                        <div
-                          key={field.key}
-                          className={
-                            field.colSpan
-                              ? 'col-span-full space-y-2'
-                              : 'space-y-2'
-                          }
-                        >
-                          <Label htmlFor={`ip-cfg-${field.key}`}>
-                            {t(field.labelKey as any)}
-                            {field.required && (
-                              <span className="text-destructive"> *</span>
-                            )}
-                          </Label>
-                          <Select
-                            value={String(formData.config[field.key] ?? '')}
-                            onValueChange={(value) =>
-                              updateConfig(field.key, value)
-                            }
-                          >
-                            <SelectTrigger
-                              id={`ip-cfg-${field.key}`}
-                              className="w-full"
-                            >
-                              <SelectValue placeholder={field.placeholder} />
-                            </SelectTrigger>
-                            <SelectContent>
-                              {field.options?.map((option) => (
-                                <SelectItem
-                                  key={option.value}
-                                  value={option.value}
-                                >
-                                  {t(option.labelKey as any)}
-                                </SelectItem>
-                              ))}
-                            </SelectContent>
-                          </Select>
-                        </div>
-                      );
-                    }
-
-                    const isPassword = field.type === 'password';
-                    const isVisible = visibleFields[field.key] ?? false;
-                    const currentValue = String(
-                      formData.config[field.key] ?? ''
-                    );
-                    // Segredo já armazenado: campo desabilitado mostrando ******** +
-                    // botão "trocar" que limpa o valor e reabilita para digitar um novo.
-                    const isLockedSecret =
-                      isPassword &&
-                      Boolean(editingProfile) &&
-                      currentValue === SECRET_MASK;
-
-                    return (
-                      <div
-                        key={field.key}
-                        className={
-                          field.colSpan
-                            ? 'col-span-full space-y-2'
-                            : 'space-y-2'
-                        }
-                      >
-                        <Label htmlFor={`ip-cfg-${field.key}`}>
-                          {t(field.labelKey as any)}
-                          {field.required && (
-                            <span className="text-destructive"> *</span>
-                          )}
-                        </Label>
-                        <div className={isPassword ? 'relative' : undefined}>
-                          <Input
-                            id={`ip-cfg-${field.key}`}
-                            type={
-                              isPassword
-                                ? isVisible && !isLockedSecret
-                                  ? 'text'
-                                  : 'password'
-                                : field.type === 'number'
-                                  ? 'number'
-                                  : 'text'
-                            }
-                            value={currentValue}
-                            onChange={(e) =>
-                              updateConfig(field.key, e.target.value)
-                            }
-                            placeholder={
-                              isPassword && editingProfile
-                                ? t('leaveBlankToKeep')
-                                : field.placeholder
-                            }
-                            required={
-                              field.required &&
-                              !(isPassword && Boolean(editingProfile))
-                            }
-                            autoComplete={
-                              isPassword ? 'new-password' : undefined
-                            }
-                            className={isPassword ? 'pr-10' : undefined}
-                            disabled={isLockedSecret}
-                          />
-                          {isPassword &&
-                            (isLockedSecret ? (
-                              <Button
-                                type="button"
-                                variant="ghost"
-                                size="icon"
-                                className="absolute right-1 top-1/2 h-8 w-8 -translate-y-1/2"
-                                onClick={() => {
-                                  updateConfig(field.key, '');
-                                  setVisibleFields((p) => ({
-                                    ...p,
-                                    [field.key]: true,
-                                  }));
-                                }}
-                                aria-label={t('changeSecret')}
-                                title={t('changeSecret')}
-                              >
-                                <Pencil className="h-4 w-4" />
-                              </Button>
-                            ) : (
-                              <Button
-                                type="button"
-                                variant="ghost"
-                                size="icon"
-                                className="absolute right-1 top-1/2 h-8 w-8 -translate-y-1/2"
-                                onClick={() =>
-                                  setVisibleFields((p) => ({
-                                    ...p,
-                                    [field.key]: !p[field.key],
-                                  }))
-                                }
-                                aria-label={
-                                  isVisible
-                                    ? t('hidePassword')
-                                    : t('showPassword')
-                                }
-                              >
-                                {isVisible ? (
-                                  <EyeOff className="h-4 w-4" />
-                                ) : (
-                                  <Eye className="h-4 w-4" />
-                                )}
-                              </Button>
-                            ))}
-                        </div>
-                      </div>
-                    );
-                  })}
-                </div>
-              </div>
-            )}
-
-            {/* ── DigitalOcean: node pool de vídeo (escolha por nome via API) ── */}
-            {selectedProvider?.slug === 'digitalocean' && (
-              <DoNodePoolPicker
-                apiToken={String(formData.config.api_token ?? '')}
-                clusterId={String(formData.config.cluster_id ?? '')}
-                value={String(formData.config.video_node_pool_name ?? '')}
-                profileId={editingProfile?.id}
-                onChange={(name) =>
-                  updateConfig('video_node_pool_name', name)
-                }
-              />
-            )}
-
-            {/* ── Callback URLs (OAuth only) ── */}
-            {isOAuthProvider && (
-              <div className="rounded-lg border">
-                <div className="flex items-center justify-between border-b px-4 py-3">
-                  <div>
-                    <p className="text-sm font-semibold">
-                      {t('callbackUrlsSectionTitle')}
-                    </p>
-                    <p className="mt-0.5 text-xs text-muted-foreground">
-                      {t('callbackUrlsDescription')}
-                    </p>
-                  </div>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    onClick={addCallbackUrl}
-                  >
-                    <Plus className="mr-1.5 h-3.5 w-3.5" />
-                    {t('addCallbackUrl')}
-                  </Button>
-                </div>
-                <div className="space-y-2 p-4">
-                  {callbackUrls.length === 0 && (
-                    <p className="py-1 text-center text-sm text-muted-foreground">
-                      {t('noCallbackUrls')}
-                    </p>
-                  )}
-                  {callbackUrls.map((url, index) => (
-                    <div key={index} className="flex gap-2">
-                      <Input
-                        value={url}
-                        onChange={(e) =>
-                          updateCallbackUrl(index, e.target.value)
-                        }
-                        placeholder={t('callbackUrlPlaceholder')}
-                        className="font-mono text-sm"
-                      />
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="icon"
-                        className="shrink-0"
-                        disabled={!url}
-                        onClick={() => {
-                          navigator.clipboard.writeText(url);
-                          setCopiedUrlIndex(index);
-                          setTimeout(() => setCopiedUrlIndex(null), 1500);
-                        }}
-                      >
-                        {copiedUrlIndex === index ? (
-                          <Check className="h-4 w-4 text-green-500" />
-                        ) : (
-                          <Copy className="h-4 w-4" />
-                        )}
-                      </Button>
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="icon"
-                        onClick={() => removeCallbackUrl(index)}
-                        className="shrink-0"
-                      >
-                        <X className="h-4 w-4" />
-                      </Button>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {/* ── Active ── */}
-            <div className="flex items-center justify-between rounded-md border px-4 py-3">
-              <p className="text-sm font-medium">{t('isActiveLabel')}</p>
-              <Switch
-                checked={formData.is_active}
-                onCheckedChange={(checked) =>
-                  setFormData((p) => ({ ...p, is_active: checked }))
-                }
-              />
-            </div>
-
-            <div className="flex justify-end border-t pt-4">
-              <Button
-                type="submit"
-                className="min-w-40"
-                disabled={
-                  isSubmitting || !formData.type_id || !formData.provider_id
-                }
-              >
-                {editingProfile ? t('saveChanges') : t('createProfile')}
-              </Button>
-            </div>
-          </form>
-        </ResizableSheetContent>
-      </Sheet>
+      <IntegrationProfileSheet
+        open={isSheetOpen}
+        onOpenChange={setIsSheetOpen}
+        profileId={editingProfileId}
+        initialTypeSlug={activeTab}
+        onSaved={() => setRefreshKey((k) => k + 1)}
+      />
 
       {/* ── Delete confirmation ── */}
       <AlertDialog