"use client";

import { useEffect, useState, useCallback } from "react";
import { getSupabaseClient } from "@/lib/supabase";
import { getCompanyContext } from "@/lib/company-context";
import { AnimatePresence, motion } from "framer-motion";
import { X, User, Building2, MapPin, AlertCircle, CheckCircle, Loader2, ListPlus } from "lucide-react";
import { CustomSelect } from "@/components/ui/custom-select";
import { Client, ClientType } from "@/types/client";
import { CamposDoFormulario, type ValoresEmEdicao } from "@/components/campos-proprios/campos-do-formulario";
import { useCamposProprios } from "@/components/campos-proprios/use-campos-proprios";
import { conferirValores, valoresDaLinha } from "@/lib/campos-proprios";
import {
  maskPhone,
  maskCEP,
  applyDocumentMask,
  validateDocument
} from "@/lib/document-utils";

interface ClientFormModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSuccess: (clientId?: string) => void;
  client?: Client | null;
}

function parseTags(value: string | string[]) {
  if (Array.isArray(value)) return value;
  return value
    .split(",")
    .map((t) => t.trim())
    .filter(Boolean);
}

type SituacaoNoIcms = "" | "contribuinte" | "isento" | "nao_contribuinte";

/* A inscrição estadual ativa do estado da empresa, quando a consulta do CNPJ traz. */
function inscricaoDoCnpj(estabelecimento: Record<string, unknown>): { ie: string; situacao: SituacaoNoIcms } | null {
  const lista = Array.isArray(estabelecimento.inscricoes_estaduais) ? (estabelecimento.inscricoes_estaduais as Array<Record<string, unknown>>) : [];
  const uf = String((estabelecimento.estado as { sigla?: string } | undefined)?.sigla || "").toUpperCase();
  const ativa =
    lista.find((item) => item.ativo === true && String((item.estado as { sigla?: string } | undefined)?.sigla || "").toUpperCase() === uf) ??
    lista.find((item) => item.ativo === true);
  const ie = String(ativa?.inscricao_estadual || "").replace(/\D/g, "");
  return ie ? { ie, situacao: "contribuinte" } : null;
}

