"use client";

import { useState, useCallback, useEffect } from "react";
import Link from "next/link";
import { toast } from "sonner";
import {
  User,
  ChevronDown,
  Plus,
  X,
  Send,
  FileText,
  Mail,
  MessageSquare,
  MessageCircle,
  Clock,
  Sparkles,
  Filter,
  CheckCircle2,
  Phone,
  Tag as TagIcon,
  ListFilter,
  Zap,
  Edit3,
  Languages,
} from "lucide-react";

import { Badge } from "@/shared/components/ui/badge";
import { Button } from "@/shared/components/ui/button";
import { Breadcrumb } from "@/shared/components/ui/breadcrumb";
import { Card, CardContent } from "@/shared/components/ui/card";
import { Input } from "@/shared/components/ui/input";
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
} from "@/shared/components/ui/dropdown-menu";
import { formatPhone } from "@/shared/utils/format-phone";
import { formatRelativeTime } from "@/shared/utils/relative-time";
import { getContactEmailHistoryAction } from "../actions/get-contact-email-history-action";
import { updateContactAction } from "../actions/update-contact-action";
import { getContactByIdAction } from "../actions/get-contact-by-id-action";
import { Tabs, TabsList, TabsTrigger } from "@/shared/components/ui/tabs";
import { ContactEmailsTab } from "../components/contact-emails-tab";
import { ContactFormModal } from "../components/contact-form-modal";

type ContactStatus = "ACTIVE" | "UNSUBSCRIBED" | "BOUNCED";
type MarketingChannel = "EMAIL" | "SMS";

interface ContactListInfo {
  id: string;
  name: string;
  marketingChannel?: MarketingChannel;
}

interface ContactDetailViewProps {
  contact: {
    id: string;
    email: string;
    name: string | null;
    lastName?: string | null;
    phone: string | null;
    bairro?: string | null;
    cidade?: string | null;
    uf?: string | null;
    idioma?: string | null;
    empresa?: string | null;
    cep?: string | null;
    codigoEstabelecimento?: string | null;
    nomeEstabelecimento?: string | null;
    cdate?: string | null;
    tags: string[];
    source: string;
    status: ContactStatus;
    createdAt: string;
    updatedAt: string;
    listMemberships: { list: ContactListInfo }[];
  };
  availableLists?: { id: string; name: string; marketingChannel?: string }[];
}

interface NoteItem {
  id: string;
  content: string;
  createdAt: string;
}

interface FileItem {
  id: string;
  name: string;
  size: string;
  uploadedAt: string;
}

interface ActivityItem {
  id: string;
  type: "CREATE" | "EMAIL_SENT" | "EMAIL_OPENED" | "EMAIL_CLICKED" | "STATUS_CHANGE";
  title: string;
  description: string;
  date: string;
  colorClass: string;
  icon: typeof Mail;
}

const STATUS_LABEL: Record<ContactStatus, string> = {
  ACTIVE: "Ativo",
  UNSUBSCRIBED: "Descadastrado",
  BOUNCED: "Inválido",
};

const SOURCE_LABEL: Record<string, string> = {
  MANUAL: "Manual",
  IMPORT: "Importação",
  API: "API",
};

