"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState, useTransition } from "react";
import type {
  AcessoEmpresa,
  DadosCakto,
  Evento,
  FichaEmpresa,
  IntegracaoResumo,
  Nota,
  PerfilEmpresa,
} from "./tipos";

const MOEDA = new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" });
const NUMERO = new Intl.NumberFormat("pt-BR");

function data(valor?: string | null) {
  if (!valor) return "—";
  const d = new Date(valor);
  return Number.isNaN(d.getTime()) ? "—" : d.toLocaleDateString("pt-BR");
}

function dataHora(valor?: string | null) {
  if (!valor) return "—";
  const d = new Date(valor);
  return Number.isNaN(d.getTime()) ? "—" : d.toLocaleString("pt-BR");
}

function diasAte(valor?: string | null) {
  if (!valor) return null;
  const d = new Date(valor);
  if (Number.isNaN(d.getTime())) return null;
  return Math.ceil((d.getTime() - Date.now()) / 86400000);
}

/* Frequencia em vez de "ultimo acesso": um login solto nao diz se a empresa
   trabalha no sistema. Dias com movimentacao em 30 diz. */
function frequencia(dias?: number) {
  const n = dias ?? 0;
  if (n >= 20) return { texto: "Uso diário", tom: "text-emerald-700 bg-emerald-50" };
  if (n >= 8) return { texto: "Uso frequente", tom: "text-sky-700 bg-sky-50" };
  if (n >= 1) return { texto: "Uso esporádico", tom: "text-amber-700 bg-amber-50" };
  return { texto: "Sem movimentação", tom: "text-slate-600 bg-slate-100" };
}

const PROVEDORES: Record<string, { nome: string; grupo: string }> = {
  mercado_pago: { nome: "Mercado Pago", grupo: "Pagamento" },
  melhor_envio: { nome: "Melhor Envio", grupo: "Logística" },
  superfrete: { nome: "SuperFrete", grupo: "Logística" },
  xbz: { nome: "XBZ", grupo: "Fornecedor" },
};

const NOME_ACAO: Record<string, string> = {
  activate: "Acesso reativado",
  deactivate: "Acesso bloqueado",
  set_password: "Senha definida",
  reset_password: "Reset de senha enviado",
  extend_access: "Acesso estendido",
  grant_access: "Acesso concedido",
  renew_access: "Acesso renovado",
  cancelar_na_cakto: "Renovação cancelada na Cakto",
  reprocessar_aviso_cakto: "Aviso da Cakto reprocessado",
  mover_assinatura_cakto: "Assinatura movida para outro e-mail",
};

const SITUACAO_CAKTO: Record<string, string> = {
  ativa: "Ativa",
  atrasada: "Pagamento recusado",
  pausada: "Pausada",
  cancelada: "Cancelada (usa até o fim do pago)",
  reembolsada: "Reembolsada",
  contestada: "Chargeback",
};

const METODO_CAKTO: Record<string, string> = { credit_card: "Cartão", pix: "Pix", pix_auto: "Pix automático", boleto: "Boleto" };

const STATUS_PAGAMENTO: Record<string, string> = {
  paid: "Pago",
  refunded: "Reembolsado",
  refund_requested: "Reembolso pedido",
  chargedback: "Chargeback",
  refused: "Recusado",
  waiting_payment: "Aguardando",
  canceled: "Cancelado",
};

const PRODUTO_NOVO = "cd514a06-7b3e-4319-bab3-d7f8f107d0de";

function soDigitos(valor?: string | null) {
  const d = String(valor || "").replace(/\D/g, "");
  if (!d) return "";
  /* Numero brasileiro sem DDI nao abre no wa.me. */
  return d.length <= 11 ? `55${d}` : d;
}

function enderecoCompleto(p?: PerfilEmpresa | null) {
  if (!p) return "";
  const rua = [p.address_street, p.address_number].filter(Boolean).join(", ");
  return [
    rua,
    p.address_complement,
    p.address_neighborhood,
    [p.address_city, p.address_state].filter(Boolean).join(" - "),
    p.address_zip,
  ]
    .filter((v) => String(v || "").trim())
    .join(" · ");
}

/* ---------- pecas visuais ---------- */

/* Sem cartao: um rotulo pequeno e uma regra fina bastam para separar assunto.
   Caixa dentro de caixa era o que deixava a pagina pesada e cheia de vao. */
function Bloco({
  titulo,
  children,
  acao,
}: {
  titulo: string;
  children: React.ReactNode;
  acao?: React.ReactNode;
}) {
  return (
    <section className="border-t border-slate-200 pt-5">
      <div className="mb-3 flex items-baseline justify-between gap-3">
        <h2 className="text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-400">
          {titulo}
        </h2>
        {acao}
      </div>
      {children}
    </section>
  );
}