export function ClientFormModal({ isOpen, onClose, onSuccess, client }: ClientFormModalProps) {
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState("");
  const [documentError, setDocumentError] = useState("");
  const [loadingCNPJ, setLoadingCNPJ] = useState(false);
  const [loadingCEP, setLoadingCEP] = useState(false);
  const [documentValid, setDocumentValid] = useState(false);
  /* Campos próprios (migration 187). `null` = os valores do cliente ainda não
     chegaram: sem eles, salvar não mexe na coluna, para não apagar nada. */
  const { definicoes: camposDoCliente, ativas: camposAtivos } = useCamposProprios("cliente", isOpen);
  const [camposValores, setCamposValores] = useState<ValoresEmEdicao | null>({});
  const [camposErros, setCamposErros] = useState<Record<string, string>>({});
  const [form, setForm] = useState({
    name: "",
    company_name: "",
    type: "pf" as ClientType,
    document: "",
    email: "",
    phone: "",
    whatsapp: "",
    address_zip: "",
    address_street: "",
    address_number: "",
    address_complement: "",
    address_neighborhood: "",
    address_city: "",
    address_state: "",
    notes: "",
    tags: "",
    active: true,
    whatsapp_notify: true,
    address_ibge: "",
    inscricao_estadual: "",
    contribuinte_icms: "" as SituacaoNoIcms,
  });

  useEffect(() => {
    if (isOpen) {
      if (client) {
        setForm({
          name: client.name || "",
          company_name: client.company_name || "",
          type: client.type || "pf",
          document: client.document || "",
          email: client.email || "",
          phone: client.phone || "",
          whatsapp: client.whatsapp || "",
          address_zip: client.address_zip || "",
          address_street: client.address_street || "",
          address_number: client.address_number || "",
          address_complement: client.address_complement || "",
          address_neighborhood: client.address_neighborhood || "",
          address_city: client.address_city || "",
          address_state: client.address_state || "",
          notes: client.notes || "",
          tags: (client.tags || []).join(", "),
          active: client.active ?? true,
          whatsapp_notify: client.whatsapp_notify ?? true,
          address_ibge: client.address_ibge || "",
          inscricao_estadual: client.inscricao_estadual || "",
          contribuinte_icms: (client.contribuinte_icms || "") as SituacaoNoIcms,
        });
      } else {
        // Reset form for new client
        setForm({
          name: "",
          company_name: "",
          type: "pf",
          document: "",
          email: "",
          phone: "",
          whatsapp: "",
          address_zip: "",
          address_street: "",
          address_number: "",
          address_complement: "",
          address_neighborhood: "",
          address_city: "",
          address_state: "",
          notes: "",
          tags: "",
          active: true,
          whatsapp_notify: true,
          address_ibge: "",
          inscricao_estadual: "",
          contribuinte_icms: "" as SituacaoNoIcms,
        });
      }
      setError("");
      setDocumentError("");
      setDocumentValid(false);
      setCamposErros({});
    }
  }, [isOpen, client]);

  /* Os valores dos campos próprios: vêm no cliente quando quem abriu leu a
     linha inteira; senão, são lidos aqui. */
  useEffect(() => {
    if (!isOpen) return;
    if (!client?.id) {
      setCamposValores({});
      return;
    }
    if (client.campos_proprios !== undefined) {
      setCamposValores({ ...valoresDaLinha(client.campos_proprios) });
      return;
    }
    let vivo = true;
    setCamposValores(null);
    void getSupabaseClient()
      .from("clients")
      .select("campos_proprios")
      .eq("id", client.id)
      .maybeSingle()
      .then(({ data, error }) => {
        if (!vivo || error) return;
        setCamposValores({ ...valoresDaLinha((data as { campos_proprios?: unknown } | null)?.campos_proprios) });
      });
    return () => {
      vivo = false;
    };
  }, [isOpen, client]);

  // Função para buscar dados do CNPJ
  const fetchCNPJData = useCallback(async (cnpj: string) => {
    const cleanCNPJ = cnpj.replace(/\D/g, '');
    if (cleanCNPJ.length !== 14) return;

    setLoadingCNPJ(true);
    try {
      const response = await fetch(`https://publica.cnpj.ws/cnpj/${cleanCNPJ}`);
      if (response.ok) {
        const data = await response.json();
        const estabelecimento = data.estabelecimento || {};
        
        // Preenche automaticamente TODOS os campos com os dados da empresa
        setForm(prev => ({
          ...prev,
          // Dados da empresa
          company_name: data.razao_social || prev.company_name,
          name: estabelecimento.nome_fantasia || data.razao_social || prev.name,
          
          // Endereço completo - estrutura correta da API
          address_street: estabelecimento.logradouro || estabelecimento.tipo_logradouro || prev.address_street,
          address_number: estabelecimento.numero || prev.address_number,
          address_complement: estabelecimento.complemento || prev.address_complement,
          address_neighborhood: estabelecimento.bairro || prev.address_neighborhood,
          address_city: estabelecimento.cidade?.nome || prev.address_city,
          address_state: estabelecimento.estado?.sigla || prev.address_state,
          address_zip: estabelecimento.cep ? estabelecimento.cep.replace(/\D/g, '') : prev.address_zip,
          address_ibge: estabelecimento.cidade?.ibge_id ? String(estabelecimento.cidade.ibge_id) : prev.address_ibge,
          inscricao_estadual: inscricaoDoCnpj(estabelecimento)?.ie || prev.inscricao_estadual,
          contribuinte_icms: inscricaoDoCnpj(estabelecimento)?.situacao || prev.contribuinte_icms,
          
          // Contatos - estrutura correta da API
          email: estabelecimento.email || prev.email,
          phone: estabelecimento.telefone1 ? 
            maskPhone(estabelecimento.ddd1 + estabelecimento.telefone1) : prev.phone,
          whatsapp: estabelecimento.telefone1 ? 
            maskPhone(estabelecimento.ddd1 + estabelecimento.telefone1) : prev.whatsapp
        }));
        
        console.log('Dados do CNPJ carregados:', data);
      }
    } catch (error) {
      console.error('Erro ao buscar dados do CNPJ:', error);
    } finally {
      setLoadingCNPJ(false);
    }
  }, []);

  // Função para buscar endereço por CEP
  const fetchCEPData = useCallback(async (cep: string) => {
    const cleanCEP = cep.replace(/\D/g, '');
    if (cleanCEP.length !== 8) return;

    setLoadingCEP(true);
    try {
      const response = await fetch(`https://viacep.com.br/ws/${cleanCEP}/json/`);
      if (response.ok) {
        const data = await response.json();
        if (!data.erro) {
          setForm(prev => ({
            ...prev,
            address_street: data.logradouro || prev.address_street,
            address_neighborhood: data.bairro || prev.address_neighborhood,
            address_city: data.localidade || prev.address_city,
            address_state: data.uf || prev.address_state,
            address_ibge: data.ibge || prev.address_ibge
          }));
        }
      }
    } catch (error) {
      console.error('Erro ao buscar dados do CEP:', error);
    } finally {
      setLoadingCEP(false);
    }
  }, []);

  // Handler para mudança do documento
  const handleDocumentChange = useCallback((value: string) => {
    const maskedValue = applyDocumentMask(value, form.type === 'pf' ? 'cpf' : 'cnpj');
    
    setForm(prev => ({ ...prev, document: maskedValue }));
    
    // Validação do documento
    const cleanValue = maskedValue.replace(/\D/g, '');
    if (cleanValue.length === (form.type === 'pf' ? 11 : 14)) {
      const isValid = validateDocument(cleanValue, form.type);
      setDocumentValid(isValid);
      setDocumentError(isValid ? '' : `Documento ${form.type === 'pf' ? 'CPF' : 'CNPJ'} inválido`);
      
      // Se for CNPJ válido, busca dados automaticamente
      if (isValid && form.type === 'pj') {
        fetchCNPJData(cleanValue);
      }
    } else {
      setDocumentValid(false);
      setDocumentError('');
    }
  }, [form.type, fetchCNPJData]);

  // Handler para mudança do CEP
  const handleCEPChange = useCallback((value: string) => {
    const maskedValue = maskCEP(value);
    setForm(prev => ({ ...prev, address_zip: maskedValue }));
    
    // Busca endereço automaticamente quando CEP estiver completo
    const cleanValue = maskedValue.replace(/\D/g, '');
    if (cleanValue.length === 8) {
      fetchCEPData(cleanValue);
    }
  }, [fetchCEPData]);

  // Handler para mudança do WhatsApp
  const handleWhatsAppChange = useCallback((value: string) => {
    const maskedValue = maskPhone(value);
    setForm(prev => ({ ...prev, whatsapp: maskedValue }));
  }, []);

  // Handler para mudança do telefone
  const handlePhoneChange = useCallback((value: string) => {
    const maskedValue = maskPhone(value);
    setForm(prev => ({ ...prev, phone: maskedValue }));
  }, []);

  // Handler para mudança do tipo de pessoa
  const handleTypeChange = useCallback((value: string) => {
    setForm(prev => ({
      ...prev,
      type: value as ClientType,
      document: "",
      ...(value === "pf" ? { inscricao_estadual: "", contribuinte_icms: "" as SituacaoNoIcms } : {}),
    }));
    setDocumentValid(false);
    setDocumentError("");
  }, []);

  async function handleSave(e: React.FormEvent) {
    e.preventDefault();
    setSaving(true);
    setError("");
    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];

      /* O código IBGE da cidade vai na nota fiscal. O CEP já traz; quem digitou
         a cidade na mão tem o código resolvido aqui, sem travar o salvamento. */
      let addressIbge = form.address_ibge.replace(/\D/g, "");
      if (addressIbge.length !== 7 && form.address_city.trim() && form.address_state.trim()) {
        try {
          const busca = new URLSearchParams({ cep: form.address_zip, cidade: form.address_city.trim(), uf: form.address_state.trim() });
          const resposta = await fetch(`/api/fiscal/consultas/ibge?${busca.toString()}`, { signal: AbortSignal.timeout(4000) });
          const achado = (await resposta.json().catch(() => null)) as { cidade?: { ibge?: string } | null } | null;
          addressIbge = String(achado?.cidade?.ibge || "").replace(/\D/g, "");
        } catch {
          addressIbge = "";
        }
      }
      const inscricaoEstadual = form.inscricao_estadual.trim().toUpperCase() === "ISENTO" ? "ISENTO" : form.inscricao_estadual.replace(/\D/g, "");

      let whatsappDigits = form.whatsapp.replace(/\D/g, "");
      if (whatsappDigits.startsWith("55")) {
        whatsappDigits = whatsappDigits.slice(2);
      }
      const payload = {
        name: form.name.trim(),
        company_name: form.company_name.trim() || null,
        type: form.type,
        document: form.document.trim() || null,
        email: form.email.trim() || null,
        phone: form.phone.trim() || null,
        whatsapp: whatsappDigits ? `+55${whatsappDigits}` : null,
        address_zip: form.address_zip.trim() || null,
        address_street: form.address_street.trim() || null,
        address_number: form.address_number.trim() || null,
        address_complement: form.address_complement.trim() || null,
        address_neighborhood: form.address_neighborhood.trim() || null,
        address_city: form.address_city.trim() || null,
        address_state: form.address_state.trim() || null,
        address_ibge: addressIbge.length === 7 ? addressIbge : null,
        inscricao_estadual: form.type === "pj" && form.contribuinte_icms === "contribuinte" && inscricaoEstadual ? inscricaoEstadual : null,
        contribuinte_icms: form.type === "pj" && form.contribuinte_icms ? form.contribuinte_icms : null,
        notes: form.notes.trim() || null,
        tags: parseTags(form.tags),
        active: form.active,
        /* A chave "Notificar via WhatsApp" saiu da tela em 11/09/2026: ela
           prometia mensagem automatica e o sistema nunca enviou nenhuma.
           A coluna continua sendo gravada porque a API v1 a devolve. */
        whatsapp_notify: form.whatsapp_notify,
        updated_at: new Date().toISOString(),
      };

      if (!payload.name) {
        setError("Nome do cliente é obrigatório.");
        return;
      }

      /* Campos próprios: só vão no salvamento quando os valores do cliente
         foram lidos. O que está gravado em campo desativado continua lá. */
      let camposProprios: Record<string, unknown> | undefined;
      if (camposValores !== null && (camposAtivos.length > 0 || client?.id)) {
        const novos: Record<string, unknown> = {};
        for (const def of camposAtivos) novos[def.chave] = camposValores[def.chave] ?? null;
        const conferido = conferirValores(camposDoCliente, novos, {
          atuais: valoresDaLinha(client?.campos_proprios ?? camposValores),
          exigirObrigatorios: true,
        });
        if (!conferido.ok) {
          setCamposErros(conferido.erros);
          setError("Confira as informações extras marcadas.");
          return;
        }
        if (camposAtivos.length > 0 || Object.keys(conferido.valores).length > 0) camposProprios = conferido.valores;
      }

      if (form.type === "pj" && form.contribuinte_icms === "contribuinte" && !inscricaoEstadual) {
        setError("Informe a inscrição estadual do cliente contribuinte de ICMS.");
        return;
      }

      // Validação do documento se preenchido
      if (payload.document && !validateDocument(payload.document, form.type)) {
        setError(`Documento ${form.type === 'pf' ? 'CPF' : 'CNPJ'} inválido.`);
        return;
      }

      // Verificar se já existe cliente com o mesmo CPF/CNPJ (apenas para criação)
      if (!client?.id && payload.document) {
        const cleanDocument = payload.document.replace(/\D/g, '');
        
        // Buscar clientes com documento igual (limpo ou formatado)
        const { data: existingClients, error: checkError } = await supabase
          .from("clients")
          .select("id, name, company_name, document")
          .in("user_id", tenantIds);

        if (checkError) {
          console.error("Erro ao verificar duplicidade:", checkError);
        }

        // Verificar se algum cliente tem o mesmo documento (limpo)
        const duplicateClient = existingClients?.find(client => {
          if (!client.document) return false;
          const existingCleanDoc = client.document.replace(/\D/g, '');
          return existingCleanDoc === cleanDocument;
        });

        if (duplicateClient) {
          const clientName = duplicateClient.company_name || duplicateClient.name;
          setError(`Já existe um cliente cadastrado com este ${form.type === 'pf' ? 'CPF' : 'CNPJ'}: ${clientName}`);
          return;
        }
      }

      let savedClientId: string | undefined;
      if (client?.id) {
        // Update
        const { error } = await supabase
          .from("clients")
          .update(camposProprios ? { ...payload, campos_proprios: camposProprios } : payload)
          .eq("id", client.id)
          .in("user_id", tenantIds);
        if (error) throw error;
        savedClientId = client.id;
      } else {
        // Create
        const writeUserId = ctx.ownerId ?? ctx.companyId;
        const { data: createdClient, error } = await supabase
          .from("clients")
          .insert([{ ...payload, ...(camposProprios ? { campos_proprios: camposProprios } : {}), user_id: writeUserId }])
          .select("id")
          .single();
        if (error) throw error;
        savedClientId = (createdClient as { id?: string } | null)?.id;
      }

      onSuccess(savedClientId);
      onClose();
    } catch (err) {
      console.error("Erro ao salvar cliente:", err);
      setError("Erro ao salvar cliente.");
    } finally {
      setSaving(false);
    }
  }

  return (
    <AnimatePresence>
      {isOpen && (
        <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/45 backdrop-blur-sm p-4">
          <motion.div
            initial={{ opacity: 0, scale: 0.98, y: 8 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.98, y: 8 }}
            className="ks-surface w-full max-w-4xl max-h-[95vh] flex flex-col rounded-2xl overflow-hidden"
          >
            {/* Header */}
            <div className="flex items-center justify-between p-6 border-b border-[rgba(225,228,240,0.9)] bg-[rgba(244, 247, 254,0.5)]">
              <div className="space-y-1">
                <p className="text-xs font-semibold tracking-[0.16em] uppercase text-[var(--ks-color-text-soft)]">
                  Cliente
                </p>
                <h3 className="text-xl font-semibold text-[var(--ks-color-text-primary)]">
                  {client ? "Editar cliente" : "Novo cliente"}
                </h3>
                <p className="text-sm text-[var(--ks-color-text-muted)]">
                  {client
                    ? "Atualize os dados para manter orçamentos e pedidos sempre organizados."
                    : "Cadastre os dados essenciais para agilizar orçamentos, pedidos e contatos."}
                </p>
              </div>
              <button
                type="button"
                onClick={onClose}
                className="rounded-full p-2 text-[var(--ks-color-text-soft)] hover:text-[var(--ks-color-text-primary)] hover:bg-[rgba(244, 247, 254,0.9)] transition-colors"
              >
                <X size={20} />
              </button>
            </div>

            {/* Content */}
            <div className="flex-1 overflow-y-auto">
              <div className="p-6">
                <form id="client-form" onSubmit={handleSave} className="space-y-6">
                {error && (
                  <div className="px-3 py-2.5 rounded-xl text-sm bg-red-50 text-red-700 border border-red-100">
                    {error}
                  </div>
                )}

                {/* Layout principal - duas colunas em desktop, uma em mobile */}
                <div className="grid grid-cols-1 xl:grid-cols-2 gap-8">
                  {/* Coluna 1: Informações básicas e contatos */}
                  <div className="space-y-6">
                    {/* Tipo e Documento */}
                    <div className="space-y-4 p-5 rounded-xl bg-[rgba(244, 247, 254,0.5)] border border-[rgba(225,228,240,0.5)]">
                      <div className="text-sm font-semibold text-[var(--ks-color-text-primary)]">
                        Tipo de Cliente
                      </div>
                    <div className="grid grid-cols-1 gap-4">
                      <div className="space-y-1.5">
                        <label className="text-sm font-medium text-[var(--ks-color-text-primary)]">
                          Tipo
                        </label>
                        <CustomSelect
                          options={[
                            { value: "pf", label: "Pessoa Física" },
                            { value: "pj", label: "Pessoa Jurídica" },
                          ]}
                          value={form.type}
                          onChange={handleTypeChange}
                          className="w-full"
                        />
                      </div>

                      <div className="space-y-1.5">
                        <label className="text-sm font-medium text-[var(--ks-color-text-primary)]">
                          Documento (CPF/CNPJ)
                        </label>
                        <div className="relative">
                          <input
                            value={form.document}
                            onChange={(e) => handleDocumentChange(e.target.value)}
                            className="w-full px-4 py-3 rounded-xl border border-[rgba(198,203,224,0.9)] text-base outline-none bg-white focus:ring-2 focus:ring-[rgba(10, 192, 214,0.16)] focus:border-[rgba(10, 192, 214,0.9)] transition-colors"
                            placeholder={form.type === 'pf' ? '000.000.000-00' : '00.000.000/0000-00'}
                          />
                          <div className="absolute right-3 top-1/2 -translate-y-1/2 flex items-center">
                            {loadingCNPJ && (
                              <Loader2 size={18} className="animate-spin text-[var(--ks-color-primary)]" />
                            )}
                            {documentValid && !loadingCNPJ && (
                              <CheckCircle size={18} className="text-green-500" />
                            )}
                            {documentError && !loadingCNPJ && (
                              <AlertCircle size={18} className="text-red-500" />
                            )}
                          </div>
                        </div>
                        {documentError && (
                          <p className="text-xs text-red-500 mt-1">{documentError}</p>
                        )}
                        {documentValid && form.type === "pj" && (
                          <p className="text-xs text-green-600">Dados da empresa carregados automaticamente</p>
                        )}
                      </div>

                      {form.type === "pj" ? (
                        <div className="space-y-1.5">
                          <label className="text-sm font-medium text-[var(--ks-color-text-primary)]">
                            Situação no ICMS
                          </label>
                          <CustomSelect
                            options={[
                              { value: "", label: "Não sei / não informado" },
                              { value: "contribuinte", label: "Contribuinte (tem inscrição estadual)" },
                              { value: "isento", label: "Isento de inscrição estadual" },
                              { value: "nao_contribuinte", label: "Não contribuinte" },
                            ]}
                            value={form.contribuinte_icms}
                            onChange={(valor) => setForm((p) => ({ ...p, contribuinte_icms: valor as SituacaoNoIcms }))}
                            className="w-full"
                          />
                          <p className="text-xs text-[var(--ks-color-text-soft)]">
                            Vai na nota fiscal. Na dúvida, pergunte ao cliente se a empresa tem inscrição estadual.
                          </p>
                          {form.contribuinte_icms === "contribuinte" ? (
                            <input
                              value={form.inscricao_estadual}
                              onChange={(e) => setForm((p) => ({ ...p, inscricao_estadual: e.target.value.replace(/[^0-9a-zA-Z]/g, "").slice(0, 20) }))}
                              className="mt-2 w-full px-4 py-3 rounded-xl border border-[rgba(198,203,224,0.9)] text-base outline-none bg-white focus:ring-2 focus:ring-[rgba(10, 192, 214,0.16)] focus:border-[rgba(10, 192, 214,0.9)] transition-colors"
                              placeholder="Inscrição estadual (só números)"
                              inputMode="numeric"
                            />
                          ) : null}
                        </div>
                      ) : null}
                    </div>
                  </div>

                  {/* Informações de Contato */}
                  <div className="space-y-4 p-5 rounded-xl bg-[rgba(244, 247, 254,0.5)] border border-[rgba(225,228,240,0.5)]">
                    <div className="text-sm font-semibold text-[var(--ks-color-text-primary)]">
                      Informações de Contato
                    </div>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div className="space-y-1.5">
                        <label className="text-sm font-medium text-[var(--ks-color-text-primary)]">
                          Nome do contato
                        </label>
                        <input
                          value={form.name}
                          onChange={(e) => setForm((p) => ({ ...p, name: e.target.value }))}
                          className="w-full px-4 py-3 rounded-xl border border-[rgba(198,203,224,0.9)] text-base outline-none bg-white focus:ring-2 focus:ring-[rgba(10, 192, 214,0.16)] focus:border-[rgba(10, 192, 214,0.9)] transition-colors"
                          placeholder="Ex: João Silva"
                          required
                        />
                      </div>

                      <div className="space-y-1.5">
                        <label className="text-sm font-medium text-[var(--ks-color-text-primary)]">
                          Empresa (opcional)
                        </label>
                        <div className="relative">
                          <span className="absolute left-3 top-1/2 -translate-y-1/2 text-[var(--ks-color-text-soft)]">
                            <Building2 size={16} />
                          </span>
                          <input
                            value={form.company_name}
                            onChange={(e) => setForm((p) => ({ ...p, company_name: e.target.value }))}
                            className="w-full pl-9 pr-4 py-3 rounded-xl border border-[rgba(198,203,224,0.9)] text-base outline-none bg-white focus:ring-2 focus:ring-[rgba(10, 192, 214,0.16)] focus:border-[rgba(10, 192, 214,0.9)] transition-colors"
                            placeholder="Ex: Gráfica ABC"
                          />
                        </div>
                      </div>

                      <div className="space-y-1.5">
                        <label className="text-sm font-medium text-[var(--ks-color-text-primary)]">
                          Email
                        </label>
                        <input
                          type="email"
                          value={form.email}
                          onChange={(e) => setForm((p) => ({ ...p, email: e.target.value }))}
                          className="w-full px-4 py-3 rounded-xl border border-[rgba(198,203,224,0.9)] text-base outline-none bg-white focus:ring-2 focus:ring-[rgba(10, 192, 214,0.16)] focus:border-[rgba(10, 192, 214,0.9)] transition-colors"
                          placeholder="contato@empresa.com"
                        />
                      </div>

                      <div className="space-y-1.5">
                        <label className="text-sm font-medium text-[var(--ks-color-text-primary)]">
                          Telefone
                        </label>
                        <input
                          value={form.phone}
                          onChange={(e) => handlePhoneChange(e.target.value)}
                          className="w-full px-4 py-3 rounded-xl border border-[rgba(198,203,224,0.9)] text-base outline-none bg-white focus:ring-2 focus:ring-[rgba(10, 192, 214,0.16)] focus:border-[rgba(10, 192, 214,0.9)] transition-colors"
                          placeholder="(11) 99999-9999"
                        />
                      </div>

                      <div className="space-y-1.5 md:col-span-2">
                        <label className="text-sm font-medium text-[var(--ks-color-text-primary)]">
                          WhatsApp
                        </label>
                        <div className="flex w-full overflow-hidden rounded-2xl border border-[rgba(198,203,224,0.9)] bg-white transition-colors focus-within:ring-2 focus-within:ring-[rgba(10, 192, 214,0.16)] focus-within:border-[rgba(10, 192, 214,0.9)]">
                          <div className="flex items-center gap-2 px-4 py-3 bg-[rgba(230,232,238,0.8)] border-r border-[rgba(198,203,224,0.9)]">
                            <span className="text-base">🇧🇷</span>
                            <span className="text-base font-semibold text-[var(--ks-color-primary)]">+55</span>
                          </div>
                          <input
                            value={maskPhone(form.whatsapp.replace(/^\+55\s?/, ""))}
                            onChange={(e) => handleWhatsAppChange(e.target.value)}
                            className="flex-1 px-4 py-3 text-base outline-none bg-white"
                            placeholder="(11) 99999-9999"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                  </div>
                  {/* Coluna 2: Endereço e segmentação */}
                  <div className="space-y-6">
                    <div className="space-y-3 p-5 rounded-xl bg-[rgba(244, 247, 254,0.5)] border border-[rgba(225,228,240,0.5)]">
                      <div className="text-xs font-medium text-[var(--ks-color-text-soft)] uppercase tracking-[0.16em]">
                        Endereço
                      </div>
                      <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
                        <div className="space-y-1.5">
                          <label className="text-xs font-medium text-[var(--ks-color-text-soft)] uppercase tracking-[0.16em]">
                            CEP
                          </label>
                          <div className="relative">
                            <span className="absolute left-3 top-1/2 -translate-y-1/2 text-[var(--ks-color-text-soft)]">
                              <MapPin size={14} />
                            </span>
                            <input
                              value={form.address_zip}
                              onChange={(e) => handleCEPChange(e.target.value)}
                              className="w-full pl-9 pr-3.5 py-2.5 rounded-full border border-[rgba(198,203,224,0.9)] text-sm outline-none bg-white focus:ring-2 focus:ring-[rgba(10, 192, 214,0.16)] focus:border-[rgba(10, 192, 214,0.9)]"
                              placeholder="00000-000"
                            />
                            {loadingCEP && (
                              <div className="absolute right-3 top-1/2 -translate-y-1/2">
                                <Loader2 size={14} className="animate-spin text-[var(--ks-color-primary)]" />
                              </div>
                            )}
                          </div>
                        </div>
                        <div className="space-y-1.5 md:col-span-2">
                          <label className="text-xs font-medium text-[var(--ks-color-text-soft)] uppercase tracking-[0.16em]">
                            Rua
                          </label>
                          <input
                            value={form.address_street}
                            onChange={(e) => setForm((p) => ({ ...p, address_street: e.target.value }))}
                            className="w-full px-3.5 py-2.5 rounded-full border border-[rgba(198,203,224,0.9)] text-sm outline-none bg-white focus:ring-2 focus:ring-[rgba(10, 192, 214,0.16)] focus:border-[rgba(10, 192, 214,0.9)]"
                            placeholder="Rua, avenida, etc."
                          />
                        </div>
                        <div className="space-y-1.5">
                          <label className="text-xs font-medium text-[var(--ks-color-text-soft)] uppercase tracking-[0.16em]">
                            Número
                          </label>
                          <input
                            value={form.address_number}
                            onChange={(e) => setForm((p) => ({ ...p, address_number: e.target.value }))}
                            className="w-full px-3.5 py-2.5 rounded-full border border-[rgba(198,203,224,0.9)] text-sm outline-none bg-white focus:ring-2 focus:ring-[rgba(10, 192, 214,0.16)] focus:border-[rgba(10, 192, 214,0.9)]"
                            placeholder="123"
                          />
                        </div>
                        <div className="space-y-1.5">
                          <label className="text-xs font-medium text-[var(--ks-color-text-soft)] uppercase tracking-[0.16em]">
                            Complemento
                          </label>
                          <input
                            value={form.address_complement}
                            onChange={(e) => setForm((p) => ({ ...p, address_complement: e.target.value }))}
                            className="w-full px-3.5 py-2.5 rounded-full border border-[rgba(198,203,224,0.9)] text-sm outline-none bg-white focus:ring-2 focus:ring-[rgba(10, 192, 214,0.16)] focus:border-[rgba(10, 192, 214,0.9)]"
                            placeholder="Apto, sala, etc."
                          />
                        </div>
                        <div className="space-y-1.5">
                          <label className="text-xs font-medium text-[var(--ks-color-text-soft)] uppercase tracking-[0.16em]">
                            Bairro
                          </label>
                          <input
                            value={form.address_neighborhood}
                            onChange={(e) => setForm((p) => ({ ...p, address_neighborhood: e.target.value }))}
                            className="w-full px-3.5 py-2.5 rounded-full border border-[rgba(198,203,224,0.9)] text-sm outline-none bg-white focus:ring-2 focus:ring-[rgba(10, 192, 214,0.16)] focus:border-[rgba(10, 192, 214,0.9)]"
                            placeholder="Bairro"
                          />
                        </div>
                        <div className="space-y-1.5 md:col-span-2">
                          <label className="text-xs font-medium text-[var(--ks-color-text-soft)] uppercase tracking-[0.16em]">
                            Cidade
                          </label>
                          <input
                            value={form.address_city}
                            onChange={(e) => setForm((p) => ({ ...p, address_city: e.target.value, address_ibge: "" }))}
                            className="w-full px-3.5 py-2.5 rounded-full border border-[rgba(198,203,224,0.9)] text-sm outline-none bg-white focus:ring-2 focus:ring-[rgba(10, 192, 214,0.16)] focus:border-[rgba(10, 192, 214,0.9)]"
                            placeholder="Ex: São Paulo"
                          />
                        </div>
                        <div className="space-y-1.5">
                          <label className="text-xs font-medium text-[var(--ks-color-text-soft)] uppercase tracking-[0.16em]">
                            UF
                          </label>
                          <input
                            value={form.address_state}
                            onChange={(e) => setForm((p) => ({ ...p, address_state: e.target.value, address_ibge: "" }))}
                            className="w-full px-3.5 py-2.5 rounded-full border border-[rgba(198,203,224,0.9)] text-sm outline-none bg-white focus:ring-2 focus:ring-[rgba(10, 192, 214,0.16)] focus:border-[rgba(10, 192, 214,0.9)]"
                            placeholder="Ex: SP"
                          />
                        </div>
                      </div>
                    </div>

                    <div className="space-y-4 p-5 rounded-xl bg-[rgba(244, 247, 254,0.5)] border border-[rgba(225,228,240,0.5)]">
                      <div className="flex items-center gap-3 mb-4">
                        <div className="w-10 h-10 rounded-full bg-white flex items-center justify-center shadow-sm border border-[rgba(225,228,240,0.5)]">
                          <User size={20} className="text-[var(--ks-color-primary)]" />
                        </div>
                        <div className="space-y-1">
                          <p className="text-sm font-semibold text-[var(--ks-color-text-primary)]">
                            Segmentação
                          </p>
                          <p className="text-xs text-[var(--ks-color-text-muted)]">
                            Use tags e observações para encontrar clientes certos mais rápido.
                          </p>
                        </div>
                      </div>

                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div className="space-y-1.5">
                          <label className="text-sm font-medium text-[var(--ks-color-text-primary)]">
                            Tags
                          </label>
                          <input
                            value={form.tags}
                            onChange={(e) => setForm((p) => ({ ...p, tags: e.target.value }))}
                            className="w-full px-4 py-3 rounded-xl border border-[rgba(198,203,224,0.9)] text-base outline-none bg-white focus:ring-2 focus:ring-[rgba(10, 192, 214,0.16)] focus:border-[rgba(10, 192, 214,0.9)] transition-colors"
                            placeholder="Ex: VIP, Revenda, Indicação"
                          />
                          <p className="text-xs text-[var(--ks-color-text-soft)] mt-1">
                            Separe por vírgulas. As tags aparecem como filtros rápidos na lista de clientes.
                          </p>
                        </div>

                        <div className="space-y-1.5">
                          <label className="text-sm font-medium text-[var(--ks-color-text-primary)]">
                            Observações internas
                          </label>
                          <textarea
                            value={form.notes}
                            onChange={(e) => setForm((p) => ({ ...p, notes: e.target.value }))}
                            className="w-full px-4 py-3 rounded-xl border border-[rgba(198,203,224,0.9)] text-base outline-none bg-white focus:ring-2 focus:ring-[rgba(10,192,214,0.16)] focus:border-[rgba(10,192,214,0.9)] transition-colors min-h-[100px] resize-vertical"
                            placeholder="Informações que ajudam na próxima negociação, histórico, preferências..."
                          />
                        </div>
                      </div>
                    </div>

                    {camposAtivos.length > 0 ? (
                      <div className="space-y-4 p-5 rounded-xl bg-[rgba(244,247,254,0.5)] border border-[rgba(225,228,240,0.5)]">
                        <div className="flex items-center gap-3 mb-4">
                          <div className="w-10 h-10 rounded-full bg-white flex items-center justify-center shadow-sm border border-[rgba(225,228,240,0.5)]">
                            <ListPlus size={20} className="text-[var(--ks-color-primary)]" />
                          </div>
                          <div className="space-y-1">
                            <p className="text-sm font-semibold text-[var(--ks-color-text-primary)]">Informações extras</p>
                            <p className="text-xs text-[var(--ks-color-text-muted)]">Campos criados pela sua empresa.</p>
                          </div>
                        </div>
                        {camposValores === null ? (
                          <p className="flex items-center gap-2 text-sm text-[var(--ks-color-text-muted)]">
                            <Loader2 size={14} className="animate-spin" /> Carregando…
                          </p>
                        ) : (
                          <CamposDoFormulario
                            definicoes={camposDoCliente}
                            valores={camposValores}
                            erros={camposErros}
                            prefixo="cliente-cp"
                            aoMudar={(chave, valor) => {
                              setCamposValores((atual) => ({ ...(atual ?? {}), [chave]: valor }));
                              setCamposErros((atual) => {
                                if (!atual[chave]) return atual;
                                const resto = { ...atual };
                                delete resto[chave];
                                return resto;
                              });
                            }}
                          />
                        )}
                      </div>
                    ) : null}
                  </div>
                </div>
                </form>
              </div>
            </div>

            {/* Footer com botões */}
            <div className="flex items-center justify-between gap-4 p-6 border-t border-[rgba(225,228,240,0.9)] bg-[rgba(244, 247, 254,0.5)]">
              <p className="text-xs text-[var(--ks-color-text-soft)]">
                Preencha os dados do cliente. Apenas o nome é obrigatório.
              </p>
              <div className="flex items-center gap-3">
                <button
                  type="button"
                  onClick={onClose}
                  className="px-5 py-3 text-sm font-medium text-[var(--ks-color-text-soft)] hover:text-[var(--ks-color-text-primary)] rounded-xl hover:bg-[rgba(244, 247, 254,0.9)] transition-colors"
                >
                  Cancelar
                </button>
                <button
                  type="submit"
                  form="client-form"
                  disabled={saving}
                  className="px-5 py-3 text-sm font-medium text-white bg-[var(--ks-color-primary)] hover:bg-[var(--ks-color-primary-strong)] rounded-xl transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
                >
                  {saving ? (
                    <div className="flex items-center gap-2">
                      <Loader2 size={16} className="animate-spin" />
                      Salvando...
                    </div>
                  ) : client ? (
                    "Atualizar cliente"
                  ) : (
                    "Cadastrar cliente"
                  )}
                </button>
              </div>
            </div>
          </motion.div>
        </div>
      )}
    </AnimatePresence>
  );
}