"use client";

import { usePermissoes } from "@/lib/permissoes-do-usuario";
import { useEffect, useState, useMemo, useCallback } from "react";
import { useParams, useRouter } from "next/navigation";
import Link from "next/link";
import Image from "next/image";
import { getSupabaseClient } from "@/lib/supabase";
import { getCompanyContext } from "@/lib/company-context";
import { 
  AlertCircle,
  ArrowLeft, 
  Building2, 
  CheckCircle2,
  Copy,
  ExternalLink,
  Mail, 
  MapPin, 
  Phone,
  DollarSign,
  ShoppingBag,
  FileText,
  Calendar,
  Trash2,
  AlertTriangle,
  PenTool,
  ShieldCheck,
  KeyRound,
  Loader2,
  Clock3,
  UserCheck,
  UserX,
  MessageCircle,
} from "lucide-react";
import { motion } from "framer-motion";
import { Client } from "@/types/client";
import { ClientFormModal } from "@/components/clients/client-form-modal";
import { BlocoDeCamposProprios } from "@/components/campos-proprios/bloco-de-campos-proprios";
import CaixaDeConfirmacao, { type Confirmacao } from "@/components/ui/caixa-de-confirmacao";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";

interface OrderSummary {
  id: string;
  number: number;
  status: string;
  total_amount: number;
  created_at: string;
}

interface QuoteSummary {
  id: string;
  number: number;
  status: string;
  total: number;
  created_at: string;
}

interface ClientDetails extends Client {
  orders: OrderSummary[];
  quotes: QuoteSummary[];
}

const statusLabel: Record<string, string> = {
  // Quotes
  draft: "Rascunho",
  sent: "Enviado",
  approved: "Aprovado",
  rejected: "Rejeitado",
  // Orders
  pending_production: "Aguardando",
  in_production: "Em Produção",
  finished: "Finalizado",
  delivered: "Entregue",
  canceled: "Cancelado",
};

const statusColor: Record<string, string> = {
  draft: "ks-chip",
  sent: "ks-chip ks-chip-soft",
  approved: "ks-chip ks-chip-success",
  rejected: "ks-chip ks-chip-danger",
  pending_production: "ks-chip",
  in_production: "ks-chip ks-chip-soft",
  finished: "ks-chip ks-chip-success",
  delivered: "ks-chip ks-chip-success",
  canceled: "ks-chip",
};