function Linha({ rotulo, valor }: { rotulo: string; valor: React.ReactNode }) {
  const vazio = valor === null || valor === undefined || valor === "";
  return (
    <div className="flex items-baseline gap-3 py-1.5 text-sm">
      <span className="shrink-0 text-slate-500">{rotulo}</span>
      <span className="min-w-0 flex-1 translate-y-[-3px] border-b border-dotted border-slate-200" />
      <span className={`text-right ${vazio ? "text-slate-300" : "font-medium text-slate-900"}`}>
        {vazio ? "—" : valor}
      </span>
    </div>
  );
}

function Botao({
  children,
  onClick,
  tom = "normal",
  disabled,
  titulo,
}: {
  children: React.ReactNode;
  onClick?: () => void;
  tom?: "normal" | "forte" | "perigo";
  disabled?: boolean;
  titulo?: string;
}) {
  const estilos =
    tom === "forte"
      ? "bg-slate-900 text-white hover:bg-slate-700"
      : tom === "perigo"
        ? "border border-rose-200 text-rose-700 hover:bg-rose-50"
        : "border border-slate-200 text-slate-700 hover:bg-slate-100";
  return (
    <button
      type="button"
      title={titulo}
      onClick={onClick}
      disabled={disabled}
      className={`rounded-md px-3 py-1.5 text-xs font-medium transition-colors disabled:opacity-40 ${estilos}`}
    >
      {children}
    </button>
  );
}

/* ---------- pagina ---------- */

