"use client";

import { useEffect, useState } from "react";
import { getSupabaseClient } from "@/lib/supabase";
import { Truck, CheckCircle2, AlertCircle, Save, Loader2, ChevronDown, ChevronUp, Trash2 } from "lucide-react";
import Image from "next/image";
import { resolveLogoSrc } from "@/lib/bank-logos";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { usePermissoes } from "@/lib/permissoes-do-usuario";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { CustomSelect } from "@/components/ui/custom-select";
import AssistentesEApps, { lerDadosDosAssistentes, type DadosDosAssistentes } from "./assistentes-e-apps";
import CartaoDoAsaas from "./cartao-do-asaas";
import EngrenagemDePagamento from "./engrenagem-de-pagamento";

interface Integration {
  id?: string;
  provider: string;
  token: string;
  active: boolean;
  settings: {
    env?: "sandbox" | "production";
    origin_zip?: string;
  };
}

type MercadoPagoConfig = {
  /* Vem do servidor só para a etiqueta "Ativo" dizer a verdade: a integração
     pode estar cadastrada e desligada. Vai junto no corpo da gravação e a rota
     do Mercado Pago ignora, como sempre ignorou. */
  active: boolean;
  environment: "sandbox" | "production";
  checkout_enabled: boolean;
  auto_create_order_on_approved_payment: boolean;
  bank_account_id: string;
  sandbox_public_key: string;
  sandbox_access_token: string;
  production_public_key: string;
  production_access_token: string;
  statement_descriptor: string;
};

const defaultMercadoPagoConfig: MercadoPagoConfig = {
  active: true,
  environment: "production",
  checkout_enabled: true,
  auto_create_order_on_approved_payment: true,
  bank_account_id: "",
  sandbox_public_key: "",
  sandbox_access_token: "",
  production_public_key: "",
  production_access_token: "",
  statement_descriptor: "",
};

function normalizeMercadoPagoConfig(raw?: Partial<MercadoPagoConfig> | null): MercadoPagoConfig {
  const merged = {
    ...defaultMercadoPagoConfig,
    ...raw,
    bank_account_id: raw?.bank_account_id || "",
  };

  return {
    ...merged,
    environment: "production",
    production_public_key: merged.production_public_key || merged.sandbox_public_key,
    production_access_token: merged.production_access_token || merged.sandbox_access_token,
  };
}