export default function ClientDetailsPage() {
  const { pode } = usePermissoes();
  const podeMexerEmClientes = pode("clients.list.write");

  const params = useParams();
  const router = useRouter();
  const [client, setClient] = useState<ClientDetails | null>(null);
  const [loading, setLoading] = useState(true);
  const [activeTab, setActiveTab] = useState<"quotes" | "orders" | "notes">("quotes");
  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
  const [deletingClient, setDeletingClient] = useState(false);
  const [resolvedAvatarUrl, setResolvedAvatarUrl] = useState<string | null>(null);
  const [sendingPortalAccess, setSendingPortalAccess] = useState(false);
  const [alternandoPortal, setAlternandoPortal] = useState(false);
  /* Aprovação do cadastro feito pela loja (Regras da loja, cadastro "com
     aprovação"): a ficha diz sim ou não, e depois do sim oferece o aviso no
     WhatsApp com o link da loja. */
  const [revisandoAcesso, setRevisandoAcesso] = useState(false);
  const [confirmacao, setConfirmacao] = useState<Confirmacao | null>(null);
  const [lojaParaAviso, setLojaParaAviso] = useState<{ nome: string; link: string } | null>(null);
  /* O que o cliente faz no portal e a loja nao via: os enderecos que ele salvou
     e os produtos que favoritou. Os dados sempre estiveram no banco, so nunca
     apareceram aqui. */
  const [enderecosDoPortal, setEnderecosDoPortal] = useState<
    Array<{
      id: string;
      label?: string | null;
      recipient_name?: string | null;
      zip?: string | null;
      street?: string | null;
      number?: string | null;
      complement?: string | null;
      neighborhood?: string | null;
      city?: string | null;
      state?: string | null;
      is_default?: boolean | null;
    }>
  >([]);
  const [favoritosDoPortal, setFavoritosDoPortal] = useState<Array<{ id: string; name: string }>>([]);
  const [portalAccessMessage, setPortalAccessMessage] = useState<{
    type: "success" | "error";
    text: string;
    accessUrl?: string;
    copied?: boolean;
  } | null>(null);

  const fetchClient = useCallback(async () => {
    try {
      const supabase = getSupabaseClient();
      const {
        data: { user },
      } = await supabase.auth.getUser();
      if (!user) {
        setClient(null);
        setLoading(false);
        return;
      }
      const ctx = await getCompanyContext(supabase, user);
      const tenantIds = ctx.tenantIds?.length ? ctx.tenantIds : [user.id];
      const { data, error } = await supabase
        .from("clients")
        .select("*, orders(id, number, status, total_amount, created_at), quotes(id, number, status, total, created_at)")
        .eq("id", params.id)
        .in("user_id", tenantIds)
        .single();

      if (error) throw error;
      setClient(data as ClientDetails);

      /* O nome e o endereço público da loja, para o aviso de aprovação no
         WhatsApp. O mesmo critério do "Copiar link" da lista de clientes:
         domínio próprio verificado, senão a base pública mais o slug. */
      const [{ data: perfis }, { data: dominios }] = await Promise.all([
        supabase.from("profiles").select("id,slug,catalog_name,store_name").in("id", tenantIds),
        supabase.from("profile_custom_domains").select("profile_id,domain,verified").in("profile_id", tenantIds),
      ]);
      const perfilDaLoja = (perfis || []).find((p) => Boolean((p as { slug?: string | null }).slug)) as
        | { slug?: string | null; catalog_name?: string | null; store_name?: string | null }
        | undefined;
      const dominioAtivo = (dominios || []).find((d) => Boolean((d as { verified?: boolean | null }).verified)) as
        | { domain?: string | null }
        | undefined;
      const origem = typeof window !== "undefined" ? window.location.origin : "https://ktalogu.com.br";
      const basePublica = (process.env.NEXT_PUBLIC_PUBLIC_CATALOG_BASE_URL || origem)
        .replace(":3002", ":3001")
        .replace(/\/\/admin\./, "//")
        .replace(/\/$/, "");
      const linkDaLoja = dominioAtivo?.domain
        ? `https://${String(dominioAtivo.domain).replace(/^https?:\/\//, "").replace(/\/$/, "")}`
        : perfilDaLoja?.slug
          ? `${basePublica}/${perfilDaLoja.slug}`
          : "";
      setLojaParaAviso(
        linkDaLoja
          ? { nome: String(perfilDaLoja?.catalog_name || perfilDaLoja?.store_name || "nossa loja").trim(), link: linkDaLoja }
          : null
      );

      const { data: enderecos } = await supabase
        .from("client_addresses")
        .select("id,label,recipient_name,zip,street,number,complement,neighborhood,city,state,is_default")
        .eq("client_id", params.id)
        .order("is_default", { ascending: false })
        .order("created_at", { ascending: true });
      setEnderecosDoPortal(Array.isArray(enderecos) ? enderecos : []);

      const listaDeFavoritos = Array.isArray((data as { favorites?: unknown })?.favorites)
        ? ((data as { favorites?: unknown[] }).favorites as unknown[])
        : [];
      const idsFavoritos = listaDeFavoritos
        .map((item) =>
          typeof item === "string"
            ? item
            : String((item as { product_id?: unknown; id?: unknown })?.product_id || (item as { id?: unknown })?.id || "")
        )
        .filter(Boolean);
      if (idsFavoritos.length) {
        const { data: produtos } = await supabase
          .from("products")
          .select("id,name")
          .in("id", idsFavoritos.slice(0, 24));
        setFavoritosDoPortal(
          (produtos || []).map((produto) => ({ id: String(produto.id), name: String(produto.name || "Produto") }))
        );
      } else {
        setFavoritosDoPortal([]);
      }
    } catch (err) {
      console.error("Erro ao carregar cliente:", err);
    } finally {
      setLoading(false);
    }
  }, [params.id]);

  useEffect(() => {
    if (params.id) {
      fetchClient();
    }
  }, [params.id, fetchClient]);

  /* "?editar=1" abre a edição direto: é o caminho do "Corrigir" das pendências da nota fiscal. */
  const [edicaoPeloLinkAberta, setEdicaoPeloLinkAberta] = useState(false);
  useEffect(() => {
    if (!client?.id || edicaoPeloLinkAberta) return;
    if (new URLSearchParams(window.location.search).get("editar") !== "1") return;
    setEdicaoPeloLinkAberta(true);
    setIsEditModalOpen(true);
  }, [client?.id, edicaoPeloLinkAberta]);

  useEffect(() => {
    let active = true;

    async function fetchAvatar() {
      if (!client?.id || !client.avatar_url) {
        setResolvedAvatarUrl(null);
        return;
      }

      try {
        const response = await fetch(`/api/clients/avatar?clientId=${encodeURIComponent(client.id)}`, {
          cache: "no-store",
        });
        const payload = (await response.json().catch(() => null)) as { avatarUrl?: string | null } | null;
        if (!active) return;
        setResolvedAvatarUrl(response.ok ? payload?.avatarUrl || null : null);
      } catch {
        if (!active) return;
        setResolvedAvatarUrl(null);
      }
    }

    void fetchAvatar();
    return () => {
      active = false;
    };
  }, [client?.id, client?.avatar_url]);

  const statsCards = useMemo(() => {
    if (!client) return [];
    
    const totalOrders = client.orders?.length || 0;
    const totalQuotes = client.quotes?.length || 0;
    const totalValue = client.orders?.reduce((acc, order) => acc + (order.total_amount || 0), 0) || 0;

    return [
      {
        title: "Total Vendido",
        value: totalValue.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' }),
        icon: DollarSign,
        variant: "primary"
      },
      {
        title: "Pedidos",
        value: totalOrders,
        icon: ShoppingBag,
        variant: "light"
      },
      {
        title: "Orçamentos",
        value: totalQuotes,
        icon: FileText,
        variant: "light"
      },
      {
        title: "Cliente Desde",
        value: new Date(client.created_at).toLocaleDateString('pt-BR', { month: 'short', year: 'numeric' }).replace('.', ''),
        icon: Calendar,
        variant: "light"
      }
    ];
  }, [client]);

  const clientInitials = useMemo(() => {
    if (!client?.name) return "C";
    const parts = client.name.trim().split(/\s+/).filter(Boolean);
    return parts.slice(0, 2).map((part) => part.charAt(0).toUpperCase()).join("") || "C";
  }, [client?.name]);

  const portalAccessButtonLabel = useMemo(() => {
    if (!client?.email) return "Cliente sem e-mail";
    return client.portal_password_updated_at ? "Gerar novo link de acesso" : "Gerar primeiro acesso";
  }, [client?.email, client?.portal_password_updated_at]);

  const portalAccessButtonHint = useMemo(() => {
    if (!client?.email) return "Cadastre um e-mail para liberar o acesso ao portal.";
    return client.portal_password_updated_at
      ? "Gera um novo link seguro e invalida o anterior."
      : "Gera um link seguro para o primeiro acesso ao portal.";
  }, [client?.email, client?.portal_password_updated_at]);

  async function copyPortalAccessUrl(url: string, message: string) {
    try {
      await navigator.clipboard.writeText(url);
      setPortalAccessMessage((current) =>
        current
          ? {
              ...current,
              text: message,
              copied: true,
            }
          : current
      );
    } catch {}
  }

  async function handleDeleteClient() {
    if (!client || deletingClient) return;
    setDeletingClient(true);
    try {
      const supabase = getSupabaseClient();
      const {
        data: { user },
      } = await supabase.auth.getUser();
      if (!user) throw new Error("Usuário não autenticado");
      const ctx = await getCompanyContext(supabase, user);
      const tenantIds = ctx.tenantIds?.length ? ctx.tenantIds : [user.id];
      const now = new Date().toISOString();

      const { error } = await supabase
        .from("clients")
        .update({ active: false, is_deleted: true, deleted_at: now, updated_at: now })
        .eq("id", client.id)
        .in("user_id", tenantIds);
      if (error) throw error;

      setIsDeleteModalOpen(false);
      router.push("/dashboard/clients");
    } catch (err) {
      console.error("Erro ao excluir cliente:", err);
      alert("Não foi possível excluir o cliente.");
    } finally {
      setDeletingClient(false);
    }
  }

  /* A chave que faltava: o selo de portal ativo virou botao. */
  async function alternarPortalDoCliente() {
    if (!client || alternandoPortal) return;
    const ligar = client.portal_enabled === false;
    setAlternandoPortal(true);
    try {
      const response = await fetch("/api/clients/portal-access", {
        method: "PATCH",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ clientId: client.id, enabled: ligar }),
      });
      const payload = (await response.json().catch(() => null)) as { error?: string } | null;
      if (!response.ok) throw new Error(payload?.error || "Nao foi possivel alterar o portal.");
      setClient((atual) => (atual ? { ...atual, portal_enabled: ligar } : atual));
      setPortalAccessMessage({
        type: "success",
        text: ligar
          ? "Portal liberado. O cliente já pode entrar com o e-mail dele."
          : "Portal bloqueado. As sessões abertas foram encerradas.",
      });
    } catch (error) {
      setPortalAccessMessage({
        type: "error",
        text: error instanceof Error ? error.message : "Nao foi possivel alterar o portal.",
      });
    } finally {
      setAlternandoPortal(false);
    }
  }

  /* Aprovar ou recusar o cadastro pendente. A recusa derruba as sessões
     abertas na hora (a rota cuida disso), e o cliente pode ser aprovado
     depois, se a loja mudar de ideia. */
  async function revisarAcessoDoCliente(status: "approved" | "rejected") {
    if (!client || revisandoAcesso) return;
    setRevisandoAcesso(true);
    try {
      const response = await fetch("/api/clients/portal-status", {
        method: "PATCH",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ clientId: client.id, status }),
      });
      const payload = (await response.json().catch(() => null)) as
        | { error?: string; portal_status?: "approved" | "pending" | "rejected"; portal_reviewed_at?: string | null }
        | null;
      if (!response.ok) throw new Error(payload?.error || "Não foi possível responder ao cadastro.");
      const revisadoEm = payload?.portal_reviewed_at || new Date().toISOString();
      setClient((atual) => (atual ? { ...atual, portal_status: status, portal_reviewed_at: revisadoEm } : atual));
      setPortalAccessMessage({
        type: "success",
        text:
          status === "approved"
            ? "Cadastro aprovado. O cliente já vê os preços e compra na loja. Se quiser, avise pelo WhatsApp."
            : "Cadastro recusado. O cliente não entra mais na loja com este cadastro.",
      });
    } catch (error) {
      setPortalAccessMessage({
        type: "error",
        text: error instanceof Error ? error.message : "Não foi possível responder ao cadastro.",
      });
    } finally {
      setRevisandoAcesso(false);
    }
  }

  function pedirParaRecusar() {
    if (!client) return;
    setConfirmacao({
      titulo: `Recusar o cadastro de ${client.company_name || client.name}?`,
      texto: "O cliente não consegue mais entrar na loja com este cadastro. Dá para aprovar depois, por aqui mesmo.",
      confirmar: "Recusar cadastro",
      tom: "perigo",
      aoConfirmar: () => {
        setConfirmacao(null);
        return revisarAcessoDoCliente("rejected");
      },
    });
  }

  /* O link do WhatsApp com a mensagem de aprovação já escrita. Sem número
     não há link, e o botão nem aparece. */
  const linkDoAvisoNoWhatsapp = useMemo(() => {
    if (!client || !lojaParaAviso) return null;
    let digitos = String(client.whatsapp || client.phone || "").replace(/\D/g, "");
    if (!digitos) return null;
    if ((digitos.length === 10 || digitos.length === 11) && !digitos.startsWith("55")) digitos = `55${digitos}`;
    const primeiroNome = String(client.name || "").trim().split(/\s+/)[0] || "cliente";
    const mensagem = `Olá ${primeiroNome}! Seu cadastro na ${lojaParaAviso.nome} foi aprovado. Você já pode ver os preços e comprar: ${lojaParaAviso.link}`;
    return `https://wa.me/${digitos}?text=${encodeURIComponent(mensagem)}`;
  }, [client, lojaParaAviso]);

  async function handleSendPortalAccess() {
    if (!client || sendingPortalAccess) return;
    setSendingPortalAccess(true);
    setPortalAccessMessage(null);

    try {
      const response = await fetch("/api/clients/portal-access", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ clientId: client.id }),
      });
      const payload = (await response.json().catch(() => null)) as
        | { error?: string; message?: string; access_url?: string }
        | null;

      if (!response.ok) {
        throw new Error(payload?.error || "Nao foi possivel enviar o acesso ao portal.");
      }

      let copied = false;
      if (payload?.access_url && typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
        try {
          await navigator.clipboard.writeText(payload.access_url);
          copied = true;
        } catch {
          copied = false;
        }
      }

      setPortalAccessMessage({
        type: "success",
        text: copied
          ? "Link seguro do portal gerado e copiado. Envie ao cliente."
          : payload?.message || "Link seguro do portal gerado com sucesso.",
        accessUrl: payload?.access_url || undefined,
        copied,
      });
      await fetchClient();
    } catch (err) {
      const message =
        typeof err === "object" && err && "message" in err && typeof err.message === "string"
          ? err.message
          : "Nao foi possivel enviar o acesso ao portal.";
      setPortalAccessMessage({ type: "error", text: message });
    } finally {
      setSendingPortalAccess(false);
    }
  }

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-[400px]">
        <div className="w-5 h-5 border-2 border-[var(--ks-color-text-primary)] border-t-transparent rounded-full animate-spin" />
      </div>
    );
  }

  if (!client) {
    return (
      <div className="flex flex-col items-center justify-center min-h-[400px] text-[var(--ks-color-text-muted)]">
        <p className="text-lg font-medium text-[var(--ks-color-text-primary)]">Cliente não encontrado</p>
        <Link
          href="/dashboard/clients"
          className="mt-4 text-[var(--ks-color-text-primary)] hover:underline"
        >
          Voltar para a lista
        </Link>
      </div>
    );
  }

  return (
    <div className="max-w-5xl mx-auto space-y-12 pb-20 pt-8">
      {/* Header Editorial */}
      <div className="space-y-6">
        <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
          <Link
            href="/dashboard/clients"
            className="text-[var(--ks-color-text-soft)] hover:text-[var(--ks-color-text-primary)] transition-colors flex items-center gap-2 text-sm font-medium"
          >
            <ArrowLeft size={16} />
            Voltar
          </Link>
          
          <div className="flex flex-col gap-3 lg:items-end">
            <div className="flex flex-wrap items-center gap-3 lg:justify-end">
              <button
                onClick={handleSendPortalAccess}
                disabled={sendingPortalAccess || !client.email}
                className="inline-flex min-h-10 items-center gap-2 rounded-xl border border-[rgba(68,37,167,0.14)] bg-[rgba(68,37,167,0.06)] px-4 py-2 text-sm font-semibold text-[var(--ks-color-text-primary)] transition hover:bg-[rgba(68,37,167,0.1)] disabled:cursor-not-allowed disabled:border-[var(--ks-color-border-subtle)] disabled:bg-[var(--ks-color-surface-muted)] disabled:text-[var(--ks-color-text-soft)]"
              >
                {sendingPortalAccess ? <Loader2 size={15} className="animate-spin" /> : <KeyRound size={15} />}
                {portalAccessButtonLabel}
              </button>
              {podeMexerEmClientes && (
              <>
              <button
                onClick={() => setIsDeleteModalOpen(true)}
                className="text-sm font-medium text-[var(--ks-color-status-danger)] hover:opacity-90 transition-colors flex items-center gap-2"
              >
                <Trash2 size={15} />
                Excluir
              </button>
              <button
                onClick={() => setIsEditModalOpen(true)}
                className="text-sm font-medium text-[var(--ks-color-text-muted)] hover:text-[var(--ks-color-text-primary)] transition-colors flex items-center gap-2"
              >
                Editar
              </button>
              </>
              )}
            </div>
            <div className="text-xs text-[var(--ks-color-text-soft)] lg:text-right">
              {portalAccessButtonHint}
            </div>
          </div>
        </div>

        <div>
          <div className="flex items-start gap-4">
            <div className="flex h-20 w-20 shrink-0 items-center justify-center overflow-hidden rounded-full border border-[var(--ks-color-border-subtle)] bg-white text-lg font-semibold text-[var(--ks-color-text-primary)]">
              {resolvedAvatarUrl ? (
                <Image
                  src={resolvedAvatarUrl}
                  alt={client.name}
                  width={80}
                  height={80}
                  className="h-20 w-20 object-cover"
                  unoptimized
                />
              ) : (
                clientInitials
              )}
            </div>

            <div className="min-w-0 flex-1">
              <h1 className="text-4xl font-bold tracking-tight text-[var(--ks-color-text-primary)] mb-3">
                {client.name}
              </h1>
              
              <div className="flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-[var(--ks-color-text-muted)]">
                {client.company_name && (
                  <span className="flex items-center gap-2">
                    <Building2 size={14} className="text-[var(--ks-color-text-soft)]" />
                    {client.company_name}
                  </span>
                )}
                
                {(client.address_city || client.address_state) && (
                  <span className="flex items-center gap-2">
                    <MapPin size={14} className="text-[var(--ks-color-text-soft)]" />
                    {[client.address_city, client.address_state].filter(Boolean).join(", ")}
                  </span>
                )}

                {client.email && (
                  <span className="flex items-center gap-2">
                    <Mail size={14} className="text-[var(--ks-color-text-soft)]" />
                    {client.email}
                  </span>
                )}

                {client.phone && (
                  <span className="flex items-center gap-2">
                    <Phone size={14} className="text-[var(--ks-color-text-soft)]" />
                    {client.phone}
                  </span>
                )}

                <span className="flex items-center gap-2">
                  <span
                    className={`w-1.5 h-1.5 rounded-full ${
                      client.active ? "bg-[var(--ks-color-success)]" : "bg-[var(--ks-color-border-subtle)]"
                    }`}
                  />
                  {client.active ? "Ativo" : "Inativo"}
                </span>

                <button
                  type="button"
                  onClick={alternarPortalDoCliente}
                  disabled={alternandoPortal || !podeMexerEmClientes}
                  title={
                    client.portal_enabled === false
                      ? "Liberar o acesso do cliente ao portal"
                      : "Bloquear o acesso do cliente ao portal"
                  }
                  className="flex items-center gap-2 rounded-full border border-[var(--ks-color-border-subtle)] px-2.5 py-1 transition hover:border-[var(--ks-color-primary)] hover:text-[var(--ks-color-primary)] disabled:cursor-not-allowed disabled:opacity-60"
                >
                  <ShieldCheck size={14} className="text-[var(--ks-color-text-soft)]" />
                  {client.portal_enabled === false ? "Portal bloqueado" : "Portal liberado"}
                  <span className="text-[var(--ks-color-text-soft)]">
                    {alternandoPortal ? "..." : client.portal_enabled === false ? "· liberar" : "· bloquear"}
                  </span>
                </button>

                {/* O cadastro feito pela loja no modo "com aprovação": pendente
                    pede uma resposta; recusado pode ser aprovado depois;
                    aprovado pela equipe ganha o aviso no WhatsApp. */}
                {client.portal_status === "pending" ? (
                  <span className="flex flex-wrap items-center gap-2">
                    <span className="inline-flex items-center gap-1.5 rounded-full border border-amber-200 bg-amber-50 px-2.5 py-1 text-xs font-semibold text-amber-700">
                      <Clock3 size={13} />
                      Aguardando aprovação
                    </span>
                    {podeMexerEmClientes ? (
                      <>
                        <button
                          type="button"
                          onClick={() => void revisarAcessoDoCliente("approved")}
                          disabled={revisandoAcesso}
                          className="inline-flex items-center gap-1.5 rounded-full bg-[var(--ks-color-primary)] px-3 py-1 text-xs font-semibold text-white transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60"
                        >
                          {revisandoAcesso ? <Loader2 size={13} className="animate-spin" /> : <UserCheck size={13} />}
                          Aprovar acesso
                        </button>
                        <button
                          type="button"
                          onClick={pedirParaRecusar}
                          disabled={revisandoAcesso}
                          className="inline-flex items-center gap-1.5 rounded-full border border-[rgba(239,68,68,0.3)] px-3 py-1 text-xs font-semibold text-[var(--ks-color-status-danger)] transition hover:bg-[rgba(239,68,68,0.06)] disabled:cursor-not-allowed disabled:opacity-60"
                        >
                          <UserX size={13} />
                          Recusar
                        </button>
                      </>
                    ) : null}
                  </span>
                ) : client.portal_status === "rejected" ? (
                  <span className="flex flex-wrap items-center gap-2">
                    <span className="inline-flex items-center gap-1.5 rounded-full border border-[rgba(239,68,68,0.2)] bg-[rgba(239,68,68,0.06)] px-2.5 py-1 text-xs font-semibold text-[var(--ks-color-status-danger)]">
                      <UserX size={13} />
                      Cadastro recusado
                    </span>
                    {podeMexerEmClientes ? (
                      <button
                        type="button"
                        onClick={() => void revisarAcessoDoCliente("approved")}
                        disabled={revisandoAcesso}
                        className="inline-flex items-center gap-1.5 rounded-full border border-[var(--ks-color-border-subtle)] px-3 py-1 text-xs font-semibold text-[var(--ks-color-text-primary)] transition hover:border-[var(--ks-color-primary)] hover:text-[var(--ks-color-primary)] disabled:cursor-not-allowed disabled:opacity-60"
                      >
                        {revisandoAcesso ? <Loader2 size={13} className="animate-spin" /> : <UserCheck size={13} />}
                        Aprovar acesso
                      </button>
                    ) : null}
                  </span>
                ) : client.portal_status === "approved" && client.portal_reviewed_at ? (
                  <span className="flex flex-wrap items-center gap-2">
                    <span className="inline-flex items-center gap-1.5 rounded-full border border-[rgba(18,185,129,0.25)] bg-[rgba(18,185,129,0.08)] px-2.5 py-1 text-xs font-semibold text-[var(--ks-color-status-success)]">
                      <UserCheck size={13} />
                      Cadastro aprovado em {new Date(client.portal_reviewed_at).toLocaleDateString("pt-BR")}
                    </span>
                    {linkDoAvisoNoWhatsapp ? (
                      <a
                        href={linkDoAvisoNoWhatsapp}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="inline-flex items-center gap-1.5 rounded-full border border-[var(--ks-color-border-subtle)] px-3 py-1 text-xs font-semibold text-[var(--ks-color-text-primary)] transition hover:border-[var(--ks-color-primary)] hover:text-[var(--ks-color-primary)]"
                      >
                        <MessageCircle size={13} />
                        Avisar no WhatsApp
                      </a>
                    ) : null}
                  </span>
                ) : null}

                {/* Aviso de que foi o proprio cliente quem mexeu no cadastro. Sem
                    isso, a loja via o dado diferente e nao sabia quem mudou. */}
                {(client as { profile_updated_by_client_at?: string | null }).profile_updated_by_client_at ? (
                  <span className="flex items-center gap-2">
                    <PenTool size={14} className="text-[var(--ks-color-text-soft)]" />
                    Editado pelo cliente em{" "}
                    {new Date(
                      String((client as { profile_updated_by_client_at?: string | null }).profile_updated_by_client_at)
                    ).toLocaleDateString("pt-BR")}
                  </span>
                ) : null}

                {client.portal_last_login_at ? (
                  <span className="flex items-center gap-2">
                    <Calendar size={14} className="text-[var(--ks-color-text-soft)]" />
                    Último acesso: {new Date(client.portal_last_login_at).toLocaleDateString("pt-BR")}
                  </span>
                ) : null}
              </div>
            </div>
          </div>

          {portalAccessMessage ? (
            <div
              className={`mt-6 rounded-2xl border px-4 py-4 text-sm ${
                portalAccessMessage.type === "success"
                  ? "border-[rgba(18,185,129,0.2)] bg-[rgba(18,185,129,0.08)] text-[var(--ks-color-status-success)]"
                  : "border-[rgba(239,68,68,0.16)] bg-[rgba(239,68,68,0.06)] text-[var(--ks-color-status-danger)]"
              }`}
            >
              <div className="flex items-start gap-3">
                <div className="mt-0.5 shrink-0">
                  {portalAccessMessage.type === "success" ? <CheckCircle2 size={16} /> : <AlertCircle size={16} />}
                </div>
                <div className="min-w-0 flex-1">
                  <div className="font-semibold">
                    {portalAccessMessage.type === "success" ? "Acesso ao portal pronto" : "Nao foi possivel gerar o acesso"}
                  </div>
                  <div className="mt-1 text-[13px] leading-6 opacity-90">{portalAccessMessage.text}</div>
                  {portalAccessMessage.type === "success" && portalAccessMessage.accessUrl ? (
                    <div className="mt-3 rounded-xl border border-current/10 bg-white/55 px-3 py-3 text-[12px] leading-5 break-all">
                      {portalAccessMessage.accessUrl}
                    </div>
                  ) : null}
                </div>
              </div>
              {portalAccessMessage.type === "success" && portalAccessMessage.accessUrl ? (
                <div className="mt-3 flex flex-wrap gap-3">
                  <button
                    type="button"
                    onClick={() => copyPortalAccessUrl(portalAccessMessage.accessUrl || "", "Link seguro copiado novamente. Envie ao cliente.")}
                    className="inline-flex items-center gap-2 rounded-lg border border-current/20 px-3 py-2 text-xs font-medium transition hover:bg-white/40"
                  >
                    <Copy size={14} />
                    {portalAccessMessage.copied ? "Copiado" : "Copiar link"}
                  </button>
                  <a
                    href={portalAccessMessage.accessUrl}
                    target="_blank"
                    rel="noreferrer"
                    className="inline-flex items-center gap-2 rounded-lg border border-current/20 px-3 py-2 text-xs font-medium transition hover:bg-white/40"
                  >
                    <ExternalLink size={14} />
                    Abrir link
                  </a>
                  <div className="inline-flex items-center rounded-lg border border-current/15 px-3 py-2 text-xs font-medium opacity-80">
                    O link anterior e invalidado automaticamente.
                  </div>
                </div>
              ) : null}
            </div>
          ) : null}

          {/* KPIs Cards */}
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 mt-8 mb-10">
            {statsCards.map((stat, idx) => {
              const isPrimary = stat.variant === "primary";
              return (
                <motion.div
                  key={idx}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: idx * 0.1 }}
                  className={`relative overflow-hidden rounded-[2rem] p-6 transition-all hover:-translate-y-1 hover:shadow-xl ${
                    isPrimary
                      ? "bg-gradient-to-br from-[#4425A7] to-[#7c5dfa] text-white shadow-lg shadow-indigo-500/30"
                      : "bg-white text-[#4425A7] shadow-lg shadow-indigo-100/50"
                  }`}
                >
                  {isPrimary && (
                    <>
                      <div className="absolute -right-10 -top-10 h-40 w-40 rounded-full bg-white/10 blur-3xl" />
                      <div className="absolute -bottom-10 -left-10 h-40 w-40 rounded-full bg-cyan-400/20 blur-3xl" />
                    </>
                  )}

                  <div className="relative z-10 flex flex-col h-full justify-between gap-4">
                    <div className="flex items-start justify-between">
                      <div
                        className={`flex h-12 w-12 items-center justify-center rounded-2xl text-xl backdrop-blur-md ${
                          isPrimary
                            ? "bg-white/20 text-white"
                            : "bg-[#F8F5FE] text-[#0AC0D6]"
                        }`}
                      >
                        <stat.icon size={22} />
                      </div>
                    </div>

                    <div>
                      <h3
                        className={`text-sm font-medium tracking-wide opacity-80 ${
                          isPrimary ? "text-indigo-100" : "text-slate-500"
                        }`}
                      >
                        {stat.title}
                      </h3>
                      <div className="flex items-baseline gap-2 mt-1">
                        <span className="text-2xl font-bold tracking-tight capitalize">
                          {stat.value}
                        </span>
                      </div>
                    </div>
                  </div>
                </motion.div>
              );
            })}
          </div>

          <div className="ks-surface rounded-2xl border border-[var(--ks-color-border-subtle)] p-6">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm">
              <div className="space-y-3">
                <div className="text-xs font-medium text-[var(--ks-color-text-soft)] uppercase tracking-[0.16em]">
                  Contato
                </div>
                <div className="space-y-2">
                  <div>
                    <div className="text-[var(--ks-color-text-soft)]">Documento</div>
                    <div className="text-[var(--ks-color-text-primary)]">{client.document || "-"}</div>
                  </div>
                  <div>
                    <div className="text-[var(--ks-color-text-soft)]">Tipo</div>
                    <div className="text-[var(--ks-color-text-primary)]">
                      {client.type === "pj" ? "Pessoa jurídica" : "Pessoa física"}
                    </div>
                  </div>
                  <div>
                    <div className="text-[var(--ks-color-text-soft)]">Email</div>
                    <div className="text-[var(--ks-color-text-primary)]">{client.email || "-"}</div>
                  </div>
                  <div>
                    <div className="text-[var(--ks-color-text-soft)]">Telefone</div>
                    <div className="text-[var(--ks-color-text-primary)]">{client.phone || "-"}</div>
                  </div>
                  <div>
                    <div className="text-[var(--ks-color-text-soft)]">WhatsApp</div>
                    <div className="text-[var(--ks-color-text-primary)]">{client.whatsapp || "-"}</div>
                  </div>
                  <div>
                    <div className="text-[var(--ks-color-text-soft)]">Senha do portal</div>
                    <div className="text-[var(--ks-color-text-primary)]">
                      {client.portal_password_updated_at
                        ? `Atualizada em ${new Date(client.portal_password_updated_at).toLocaleDateString("pt-BR")}`
                        : "Ainda nao definida"}
                    </div>
                  </div>
                </div>
              </div>

              <div className="space-y-3">
                <div className="text-xs font-medium text-[var(--ks-color-text-soft)] uppercase tracking-[0.16em]">
                  Endereço
                </div>
                <div className="space-y-2">
                  <div>
                    <div className="text-[var(--ks-color-text-soft)]">CEP</div>
                    <div className="text-[var(--ks-color-text-primary)]">{client.address_zip || "-"}</div>
                  </div>
                  <div>
                    <div className="text-[var(--ks-color-text-soft)]">Rua</div>
                    <div className="text-[var(--ks-color-text-primary)]">{client.address_street || "-"}</div>
                  </div>
                  <div>
                    <div className="text-[var(--ks-color-text-soft)]">Número</div>
                    <div className="text-[var(--ks-color-text-primary)]">{client.address_number || "-"}</div>
                  </div>
                  <div>
                    <div className="text-[var(--ks-color-text-soft)]">Complemento</div>
                    <div className="text-[var(--ks-color-text-primary)]">{client.address_complement || "-"}</div>
                  </div>
                  <div>
                    <div className="text-[var(--ks-color-text-soft)]">Bairro</div>
                    <div className="text-[var(--ks-color-text-primary)]">{client.address_neighborhood || "-"}</div>
                  </div>
                  <div>
                    <div className="text-[var(--ks-color-text-soft)]">Cidade</div>
                    <div className="text-[var(--ks-color-text-primary)]">{client.address_city || "-"}</div>
                  </div>
                  <div>
                    <div className="text-[var(--ks-color-text-soft)]">Estado</div>
                    <div className="text-[var(--ks-color-text-primary)]">{client.address_state || "-"}</div>
                  </div>
                </div>
              </div>

              <div className="space-y-3">
                <div className="text-xs font-medium text-[var(--ks-color-text-soft)] uppercase tracking-[0.16em]">
                  Segmentação
                </div>
                <div className="space-y-2">
                  <div>
                    <div className="text-[var(--ks-color-text-soft)]">Tags</div>
                    <div className="text-[var(--ks-color-text-primary)]">
                      {client.tags && client.tags.length > 0 ? client.tags.join(", ") : "-"}
                    </div>
                  </div>
                  <div>
                    <div className="text-[var(--ks-color-text-soft)]">Observações</div>
                    <div className="text-[var(--ks-color-text-primary)] whitespace-pre-wrap">
                      {client.notes || "-"}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Campos próprios da empresa (migration 187). A chave remonta o quadro
          quando o cadastro é recarregado (o formulário também edita estes). */}
      <BlocoDeCamposProprios
        key={JSON.stringify((client as { campos_proprios?: unknown }).campos_proprios ?? {})}
        entidade="cliente"
        registroId={client.id}
        valores={(client as { campos_proprios?: unknown }).campos_proprios}
        podeEditar={podeMexerEmClientes}
        className="ks-surface p-5"
      />

      {/* O que o cliente cadastrou sozinho no portal. Antes ficava so no banco:
          a loja continuava vendo um unico endereco antigo e nao sabia o que ele
          tinha favoritado. */}
      {enderecosDoPortal.length > 0 || favoritosDoPortal.length > 0 ? (
        <div className="ks-surface p-5">
          <div className="text-xs font-medium uppercase tracking-[0.16em] text-[var(--ks-color-text-soft)]">
            O cliente no portal
          </div>

          {enderecosDoPortal.length > 0 ? (
            <div className="mt-3">
              <div className="text-sm font-semibold text-[var(--ks-color-text-primary)]">
                Endereços salvos por ele ({enderecosDoPortal.length})
              </div>
              <ul className="mt-2 divide-y divide-[var(--ks-color-border-subtle)] border-t border-[var(--ks-color-border-subtle)] text-sm">
                {enderecosDoPortal.map((endereco) => (
                  <li key={endereco.id} className="flex items-start justify-between gap-3 py-2">
                    <div className="min-w-0">
                      <div className="font-medium text-[var(--ks-color-text-primary)]">
                        {endereco.label || endereco.recipient_name || "Endereço"}
                        {endereco.is_default ? (
                          <span className="ml-2 text-[11px] font-semibold text-[var(--ks-color-primary)]">principal</span>
                        ) : null}
                      </div>
                      <div className="text-[var(--ks-color-text-muted)]">
                        {[
                          [endereco.street, endereco.number].filter(Boolean).join(", "),
                          endereco.complement,
                          endereco.neighborhood,
                          [endereco.city, endereco.state].filter(Boolean).join(" / "),
                          endereco.zip,
                        ]
                          .filter(Boolean)
                          .join(" • ")}
                      </div>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          ) : null}

          {favoritosDoPortal.length > 0 ? (
            <div className="mt-4">
              <div className="text-sm font-semibold text-[var(--ks-color-text-primary)]">
                Favoritos dele ({favoritosDoPortal.length})
              </div>
              <div className="mt-2 flex flex-wrap gap-2">
                {favoritosDoPortal.map((produto) => (
                  <Link
                    key={produto.id}
                    href={`/dashboard/products/${produto.id}`}
                    className="inline-flex rounded-full border border-[var(--ks-color-border-subtle)] px-3 py-1 text-sm text-[var(--ks-color-text-primary)] transition hover:border-[var(--ks-color-primary)]"
                  >
                    {produto.name}
                  </Link>
                ))}
              </div>
            </div>
          ) : null}
        </div>
      ) : null}

      {/* Minimal Tabs  */}
      <div className="space-y-8">
        <div className="flex gap-8 border-b border-[var(--ks-color-border-subtle)]">
          <button
            onClick={() => setActiveTab("quotes")}
            className={`pb-4 text-sm font-medium transition-colors relative ${
              activeTab === "quotes"
                ? "text-[var(--ks-color-text-primary)]"
                : "text-[var(--ks-color-text-soft)] hover:text-[var(--ks-color-text-muted)]"
            }`}
          >
            Orçamentos
            {activeTab === "quotes" && (
              <motion.div
                layoutId="activeTab"
                className="absolute bottom-0 left-0 right-0 h-px bg-[var(--ks-color-text-primary)]"
              />
            )}
          </button>
          <button
            onClick={() => setActiveTab("orders")}
            className={`pb-4 text-sm font-medium transition-colors relative ${
              activeTab === "orders"
                ? "text-[var(--ks-color-text-primary)]"
                : "text-[var(--ks-color-text-soft)] hover:text-[var(--ks-color-text-muted)]"
            }`}
          >
            Pedidos
            {activeTab === "orders" && (
              <motion.div
                layoutId="activeTab"
                className="absolute bottom-0 left-0 right-0 h-px bg-[var(--ks-color-text-primary)]"
              />
            )}
          </button>
          <button
            onClick={() => setActiveTab("notes")}
            className={`pb-4 text-sm font-medium transition-colors relative ${
              activeTab === "notes"
                ? "text-[var(--ks-color-text-primary)]"
                : "text-[var(--ks-color-text-soft)] hover:text-[var(--ks-color-text-muted)]"
            }`}
          >
            Observações
            {activeTab === "notes" && (
              <motion.div
                layoutId="activeTab"
                className="absolute bottom-0 left-0 right-0 h-px bg-[var(--ks-color-text-primary)]"
              />
            )}
          </button>
        </div>

        {/* Content Area - No Borders/Cards */}
        <div className="min-h-[200px]">
          {activeTab === "quotes" && (
            <div>
              {client.quotes && client.quotes.length > 0 ? (
                <>
                  <div className="md:hidden space-y-3">
                    {client.quotes.map((quote) => (
                      <div
                        key={quote.id}
                        className="ks-surface p-4 flex flex-col gap-3 border border-[var(--ks-color-border-subtle)] rounded-xl"
                      >
                        <div className="flex justify-between items-start">
                          <span className="font-medium text-[var(--ks-color-text-primary)]">
                            #{quote.number}
                          </span>
                          <span
                            className={`${
                              statusColor[quote.status]
                            } text-xs font-medium`}
                          >
                            {statusLabel[quote.status] || quote.status}
                          </span>
                        </div>
                        <div className="flex justify-between text-sm text-[var(--ks-color-text-muted)] border-t border-[var(--ks-color-border-subtle)] pt-2 mt-1">
                          <span>
                            {new Date(quote.created_at).toLocaleDateString("pt-BR")}
                          </span>
                          <span className="font-medium text-[var(--ks-color-text-primary)]">
                            {quote.total.toLocaleString("pt-BR", {
                              style: "currency",
                              currency: "BRL",
                            })}
                          </span>
                        </div>
                        <Link
                          href={`/dashboard/quotes/${quote.id}`}
                          className="mt-1 w-full py-2.5 text-center text-sm font-medium bg-[var(--ks-color-background)] rounded-lg text-[var(--ks-color-text-primary)]"
                        >
                          Abrir Orçamento
                        </Link>
                      </div>
                    ))}
                  </div>

                  <div className="hidden md:block ks-table-shell overflow-x-auto">
                    <table className="ks-table">
                      <thead>
                        <tr>
                          <th>Número</th>
                          <th>Data</th>
                          <th>Status</th>
                          <th className="text-right">Valor</th>
                          <th className="text-right"></th>
                        </tr>
                      </thead>
                      <tbody>
                        {client.quotes.map(quote => (
                          <tr key={quote.id} className="group hover:bg-[rgba(244,245,255,0.5)] transition-colors">
                            <td className="font-medium text-[var(--ks-color-text-primary)]">#{quote.number}</td>
                            <td className="text-[var(--ks-color-text-muted)]">
                              {new Date(quote.created_at).toLocaleDateString("pt-BR")}
                            </td>
                            <td>
                              <span className={`${statusColor[quote.status]} text-xs font-medium`}>
                                {statusLabel[quote.status] || quote.status}
                              </span>
                            </td>
                            <td className="text-right text-[var(--ks-color-text-primary)] tabular-nums">
                              {quote.total.toLocaleString("pt-BR", { style: "currency", currency: "BRL" })}
                            </td>
                            <td className="text-right">
                              <Link
                                href={`/dashboard/quotes/${quote.id}`}
                                className="text-[var(--ks-color-text-soft)] hover:text-[var(--ks-color-text-primary)] text-xs font-medium transition-colors opacity-0 group-hover:opacity-100"
                              >
                                Abrir
                              </Link>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </>
              ) : (
                <p className="text-[var(--ks-color-text-soft)] text-sm">Nenhum orçamento encontrado.</p>
              )}
            </div>
          )}

          {activeTab === "orders" && (
            <div>
              {client.orders && client.orders.length > 0 ? (
                <>
                  <div className="md:hidden space-y-3">
                    {client.orders.map((order) => (
                      <div
                        key={order.id}
                        className="ks-surface p-4 flex flex-col gap-3 border border-[var(--ks-color-border-subtle)] rounded-xl"
                      >
                        <div className="flex justify-between items-start">
                          <span className="font-medium text-[var(--ks-color-text-primary)]">
                            #{order.number}
                          </span>
                          <span
                            className={`${
                              statusColor[order.status]
                            } text-xs font-medium`}
                          >
                            {statusLabel[order.status] || order.status}
                          </span>
                        </div>
                        <div className="flex justify-between text-sm text-[var(--ks-color-text-muted)] border-t border-[var(--ks-color-border-subtle)] pt-2 mt-1">
                          <span>
                            {new Date(order.created_at).toLocaleDateString("pt-BR")}
                          </span>
                          <span className="font-medium text-[var(--ks-color-text-primary)]">
                            {order.total_amount.toLocaleString("pt-BR", {
                              style: "currency",
                              currency: "BRL",
                            })}
                          </span>
                        </div>
                        <Link
                          href={`/dashboard/orders/${order.id}`}
                          className="mt-1 w-full py-2.5 text-center text-sm font-medium bg-[var(--ks-color-background)] rounded-lg text-[var(--ks-color-text-primary)]"
                        >
                          Abrir Pedido
                        </Link>
                      </div>
                    ))}
                  </div>

                  <div className="hidden md:block ks-table-shell overflow-x-auto">
                    <table className="ks-table">
                      <thead>
                        <tr>
                          <th>Número</th>
                          <th>Data</th>
                          <th>Status</th>
                          <th className="text-right">Valor</th>
                          <th className="text-right"></th>
                        </tr>
                      </thead>
                      <tbody>
                        {client.orders.map(order => (
                          <tr key={order.id} className="group hover:bg-[rgba(244,245,255,0.5)] transition-colors">
                            <td className="font-medium text-[var(--ks-color-text-primary)]">#{order.number}</td>
                            <td className="text-[var(--ks-color-text-muted)]">
                              {new Date(order.created_at).toLocaleDateString("pt-BR")}
                            </td>
                            <td>
                              <span className={`${statusColor[order.status]} text-xs font-medium`}>
                                {statusLabel[order.status] || order.status}
                              </span>
                            </td>
                            <td className="text-right text-[var(--ks-color-text-primary)] tabular-nums">
                              {order.total_amount.toLocaleString("pt-BR", { style: "currency", currency: "BRL" })}
                            </td>
                            <td className="text-right">
                              <Link
                                href={`/dashboard/orders/${order.id}`}
                                className="text-[var(--ks-color-text-soft)] hover:text-[var(--ks-color-text-primary)] text-xs font-medium transition-colors opacity-0 group-hover:opacity-100"
                              >
                                Abrir
                              </Link>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </>
              ) : (
                <p className="text-[var(--ks-color-text-soft)] text-sm">Nenhum pedido encontrado.</p>
              )}
            </div>
          )}

          {activeTab === "notes" && (
            <div className="max-w-2xl">
            <p className="text-[var(--ks-color-text-muted)] whitespace-pre-wrap leading-relaxed">
                {client.notes || "Nenhuma observação registrada."}
              </p>
            </div>
          )}
        </div>
      </div>

      <ClientFormModal
        isOpen={isEditModalOpen}
        onClose={() => setIsEditModalOpen(false)}
        onSuccess={fetchClient}
        client={client}
      />
      <CaixaDeConfirmacao pedido={confirmacao} ocupado={revisandoAcesso} aoFechar={() => setConfirmacao(null)} />
      <Dialog open={isDeleteModalOpen} onOpenChange={(open) => !deletingClient && setIsDeleteModalOpen(open)}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2 text-[var(--ks-color-text-primary)]">
              <AlertTriangle size={18} className="text-[var(--ks-color-status-danger)]" />
              Excluir cliente
            </DialogTitle>
            <DialogDescription>
              Deseja realmente excluir {client.company_name || client.name}?
            </DialogDescription>
          </DialogHeader>
          {(client.orders?.length || 0) > 0 || (client.quotes?.length || 0) > 0 ? (
            <div className="rounded-lg border border-[rgba(245,158,11,0.35)] bg-[rgba(245,158,11,0.1)] p-3 text-sm text-amber-800">
              Este cliente possui {client.orders?.length || 0} pedido(s) e {client.quotes?.length || 0} orçamento(s) vinculados.
              Ao excluir, os registros continuarão com o nome atual do cliente e badge de cliente excluído.
            </div>
          ) : null}
          <DialogFooter>
            <button
              type="button"
              onClick={() => setIsDeleteModalOpen(false)}
              className="h-10 rounded-lg border border-zinc-200 px-4 text-sm font-semibold text-zinc-700"
              disabled={deletingClient}
            >
              Cancelar
            </button>
            <button
              type="button"
              onClick={handleDeleteClient}
              className="h-10 rounded-lg bg-[var(--ks-color-status-danger)] px-4 text-sm font-semibold text-white disabled:opacity-60"
              disabled={deletingClient}
            >
              {deletingClient ? "Excluindo..." : "Excluir cliente"}
            </button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}