export default function CompanyProfileClient({
  acesso,
  ficha,
  userId,
  buscaFalhou,
  ultimoLogin,
  loginBloqueado,
  baseCatalogo,
  cakto,
  notasIniciais,
  eventos,
}: {
  acesso: AcessoEmpresa;
  ficha: FichaEmpresa | null;
  userId: string | null;
  buscaFalhou: boolean;
  ultimoLogin: string | null;
  loginBloqueado: boolean;
  baseCatalogo: string;
  cakto: DadosCakto;
  notasIniciais: Nota[];
  eventos: Evento[];
}) {
  const router = useRouter();
  const [pendente, iniciar] = useTransition();
  const [ocupado, setOcupado] = useState<string | null>(null);
  const [aviso, setAviso] = useState<{ tipo: "ok" | "erro"; texto: string } | null>(null);
  const [notas, setNotas] = useState<Nota[]>(notasIniciais);
  const [rascunho, setRascunho] = useState("");
  const [senhaAberta, setSenhaAberta] = useState(false);
  const [senha, setSenha] = useState("");

  const perfil = ficha?.perfil ?? null;
  const uso = ficha?.uso ?? null;
  const atividade = ficha?.atividade ?? null;
  const dominio = ficha?.dominio ?? null;
  const integracoes = ficha?.integracoes ?? [];

  const nome = perfil?.store_name || perfil?.catalog_name || acesso.name || "Sem nome";
  const logo = perfil?.catalog_logo_url || perfil?.logo_url || perfil?.avatar_url || null;
  const ativo = (acesso.status || "").toLowerCase() === "active";
  const restam = diasAte(acesso.expiresAt);
  const freq = frequencia(atividade?.dias_ativos_30d);
  const linkCatalogo = perfil?.slug ? `${baseCatalogo}/${perfil.slug}` : null;
  const zap = soDigitos(perfil?.company_whatsapp || perfil?.whatsapp || perfil?.company_phone);
  const cor = perfil?.primary_color || perfil?.catalog_header_color || "#0f172a";

  const porProvedor = new Map<string, IntegracaoResumo>();
  integracoes.forEach((i) => porProvedor.set(i.provider, i));

  const statusPedidos = Object.entries(atividade?.pedidos_por_status ?? {}).sort(
    (a, b) => b[1] - a[1]
  );
  const totalStatus = statusPedidos.reduce((s, [, n]) => s + n, 0);

  async function chamar(corpo: Record<string, unknown>, marca: string, sucesso: string) {
    setOcupado(marca);
    setAviso(null);
    try {
      const r = await fetch("/api/owner/companies", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ email: acesso.email, ...corpo }),
      });
      const j = await r.json().catch(() => null);
      if (!r.ok || j?.error) {
        setAviso({ tipo: "erro", texto: String(j?.error || "Não foi possível concluir.") });
        return;
      }
      setAviso({ tipo: "ok", texto: sucesso });
      /* refresh e nao reload: mantem a rolagem e o estado da tela. */
      iniciar(() => router.refresh());
    } catch {
      setAviso({ tipo: "erro", texto: "Falha de rede." });
    } finally {
      setOcupado(null);
    }
  }

  async function salvarNota() {
    const texto = rascunho.trim();
    if (!texto) return;
    setOcupado("nota");
    try {
      const r = await fetch("/api/owner/company-notes", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ email: acesso.email, users_app_id: acesso.id, note: texto }),
      });
      const j = await r.json().catch(() => null);
      if (!r.ok || j?.error) {
        setAviso({ tipo: "erro", texto: String(j?.error || "Falha ao salvar.") });
        return;
      }
      if (j?.nota) setNotas((v) => [j.nota as Nota, ...v]);
      setRascunho("");
    } finally {
      setOcupado(null);
    }
  }

  async function apagarNota(id: string) {
    setNotas((v) => v.filter((n) => n.id !== id));
    await fetch("/api/owner/company-notes", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ action: "delete", id, email: acesso.email }),
    }).catch(() => null);
  }

  function copiar(texto: string, oque: string) {
    navigator.clipboard?.writeText(texto).then(
      () => setAviso({ tipo: "ok", texto: `${oque} copiado.` }),
      () => setAviso({ tipo: "erro", texto: "Não consegui copiar." })
    );
  }

  const trabalhando = Boolean(ocupado) || pendente;

  return (
    <div className="min-h-screen bg-white">
      {/* Barra fina no topo: navegação e identidade sempre à mão, sem ocupar
          meia tela como um cabeçalho de cartão faria. */}
      <div className="sticky top-0 z-20 border-b border-slate-200 bg-white/90 backdrop-blur">
        <div className="mx-auto flex max-w-[1180px] items-center gap-3 px-6 py-2.5">
          <Link href="/companies" className="text-sm text-slate-500 hover:text-slate-900">
            Empresas
          </Link>
          <span className="text-slate-300">/</span>
          <span className="truncate text-sm font-medium text-slate-900">{nome}</span>
          <span
            className={`ml-auto shrink-0 rounded px-2 py-0.5 text-[11px] font-medium ${
              ativo ? "bg-emerald-50 text-emerald-700" : "bg-slate-100 text-slate-600"
            }`}
          >
            {ativo ? "Ativo" : "Inativo"}
          </span>
        </div>
      </div>

      {/* Identidade, com a cor da propria loja como filete — a ficha veste a
          marca do cliente em vez de ser mais uma tela cinza. */}
      <header className="border-b border-slate-200">
        <div className="h-1" style={{ background: cor }} />
        <div className="mx-auto flex max-w-[1180px] flex-wrap items-center gap-5 px-6 py-6">
          <div
            className="flex h-14 w-14 shrink-0 items-center justify-center overflow-hidden border border-slate-200 bg-white"
            style={{ borderRadius: 6 }}
          >
            {logo ? (
              // eslint-disable-next-line @next/next/no-img-element
              <img src={logo} alt={nome} className="h-full w-full object-contain" />
            ) : (
              <span className="text-sm font-semibold text-slate-400">
                {nome.slice(0, 2).toUpperCase()}
              </span>
            )}
          </div>

          <div className="min-w-[220px] flex-1">
            <h1 className="text-[26px] font-semibold leading-tight tracking-tight text-slate-900">
              {nome}
            </h1>
            <div className="mt-0.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-slate-500">
              <button
                type="button"
                onClick={() => copiar(acesso.email, "E-mail")}
                className="hover:text-slate-900 hover:underline"
                title="Copiar e-mail"
              >
                {acesso.email}
              </button>
              {perfil?.catalog_slogan ? <span>· {perfil.catalog_slogan}</span> : null}
            </div>
            <div className="mt-2 flex flex-wrap gap-1.5 text-[11px] font-medium">
              <span className={`rounded px-2 py-0.5 ${freq.tom}`}>{freq.texto}</span>
              {acesso.planName ? (
                <span className="rounded bg-slate-100 px-2 py-0.5 text-slate-700">
                  {acesso.planName}
                </span>
              ) : null}
              {restam !== null ? (
                <span
                  className={`rounded px-2 py-0.5 ${
                    restam < 0 ? "bg-rose-50 text-rose-700" : "bg-slate-100 text-slate-700"
                  }`}
                >
                  {restam < 0 ? `Vencido há ${Math.abs(restam)}d` : `Faltam ${restam}d`}
                </span>
              ) : null}
              {loginBloqueado ? (
                <span className="rounded bg-rose-50 px-2 py-0.5 text-rose-700">Login bloqueado</span>
              ) : null}
              {perfil?.catalog_noindex ? (
                <span className="rounded bg-amber-50 px-2 py-0.5 text-amber-700">
                  Fora dos buscadores
                </span>
              ) : null}
            </div>
          </div>

          <div className="flex flex-wrap gap-2">
            {linkCatalogo ? (
              <>
                <a
                  href={linkCatalogo}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="rounded-md bg-slate-900 px-3 py-1.5 text-xs font-medium text-white hover:bg-slate-700"
                >
                  Abrir catálogo ↗
                </a>
                <Botao onClick={() => copiar(linkCatalogo, "Link")}>Copiar link</Botao>
              </>
            ) : null}
            {zap ? (
              <a
                href={`https://wa.me/${zap}`}
                target="_blank"
                rel="noopener noreferrer"
                className="rounded-md border border-slate-200 px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-100"
              >
                WhatsApp ↗
              </a>
            ) : null}
          </div>
        </div>
      </header>

      {/* Números sem caixa: separados só por filete vertical. */}
      <div className="border-b border-slate-200 bg-slate-50/60">
        <div className="mx-auto grid max-w-[1180px] grid-cols-2 divide-x divide-slate-200 px-6 md:grid-cols-5">
          {[
            {
              r: "Recebido",
              v: MOEDA.format(Number(uso?.recebido ?? 0)),
              a: `${MOEDA.format(Number(uso?.recebido_30d ?? 0))} em 30d`,
            },
            {
              r: "Pedidos",
              v: NUMERO.format(uso?.pedidos ?? 0),
              a: `${NUMERO.format(uso?.pedidos_30d ?? 0)} em 30d`,
            },
            {
              r: "Orçamentos",
              v: NUMERO.format(uso?.orcamentos ?? 0),
              a: `${NUMERO.format(uso?.orcamentos_30d ?? 0)} em 30d`,
            },
            {
              r: "Visitas",
              v: NUMERO.format(uso?.visitas ?? 0),
              a: `${NUMERO.format(uso?.visitas_30d ?? 0)} em 30d`,
            },
            {
              r: "Dias com uso",
              v: `${atividade?.dias_ativos_30d ?? 0}/30`,
              a: `Última: ${data(atividade?.ultima_em)}`,
            },
          ].map((k) => (
            <div key={k.r} className="px-4 py-4 first:pl-0 last:pr-0">
              <p className="text-[11px] uppercase tracking-[0.12em] text-slate-400">{k.r}</p>
              <p className="mt-1 text-xl font-semibold tracking-tight text-slate-900">{k.v}</p>
              <p className="text-[11px] text-slate-500">{k.a}</p>
            </div>
          ))}
        </div>
      </div>

      <div className="mx-auto max-w-[1180px] px-6 pb-16">
        {aviso ? (
          <p
            className={`mt-4 rounded-md px-3 py-2 text-sm ${
              aviso.tipo === "ok" ? "bg-emerald-50 text-emerald-800" : "bg-rose-50 text-rose-800"
            }`}
          >
            {aviso.texto}
          </p>
        ) : null}

        {buscaFalhou ? (
          <p className="mt-4 rounded-md bg-rose-50 px-3 py-2 text-sm text-rose-800">
            Falha ao consultar o usuário de autenticação. Os números abaixo não puderam ser
            carregados.
          </p>
        ) : !userId ? (
          <p className="mt-4 rounded-md bg-amber-50 px-3 py-2 text-sm text-amber-800">
            Este cadastro não tem usuário de autenticação. A empresa ainda não entrou no sistema.
          </p>
        ) : !perfil ? (
          <p className="mt-4 rounded-md bg-amber-50 px-3 py-2 text-sm text-amber-800">
            O usuário existe, mas ainda não criou o perfil da empresa.
          </p>
        ) : null}

        <div className="grid gap-x-12 lg:grid-cols-[1fr_320px]">
          {/* coluna principal */}
          <div className="space-y-7 pt-7">
            <Bloco titulo="Movimentação no sistema">
              <div className="grid gap-x-10 sm:grid-cols-2">
                <div>
                  <Linha
                    rotulo="Produtos"
                    valor={`${NUMERO.format(uso?.produtos ?? 0)} (${NUMERO.format(uso?.produtos_ativos ?? 0)} ativos)`}
                  />
                  <Linha rotulo="Categorias" valor={NUMERO.format(uso?.categorias ?? 0)} />
                  <Linha rotulo="Clientes" valor={NUMERO.format(uso?.clientes ?? 0)} />
                  <Linha
                    rotulo="Pedidos pelo catálogo"
                    valor={NUMERO.format(uso?.pedidos_catalogo ?? 0)}
                  />
                  <Linha
                    rotulo="Links de pagamento"
                    valor={NUMERO.format(uso?.links_pagamento ?? 0)}
                  />
                </div>
                <div>
                  <Linha rotulo="Contas a pagar" valor={NUMERO.format(uso?.contas_pagar ?? 0)} />
                  <Linha rotulo="Contas a receber" valor={NUMERO.format(uso?.contas_receber ?? 0)} />
                  <Linha rotulo="Sessões de caixa (PDV)" valor={NUMERO.format(uso?.caixas_pdv ?? 0)} />
                  <Linha rotulo="Fornecedores" valor={NUMERO.format(uso?.fornecedores ?? 0)} />
                  <Linha rotulo="Usuários na equipe" valor={NUMERO.format(uso?.equipe ?? 0)} />
                </div>
              </div>
            </Bloco>

            <Bloco titulo="Pedidos por situação">
              {statusPedidos.length ? (
                <div className="space-y-2.5">
                  {statusPedidos.map(([nomeStatus, n]) => (
                    <div key={nomeStatus} className="flex items-center gap-3">
                      <span className="w-40 shrink-0 truncate text-sm text-slate-600">
                        {nomeStatus}
                      </span>
                      <span className="h-1 flex-1 overflow-hidden bg-slate-100">
                        <span
                          className="block h-full"
                          style={{
                            width: `${totalStatus ? (n / totalStatus) * 100 : 0}%`,
                            background: cor,
                          }}
                        />
                      </span>
                      <span className="w-12 shrink-0 text-right text-sm font-medium text-slate-900">
                        {NUMERO.format(n)}
                      </span>
                    </div>
                  ))}
                </div>
              ) : (
                <p className="text-sm text-slate-400">Nenhum pedido registrado.</p>
              )}
            </Bloco>

            <Bloco titulo="Integrações">
              <div className="grid gap-x-10 sm:grid-cols-2">
                {Object.entries(PROVEDORES).map(([chave, meta]) => {
                  const item = porProvedor.get(chave);
                  const ligado = Boolean(item?.active);
                  return (
                    <div
                      key={chave}
                      className="flex items-center gap-3 border-b border-slate-100 py-2.5"
                    >
                      <span
                        className={`h-1.5 w-1.5 shrink-0 rounded-full ${
                          ligado ? "bg-emerald-500" : "bg-slate-300"
                        }`}
                      />
                      <span className="text-sm font-medium text-slate-900">{meta.nome}</span>
                      <span className="text-xs text-slate-400">{meta.grupo}</span>
                      <span className="ml-auto text-xs text-slate-500">
                        {ligado ? (item?.created_at ? `desde ${data(item.created_at)}` : "conectado") : "não conectado"}
                      </span>
                    </div>
                  );
                })}
              </div>
              {integracoes.some((i) => !PROVEDORES[i.provider]) ? (
                <p className="mt-2 text-xs text-slate-500">
                  Outras: {integracoes.filter((i) => !PROVEDORES[i.provider]).map((i) => i.provider).join(", ")}
                </p>
              ) : null}
            </Bloco>

            <Bloco titulo="Catálogo">
              <div className="grid gap-x-10 sm:grid-cols-2">
                <div>
                  <Linha
                    rotulo="Endereço"
                    valor={
                      linkCatalogo ? (
                        <a
                          href={linkCatalogo}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="text-sky-700 hover:underline"
                        >
                          /{perfil?.slug}
                        </a>
                      ) : (
                        ""
                      )
                    }
                  />
                  <Linha
                    rotulo="Domínio próprio"
                    valor={
                      dominio?.domain ? (
                        <>
                          {dominio.domain}
                          <span className={dominio.verified ? "text-emerald-600" : "text-amber-600"}>
                            {dominio.verified ? " · verificado" : " · pendente"}
                          </span>
                        </>
                      ) : (
                        ""
                      )
                    }
                  />
                  <Linha rotulo="SSL do domínio" valor={dominio?.cf_ssl_status} />
                  <Linha rotulo="Tema" valor={perfil?.catalog_theme} />
                </div>
                <div>
                  <Linha
                    rotulo="Catálogo avançado"
                    valor={perfil?.catalog_advanced_enabled ? "Ligado" : "Desligado"}
                  />
                  <Linha
                    rotulo="Indexação"
                    valor={perfil?.catalog_noindex ? "Bloqueada" : "Liberada"}
                  />
                  <Linha
                    rotulo="Cor principal"
                    valor={
                      perfil?.primary_color ? (
                        <span className="inline-flex items-center gap-1.5">
                          <span
                            className="inline-block h-3 w-3 border border-slate-300"
                            style={{ background: perfil.primary_color }}
                          />
                          {perfil.primary_color}
                        </span>
                      ) : (
                        ""
                      )
                    }
                  />
                  <Linha rotulo="Perfil atualizado" valor={dataHora(perfil?.updated_at)} />
                </div>
              </div>
            </Bloco>

            <Bloco titulo="Dados cadastrais">
              <div className="grid gap-x-10 sm:grid-cols-2">
                <div>
                  <Linha rotulo="CNPJ" valor={perfil?.cnpj} />
                  <Linha rotulo="E-mail da empresa" valor={perfil?.company_email} />
                  <Linha rotulo="Telefone" valor={perfil?.company_phone || perfil?.phone} />
                  <Linha
                    rotulo="WhatsApp"
                    valor={perfil?.company_whatsapp || perfil?.whatsapp}
                  />
                  <Linha rotulo="Endereço" valor={enderecoCompleto(perfil)} />
                </div>
                <div>
                  <Linha rotulo="Instagram" valor={perfil?.social_instagram} />
                  <Linha rotulo="Facebook" valor={perfil?.social_facebook} />
                  <Linha rotulo="TikTok" valor={perfil?.social_tiktok} />
                  <Linha rotulo="YouTube" valor={perfil?.social_youtube} />
                  <Linha rotulo="LinkedIn" valor={perfil?.social_linkedin} />
                  <Linha rotulo="Site" valor={perfil?.social_website} />
                </div>
              </div>
              {perfil?.company_description ? (
                <p className="mt-3 text-sm leading-relaxed text-slate-600">
                  {perfil.company_description}
                </p>
              ) : null}
            </Bloco>
          </div>

          {/* coluna de acao, gruda ao rolar */}
          <aside className="space-y-7 pt-7 lg:sticky lg:top-14 lg:self-start">
            <Bloco titulo="Ações">
              <div className="flex flex-wrap gap-2">
                {ativo ? (
                  <Botao
                    tom="perigo"
                    disabled={trabalhando}
                    onClick={() =>
                      chamar({ action: "deactivate" }, "deactivate", "Acesso bloqueado.")
                    }
                  >
                    Bloquear acesso
                  </Botao>
                ) : (
                  <Botao
                    tom="forte"
                    disabled={trabalhando}
                    onClick={() => chamar({ action: "activate" }, "activate", "Acesso reativado.")}
                  >
                    Reativar acesso
                  </Botao>
                )}
                <Botao disabled={trabalhando} onClick={() => setSenhaAberta((v) => !v)}>
                  Definir senha
                </Botao>
                <Botao
                  disabled={trabalhando}
                  titulo="Envia o e-mail de redefinição para o cliente"
                  onClick={() =>
                    chamar({ action: "reset_password" }, "reset", "E-mail de reset enviado.")
                  }
                >
                  Enviar reset
                </Botao>
              </div>

              {senhaAberta ? (
                <div className="mt-3 border border-slate-200 p-3">
                  <label className="text-xs text-slate-500">Nova senha (mínimo 6)</label>
                  <input
                    type="text"
                    value={senha}
                    onChange={(e) => setSenha(e.target.value)}
                    className="mt-1 w-full border border-slate-200 px-2 py-1.5 text-sm focus:border-slate-900 focus:outline-none"
                    placeholder="senha do cliente"
                  />
                  <div className="mt-2 flex gap-2">
                    <Botao
                      tom="forte"
                      disabled={trabalhando || senha.length < 6}
                      onClick={async () => {
                        await chamar(
                          { action: "set_password", password: senha },
                          "senha",
                          "Senha definida."
                        );
                        setSenha("");
                        setSenhaAberta(false);
                      }}
                    >
                      Salvar senha
                    </Botao>
                    <Botao onClick={() => { setSenhaAberta(false); setSenha(""); }}>Cancelar</Botao>
                  </div>
                </div>
              ) : null}

              {/* Estender sem formulario: renovar exigia escolher plano e dias
                  toda vez, atrito puro para dar alguns dias a quem negocia. */}
              <p className="mt-4 text-[11px] uppercase tracking-[0.12em] text-slate-400">
                Estender acesso
              </p>
              <div className="mt-1.5 flex flex-wrap gap-1.5">
                {[7, 15, 30, 90, 365].map((d) => (
                  <Botao
                    key={d}
                    disabled={trabalhando}
                    onClick={() =>
                      chamar(
                        { action: "extend_access", days: d },
                        `ext-${d}`,
                        `Acesso estendido em ${d} dias.`
                      )
                    }
                  >
                    +{d}d
                  </Botao>
                ))}
              </div>
            </Bloco>

            <Bloco titulo="Acesso e assinatura">
              <Linha rotulo="Status" valor={ativo ? "Ativo" : "Inativo"} />
              <Linha rotulo="Plano" valor={acesso.planName || acesso.plan} />
              <Linha
                rotulo="Expira em"
                valor={acesso.expiresAt ? data(acesso.expiresAt) : "Sem prazo"}
              />
              <Linha rotulo="Cadastrado em" valor={data(acesso.createdAt)} />
              <Linha rotulo="Último login" valor={dataHora(ultimoLogin)} />
              <Linha rotulo="Login bloqueado" valor={loginBloqueado ? "Sim" : "Não"} />
            </Bloco>

            <BlocoCakto
              dados={cakto}
              ocupado={ocupado}
              aoChamar={(corpo, marca, sucesso) => void chamar(corpo, marca, sucesso)}
            />

            <Bloco titulo="Anotações internas">
              <textarea
                value={rascunho}
                onChange={(e) => setRascunho(e.target.value)}
                rows={3}
                placeholder="Ligou pedindo desconto, prometi retorno na sexta..."
                className="w-full border border-slate-200 px-2.5 py-2 text-sm focus:border-slate-900 focus:outline-none"
              />
              <div className="mt-1.5 flex justify-end">
                <Botao tom="forte" disabled={trabalhando || !rascunho.trim()} onClick={salvarNota}>
                  Salvar anotação
                </Botao>
              </div>
              <div className="mt-3 space-y-3">
                {notas.length ? (
                  notas.map((n) => (
                    <div key={n.id} className="border-l-2 border-slate-200 pl-3">
                      <p className="whitespace-pre-wrap text-sm text-slate-700">{n.note}</p>
                      <p className="mt-0.5 text-[11px] text-slate-400">
                        {dataHora(n.created_at)}
                        {n.author_email ? ` · ${n.author_email}` : ""}
                        <button
                          type="button"
                          onClick={() => apagarNota(n.id)}
                          className="ml-2 text-rose-500 hover:underline"
                        >
                          apagar
                        </button>
                      </p>
                    </div>
                  ))
                ) : (
                  <p className="text-sm text-slate-400">Nada anotado ainda.</p>
                )}
              </div>
            </Bloco>

            <Bloco titulo="Histórico de ações">
              {eventos.length ? (
                <div className="space-y-2.5">
                  {eventos.map((e) => (
                    <div key={e.id} className="text-sm">
                      <p className="text-slate-700">{NOME_ACAO[e.action] || e.action}</p>
                      <p className="text-[11px] text-slate-400">
                        {dataHora(e.created_at)}
                        {e.author_email ? ` · ${e.author_email}` : ""}
                      </p>
                    </div>
                  ))}
                </div>
              ) : (
                <p className="text-sm text-slate-400">
                  Nada registrado ainda. A partir de agora toda ação feita aqui fica gravada.
                </p>
              )}
            </Bloco>

            <p className="border-t border-slate-200 pt-4 text-[11px] text-slate-400">
              ID interno: {userId || "sem usuário de autenticação"}
            </p>
          </aside>
        </div>
      </div>
    </div>
  );
}