export default function ShippingSettingsPage() {
  const { pode } = usePermissoes();
  const podeMexerNaEmpresa = pode("company.shipping.write");
  /* A credencial do Mercado Pago mora nesta tela, mas é assunto do Financeiro:
     é ela que recebe o dinheiro. Quem cuida só do frete não precisa dela, e
     não deveria nem poder lê-la. */
  const podeMexerNoMercadoPago = pode("financial.bank.integrations");
  /* Esta tela é casa de dois assuntos. Quem recebeu só a permissão dos
     assistentes chega aqui pela aba deles, e não vê a de frete. */
  const podeVerOFrete = pode("company.shipping.read");

  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [activeTab, setActiveTab] = useState("shipping");
  /* `null` = a aba "Assistentes e Apps" não aparece: a empresa ainda não foi
     liberada, ou a pessoa não tem a permissão. Quem responde é o servidor. */
  const [assistentes, setAssistentes] = useState<DadosDosAssistentes | null>(null);
  const [conferindoAssistentes, setConferindoAssistentes] = useState(true);
  /* `?aba=assistentes` é o link que o próprio conector entrega. */
  const [pediuAAbaDosAssistentes] = useState(
    () => typeof window !== "undefined" && new URLSearchParams(window.location.search).get("aba") === "assistentes"
  );
  const [integrations, setIntegrations] = useState<Integration[]>([]);
  const [openProvider, setOpenProvider] = useState<string | null>("melhor_envio");
  const [openPaymentProvider, setOpenPaymentProvider] = useState<string | null>(null);
  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
  const [deleteModalOpen, setDeleteModalOpen] = useState(false);
  const [providerToDelete, setProviderToDelete] = useState<string | null>(null);
  const [mercadoPagoLoading, setMercadoPagoLoading] = useState(true);
  const [mercadoPagoSaving, setMercadoPagoSaving] = useState(false);
  const [mercadoPagoMessage, setMercadoPagoMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
  const [mercadoPagoConfig, setMercadoPagoConfig] = useState<MercadoPagoConfig>(defaultMercadoPagoConfig);
  const [mercadoPagoBankAccounts, setMercadoPagoBankAccounts] = useState<
    Array<{ id: string; name: string; bank_name?: string | null; bank_code?: string | null }>
  >([]);

  useEffect(() => {
    fetchIntegrations();
    if (podeMexerNoMercadoPago) fetchMercadoPagoConfig();
  }, [podeMexerNoMercadoPago]);

  useEffect(() => {
    let vivo = true;
    (async () => {
      const lidos = await fetch("/api/assistentes/chaves", { cache: "no-store" })
        .then((resposta) => (resposta.ok ? resposta.json() : null))
        .then(lerDadosDosAssistentes)
        .catch(() => null);
      if (!vivo) return;
      setAssistentes(lidos);
      /* Quem não vê o frete cai direto na aba que pode ver. */
      if (lidos && (pediuAAbaDosAssistentes || !podeVerOFrete)) setActiveTab("assistentes");
      else if (!podeVerOFrete) setActiveTab("coming_soon");
      setConferindoAssistentes(false);
    })();
    return () => {
      vivo = false;
    };
  }, [podeVerOFrete, pediuAAbaDosAssistentes]);

  async function fetchIntegrations() {
    try {
      const supabase = getSupabaseClient();
      const { data: { user } } = await supabase.auth.getUser();
      if (!user) return;

      const { data, error } = await supabase
        .from("integrations")
        .select("*")
        .in("provider", ["melhor_envio", "superfrete"])
        .eq("user_id", user.id);

      if (error) throw error;
      
      setIntegrations(data || []);
    } catch (err) {
      console.error("Erro ao carregar integrações:", err);
    } finally {
      setLoading(false);
    }
  }

  async function handleSave(provider: string, token: string, origin_zip: string) {
    setMessage(null);
    if (!token.trim()) {
      setMessage({ type: "error", text: "Informe o Token de API." });
      return;
    }
    if (!origin_zip.trim()) {
      setMessage({ type: "error", text: "Informe o CEP de origem." });
      return;
    }
    if (origin_zip.replace(/\D/g, "").length !== 8) {
      setMessage({ type: "error", text: "O CEP de origem precisa ter 8 números (ex.: 07073-120)." });
      return;
    }

    setSaving(true);
    try {
      const supabase = getSupabaseClient();
      const { data: { user } } = await supabase.auth.getUser();
      if (!user) throw new Error("Usuário não autenticado");

      const existing = integrations.find(i => i.provider === provider);
      const env = existing?.settings?.env === "sandbox" ? "sandbox" : "production";
      const settings = { env, origin_zip: origin_zip.replace(/\D/g, "") };
      
      if (existing) {
        const { error } = await supabase
          .from("integrations")
          .update({
            token,
            settings,
            active: true,
            updated_at: new Date().toISOString()
          })
          .eq("id", existing.id);
        if (error) throw error;
      } else {
        const { error } = await supabase
          .from("integrations")
          .insert({
            user_id: user.id,
            provider,
            token,
            settings,
            active: true
          });
        if (error) throw error;
      }

      await fetchIntegrations();
      setMessage({ type: "success", text: "Configurações salvas com sucesso!" });
    } catch (err) {
      console.error(err);
      setMessage({ type: "error", text: "Erro ao salvar configurações." });
    } finally {
      setSaving(false);
    }
  }

  async function handleDelete(provider: string) {
    setSaving(true);
    setMessage(null);
    try {
      const supabase = getSupabaseClient();
      const { data: { user } } = await supabase.auth.getUser();
      if (!user) throw new Error("Usuário não autenticado");

      const existing = integrations.find(i => i.provider === provider);
      
      if (existing) {
        const { error } = await supabase
          .from("integrations")
          .delete()
          .eq("id", existing.id);
        if (error) throw error;
      }

      await fetchIntegrations();
      
      // Limpa os campos visualmente
      const tokenInput = document.getElementById(`token-${provider}`) as HTMLInputElement;
      const zipInput = document.getElementById(`origin-zip-${provider}`) as HTMLInputElement;
      if (tokenInput) tokenInput.value = "";
      if (zipInput) zipInput.value = "";

      setMessage({ type: "success", text: "Integração removida com sucesso!" });
    } catch (err) {
      console.error(err);
      setMessage({ type: "error", text: "Erro ao remover integração." });
    } finally {
      setSaving(false);
      setDeleteModalOpen(false);
      setProviderToDelete(null);
    }
  }

  const confirmDelete = (provider: string) => {
    setProviderToDelete(provider);
    setDeleteModalOpen(true);
  };

  async function fetchMercadoPagoConfig() {
    try {
      setMercadoPagoLoading(true);
      const response = await fetch("/api/integrations/mercado-pago", { cache: "no-store" });
      const payload = (await response.json().catch(() => null)) as
        | {
            error?: string;
            config?: Partial<MercadoPagoConfig>;
            bank_accounts?: Array<{ id: string; name: string }>;
          }
        | null;

      if (!response.ok || payload?.error) {
        throw new Error(payload?.error || "Erro ao carregar configuracao do Mercado Pago.");
      }

      setMercadoPagoConfig({
        ...normalizeMercadoPagoConfig(payload?.config),
      });
      setMercadoPagoBankAccounts(payload?.bank_accounts || []);
    } catch (err) {
      console.error(err);
      setMercadoPagoMessage({ type: "error", text: "Erro ao carregar configuracao do Mercado Pago." });
    } finally {
      setMercadoPagoLoading(false);
    }
  }

  async function handleSaveMercadoPago() {
    setMercadoPagoSaving(true);
    setMercadoPagoMessage(null);
    try {
      const response = await fetch("/api/integrations/mercado-pago", {
        method: "PUT",
        headers: { "content-type": "application/json" },
        body: JSON.stringify(normalizeMercadoPagoConfig(mercadoPagoConfig)),
      });
      const payload = (await response.json().catch(() => null)) as { error?: string } | null;
      if (!response.ok || payload?.error) {
        throw new Error(payload?.error || "Erro ao salvar configuracao.");
      }
      setMercadoPagoMessage({ type: "success", text: "Mercado Pago configurado com sucesso!" });
      await fetchMercadoPagoConfig();
    } catch (err) {
      console.error(err);
      setMercadoPagoMessage({ type: "error", text: err instanceof Error ? err.message : "Erro ao salvar configuracao." });
    } finally {
      setMercadoPagoSaving(false);
    }
  }

  const providers = [
    {
      id: "melhor_envio",
      name: "Melhor Envio",
      logo: "https://logodownload.org/wp-content/uploads/2020/12/melhor-envio-logo.png",
      description: "Integração para cálculo de frete com múltiplas transportadoras.",
    },
    {
      id: "superfrete",
      name: "SuperFrete",
      logo: "https://superfrete.com/favicon.ico",
      description: "Integração para cotação de frete com API SuperFrete.",
    },
  ];
  const mercadoPagoConfigured = Boolean(
    mercadoPagoConfig.active &&
      String(mercadoPagoConfig.production_public_key || "").trim() &&
      String(mercadoPagoConfig.production_access_token || "").trim()
  );
  const mercadoPagoBankAccountOptions = [
    { value: "", label: "Sem conta específica" },
    ...mercadoPagoBankAccounts.map((account) => ({
      value: account.id,
      label: account.name,
      selected_label: account.name,
      image_url: resolveLogoSrc(null, account.bank_code || null, account.bank_name || account.name),
    })),
  ];

  /* A tela não espera pelos assistentes: a aba deles entra quando a resposta
     chega. Só espera quem vai abrir direto nela (veio pelo link da aba, ou não
     tem o frete para ver), para a tela não trocar de aba na frente da pessoa. */
  const abreNosAssistentes = pediuAAbaDosAssistentes || !podeVerOFrete;
  if (loading || (conferindoAssistentes && abreNosAssistentes)) {
    return <div className="flex items-center justify-center h-64 text-zinc-500">Carregando...</div>;
  }

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-zinc-900">Integrações</h1>
        <p className="text-zinc-500 mt-1">Gerencie as integrações do seu negócio.</p>
      </div>

      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
        {/* Com quatro abas a faixa passa da largura do celular: ela rola de lado
            em vez de empurrar a página inteira. */}
        <div className="no-scrollbar mb-6 overflow-x-auto">
          <TabsList>
            {podeVerOFrete ? <TabsTrigger value="shipping">Frete</TabsTrigger> : null}
            {podeMexerNoMercadoPago ? <TabsTrigger value="payments">Pagamentos</TabsTrigger> : null}
            {assistentes ? <TabsTrigger value="assistentes">Assistentes e Apps</TabsTrigger> : null}
            <TabsTrigger value="coming_soon">Outras integrações</TabsTrigger>
          </TabsList>
        </div>

        {assistentes ? (
          <TabsContent value="assistentes">
            <AssistentesEApps dados={assistentes} aoMudar={setAssistentes} />
          </TabsContent>
        ) : null}

        {podeVerOFrete ? (
        <TabsContent value="shipping" className="space-y-4">
          <div className="grid grid-cols-1 gap-4">
            {providers.map((p) => {
              const integration = integrations.find(i => i.provider === p.id);
              const isActive = integration?.active;
              const isOpen = openProvider === p.id;
              const tokenValue = integration?.token || "";
              const originZipValue = integration?.settings?.origin_zip || "";
              const isSuperFrete = p.id === "superfrete";

              return (
                <div key={p.id} className="bg-white rounded-2xl border border-zinc-200 shadow-sm overflow-hidden transition-all">
                  <div 
                    className="p-5 flex items-center justify-between cursor-pointer hover:bg-zinc-50"
                    onClick={() => setOpenProvider(isOpen ? null : p.id)}
                  >
                    <div className="flex items-center gap-4">
                      {p.logo ? (
                        <div className={`${isSuperFrete ? "w-12 h-12" : "w-24 h-12"} flex items-center justify-start shrink-0`}>
                          <Image
                            src={p.logo}
                            alt={p.name}
                            width={isSuperFrete ? 48 : 96}
                            height={isSuperFrete ? 48 : 48}
                            className="object-contain w-full h-full"
                            unoptimized
                          />
                        </div>
                      ) : (
                        <div className="w-12 h-12 rounded-xl bg-white border border-zinc-100 flex items-center justify-center overflow-hidden p-2 shrink-0">
                          <Truck size={24} className="text-blue-600" />
                        </div>
                      )}
                      <div>
                        <div className="flex items-center gap-2">
                          <h3 className="font-bold text-zinc-900">{p.name}</h3>
                          {isActive && (
                            <span className="px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-700 text-[10px] font-bold uppercase tracking-wider">
                              Ativo
                            </span>
                          )}
                        </div>
                        <p className="text-sm text-zinc-500">{p.description}</p>
                      </div>
                    </div>
                    <div className="text-zinc-400">
                      {isOpen ? <ChevronUp size={20} /> : <ChevronDown size={20} />}
                    </div>
                  </div>

                  {isOpen && (
                    <div className="p-5 border-t border-zinc-100 bg-zinc-50/50">
                      <div className="max-w-xl space-y-4">
                        <div className="space-y-1.5">
                          <label className="text-sm font-medium text-zinc-700">Token de API (Bearer Token)</label>
                          <input 
                            type="password"
                            defaultValue={tokenValue}
                            id={`token-${p.id}`}
                            className="w-full px-3 py-2.5 rounded-xl border border-zinc-200 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 bg-white"
                            placeholder="Cole seu token aqui..."
                          />
                          <p className="text-xs text-zinc-500">
                            Você pode gerar este token no painel do {p.name}.
                          </p>
                        </div>

                        <div className="space-y-1.5">
                          <label className="text-sm font-medium text-zinc-700">CEP de Origem</label>
                          <input 
                            type="text"
                            defaultValue={originZipValue}
                            id={`origin-zip-${p.id}`}
                            className="w-full px-3 py-2.5 rounded-xl border border-zinc-200 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 bg-white"
                            placeholder="00000-000"
                            maxLength={9}
                          />
                          <p className="text-xs text-zinc-500">
                            Local de onde as encomendas serão enviadas.
                          </p>
                        </div>

                        {message && (
                          <div className={`p-3 rounded-xl text-sm flex items-center gap-2 ${message.type === 'success' ? 'bg-emerald-50 text-emerald-700 border border-emerald-100' : 'bg-red-50 text-red-700 border border-red-100'}`}>
                            {message.type === 'success' ? <CheckCircle2 size={16} /> : <AlertCircle size={16} />}
                            {message.text}
                          </div>
                        )}

                        <div className="pt-2 flex items-center justify-between gap-4">
                          {isActive && (
                            <button
                              onClick={() => confirmDelete(p.id)}
                              disabled={saving}
                              className="inline-flex items-center gap-2 px-4 py-2.5 bg-red-50 text-red-600 rounded-xl hover:bg-red-100 disabled:opacity-50 transition-all font-medium text-sm"
                              title="Remover Integração"
                            >
                              {saving && providerToDelete === p.id ? <Loader2 size={16} className="animate-spin" /> : <Trash2 size={16} />}
                              <span className="sr-only sm:not-sr-only">Remover</span>
                            </button>
                          )}
                          
                          <button
                            onClick={() => {
                              const tokenInput = document.getElementById(`token-${p.id}`) as HTMLInputElement;
                              const zipInput = document.getElementById(`origin-zip-${p.id}`) as HTMLInputElement;
                              handleSave(p.id, tokenInput.value, zipInput.value);
                            }}
                            disabled={saving}
                            className="flex-1 inline-flex items-center justify-center gap-2 px-5 py-2.5 bg-[var(--ks-color-primary)] text-white rounded-xl hover:bg-[var(--ks-color-primary-strong)] disabled:opacity-50 transition-all font-medium text-sm"
                          >
                            {saving && providerToDelete !== p.id ? <Loader2 size={16} className="animate-spin" /> : <Save size={16} />}
                            Salvar Configuração
                          </button>
                        </div>
                      </div>
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </TabsContent>
        ) : null}

        {podeMexerNoMercadoPago ? (
        <TabsContent value="payments" className="space-y-4">
          {/* A engrenagem fica acima dos dois cartões de propósito: ela é sobre
              os dois juntos, e não sobre nenhum deles em particular. */}
          <div className="flex items-center justify-between gap-3 rounded-2xl border border-zinc-200 bg-white p-4">
            <div>
              <h3 className="text-sm font-semibold text-zinc-900">Onde cada provedor recebe</h3>
              <p className="mt-0.5 text-xs leading-5 text-zinc-500">
                Loja virtual, balcão, link de pagamento e assinatura. Você escolhe quem recebe cada meio em cada lugar.
              </p>
            </div>
            <EngrenagemDePagamento podeSalvar={podeMexerNaEmpresa} />
          </div>

          <div className="grid grid-cols-1 gap-4">
            <div className="bg-white rounded-2xl border border-zinc-200 shadow-sm overflow-hidden transition-all">
              <div
                className="p-5 flex items-center justify-between cursor-pointer hover:bg-zinc-50"
                onClick={() => setOpenPaymentProvider(openPaymentProvider === "mercado_pago" ? null : "mercado_pago")}
              >
                <div className="flex items-center gap-4">
                  <div className="w-28 h-12 flex items-center justify-start shrink-0">
                    <Image
                      src={resolveLogoSrc(null, "323", "Mercado Pago")}
                      alt="Mercado Pago"
                      width={112}
                      height={48}
                      className="object-contain w-full h-full"
                      unoptimized
                    />
                  </div>
                  <div>
                    <div className="flex items-center gap-2">
                      <h3 className="font-bold text-zinc-900">Mercado Pago</h3>
                      {mercadoPagoConfigured && (
                        <span className="px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-700 text-[10px] font-bold uppercase tracking-wider">
                          Ativo
                        </span>
                      )}
                    </div>
                    <p className="text-sm text-zinc-500">Integração de checkout e recebimento com Mercado Pago.</p>
                  </div>
                </div>
                <div className="text-zinc-400">
                  {openPaymentProvider === "mercado_pago" ? <ChevronUp size={20} /> : <ChevronDown size={20} />}
                </div>
              </div>

              {openPaymentProvider === "mercado_pago" && (
                <div className="p-5 border-t border-zinc-100 bg-zinc-50/50">
                  {mercadoPagoLoading ? (
                    <div className="flex h-40 items-center justify-center rounded-2xl border border-zinc-200 bg-white text-zinc-500">
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                      Carregando Mercado Pago...
                    </div>
                  ) : (
                    <div className="space-y-5">
                      <div className="grid gap-4 xl:grid-cols-3">
                        <div className="flex h-full flex-col rounded-2xl border border-zinc-200 bg-white p-4 md:p-5">
                          <div className="min-h-[64px]">
                            <h4 className="text-sm font-semibold text-zinc-900">Checkout</h4>
                            <p className="mt-1 text-xs leading-5 text-zinc-500">Defina como o pagamento se comporta no catálogo.</p>
                          </div>
                          <div className="mt-4 grid flex-1 gap-3 content-start">
                            <label className="flex min-h-[56px] items-center gap-3 rounded-2xl border border-zinc-200 bg-zinc-50 px-4 py-3">
                              <input
                                type="checkbox"
                                checked={mercadoPagoConfig.checkout_enabled}
                                onChange={(e) => setMercadoPagoConfig((prev) => ({ ...prev, checkout_enabled: e.target.checked }))}
                                className="h-4 w-4 rounded border-zinc-300 text-blue-600 focus:ring-blue-500"
                              />
                              <span className="text-sm font-medium text-zinc-700">Ativar checkout no catálogo</span>
                            </label>

                            <label className="flex min-h-[56px] items-center gap-3 rounded-2xl border border-zinc-200 bg-zinc-50 px-4 py-3">
                              <input
                                type="checkbox"
                                checked={mercadoPagoConfig.auto_create_order_on_approved_payment}
                                onChange={(e) =>
                                  setMercadoPagoConfig((prev) => ({
                                    ...prev,
                                    auto_create_order_on_approved_payment: e.target.checked,
                                  }))
                                }
                                className="h-4 w-4 rounded border-zinc-300 text-blue-600 focus:ring-blue-500"
                              />
                              <span className="text-sm font-medium text-zinc-700">Dar baixa automática no pedido pago</span>
                            </label>
                          </div>
                        </div>

                        <div className="flex h-full flex-col rounded-2xl border border-zinc-200 bg-white p-4 md:p-5">
                          <div className="min-h-[64px]">
                            <h4 className="text-sm font-semibold text-zinc-900">Recebimento</h4>
                            <p className="mt-1 text-xs leading-5 text-zinc-500">Escolha a conta de baixa automática e o nome exibido na fatura.</p>
                          </div>
                          <div className="mt-4 grid flex-1 gap-4 content-start">
                            <label className="space-y-1.5">
                              <span className="text-sm font-medium text-zinc-700">Conta bancária para baixa automática</span>
                              <CustomSelect
                                options={mercadoPagoBankAccountOptions}
                                value={mercadoPagoConfig.bank_account_id}
                                onChange={(value) => setMercadoPagoConfig((prev) => ({ ...prev, bank_account_id: value }))}
                                placeholder="Sem conta específica"
                                forceOpenDown
                                searchable
                                className="w-full"
                              />
                            </label>

                            <label className="space-y-1.5">
                              <span className="text-sm font-medium text-zinc-700">Statement descriptor (opcional)</span>
                              <input
                                type="text"
                                value={mercadoPagoConfig.statement_descriptor}
                                onChange={(e) =>
                                  setMercadoPagoConfig((prev) => ({
                                    ...prev,
                                    statement_descriptor: e.target.value.slice(0, 13),
                                  }))
                                }
                                className="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2.5 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
                                placeholder="Nome curto na fatura"
                              />
                            </label>
                          </div>
                        </div>

                        <div className="flex h-full flex-col rounded-2xl border border-zinc-200 bg-white p-4 md:p-5">
                          <div className="min-h-[64px]">
                            <h4 className="text-sm font-semibold text-zinc-900">Credenciais</h4>
                            <p className="mt-1 text-xs leading-5 text-zinc-500">Preencha as chaves usadas pelo checkout do catálogo.</p>
                          </div>
                          <div className="mt-4 grid flex-1 gap-4 content-start">
                            <label className="space-y-1.5">
                              <span className="text-sm font-medium text-zinc-700">Public Key</span>
                              <input
                                type="text"
                                value={mercadoPagoConfig.production_public_key}
                                onChange={(e) =>
                                  setMercadoPagoConfig((prev) => ({ ...prev, production_public_key: e.target.value }))
                                }
                                className="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2.5 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
                                placeholder="APP_USR-..."
                              />
                            </label>

                            <label className="space-y-1.5">
                              <span className="text-sm font-medium text-zinc-700">Access Token</span>
                              <input
                                type="password"
                                value={mercadoPagoConfig.production_access_token}
                                onChange={(e) =>
                                  setMercadoPagoConfig((prev) => ({ ...prev, production_access_token: e.target.value }))
                                }
                                className="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2.5 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
                                placeholder="APP_USR-..."
                              />
                            </label>
                          </div>
                        </div>
                      </div>

                      {mercadoPagoMessage && (
                        <div
                          className={`rounded-xl border p-3 text-sm flex items-center gap-2 ${
                            mercadoPagoMessage.type === "success"
                              ? "border-emerald-100 bg-emerald-50 text-emerald-700"
                              : "border-red-100 bg-red-50 text-red-700"
                          }`}
                        >
                          {mercadoPagoMessage.type === "success" ? <CheckCircle2 size={16} /> : <AlertCircle size={16} />}
                          {mercadoPagoMessage.text}
                        </div>
                      )}

                      <div className="flex justify-end">
                        {podeMexerNaEmpresa && (<button
                          onClick={handleSaveMercadoPago}
                          disabled={mercadoPagoSaving}
                          className="inline-flex items-center justify-center gap-2 rounded-xl bg-[var(--ks-color-primary)] px-5 py-2.5 text-sm font-medium text-white transition-all hover:bg-[var(--ks-color-primary-strong)] disabled:opacity-50"
                        >
                          {mercadoPagoSaving ? <Loader2 size={16} className="animate-spin" /> : <Save size={16} />}
                          Salvar Mercado Pago
                        </button>)}
                      </div>
                    </div>
                  )}
                </div>
              )}
            </div>

            {/* O segundo provedor. Os dois convivem: quem recebe o quê é
                decidido na engrenagem acima, e conectar um não desliga o outro. */}
            <CartaoDoAsaas
              aberto={openPaymentProvider === "asaas"}
              aoAbrir={() => setOpenPaymentProvider(openPaymentProvider === "asaas" ? null : "asaas")}
              podeSalvar={podeMexerNaEmpresa}
              aoMudarOProvedor={fetchMercadoPagoConfig}
            />
          </div>
        </TabsContent>

        ) : null}

        <TabsContent value="coming_soon">
          <div className="rounded-2xl border border-zinc-200 bg-white p-6 text-sm text-zinc-600">
            Novas integrações serão adicionadas nesta seção em breve.
          </div>
        </TabsContent>
      </Tabs>

      <Dialog open={deleteModalOpen} onOpenChange={setDeleteModalOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Confirmar exclusão</DialogTitle>
            <DialogDescription>
              Tem certeza que deseja remover esta integração? As configurações serão perdidas e você precisará configurar novamente.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="ghost" onClick={() => setDeleteModalOpen(false)} disabled={saving}>
              Cancelar
            </Button>
            <Button 
              variant="destructive" 
              onClick={() => providerToDelete && handleDelete(providerToDelete)} 
              disabled={saving}
            >
              {saving ? <Loader2 className="h-4 w-4 animate-spin mr-2" /> : null}
              Remover
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}