export function ContactDetailView({
  contact: initialContact,
  availableLists = [],
}: ContactDetailViewProps) {
  const [contact, setContact] = useState(initialContact);
  const [showEmptyFields, setShowEmptyFields] = useState(false);
  type AccordionSection = "details" | "tags" | "lists" | "automations" | null;
  const [openAccordion, setOpenAccordion] = useState<AccordionSection>("details");

  function toggleAccordion(section: AccordionSection) {
    setOpenAccordion((prev) => (prev === section ? null : section));
  }
  const [tagInput, setTagInput] = useState("");
  const [isSavingTag, setIsSavingTag] = useState(false);
  const [activeBottomTab, setActiveBottomTab] = useState<"notes" | "files" | "emails" | "sms" | "whatsapp">("emails");
  const [emailCount, setEmailCount] = useState(0);
  const [isEditModalOpen, setIsEditModalOpen] = useState(false);

  // Notas e arquivos com estado local
  const [notes, setNotes] = useState<NoteItem[]>([]);
  const [newNoteText, setNewNoteText] = useState("");
  const [isAddingNote, setIsAddingNote] = useState(false);
  const [files] = useState<FileItem[]>([]);

  // Filtro de atividades da sidebar
  const [activityFilter, setActivityFilter] = useState<string>("ALL");
  const [emailActivities, setEmailActivities] = useState<ActivityItem[]>([]);

  // Busca histórico de e-mails para compor as atividades recentes
  const fetchActivities = useCallback(() => {
    getContactEmailHistoryAction(contact.id, 1, 50)
      .then((data) => {
        const items: ActivityItem[] = [];

        // Atividade de criação
        items.push({
          id: `create-${contact.id}`,
          type: "CREATE",
          title: "Cadastro efetuado",
          description: `Contato cadastrado via ${SOURCE_LABEL[contact.source] || contact.source}`,
          date: contact.createdAt,
          colorClass: "bg-amber-500 text-white",
          icon: Sparkles,
        });

        // Transforma logs de email em atividades
        if (Array.isArray(data?.items)) {
          data.items.forEach((email: { logId: string; subject: string; sentAt: string; opened: boolean; openedAt: string | null; clickCount: number }) => {
            items.push({
              id: `send-${email.logId}`,
              type: "EMAIL_SENT",
              title: "Campanha enviada",
              description: `Assunto: ${email.subject}`,
              date: email.sentAt,
              colorClass: "bg-blue-600 text-white",
              icon: Send,
            });

            if (email.opened && email.openedAt) {
              items.push({
                id: `open-${email.logId}`,
                type: "EMAIL_OPENED",
                title: "E-mail aberto",
                description: `Abriu a mensagem "${email.subject}"`,
                date: email.openedAt,
                colorClass: "bg-emerald-600 text-white",
                icon: CheckCircle2,
              });
            }
          });
        }

        // Ordena por data decrescente
        items.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
        setEmailActivities(items);
      })
      .catch(() => {
        // Fallback de atividade caso falhe o fetch
        setEmailActivities([
          {
            id: `create-${contact.id}`,
            type: "CREATE",
            title: "Cadastro efetuado",
            description: `Contato cadastrado via ${SOURCE_LABEL[contact.source] || contact.source}`,
            date: contact.createdAt,
            colorClass: "bg-amber-500 text-white",
            icon: Sparkles,
          },
        ]);
      });
  }, [contact.id, contact.createdAt, contact.source]);

  useEffect(() => {
    fetchActivities();
  }, [fetchActivities]);

  // Atualiza as tags do contato via API
  async function updateTags(newTags: string[]) {
    setIsSavingTag(true);
    try {
      await updateContactAction(contact.id, { tags: newTags });
      setContact((prev) => ({ ...prev, tags: newTags }));
      toast.success("Tags atualizadas.");
    } catch {
      toast.error("Não foi possível atualizar as tags.");
    } finally {
      setIsSavingTag(false);
    }
  }

  function handleAddTag() {
    const trimmed = tagInput.trim();
    if (!trimmed) return;
    if (contact.tags.includes(trimmed)) {
      setTagInput("");
      return;
    }
    const newTags = [...contact.tags, trimmed];
    setTagInput("");
    updateTags(newTags);
  }

  function handleRemoveTag(tagToRemove: string) {
    const newTags = contact.tags.filter((t) => t !== tagToRemove);
    updateTags(newTags);
  }

  function handleAddNote() {
    const trimmed = newNoteText.trim();
    if (!trimmed) return;
    const noteItem: NoteItem = {
      id: `note-${Date.now()}`,
      content: trimmed,
      createdAt: new Date().toISOString(),
    };
    setNotes((prev) => [noteItem, ...prev]);
    setNewNoteText("");
    setIsAddingNote(false);
    toast.success("Nota adicionada.");
  }

  // Separação das listas do contato por canal de marketing
  const emailLists = contact.listMemberships.filter(
    (m) => !m.list.marketingChannel || m.list.marketingChannel === "EMAIL"
  );
  const smsLists = contact.listMemberships.filter((m) => m.list.marketingChannel === "SMS");

  // Filtra atividades exibidas na sidebar
  const filteredActivities = emailActivities.filter((act) => {
    if (activityFilter === "EMAILS") return act.type === "EMAIL_SENT" || act.type === "EMAIL_OPENED" || act.type === "EMAIL_CLICKED";
    if (activityFilter === "SYSTEM") return act.type === "CREATE" || act.type === "STATUS_CHANGE";
    return true;
  });

  const creationDateFormatted = new Date(contact.createdAt).toLocaleDateString("pt-BR", {
    day: "2-digit",
    month: "2-digit",
    year: "numeric",
  });

  const updatedDateFormatted = new Date(contact.updatedAt).toLocaleDateString("pt-BR", {
    day: "2-digit",
    month: "2-digit",
    year: "numeric",
  });

  return (
    <div className="w-full max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-6">
      {/* 1. TOP BAR */}
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-border pb-4">
        <div className="flex items-center gap-3 flex-wrap">
          <Breadcrumb
            items={[
              { label: "Contatos", href: "/contacts" },
              { label: contact.name || contact.email },
            ]}
          />
        </div>

        <div className="flex items-center gap-2">
          <DropdownMenu>
            <DropdownMenuTrigger render={<Button variant="default" className="font-semibold text-xs h-9 px-4 rounded-lg flex items-center gap-2" />}>
              <span>Envie uma campanha</span>
              <ChevronDown className="w-4 h-4" />
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-52">
              <DropdownMenuItem>
                <Link href="/campaigns/new" className="flex items-center gap-2 w-full">
                  <Send className="w-4 h-4 text-primary" />
                  <span>Nova campanha de e-mail</span>
                </Link>
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Link href={`/campaigns/new?contactId=${contact.id}`} className="flex items-center gap-2 w-full">
                  <Mail className="w-4 h-4 text-primary" />
                  <span>Enviar mensagem direta</span>
                </Link>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>

      {/* 2. ABA DE NAVEGAÇÃO */}
      <div className="border-b border-border flex gap-6 text-sm font-medium text-muted-foreground">
        <button className="border-b-2 border-primary text-primary font-semibold py-2 px-1 text-sm inline-flex items-center gap-2 focus:outline-none">
          <User className="w-4 h-4" />
          <span>Informação pessoal</span>
        </button>
      </div>

      {/* 3. HEADER DO PERFIL */}
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 bg-card border border-border rounded-xl p-5 shadow-xs">
        <div className="flex items-center gap-4">
          <div className="w-14 h-14 rounded-full bg-primary/10 border border-primary/20 text-primary flex items-center justify-center font-bold text-xl uppercase shrink-0">
            {contact.name ? contact.name.slice(0, 2) : <User className="w-7 h-7" />}
          </div>
          <div className="space-y-0.5">
            <h2 className="text-xl font-bold text-foreground tracking-tight">{contact.name || "Sem nome cadastrado"}</h2>
            <p className="text-sm">
              <a href={`mailto:${contact.email}`} className="text-primary hover:underline font-medium">
                {contact.email}
              </a>
            </p>
            <p className="text-xs text-muted-foreground flex items-center gap-1.5 pt-0.5">
              <Phone className="w-3.5 h-3.5" />
              <span>{formatPhone(contact.phone) || "Telefone não informado"}</span>
            </p>
          </div>
        </div>

        <div className="sm:text-right shrink-0">
          <span className="text-xs text-muted-foreground font-medium block">
            Criação: {creationDateFormatted}
          </span>
          <Badge
            variant="outline"
            className={`mt-2 text-[11px] font-semibold px-2.5 py-0.5 uppercase tracking-wider ${
              contact.status === "ACTIVE"
                ? "bg-emerald-50 text-emerald-700 border-emerald-200"
                : contact.status === "UNSUBSCRIBED"
                ? "bg-zinc-100 text-zinc-700 border-zinc-200"
                : "bg-rose-50 text-rose-700 border-rose-200"
            }`}
          >
            {STATUS_LABEL[contact.status]}
          </Badge>
        </div>
      </div>

      {/* ESTRUTURA PRINCIPAL EM DUAS COLUNAS */}
      <div className="flex flex-col lg:flex-row gap-6 items-start">
        {/* COLUNA ESQUERDA (FLEX-1): DADOS DO CONTATO */}
        <div className="flex-1 w-full space-y-6">

          {/* 4. SEÇÃO "SOBRE [NOME]" */}
          <Card className="bg-card border border-border rounded-xl shadow-xs overflow-hidden">
            <CardContent className="p-6 space-y-6">

              {/* 4.1 Header do Card */}
              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 border-b border-border/60 pb-4">
                <h3 className="font-semibold text-foreground text-base">
                  Sobre {contact.name || contact.email}
                </h3>
                <div className="flex items-center gap-3 text-xs font-medium">
                  {showEmptyFields ? (
                    <button
                      type="button"
                      onClick={() => setShowEmptyFields(false)}
                      className="border border-primary text-primary bg-primary/5 hover:bg-primary/10 px-2.5 py-1 rounded-md font-semibold transition-colors focus:outline-none"
                    >
                      Ocultar campos vazios
                    </button>
                  ) : (
                    <button
                      type="button"
                      onClick={() => setShowEmptyFields(true)}
                      className="text-primary hover:underline font-semibold focus:outline-none transition-colors"
                    >
                      Mostrar campos vazios
                    </button>
                  )}
                  <span className="text-muted-foreground/40">|</span>
                  <button
                    type="button"
                    onClick={() => setIsEditModalOpen(true)}
                    className="text-primary hover:underline font-semibold focus:outline-none flex items-center gap-1 transition-colors"
                  >
                    <span>Gerenciar campos</span>
                  </button>
                </div>
              </div>

              {/* Accordion 1: Detalhes gerais */}
              <div className="border border-border/80 rounded-lg overflow-hidden">
                <button
                  type="button"
                  onClick={() => toggleAccordion("details")}
                  className="w-full flex items-center justify-between p-4 bg-muted/30 hover:bg-muted/50 transition-colors text-left focus:outline-none cursor-pointer"
                >
                  <span className="font-semibold text-sm text-foreground flex items-center gap-2">
                    <User className="w-4 h-4 text-muted-foreground" />
                    Detalhes gerais
                  </span>
                  <ChevronDown
                    className={`w-4 h-4 text-muted-foreground transition-transform duration-200 ${
                      openAccordion === "details" ? "rotate-180" : ""
                    }`}
                  />
                </button>

                {openAccordion === "details" && (
                  <div className="p-4 space-y-1 bg-card border-t border-border/60 text-xs sm:text-sm">
                    {[
                      { key: "name", label: "Nome", value: contact.name },
                      { key: "lastName", label: "Sobrenome", value: contact.lastName },
                      { key: "email", label: "Email", value: contact.email, required: true, isEmail: true },
                      { key: "phone", label: "Telefone", value: formatPhone(contact.phone) },
                      { key: "bairro", label: "Bairro", value: contact.bairro },
                      { key: "cidade", label: "Cidade", value: contact.cidade },
                      { key: "uf", label: "UF", value: contact.uf },
                      { key: "idioma", label: "Idioma de preferência", value: contact.idioma, icon: Languages },
                      { key: "empresa", label: "Empresa", value: contact.empresa },
                      { key: "cep", label: "CEP", value: contact.cep },
                      { key: "codigoEstabelecimento", label: "Código do Estabelecimento", value: contact.codigoEstabelecimento },
                      { key: "nomeEstabelecimento", label: "Nome do Estabelecimento", value: contact.nomeEstabelecimento },
                      { key: "cdate", label: "CDATE", value: contact.cdate },
                    ].map((field) => {
                      const hasValue = Boolean(field.value && String(field.value).trim().length > 0);
                      if (!hasValue && !showEmptyFields) return null;

                      return (
                        <div
                          key={field.key}
                          className="flex flex-col sm:flex-row sm:items-center justify-between py-2 border-b border-border/40 last:border-b-0 gap-1"
                        >
                          <span className="text-muted-foreground font-medium sm:w-56 shrink-0 flex items-center gap-1">
                            {field.label}
                            {field.required && <span className="text-rose-500 font-bold ml-0.5">*</span>}
                            {field.icon && <field.icon className="w-3.5 h-3.5 text-muted-foreground ml-1 inline-block" />}
                          </span>

                          {hasValue ? (
                            field.isEmail ? (
                              <a href={`mailto:${field.value}`} className="text-primary hover:underline font-medium">
                                {field.value}
                              </a>
                            ) : (
                              <span className="text-foreground font-medium">{field.value}</span>
                            )
                          ) : (
                            <button
                              type="button"
                              onClick={() => setIsEditModalOpen(true)}
                              className="text-muted-foreground/70 hover:text-primary transition-colors text-left font-normal italic focus:outline-none cursor-pointer"
                            >
                              Clique para adicionar
                            </button>
                          )}
                        </div>
                      );
                    })}
                  </div>
                )}
              </div>

              {/* Accordion 2: Tags */}
              <div className="border border-border/80 rounded-lg overflow-hidden">
                <button
                  type="button"
                  onClick={() => toggleAccordion("tags")}
                  className="w-full flex items-center justify-between p-4 bg-muted/30 hover:bg-muted/50 transition-colors text-left focus:outline-none cursor-pointer"
                >
                  <span className="font-semibold text-sm text-foreground flex items-center gap-2">
                    <TagIcon className="w-4 h-4 text-muted-foreground" />
                    Tags
                  </span>
                  <ChevronDown
                    className={`w-4 h-4 text-muted-foreground transition-transform duration-200 ${
                      openAccordion === "tags" ? "rotate-180" : ""
                    }`}
                  />
                </button>

                {openAccordion === "tags" && (
                  <div className="p-4 space-y-3 bg-card border-t border-border/60 text-xs sm:text-sm">
                    <div className="flex flex-wrap items-center gap-2">
                      {contact.tags.length > 0 ? (
                        contact.tags.map((tag) => (
                          <Badge
                            key={tag}
                            className="bg-primary text-primary-foreground text-xs px-2.5 py-1 rounded-md flex items-center gap-1.5 font-medium"
                          >
                            <span>{tag}</span>
                            <button
                              type="button"
                              onClick={() => handleRemoveTag(tag)}
                              disabled={isSavingTag}
                              className="hover:opacity-80 focus:outline-none cursor-pointer"
                              title="Remover tag"
                            >
                              <X className="w-3.5 h-3.5" />
                            </button>
                          </Badge>
                        ))
                      ) : (
                        <span className="text-xs text-muted-foreground italic">Nenhuma tag atribuída.</span>
                      )}
                    </div>

                    <div className="flex items-center gap-2 max-w-sm pt-1">
                      <Input
                        type="text"
                        placeholder="Digite tag..."
                        value={tagInput}
                        onChange={(e) => setTagInput(e.target.value)}
                        onKeyDown={(e) => {
                          if (e.key === "Enter") {
                            e.preventDefault();
                            handleAddTag();
                          }
                        }}
                        className="h-8 text-xs"
                        disabled={isSavingTag}
                      />
                      <Button
                        type="button"
                        size="sm"
                        variant="outline"
                        onClick={handleAddTag}
                        disabled={isSavingTag || !tagInput.trim()}
                        className="h-8 px-3 text-xs"
                      >
                        <Plus className="w-3.5 h-3.5 mr-1" />
                        Adicionar
                      </Button>
                    </div>
                  </div>
                )}
              </div>

              {/* Accordion 3: Listas */}
              <div className="border border-border/80 rounded-lg overflow-hidden">
                <button
                  type="button"
                  onClick={() => toggleAccordion("lists")}
                  className="w-full flex items-center justify-between p-4 bg-muted/30 hover:bg-muted/50 transition-colors text-left focus:outline-none cursor-pointer"
                >
                  <span className="font-semibold text-sm text-foreground flex items-center gap-2">
                    <ListFilter className="w-4 h-4 text-muted-foreground" />
                    Listas
                  </span>
                  <ChevronDown
                    className={`w-4 h-4 text-muted-foreground transition-transform duration-200 ${
                      openAccordion === "lists" ? "rotate-180" : ""
                    }`}
                  />
                </button>

                {openAccordion === "lists" && (
                  <div className="p-4 space-y-4 bg-card border-t border-border/60 text-xs sm:text-sm">
                    {/* Subseção Email */}
                    <div className="space-y-2">
                      <div className="flex items-center justify-between">
                        <span className="text-xs font-semibold text-foreground uppercase tracking-wider">Email</span>
                        <DropdownMenu>
                          <DropdownMenuTrigger className="text-xs text-primary hover:underline font-medium flex items-center gap-1 focus:outline-none cursor-pointer">
                            <span>Status/Código fonte</span>
                            <ChevronDown className="w-3.5 h-3.5" />
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end" className="w-48">
                            <DropdownMenuItem onClick={() => setIsEditModalOpen(true)}>
                              Gerenciar listas de e-mail
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </div>

                      {emailLists.length > 0 ? (
                        <div className="space-y-2">
                          {emailLists.map((m) => (
                            <div
                              key={m.list.id}
                              className="flex items-center justify-between p-2.5 rounded-lg border border-border/60 bg-muted/20"
                            >
                              <span className="text-xs font-medium text-foreground">{m.list.name}</span>
                              <Badge variant="outline" className="bg-emerald-50 text-emerald-700 border-emerald-200 text-[10px] font-bold">
                                Ativo
                              </Badge>
                            </div>
                          ))}
                        </div>
                      ) : (
                        <p className="text-xs text-muted-foreground italic">Este contato não está em nenhuma lista de e-mail.</p>
                      )}
                    </div>

                    {/* Subseção SMS */}
                    <div className="space-y-2 pt-2 border-t border-border/40">
                      <span className="text-xs font-semibold text-foreground uppercase tracking-wider block">SMS</span>
                      {smsLists.length > 0 ? (
                        <div className="space-y-2">
                          {smsLists.map((m) => (
                            <div
                              key={m.list.id}
                              className="flex items-center justify-between p-2.5 rounded-lg border border-border/60 bg-muted/20"
                            >
                              <span className="text-xs font-medium text-foreground">{m.list.name}</span>
                              <Badge variant="outline" className="bg-emerald-50 text-emerald-700 border-emerald-200 text-[10px] font-bold">
                                Ativo
                              </Badge>
                            </div>
                          ))}
                        </div>
                      ) : (
                        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 p-3 rounded-lg border border-border/40 bg-muted/10 text-xs">
                          <span className="text-muted-foreground">Este contato ainda não foi adicionado às suas listas de SMS.</span>
                          <Button
                            size="sm"
                            variant="outline"
                            onClick={() => setIsEditModalOpen(true)}
                            className="h-7 px-2.5 text-xs text-primary border-primary/30 hover:bg-primary/5 self-start sm:self-auto"
                          >
                            <Plus className="w-3 h-3 mr-1" />
                            Adicionar
                          </Button>
                        </div>
                      )}
                    </div>
                  </div>
                )}
              </div>

              {/* Accordion 4: Automações */}
              <div className="border border-border/80 rounded-lg overflow-hidden">
                <button
                  type="button"
                  onClick={() => toggleAccordion("automations")}
                  className="w-full flex items-center justify-between p-4 bg-muted/30 hover:bg-muted/50 transition-colors text-left focus:outline-none cursor-pointer"
                >
                  <span className="font-semibold text-sm text-foreground flex items-center gap-2">
                    <Zap className="w-4 h-4 text-muted-foreground" />
                    Automações
                  </span>
                  <ChevronDown
                    className={`w-4 h-4 text-muted-foreground transition-transform duration-200 ${
                      openAccordion === "automations" ? "rotate-180" : ""
                    }`}
                  />
                </button>

                {openAccordion === "automations" && (
                  <div className="p-4 space-y-2 bg-card border-t border-border/60 text-xs sm:text-sm">
                    <div className="flex items-center justify-between">
                      <span className="text-xs text-muted-foreground italic">Nenhuma automação ativa vinculada a este contato.</span>
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => toast.info("Funcionalidade de automação em breve.")}
                        className="h-7 px-2.5 text-xs text-primary border-primary/30 hover:bg-primary/5"
                      >
                        <Plus className="w-3 h-3 mr-1" />
                        Adicionar
                      </Button>
                    </div>
                  </div>
                )}
              </div>

            </CardContent>
          </Card>

          {/* 5. ABAS INFERIORES */}
          <Tabs value={activeBottomTab} onValueChange={(v) => setActiveBottomTab(v as typeof activeBottomTab)} className="space-y-4 w-full">
            {/* Nav de abas com o link de ação alinhado à direita */}
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-border/80">
              <TabsList variant="line" className="overflow-x-auto border-b-0">
                <TabsTrigger value="notes" className="flex items-center gap-2">
                  <FileText className="w-3.5 h-3.5" />
                  <span>Notas ({notes.length})</span>
                </TabsTrigger>

                <TabsTrigger value="files" className="flex items-center gap-2">
                  <FileText className="w-3.5 h-3.5" />
                  <span>Arquivos ({files.length})</span>
                </TabsTrigger>

                <TabsTrigger value="emails" className="flex items-center gap-2">
                  <Mail className="w-3.5 h-3.5" />
                  <span>Emails ({emailCount})</span>
                </TabsTrigger>

                <TabsTrigger value="sms" className="flex items-center gap-2">
                  <MessageSquare className="w-3.5 h-3.5" />
                  <span>SMS (0)</span>
                </TabsTrigger>

                <TabsTrigger value="whatsapp" className="flex items-center gap-2">
                  <MessageCircle className="w-3.5 h-3.5" />
                  <span>WhatsApp (0)</span>
                </TabsTrigger>
              </TabsList>

              <div className="pb-2 sm:pb-0 shrink-0">
                {activeBottomTab === "emails" && (
                  <Link
                    href={`/campaigns/new?contactId=${contact.id}`}
                    className="text-[#635BFF] hover:underline text-xs font-semibold flex items-center gap-1"
                  >
                    <span>Enviar um email</span>
                  </Link>
                )}
                {activeBottomTab === "notes" && (
                  <button
                    onClick={() => setIsAddingNote(true)}
                    className="text-[#635BFF] hover:underline text-xs font-semibold flex items-center gap-1 cursor-pointer"
                  >
                    <Plus className="w-3.5 h-3.5" />
                    <span>Adicione uma nota</span>
                  </button>
                )}
                {activeBottomTab === "files" && (
                  <button
                    onClick={() => toast.info("Anexo de arquivos em breve.")}
                    className="text-[#635BFF] hover:underline text-xs font-semibold flex items-center gap-1 cursor-pointer"
                  >
                    <Plus className="w-3.5 h-3.5" />
                    <span>Adicionar arquivo</span>
                  </button>
                )}
              </div>
            </div>

            {/* Conteúdo da Aba Ativa */}
            <div className="bg-card border border-border rounded-xl p-5 shadow-xs">
              {activeBottomTab === "emails" && (
                <ContactEmailsTab contactId={contact.id} onTotalChange={setEmailCount} />
              )}

              {activeBottomTab === "notes" && (
                <div className="space-y-4">
                  {isAddingNote && (
                    <div className="space-y-2 p-3 border border-border rounded-lg bg-muted/20">
                      <textarea
                        value={newNoteText}
                        onChange={(e) => setNewNoteText(e.target.value)}
                        placeholder="Escreva a nota sobre este contato..."
                        className="w-full text-xs p-2 rounded-md border border-border bg-card focus:outline-none focus:ring-1 focus:ring-primary min-h-[80px]"
                      />
                      <div className="flex justify-end gap-2">
                        <Button size="sm" variant="ghost" onClick={() => setIsAddingNote(false)} className="h-7 text-xs">
                          Cancelar
                        </Button>
                        <Button size="sm" onClick={handleAddNote} disabled={!newNoteText.trim()} className="h-7 text-xs">
                          Salvar Nota
                        </Button>
                      </div>
                    </div>
                  )}

                  {notes.length > 0 ? (
                    <div className="space-y-3">
                      {notes.map((note) => (
                        <div key={note.id} className="p-3 border border-border/80 rounded-lg bg-muted/10 space-y-1">
                          <p className="text-xs text-foreground whitespace-pre-wrap">{note.content}</p>
                          <span className="text-[10px] text-muted-foreground block">{formatRelativeTime(note.createdAt)}</span>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <div className="py-8 text-center space-y-2">
                      <FileText className="w-8 h-8 text-muted-foreground mx-auto opacity-40" />
                      <p className="text-xs font-medium text-muted-foreground">Nenhuma nota cadastrada para este contato.</p>
                      {!isAddingNote && (
                        <Button size="sm" variant="outline" onClick={() => setIsAddingNote(true)} className="h-8 text-xs">
                          <Plus className="w-3.5 h-3.5 mr-1" />
                          Criar primeira nota
                        </Button>
                      )}
                    </div>
                  )}
                </div>
              )}

              {activeBottomTab === "files" && (
                <div className="py-8 text-center space-y-2">
                  <FileText className="w-8 h-8 text-muted-foreground mx-auto opacity-40" />
                  <p className="text-xs font-medium text-muted-foreground">Nenhum arquivo anexado a este contato.</p>
                </div>
              )}

              {activeBottomTab === "sms" && (
                <div className="py-8 text-center space-y-2">
                  <MessageSquare className="w-8 h-8 text-muted-foreground mx-auto opacity-40" />
                  <p className="text-xs font-medium text-muted-foreground">Nenhuma mensagem SMS enviada para este contato.</p>
                </div>
              )}

              {activeBottomTab === "whatsapp" && (
                <div className="py-8 text-center space-y-2">
                  <MessageCircle className="w-8 h-8 text-muted-foreground mx-auto opacity-40" />
                  <p className="text-xs font-medium text-muted-foreground">Nenhuma mensagem WhatsApp enviada para este contato.</p>
                </div>
              )}
            </div>
          </Tabs>

        </div>

        {/* 6. SIDEBAR — ATIVIDADES RECENTES (largura fixa ~340px) */}
        <div className="w-full lg:w-[340px] shrink-0 space-y-4">
          <Card className="bg-card border border-border rounded-xl shadow-xs overflow-hidden">
            <CardContent className="p-5 space-y-4">
              <div className="flex items-center justify-between border-b border-border/60 pb-3">
                <h3 className="font-bold text-foreground text-sm flex items-center gap-2">
                  <Clock className="w-4 h-4 text-primary" />
                  Atividades recentes
                </h3>

                <DropdownMenu>
                  <DropdownMenuTrigger className="text-xs text-primary hover:underline font-medium flex items-center gap-1 focus:outline-none cursor-pointer">
                    <Filter className="w-3 h-3" />
                    <span>
                      {activityFilter === "ALL"
                        ? "Todas as atividades"
                        : activityFilter === "EMAILS"
                        ? "E-mails"
                        : "Sistema"}
                    </span>
                    <ChevronDown className="w-3 h-3" />
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end" className="w-44">
                    <DropdownMenuItem onClick={() => setActivityFilter("ALL")}>Todas as atividades</DropdownMenuItem>
                    <DropdownMenuItem onClick={() => setActivityFilter("EMAILS")}>E-mails</DropdownMenuItem>
                    <DropdownMenuItem onClick={() => setActivityFilter("SYSTEM")}>Sistema</DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </div>

              {filteredActivities.length > 0 ? (
                <div className="space-y-4 relative before:absolute before:left-3.5 before:top-3 before:bottom-3 before:w-px before:bg-border/80">
                  {filteredActivities.map((act) => {
                    const IconComponent = act.icon;
                    return (
                      <div key={act.id} className="relative flex items-start gap-3 text-xs">
                        <div
                          className={`w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold shrink-0 z-10 ${act.colorClass}`}
                        >
                          <IconComponent className="w-3.5 h-3.5" />
                        </div>
                        <div className="flex-1 space-y-1 pt-0.5">
                          <p className="font-semibold text-foreground leading-snug">{act.title}</p>
                          <p className="text-muted-foreground leading-normal">{act.description}</p>
                          <div className="flex items-center justify-between pt-1">
                            <span className="text-[11px] text-muted-foreground">{formatRelativeTime(act.date)}</span>
                            <button
                              type="button"
                              onClick={() => toast.info("Adicionar comentário à atividade em breve.")}
                              className="text-primary hover:underline text-[11px] font-medium"
                            >
                              Comentário
                            </button>
                          </div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              ) : (
                <div className="py-6 text-center text-xs text-muted-foreground italic">
                  Nenhuma atividade registrada no período.
                </div>
              )}
            </CardContent>
          </Card>
        </div>
      </div>

      {/* Modal de gerenciamento/edição dos campos do contato */}
      <ContactFormModal
        open={isEditModalOpen}
        onOpenChange={setIsEditModalOpen}
        lists={availableLists}
        initialContact={{
          id: contact.id,
          email: contact.email,
          name: contact.name,
          lastName: contact.lastName,
          phone: contact.phone,
          bairro: contact.bairro,
          cidade: contact.cidade,
          uf: contact.uf,
          idioma: contact.idioma,
          empresa: contact.empresa,
          cep: contact.cep,
          codigoEstabelecimento: contact.codigoEstabelecimento,
          nomeEstabelecimento: contact.nomeEstabelecimento,
          cdate: contact.cdate,
          tags: contact.tags,
          listIds: contact.listMemberships.map((m) => m.list.id),
        }}
        onSaved={() => {
          // Recarrega os dados do contato
          getContactByIdAction(contact.id)
            .then((data) => {
              if (data?.contact) {
                setContact({
                  ...data.contact,
                  createdAt: new Date(data.contact.createdAt).toISOString(),
                  updatedAt: new Date(data.contact.updatedAt).toISOString(),
                });
              }
            })
            .catch(() => {});
        }}
      />
    </div>
  );
}