/* ---------- assinatura na Cakto ---------- */

function BlocoCakto({
  dados,
  ocupado,
  aoChamar,
}: {
  dados: DadosCakto;
  ocupado: string | null;
  aoChamar: (corpo: Record<string, unknown>, marca: string, sucesso: string) => void;
}) {
  const [para, setPara] = useState("");
  const [confirmarCancelamento, setConfirmarCancelamento] = useState<string | null>(null);
  const [confirmarMudanca, setConfirmarMudanca] = useState(false);

  if (!dados.assinaturas.length && !dados.pagamentos.length && !dados.falhas.length) {
    return (
      <Bloco titulo="Assinatura na Cakto">
        <p className="text-sm text-slate-500">Nenhuma assinatura pela rota nova e nenhum pagamento registrado para este e-mail.</p>
      </Bloco>
    );
  }

  return (
    <Bloco titulo="Assinatura na Cakto">
      <div className="space-y-4">
        {dados.assinaturas.map((a) => {
          const podeCancelar = ["ativa", "atrasada", "pausada"].includes(a.situacao);
          return (
            <div key={a.cakto_subscription_id} className="rounded-md border border-slate-200 px-3 py-2">
              <div className="flex flex-wrap items-center justify-between gap-2">
                <span className="text-sm font-semibold text-slate-900">
                  {a.plano === "anual" ? "Anual" : "Mensal"}
                  <span className="ml-2 font-normal text-slate-500">
                    {a.produto_id === PRODUTO_NOVO ? "plano novo" : "plano antigo"} · {SITUACAO_CAKTO[a.situacao] ?? a.situacao}
                  </span>
                </span>
                {podeCancelar ? (
                  confirmarCancelamento === a.cakto_subscription_id ? (
                    <span className="flex items-center gap-2">
                      <span className="text-xs text-rose-700">Cancelar a renovação? O cliente usa até o fim do pago.</span>
                      <Botao
                        tom="perigo"
                        disabled={ocupado !== null}
                        onClick={() => {
                          setConfirmarCancelamento(null);
                          aoChamar(
                            { action: "cancelar_na_cakto", assinatura: a.cakto_subscription_id },
                            `cancelar-${a.cakto_subscription_id}`,
                            "Cancelamento pedido. A Cakto é avisada em até 5 minutos."
                          );
                        }}
                      >
                        Sim, cancelar
                      </Botao>
                      <Botao onClick={() => setConfirmarCancelamento(null)}>Não</Botao>
                    </span>
                  ) : (
                    <Botao tom="perigo" disabled={ocupado !== null} onClick={() => setConfirmarCancelamento(a.cakto_subscription_id)}>
                      Cancelar renovação
                    </Botao>
                  )
                ) : null}
              </div>
              <Linha rotulo="Pago até" valor={a.pago_ate ? data(a.pago_ate) : null} />
              <Linha rotulo="Próxima cobrança" valor={a.proxima_cobranca ? data(a.proxima_cobranca) : null} />
              <Linha rotulo="Forma de pagamento" valor={a.metodo ? METODO_CAKTO[a.metodo] ?? a.metodo : null} />
              <Linha rotulo="Dias de crédito" valor={a.dias_de_credito ? String(a.dias_de_credito) : null} />
              {a.cancelar_na_cakto ? (
                <Linha
                  rotulo="Cancelada na Cakto"
                  valor={a.cancelada_na_cakto_em ? dataHora(a.cancelada_na_cakto_em) : a.erro_ao_cancelar ? `Pendente — ${a.erro_ao_cancelar}` : "Pendente"}
                />
              ) : null}
            </div>
          );
        })}

        {dados.falhas.length ? (
          <div>
            <p className="mb-1 text-xs font-semibold text-rose-700">Avisos da Cakto que falharam</p>
            {dados.falhas.map((f) => (
              <div key={f.id} className="flex items-center justify-between gap-3 py-1 text-sm">
                <span className="min-w-0 truncate text-slate-700">
                  {dataHora(f.created_at)} · {f.event_type} · {f.tentativas} tentativas · {f.processing_details}
                </span>
                <Botao
                  disabled={ocupado !== null}
                  onClick={() => aoChamar({ action: "reprocessar_aviso_cakto", aviso: f.id }, `aviso-${f.id}`, "O aviso volta para a fila e é aplicado em até 5 minutos.")}
                >
                  Tentar de novo
                </Botao>
              </div>
            ))}
          </div>
        ) : null}

        {dados.pagamentos.length ? (
          <div>
            <p className="mb-1 text-xs font-semibold text-slate-500">Pagamentos</p>
            {dados.pagamentos.map((p) => (
              <div key={p.pedido_id} className="flex items-baseline gap-3 py-1 text-sm">
                <span className="w-24 shrink-0 text-slate-500">{data(p.pago_em ?? p.criado_em)}</span>
                <span className="min-w-0 flex-1 text-slate-700">
                  {p.plano === "anual" ? "Anual" : p.plano === "mensal" ? "Mensal" : "—"} · {p.metodo ? METODO_CAKTO[p.metodo] ?? p.metodo : "—"}
                </span>
                <span className="font-medium text-slate-900">{p.valor === null ? "—" : MOEDA.format(Number(p.valor))}</span>
                <span className="w-32 text-right text-slate-500">{STATUS_PAGAMENTO[p.status] ?? p.status}</span>
              </div>
            ))}
          </div>
        ) : null}

        <div className="border-t border-slate-100 pt-3">
          <p className="mb-2 text-xs text-slate-500">
            Cliente pagou com o e-mail errado? Mova as assinaturas e os pagamentos para o e-mail certo. O acesso da conta certa passa a valer até onde este vale.
          </p>
          <div className="flex flex-wrap items-center gap-2">
            <input
              type="email"
              value={para}
              onChange={(e) => {
                setPara(e.target.value);
                setConfirmarMudanca(false);
              }}
              placeholder="e-mail certo"
              className="min-w-0 flex-1 rounded-md border border-slate-200 px-3 py-1.5 text-sm"
            />
            {confirmarMudanca ? (
              <>
                <Botao
                  tom="forte"
                  disabled={ocupado !== null || !para.includes("@")}
                  onClick={() => {
                    setConfirmarMudanca(false);
                    aoChamar({ action: "mover_assinatura_cakto", para: para.trim().toLowerCase() }, "mover-cakto", "Assinaturas movidas.");
                  }}
                >
                  Confirmar
                </Botao>
                <Botao onClick={() => setConfirmarMudanca(false)}>Não</Botao>
              </>
            ) : (
              <Botao disabled={ocupado !== null || !para.includes("@")} onClick={() => setConfirmarMudanca(true)}>
                Mover
              </Botao>
            )}
          </div>
        </div>
      </div>
    </Bloco>
  );
}