import { useEffect, useMemo, useRef, useState, useCallback, type TouchEvent } from "react";
import { useNavigate, useParams } from "react-router-dom";
import {
  ArrowLeft, Image as ImageIcon, Mic, Send, Phone, Video, StopCircle,
  Smile, Camera, Eye, X, Pencil, Trash2, Check, Plus, ChevronDown, CornerUpLeft,
  UserX, Tag, MoreVertical, ImagePlus, Copy, Heart, CheckCheck, Play, Palette, Sparkles,
} from "lucide-react";
import { supabase, createRealtimeChannel } from "@/integrations/supabase/client";
import { useAuth } from "@/hooks/useAuth";
import { useUserNickname } from "@/hooks/useUserNickname";
import { useBlockUser } from "@/hooks/useBlockUser";
import Avatar from "@/components/Avatar";
import VerifiedBadge from "@/components/VerifiedBadge";
import ViewOnceImage from "@/components/ViewOnceImage";
import CameraCapture from "@/components/CameraCapture";
import StickerPicker from "@/components/StickerPicker";
import MessageReactions, { ReactionPicker } from "@/components/MessageReactions";
import { useReactionsOptimized } from "@/hooks/useReactionsOptimized";
import { useTyping } from "@/hooks/useTyping";
import { formatLastSeen, isOnline } from "@/hooks/usePresence";
import { toast } from "sonner";
import { cn, fileToPng, profilePath, playNotificationSound } from "@/lib/utils";
import { motion, AnimatePresence } from "framer-motion";
import BrandLogo from "@/components/BrandLogo";
import AudioPlayer from "@/components/AudioPlayer";
import { format, isToday, isYesterday } from "date-fns";
import { ptBR } from "date-fns/locale";
import RGBName from "@/components/RGBName";
import ChatMediaViewer from "@/components/ChatMediaViewer";
import { AttachmentMenuPortal } from "@/components/AttachmentMenuPortal";
import { getMessageReads, markMessagesRead } from "@/lib/chunkedQueries";
import { triggerMessagePushNotification, triggerCallPushNotification } from "@/lib/pushNotifications";

/* ─── types ─────────────────────────────────────────── */
interface Message {
  id: string;
  conversation_id: string;
  sender_id: string;
  type: string;
  content: string | null;
  media_url: string | null;
  sticker_id: string | null;
  duration_seconds: number | null;
  is_view_once?: boolean;
  viewed_at?: string | null;
  viewed_by?: string | null;
  edited_at?: string | null;
  reply_to_message_id?: string;
  created_at: string;
  location_lat?: number;
  location_lng?: number;
}

const EDIT_WINDOW_MS = 5 * 60 * 1000;

const formatDateSeparator = (date: string) => {
  const d = new Date(date);
  if (isToday(d)) return "Hoje";
  if (isYesterday(d)) return "Ontem";
  return format(d, "d 'de' MMMM", { locale: ptBR });
};

/* ─── Componente principal (Instagram Direct Redesign) ─────────────────────── */
export default function Chat() {
  const { id } = useParams();
  const navigate = useNavigate();
  const { user, profile, isAdmin, loading: authLoading } = useAuth();
  const [messages, setMessages] = useState<Message[]>([]);
  const [text, setText] = useState("");
  const [other, setOther] = useState<any>(null);
  const [showStickers, setShowStickers] = useState(false);

  const [recording, setRecording] = useState(false);
  const [viewOnceMode, setViewOnceMode] = useState(false);
  const [showAttachMenu, setShowAttachMenu] = useState(false);
  const [replyTo, setReplyTo] = useState<Message | null>(null);
  const [cameraOpen, setCameraOpen] = useState(false);
  const [showJumpToBottom, setShowJumpToBottom] = useState(false);
  const [actionFor, setActionFor] = useState<Message | null>(null);
  const [editingId, setEditingId] = useState<string | null>(null);
  const [editText, setEditText] = useState("");
  const [pressingId, setPressingId] = useState<string | null>(null);
  const [mediaViewer, setMediaViewer] = useState<{ src: string; type: "image" | "video" } | null>(null);
  const [isLoadingOlder, setIsLoadingOlder] = useState(false);
  const [isLoadingMessages, setIsLoadingMessages] = useState(false);
  const [swipeState, setSwipeState] = useState<{ msgId: string; dx: number } | null>(null);
  const [readMessageIds, setReadMessageIds] = useState<Set<string>>(new Set());
  const [bgImage, setBgImage] = useState<string | null>(null);
  const [bgGradient, setBgGradient] = useState<string | null>(null);
  const [bgBubbleColor, setBgBubbleColor] = useState("rgba(255,255,255,0.08)");
  const [bgBubbleMineColor, setBgBubbleMineColor] = useState("rgba(2,132,199,0.95)");
  const [bgTextColor, setBgTextColor] = useState("#ffffff");
  const [availableBgs, setAvailableBgs] = useState<any[]>([]);
  const [showBgPicker, setShowBgPicker] = useState(false);
  const [showMobileMenu, setShowMobileMenu] = useState(false);
  const [showNicknameInput, setShowNicknameInput] = useState(false);
  const [nicknameInputVal, setNicknameInputVal] = useState("");
  const [heartAnimId, setHeartAnimId] = useState<string | null>(null);

  const [highlightMsgId, setHighlightMsgId] = useState<string | null>(null);
  const [audioPreview, setAudioPreview] = useState<{ blob: Blob; url: string; duration: number } | null>(null);
  const [deliveredIds, setDeliveredIds] = useState<Set<string>>(new Set());
  const [inputFocused, setInputFocused] = useState(false);

  const deliveredTimersRef = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map());
  const lastClickTime = useRef<Map<string, number>>(new Map());
  const recorderRef = useRef<MediaRecorder | null>(null);
  const chunksRef = useRef<Blob[]>([]);
  const startedAtRef = useRef<number>(0);
  const scrollRef = useRef<HTMLDivElement>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const longPressTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
  const attachButtonRef = useRef<HTMLButtonElement>(null);
  const swipeStartXRef = useRef<number>(0);
  const SWIPE_THRESHOLD = 60;
  const initialScrollDone = useRef(false);
  const userScrolledUp = useRef(false);
  const msgsLenRef = useRef(0);

  const otherId = other?.id;
  const { nickname: otherNickname, setNickname: setNicknameForUser } = useUserNickname(otherId);
  const { blockUser } = useBlockUser();

  const messageIds = useMemo(() => messages.map((m) => m.id), [messages]);
  const { getReactions, toggleReaction, reload: reloadReactions } = useReactionsOptimized(messageIds);
  const { isTyping: isOtherTyping, sendTyping } = useTyping(id, other?.id);

  const onlineNow = useMemo(() => isOnline(other?.last_seen), [other?.last_seen]);
  const presenceLabel = useMemo(() => formatLastSeen(other?.last_seen), [other?.last_seen]);

  const messageById = useMemo(() => {
    const map = new Map<string, Message>();
    for (const m of messages) map.set(m.id, m);
    return map;
  }, [messages]);

  // ── Scroll Helpers ──────────────────────────────────────────────────────────
  const scrollToBottom = useCallback((smooth = false) => {
    if (!scrollRef.current) return;
    const el = scrollRef.current;
    if (smooth) {
      el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
    } else {
      el.scrollTop = el.scrollHeight;
    }
  }, []);

  // ── Read Receipts ───────────────────────────────────────────────────────────
  const markVisibleAsRead = useCallback(async () => {
    if (!user || !id || messages.length === 0) return;
    const unread = messages.filter((m) => m.sender_id !== user.id && !readMessageIds.has(m.id));
    if (unread.length === 0) return;

    const unreadIds = unread.map((m) => m.id);
    try {
      await markMessagesRead(id, user.id, unreadIds);
      setReadMessageIds((prev) => {
        const next = new Set(prev);
        for (const mid of unreadIds) next.add(mid);
        return next;
      });
    } catch (e) {
      console.warn("[Chat] Error marking messages read:", e);
    }
  }, [user, id, messages, readMessageIds]);

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

  // ── Mobile Keyboard Avoidance (PWA / iOS / Android visualViewport) ──────────
  useEffect(() => {
    if (typeof window === "undefined") return;
    const vv = window.visualViewport;
    if (!vv) return;

    const updateLayout = () => {
      const keyboardH = Math.max(0, window.innerHeight - vv.height - vv.offsetTop);
      document.documentElement.style.setProperty("--keyboard-height", `${keyboardH}px`);
    };

    vv.addEventListener("resize", updateLayout);
    vv.addEventListener("scroll", updateLayout);
    updateLayout();

    return () => {
      vv.removeEventListener("resize", updateLayout);
      vv.removeEventListener("scroll", updateLayout);
      document.documentElement.style.removeProperty("--keyboard-height");
    };
  }, []);

  // ── Load Conversation & Partner ─────────────────────────────────────────────
  useEffect(() => {
    if (!id || !user) return;
    let isSubscribed = true;

    const loadConv = async () => {
      setIsLoadingMessages(true);
      try {
        const { data: conv } = await supabase
          .from("conversations")
          .select("id, user1_id, user2_id")
          .eq("id", id)
          .single();

        if (conv && isSubscribed) {
          const targetId = conv.user1_id === user.id ? conv.user2_id : conv.user1_id;
          const { data: prof } = await supabase
            .from("profiles")
            .select("id, display_name, username, photo_url, is_verified, last_seen, profile_theme")
            .eq("id", targetId)
            .single();
          if (prof && isSubscribed) setOther(prof);
        }

        // Load background
        const { data: bgData } = await supabase
          .from("conversation_backgrounds")
          .select("*, chat_backgrounds(*)")
          .eq("conversation_id", id)
          .maybeSingle();

        if (bgData && isSubscribed) {
          if (bgData.chat_backgrounds) {
            setBgImage(bgData.chat_backgrounds.image_url || null);
            setBgGradient(bgData.chat_backgrounds.gradient_css || null);
            setBgBubbleColor(bgData.chat_backgrounds.chat_bubble_color || "rgba(255,255,255,0.08)");
            setBgBubbleMineColor(bgData.chat_backgrounds.chat_bubble_mine_color || "rgba(2,132,199,0.95)");
            setBgTextColor(bgData.chat_backgrounds.chat_text_color || "#ffffff");
          } else if (bgData.custom_image_url) {
            setBgImage(bgData.custom_image_url);
            setBgGradient(null);
          } else if (bgData.custom_gradient) {
            setBgGradient(bgData.custom_gradient);
            setBgImage(null);
          }
        }

        // Load initial messages (50)
        const { data: msgList } = await supabase
          .from("messages")
          .select("*")
          .eq("conversation_id", id)
          .order("created_at", { ascending: true })
          .limit(50);

        if (msgList && isSubscribed) {
          setMessages(msgList as Message[]);
          msgsLenRef.current = msgList.length;

          // Fetch reads
          const mids = msgList.map((m) => m.id);
          if (mids.length > 0) {
            const reads = await getMessageReads(mids);
            if (isSubscribed) {
              const readSet = new Set(reads.map((r: any) => r.message_id));
              setReadMessageIds(readSet);
            }
          }
        }
      } catch (err) {
        console.error("[Chat] Error loading conversation:", err);
      } finally {
        if (isSubscribed) setIsLoadingMessages(false);
      }
    };

    loadConv();

    return () => {
      isSubscribed = false;
    };
  }, [id, user]);

  // ── Auto-scroll on initial load ─────────────────────────────────────────────
  useEffect(() => {
    if (!isLoadingMessages && messages.length > 0 && !initialScrollDone.current) {
      scrollToBottom(false);
      initialScrollDone.current = true;
    }
  }, [isLoadingMessages, messages.length, scrollToBottom]);

  // ── Realtime Messages Listener ──────────────────────────────────────────────
  useEffect(() => {
    if (!id || !user) return;
    const channel = createRealtimeChannel(`chat-messages-${id}`);

    channel
      .on("postgres_changes", { event: "INSERT", schema: "public", table: "messages", filter: `conversation_id=eq.${id}` }, (payload) => {
        const newMsg = payload.new as Message;
        setMessages((prev) => {
          if (prev.some((m) => m.id === newMsg.id)) return prev;
          return [...prev, newMsg];
        });

        if (newMsg.sender_id !== user.id) {
          playNotificationSound();
          markVisibleAsRead();
        }

        if (!userScrolledUp.current) {
          setTimeout(() => scrollToBottom(true), 50);
        } else {
          setShowJumpToBottom(true);
        }
      })
      .on("postgres_changes", { event: "UPDATE", schema: "public", table: "messages", filter: `conversation_id=eq.${id}` }, (payload) => {
        const updated = payload.new as Message;
        setMessages((prev) => prev.map((m) => (m.id === updated.id ? updated : m)));
      })
      .on("postgres_changes", { event: "DELETE", schema: "public", table: "messages", filter: `conversation_id=eq.${id}` }, (payload) => {
        const deletedId = (payload.old as any).id;
        setMessages((prev) => prev.filter((m) => m.id !== deletedId));
      })
      .subscribe();

    return () => {
      supabase.removeChannel(channel);
    };
  }, [id, user, scrollToBottom, markVisibleAsRead]);

  // ── Actions ─────────────────────────────────────────────────────────────────
  const send = async (overrides?: Partial<Message>) => {
    if (!user || !id) return;
    const tempId = crypto.randomUUID();
    const payload: any = {
      id: tempId,
      conversation_id: id,
      sender_id: user.id,
      type: "text",
      content: text.trim() || null,
      ...overrides,
    };

    if (replyTo) payload.reply_to_message_id = replyTo.id;
    if (payload.type === "text" && !payload.content) return;

    const inputText = text;
    setText("");
    setReplyTo(null);

    const optimisticMessage: Message = {
      id: tempId,
      conversation_id: id,
      sender_id: user.id,
      type: payload.type,
      content: payload.content || null,
      media_url: payload.media_url || null,
      sticker_id: payload.sticker_id || null,
      duration_seconds: payload.duration_seconds || null,
      is_view_once: payload.is_view_once || false,
      reply_to_message_id: payload.reply_to_message_id || null,
      location_lat: payload.location_lat,
      location_lng: payload.location_lng,
      created_at: new Date().toISOString(),
    };

    setMessages((prev) => [...prev, optimisticMessage]);
    setDeliveredIds((prev) => {
      const n = new Set(prev);
      n.add(tempId);
      return n;
    });

    setTimeout(() => scrollToBottom(true), 50);

    try {
      const { data, error } = await supabase.from("messages").insert(payload).select().single();
      if (error) {
        setMessages((prev) => prev.filter((m) => m.id !== tempId));
        if (payload.type === "text") setText(inputText);
        toast.error(error.message || "Falha ao enviar");
        return;
      }
      if (data) {
        setMessages((prev) => prev.map((m) => (m.id === tempId ? (data as Message) : m)));
        const timer = setTimeout(() => {
          setDeliveredIds((prev) => {
            const n = new Set(prev);
            n.add(data.id);
            return n;
          });
          deliveredTimersRef.current.delete(data.id);
        }, 1200);
        deliveredTimersRef.current.set(data.id, timer);

        if (other?.id) {
          triggerMessagePushNotification({
            targetUserId: other.id,
            senderId: user.id,
            senderName: profile?.display_name || user.email || "Usuário BEKMORA",
            senderPhoto: profile?.photo_url,
            messageContent:
              payload.content || (payload.type === "image" ? "📷 Foto" : payload.type === "audio" ? "🎙️ Áudio" : "Mensagem"),
            conversationId: id,
          });
        }
      }
    } catch (err: any) {
      setMessages((prev) => prev.filter((m) => m.id !== tempId));
      if (payload.type === "text") setText(inputText);
      toast.error(err.message || "Falha ao enviar");
    }
  };

  const sendImage = async (file: File, viewOnce = false) => {
    if (!user || !id) return;
    if (file.size > 10 * 1024 * 1024) return toast.error("Imagem muito grande (máx 10MB)");

    let pngFile: File;
    try {
      pngFile = await fileToPng(file);
    } catch {
      pngFile = file;
    }

    const safeName = pngFile.name.replace(/[^\w.-]+/g, "_");
    const path = `${user.id}/${Date.now()}-${safeName}`;
    const { error: upErr } = await supabase.storage.from("chat-media").upload(path, pngFile, {
      contentType: pngFile.type || "image/png",
      upsert: false,
    });
    if (upErr) return toast.error("Falha no upload da imagem");

    const { data: signed } = await supabase.storage.from("chat-media").createSignedUrl(path, 60 * 60 * 24 * 365);
    if (!signed?.signedUrl) return toast.error("Falha ao gerar URL da imagem");

    await send({
      type: "image",
      media_url: signed.signedUrl,
      content: null,
      is_view_once: viewOnce,
    } as any);
    setViewOnceMode(false);
  };

  const sendVideo = async (file: File) => {
    if (!user || !id) return;
    if (file.size > 100 * 1024 * 1024) return toast.error("Vídeo muito grande (máx 100MB)");

    const safeName = file.name.replace(/[^\w.-]+/g, "_");
    const path = `${user.id}/${Date.now()}-${safeName}`;
    const { error: upErr } = await supabase.storage.from("chat-media").upload(path, file, { upsert: false });
    if (upErr) return toast.error("Falha no upload do vídeo");

    const { data: signed } = await supabase.storage.from("chat-media").createSignedUrl(path, 60 * 60 * 24 * 365);
    if (!signed?.signedUrl) return toast.error("Falha ao gerar URL do vídeo");

    const video = document.createElement("video");
    video.preload = "metadata";
    const dur = await new Promise<number>((resolve) => {
      video.onloadedmetadata = () => resolve(Math.round(video.duration));
      video.onerror = () => resolve(0);
      video.src = signed.signedUrl;
    });

    await send({
      type: "video",
      media_url: signed.signedUrl,
      content: null,
      duration_seconds: dur,
    } as any);
  };

  const sendInstantHeart = () => {
    send({ type: "text", content: "❤️" });
  };

  // ── Voice Recording ─────────────────────────────────────────────────────────
  const startRecording = async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      const rec = new MediaRecorder(stream);
      chunksRef.current = [];
      startedAtRef.current = Date.now();

      rec.ondataavailable = (e) => chunksRef.current.push(e.data);
      rec.onstop = () => {
        stream.getTracks().forEach((t) => t.stop());
        const blob = new Blob(chunksRef.current, { type: "audio/webm" });
        const dur = Math.max(1, Math.round((Date.now() - startedAtRef.current) / 1000));
        const url = URL.createObjectURL(blob);
        setAudioPreview({ blob, url, duration: dur });
      };

      rec.start();
      recorderRef.current = rec;
      setRecording(true);
    } catch {
      toast.error("Microfone bloqueado ou indisponível");
    }
  };

  const stopRecording = () => {
    recorderRef.current?.stop();
    recorderRef.current = null;
    setRecording(false);
  };

  const confirmAudioPreview = async () => {
    if (!audioPreview || !user || !id) return;
    const path = `${user.id}/${Date.now()}-voice.webm`;
    const { error: upErr } = await supabase.storage.from("chat-media").upload(path, audioPreview.blob, {
      contentType: "audio/webm",
    });
    if (upErr) return toast.error("Falha no upload do áudio");

    const { data: signed } = await supabase.storage.from("chat-media").createSignedUrl(path, 60 * 60 * 24 * 365);
    if (!signed?.signedUrl) return toast.error("Falha ao gerar link do áudio");

    await send({
      type: "audio",
      media_url: signed.signedUrl,
      duration_seconds: audioPreview.duration,
      content: null,
    } as any);

    setAudioPreview(null);
  };

  const cancelAudioPreview = () => {
    if (audioPreview?.url) URL.revokeObjectURL(audioPreview.url);
    setAudioPreview(null);
  };

  // ── Call Initiation ─────────────────────────────────────────────────────────
  const startCall = async (type: "audio" | "video") => {
    if (!user || !other) return;
    const { data, error } = await supabase
      .from("calls")
      .insert({ caller_id: user.id, callee_id: other.id, type, status: "ringing" })
      .select()
      .single();

    if (error || !data) return toast.error("Falha ao iniciar chamada");

    triggerCallPushNotification({
      targetUserId: other.id,
      senderId: user.id,
      senderName: profile?.display_name || user.email || "Usuário BEKMORA",
      senderPhoto: profile?.photo_url,
      callId: data.id,
    });

    navigate(`/call/${data.id}`);
  };

  // ── Double Tap to Heart (Instagram Micro-interaction) ────────────────────────
  const handleDoubleTap = (msg: Message) => {
    setHeartAnimId(msg.id);
    toggleReaction(msg.id, "❤️");
    setTimeout(() => setHeartAnimId(null), 900);
  };

  const handleMessageClick = (msg: Message) => {
    const now = Date.now();
    const last = lastClickTime.current.get(msg.id) || 0;
    if (now - last < 300) {
      handleDoubleTap(msg);
      lastClickTime.current.set(msg.id, 0);
    } else {
      lastClickTime.current.set(msg.id, now);
    }
  };

  // ── Long Press & Swipe to Reply ─────────────────────────────────────────────
  const handlePressStart = (msg: Message) => {
    setPressingId(msg.id);
    longPressTimer.current = setTimeout(() => {
      setActionFor(msg);
      setPressingId(null);
      if ("vibrate" in navigator) navigator.vibrate(15);
    }, 420);
  };

  const handlePressEnd = () => {
    setPressingId(null);
    if (longPressTimer.current) {
      clearTimeout(longPressTimer.current);
      longPressTimer.current = null;
    }
  };

  const handleTouchStartForReply = (e: TouchEvent, msg: Message) => {
    swipeStartXRef.current = e.touches[0].clientX;
    handlePressStart(msg);
  };

  const handleTouchMoveForReply = (e: TouchEvent, msg: Message) => {
    const currentX = e.touches[0].clientX;
    const diff = currentX - swipeStartXRef.current;
    if (Math.abs(diff) > 10) handlePressEnd();
    if (diff > 0 && diff < 100) {
      setSwipeState({ msgId: msg.id, dx: diff });
    }
  };

  const handleTouchEndForReply = (msg: Message) => {
    if (swipeState?.msgId === msg.id && swipeState.dx > SWIPE_THRESHOLD) {
      setReplyTo(msg);
      if ("vibrate" in navigator) navigator.vibrate(10);
    }
    setSwipeState(null);
  };

  // ── Wallpapers & Custom Theme ───────────────────────────────────────────────
  const loadAvailableBgs = async () => {
    const { data } = await supabase.from("chat_backgrounds").select("*").order("created_at", { ascending: false });
    if (data) setAvailableBgs(data);
  };

  const setWallpaper = async (bgId: string | null, customUrl?: string) => {
    if (!id || !user) return;
    if (bgId) {
      const bg = availableBgs.find((b: any) => b.id === bgId);
      if (bg) {
        setBgImage(bg.image_url || null);
        setBgGradient(bg.gradient_css || null);
        setBgBubbleColor(bg.chat_bubble_color);
        setBgBubbleMineColor(bg.chat_bubble_mine_color);
        setBgTextColor(bg.chat_text_color);
      }
    } else {
      setBgImage(customUrl || null);
      setBgGradient(null);
    }
    await supabase.from("conversation_backgrounds").upsert(
      { conversation_id: id, background_id: bgId, custom_image_url: customUrl || null, set_by: user.id },
      { onConflict: "conversation_id" }
    );
    setShowBgPicker(false);
  };

  const removeWallpaper = async () => {
    if (!id) return;
    await supabase.from("conversation_backgrounds").delete().eq("conversation_id", id);
    setBgImage(null);
    setBgGradient(null);
    setBgBubbleColor("rgba(255,255,255,0.08)");
    setBgBubbleMineColor("rgba(2,132,199,0.95)");
    setBgTextColor("#ffffff");
    setShowBgPicker(false);
  };

  // ── Edit & Delete ───────────────────────────────────────────────────────────
  const canEdit = (m: Message) =>
    m.sender_id === user?.id && m.type === "text" && Date.now() - new Date(m.created_at).getTime() < EDIT_WINDOW_MS;

  const startEdit = (m: Message) => {
    setEditingId(m.id);
    setEditText(m.content || "");
    setActionFor(null);
  };

  const saveEdit = async () => {
    if (!editingId || !editText.trim()) return;
    const { error } = await supabase
      .from("messages")
      .update({ content: editText.trim(), edited_at: new Date().toISOString() })
      .eq("id", editingId);
    if (error) toast.error("Falha ao salvar edição");
    else toast.success("Mensagem editada");
    setEditingId(null);
    setEditText("");
  };

  const deleteMsg = async (m: Message) => {
    setActionFor(null);
    const { error } = await supabase.from("messages").delete().eq("id", m.id);
    if (error) toast.error("Falha ao apagar mensagem");
    else toast.success("Mensagem apagada");
  };

  return (
    <div className="relative flex h-dvh w-full flex-col bg-[#070C1A] text-slate-100 overflow-hidden select-none">
      <div className="relative flex h-full w-full flex-col">
        <div className="flex h-full flex-col overflow-hidden bg-[#070C1A]">

          {/* ════════════════════════════════════════════════════════════════════
              1. INSTAGRAM DIRECT HEADER
             ════════════════════════════════════════════════════════════════════ */}
          <header className="shrink-0 z-30 bg-slate-950/90 border-b border-white/[0.06] backdrop-blur-2xl px-4 py-2.5 sm:px-6">
            <div className="flex items-center justify-between gap-3">

              {/* Back Button & User Info */}
              <div className="flex items-center gap-2.5 min-w-0">
                <button
                  onClick={() => navigate(-1)}
                  aria-label="Voltar"
                  className="shrink-0 flex items-center justify-center w-9 h-9 rounded-2xl bg-white/[0.04] hover:bg-white/[0.08] active:scale-95 text-slate-300 hover:text-white transition-all"
                >
                  <ArrowLeft className="w-4 h-4" />
                </button>

                {other && (
                  <button
                    onClick={() => navigate(profilePath(other.id, other.username))}
                    className="flex items-center gap-3 min-w-0 text-left group"
                  >
                    {/* Avatar with Live Indicator */}
                    <div className="relative shrink-0">
                      <div
                        className={cn(
                          "rounded-full p-0.5 transition-all",
                          onlineNow ? "bg-gradient-to-tr from-sky-400 to-blue-600" : "bg-white/[0.08]"
                        )}
                      >
                        <Avatar
                          url={other.photo_url}
                          name={other.display_name || other.username}
                          size="sm"
                        />
                      </div>
                      {onlineNow && (
                        <span className="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-emerald-500 ring-2 ring-slate-950 shadow-sm" />
                      )}
                    </div>

                    <div className="min-w-0">
                      <div className="flex items-center gap-1.5 truncate">
                        <RGBName
                          name={otherNickname || other.display_name || other.username || "Usuário"}
                          profile_theme={other.profile_theme}
                          className="text-sm font-bold text-white truncate"
                        />
                        {other.is_verified && <VerifiedBadge size="xxs" />}
                      </div>
                      <p className="text-[11px] font-medium truncate text-slate-400 leading-tight">
                        {isOtherTyping ? (
                          <span className="text-sky-400 font-semibold animate-pulse">digitando...</span>
                        ) : onlineNow ? (
                          <span className="text-emerald-400 font-semibold">Online agora</span>
                        ) : (
                          presenceLabel || `@${other.username || "perfil"}`
                        )}
                      </p>
                    </div>
                  </button>
                )}
              </div>

              {/* Action Buttons: Call, Video, Theme, Options */}
              {other && (
                <div className="flex items-center gap-1.5 shrink-0">
                  <button
                    onClick={() => startCall("audio")}
                    aria-label="Chamada de Voz"
                    className="w-9 h-9 rounded-2xl bg-white/[0.04] hover:bg-white/[0.08] active:scale-95 text-sky-400 flex items-center justify-center transition-all"
                  >
                    <Phone className="w-4 h-4" />
                  </button>
                  <button
                    onClick={() => startCall("video")}
                    aria-label="Chamada de Vídeo"
                    className="w-9 h-9 rounded-2xl bg-white/[0.04] hover:bg-white/[0.08] active:scale-95 text-sky-400 flex items-center justify-center transition-all"
                  >
                    <Video className="w-4 h-4" />
                  </button>
                  <button
                    onClick={() => {
                      loadAvailableBgs();
                      setShowBgPicker(true);
                    }}
                    aria-label="Temas e Fundos"
                    className={cn(
                      "w-9 h-9 rounded-2xl bg-white/[0.04] hover:bg-white/[0.08] active:scale-95 text-slate-300 hover:text-white flex items-center justify-center transition-all",
                      (bgImage || bgGradient) ? "bg-sky-600/20 text-sky-400 border border-sky-500/30" : ""
                    )}
                  >
                    <Palette className="w-4 h-4" />
                  </button>
                  <button
                    onClick={() => setShowMobileMenu(!showMobileMenu)}
                    aria-label="Opções"
                    className="w-9 h-9 rounded-2xl bg-white/[0.04] hover:bg-white/[0.08] active:scale-95 text-slate-300 hover:text-white flex items-center justify-center transition-all"
                  >
                    <MoreVertical className="w-4 h-4" />
                  </button>
                </div>
              )}
            </div>

            {/* Mobile Sheet for Chat Actions */}
            <AnimatePresence>
              {showMobileMenu && (
                <>
                  <motion.div
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    exit={{ opacity: 0 }}
                    className="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm"
                    onClick={() => setShowMobileMenu(false)}
                  />
                  <motion.div
                    initial={{ y: "100%", opacity: 0 }}
                    animate={{ y: 0, opacity: 1 }}
                    exit={{ y: "100%", opacity: 0 }}
                    transition={{ type: "spring", damping: 30, stiffness: 350 }}
                    className="fixed bottom-0 left-0 right-0 z-50 mx-auto rounded-t-3xl p-5 bg-slate-900 border border-white/[0.08] max-w-lg space-y-4"
                  >
                    <div className="w-10 h-1 rounded-full mx-auto bg-white/20" />
                    <p className="text-xs font-bold uppercase tracking-wider text-slate-400">Opções da Conversa</p>

                    <div className="grid grid-cols-4 gap-2">
                      <button
                        onClick={() => {
                          startCall("audio");
                          setShowMobileMenu(false);
                        }}
                        className="flex flex-col items-center gap-1.5 p-3 rounded-2xl bg-white/[0.04] hover:bg-white/[0.08] active:scale-95"
                      >
                        <div className="w-10 h-10 rounded-xl bg-emerald-500/20 text-emerald-400 flex items-center justify-center">
                          <Phone className="w-5 h-5" />
                        </div>
                        <span className="text-[11px] font-semibold text-slate-300">Voz</span>
                      </button>

                      <button
                        onClick={() => {
                          startCall("video");
                          setShowMobileMenu(false);
                        }}
                        className="flex flex-col items-center gap-1.5 p-3 rounded-2xl bg-white/[0.04] hover:bg-white/[0.08] active:scale-95"
                      >
                        <div className="w-10 h-10 rounded-xl bg-sky-500/20 text-sky-400 flex items-center justify-center">
                          <Video className="w-5 h-5" />
                        </div>
                        <span className="text-[11px] font-semibold text-slate-300">Vídeo</span>
                      </button>

                      <button
                        onClick={() => {
                          loadAvailableBgs();
                          setShowBgPicker(true);
                          setShowMobileMenu(false);
                        }}
                        className="flex flex-col items-center gap-1.5 p-3 rounded-2xl bg-white/[0.04] hover:bg-white/[0.08] active:scale-95"
                      >
                        <div className="w-10 h-10 rounded-xl bg-purple-500/20 text-purple-400 flex items-center justify-center">
                          <Palette className="w-5 h-5" />
                        </div>
                        <span className="text-[11px] font-semibold text-slate-300">Tema</span>
                      </button>

                      <button
                        onClick={() => {
                          setNicknameInputVal(otherNickname || "");
                          setShowNicknameInput(true);
                          setShowMobileMenu(false);
                        }}
                        className="flex flex-col items-center gap-1.5 p-3 rounded-2xl bg-white/[0.04] hover:bg-white/[0.08] active:scale-95"
                      >
                        <div className="w-10 h-10 rounded-xl bg-amber-500/20 text-amber-400 flex items-center justify-center">
                          <Tag className="w-5 h-5" />
                        </div>
                        <span className="text-[11px] font-semibold text-slate-300">Apelido</span>
                      </button>
                    </div>

                    <button
                      onClick={() => setShowMobileMenu(false)}
                      className="w-full py-3 rounded-2xl text-xs font-bold text-slate-400 hover:text-white bg-white/[0.04] transition-all"
                    >
                      Fechar
                    </button>
                  </motion.div>
                </>
              )}
            </AnimatePresence>
          </header>

          {/* ════════════════════════════════════════════════════════════════════
              2. MESSAGES STREAM (INSTAGRAM DIRECT BUBBLES)
             ════════════════════════════════════════════════════════════════════ */}
          <div className="relative min-h-0 flex-1 flex flex-col overflow-hidden">

            {/* Custom Chat Wallpaper */}
            {(bgImage || bgGradient) && (
              <div
                aria-hidden
                className="absolute inset-0 z-0 pointer-events-none"
                style={{
                  ...(bgImage
                    ? { backgroundImage: `url(${bgImage})`, backgroundSize: "cover", backgroundPosition: "center" }
                    : { background: bgGradient! }),
                }}
              />
            )}

            {/* Scrollable Message List */}
            <div
              ref={scrollRef}
              className="scrollbar-hide relative z-10 flex-1 overflow-y-auto overscroll-y-contain px-4 pt-4 pb-3 space-y-3"
            >
              {/* Empty state */}
              {messages.length === 0 && !isLoadingMessages && other && (
                <div className="flex flex-col items-center justify-center py-20 gap-3 text-center">
                  <div className="w-20 h-20 rounded-full p-1 bg-gradient-to-tr from-sky-500 to-blue-600 shadow-xl">
                    <div className="w-full h-full rounded-full bg-slate-950 overflow-hidden flex items-center justify-center">
                      <Avatar url={other.photo_url} name={other.display_name || other.username} size="lg" />
                    </div>
                  </div>
                  <div>
                    <RGBName
                      name={otherNickname || other.display_name || other.username || "Usuário"}
                      profile_theme={other.profile_theme}
                      className="text-base font-bold text-white block"
                    />
                    <p className="text-xs text-slate-400 mt-0.5">@{other.username || "bekmora"}</p>
                  </div>
                  <p className="text-[11px] text-slate-500 max-w-xs mt-2">
                    Início da conversa com @{other.username}. Envie uma mensagem ou toque duas vezes para curtir!
                  </p>
                </div>
              )}

              {/* Messages Array */}
              {messages.map((m, idx) => {
                const mine = m.sender_id === user?.id;
                const replyMessage = m.reply_to_message_id ? messageById.get(m.reply_to_message_id) || null : null;
                const isEditing = editingId === m.id;
                const prevMsg = idx > 0 ? messages[idx - 1] : null;
                const nextMsg = idx < messages.length - 1 ? messages[idx + 1] : null;

                const showDateSep =
                  !prevMsg || new Date(prevMsg.created_at).toDateString() !== new Date(m.created_at).toDateString();
                const isLastInGroup =
                  !nextMsg || nextMsg.sender_id !== m.sender_id || new Date(nextMsg.created_at).toDateString() !== new Date(m.created_at).toDateString();

                return (
                  <div key={m.id} data-message-id={m.id} className="relative group">
                    {/* Date Separator */}
                    {showDateSep && (
                      <div className="flex items-center justify-center my-4">
                        <span className="px-3.5 py-1 text-[10px] font-bold uppercase tracking-wider text-slate-400 bg-slate-900/80 rounded-full border border-white/[0.06] backdrop-blur-md">
                          {formatDateSeparator(m.created_at)}
                        </span>
                      </div>
                    )}

                    {/* Message Row */}
                    <motion.div
                      initial={{ opacity: 0, y: 8, scale: 0.98 }}
                      animate={{ opacity: 1, y: 0, scale: 1 }}
                      transition={{ duration: 0.15 }}
                      className={cn("flex items-end gap-2", mine ? "justify-end" : "justify-start")}
                    >
                      {/* Other Avatar on group end */}
                      {!mine && (
                        <div className="w-7 h-7 shrink-0 mb-1">
                          {isLastInGroup ? (
                            <Avatar url={other?.photo_url} name={other?.display_name || other?.username} size="xs" />
                          ) : (
                            <div className="w-7 h-7" />
                          )}
                        </div>
                      )}

                      {/* Bubble Container */}
                      <div className={cn("relative max-w-[82%] sm:max-w-[70%]", m.type === "sticker" && "max-w-none")}>

                        {/* Double-tap Floating Heart Animation */}
                        <AnimatePresence>
                          {heartAnimId === m.id && (
                            <motion.div
                              initial={{ scale: 0, opacity: 0, y: 0 }}
                              animate={{ scale: 1.5, opacity: 1, y: -30 }}
                              exit={{ scale: 0.5, opacity: 0, y: -50 }}
                              transition={{ type: "spring", stiffness: 400, damping: 20 }}
                              className="absolute inset-0 flex items-center justify-center z-30 pointer-events-none"
                            >
                              <Heart className="w-12 h-12 text-rose-500 fill-rose-500 drop-shadow-lg" />
                            </motion.div>
                          )}
                        </AnimatePresence>

                        {/* Bubble Body */}
                        <div
                          onClick={() => handleMessageClick(m)}
                          onPointerDown={() => handlePressStart(m)}
                          onPointerUp={handlePressEnd}
                          onPointerLeave={handlePressEnd}
                          onContextMenu={(e) => {
                            e.preventDefault();
                            setActionFor(m);
                          }}
                          onTouchStart={(e) => handleTouchStartForReply(e, m)}
                          onTouchMove={(e) => handleTouchMoveForReply(e, m)}
                          onTouchEnd={() => {
                            handlePressEnd();
                            handleTouchEndForReply(m);
                          }}
                          className={cn(
                            "relative transition-all select-none overflow-hidden",
                            m.type === "sticker" ? "bg-transparent p-0 shadow-none" : "px-4 py-2.5 rounded-3xl",
                            m.type !== "sticker" && (
                              mine
                                ? (bgGradient || bgImage
                                    ? "text-white shadow-md"
                                    : "bg-gradient-to-tr from-sky-600 to-blue-600 text-white rounded-br-sm shadow-md shadow-sky-600/20")
                                : (bgGradient || bgImage
                                    ? "shadow-md"
                                    : "bg-slate-800/90 text-slate-100 border border-white/[0.06] rounded-bl-sm")
                            ),
                            pressingId === m.id && "scale-95 brightness-90"
                          )}
                          style={{
                            ...(m.type !== "sticker" && (bgGradient || bgImage)
                              ? {
                                  background: mine ? bgBubbleMineColor : bgBubbleColor,
                                  color: bgTextColor,
                                }
                              : {}),
                          }}
                        >
                          {/* Reply Quote Header */}
                          {replyMessage && (
                            <div
                              onClick={() => setHighlightMsgId(replyMessage.id)}
                              className={cn(
                                "mb-2 p-2 rounded-2xl text-xs backdrop-blur-md cursor-pointer border-l-2",
                                mine
                                  ? "bg-black/20 border-white/60 text-white/80"
                                  : "bg-white/10 border-sky-400 text-slate-300"
                              )}
                            >
                              <p className="font-bold text-[10px] uppercase tracking-wider text-sky-300">
                                {replyMessage.sender_id === user?.id ? "Você" : other?.display_name || "Usuário"}
                              </p>
                              <p className="truncate text-[11px] mt-0.5 opacity-80">
                                {replyMessage.type === "text"
                                  ? replyMessage.content
                                  : replyMessage.type === "image"
                                  ? "📷 Foto"
                                  : replyMessage.type === "video"
                                  ? "🎬 Vídeo"
                                  : replyMessage.type === "audio"
                                  ? "🎙️ Áudio"
                                  : "Sticker"}
                              </p>
                            </div>
                          )}

                          {/* TEXT MESSAGE */}
                          {m.type === "text" && !isEditing && (
                            <p className="text-sm leading-relaxed whitespace-pre-wrap break-words">{m.content}</p>
                          )}

                          {/* EDIT INLINE */}
                          {m.type === "text" && isEditing && (
                            <div className="flex items-center gap-2 bg-slate-900/90 rounded-2xl p-2 border border-white/20">
                              <input
                                autoFocus
                                value={editText}
                                onChange={(e) => setEditText(e.target.value)}
                                onKeyDown={(e) => {
                                  if (e.key === "Enter") saveEdit();
                                  if (e.key === "Escape") setEditingId(null);
                                }}
                                className="flex-1 bg-transparent text-xs text-white outline-none"
                              />
                              <button onClick={saveEdit} className="p-1.5 rounded-lg bg-sky-600 text-white">
                                <Check className="w-3.5 h-3.5" />
                              </button>
                              <button onClick={() => setEditingId(null)} className="p-1.5 rounded-lg bg-white/10 text-slate-400">
                                <X className="w-3.5 h-3.5" />
                              </button>
                            </div>
                          )}

                          {/* IMAGE MESSAGE */}
                          {m.type === "image" && m.media_url && (
                            <div className="rounded-2xl overflow-hidden -mx-4 -my-2.5">
                              {m.is_view_once ? (
                                <ViewOnceImage
                                  messageId={m.id}
                                  mediaUrl={m.media_url}
                                  isMine={mine}
                                  isAdmin={isAdmin}
                                  viewedAt={m.viewed_at || null}
                                />
                              ) : (
                                <img
                                  src={m.media_url}
                                  alt="Mídia"
                                  className="max-h-80 w-full object-cover cursor-pointer hover:opacity-95 transition-opacity"
                                  onClick={() => setMediaViewer({ src: m.media_url!, type: "image" })}
                                />
                              )}
                            </div>
                          )}

                          {/* VIDEO MESSAGE */}
                          {m.type === "video" && m.media_url && (
                            <div
                              onClick={() => setMediaViewer({ src: m.media_url!, type: "video" })}
                              className="relative rounded-2xl overflow-hidden cursor-pointer group -mx-4 -my-2.5"
                            >
                              <video
                                src={m.media_url}
                                className="max-h-80 w-full object-cover"
                                preload="metadata"
                                playsInline
                                muted
                              />
                              <div className="absolute inset-0 flex items-center justify-center bg-black/20 group-hover:bg-black/30 transition-all">
                                <div className="w-12 h-12 rounded-full bg-black/60 backdrop-blur-md flex items-center justify-center text-white shadow-xl group-hover:scale-110 transition-transform">
                                  <Play className="w-5 h-5 fill-white ml-0.5" />
                                </div>
                              </div>
                            </div>
                          )}

                          {/* STICKER */}
                          {m.type === "sticker" && m.media_url && (
                            <img
                              src={m.media_url}
                              alt="Sticker"
                              className="w-32 h-32 object-contain drop-shadow-xl select-none"
                            />
                          )}

                          {/* AUDIO MESSAGE */}
                          {m.type === "audio" && m.media_url && (
                            <AudioPlayer url={m.media_url} duration={m.duration_seconds || 0} isMine={mine} />
                          )}

                          {/* Reactions Display */}
                          {m.type !== "sticker" && getReactions(m.id).length > 0 && (
                            <div className="mt-1">
                              <MessageReactions
                                messageId={m.id}
                                reactions={getReactions(m.id)}
                                onChange={() => reloadReactions()}
                                align={mine ? "end" : "start"}
                              />
                            </div>
                          )}

                          {/* Timestamp & Status (Read Receipts) */}
                          {m.type !== "sticker" && (
                            <div className={cn("flex items-center gap-1 mt-1 text-[10px]", mine ? "justify-end text-white/70" : "justify-start text-slate-400")}>
                              <span>
                                {new Date(m.created_at).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
                              </span>
                              {m.edited_at && <span className="opacity-60">· editado</span>}

                              {/* Read Receipts */}
                              {mine && (
                                <span className="ml-0.5">
                                  {readMessageIds.has(m.id) ? (
                                    <CheckCheck className="w-3.5 h-3.5 text-sky-300 stroke-[2.5px]" />
                                  ) : deliveredIds.has(m.id) ? (
                                    <CheckCheck className="w-3.5 h-3.5 text-white/60 stroke-[2px]" />
                                  ) : (
                                    <Check className="w-3.5 h-3.5 text-white/40 stroke-[2px]" />
                                  )}
                                </span>
                              )}
                            </div>
                          )}
                        </div>
                      </div>
                    </motion.div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* ════════════════════════════════════════════════════════════════════
              3. INSTAGRAM DIRECT INPUT CAPSULE
             ════════════════════════════════════════════════════════════════════ */}
          <div className="shrink-0 bg-slate-950/90 border-t border-white/[0.06] backdrop-blur-2xl px-4 py-3 sm:px-6">
            <input
              ref={fileInputRef}
              type="file"
              accept="image/*,video/*"
              className="hidden"
              onChange={(e) => {
                const f = e.target.files?.[0];
                if (f) {
                  f.type.startsWith("video/") ? sendVideo(f) : sendImage(f, viewOnceMode);
                }
                e.currentTarget.value = "";
              }}
            />

            {/* Audio Recording Preview Bar */}
            <AnimatePresence>
              {audioPreview && (
                <motion.div
                  initial={{ opacity: 0, height: 0 }}
                  animate={{ opacity: 1, height: "auto" }}
                  exit={{ opacity: 0, height: 0 }}
                  className="overflow-hidden mb-2.5"
                >
                  <div className="flex items-center gap-2.5 px-4 py-2.5 rounded-2xl bg-sky-600/15 border border-sky-500/25">
                    <div className="w-8 h-8 rounded-full bg-sky-500/20 flex items-center justify-center text-sky-400">
                      <Mic className="w-4 h-4" />
                    </div>
                    <audio src={audioPreview.url} controls className="h-8 flex-1" />
                    <span className="text-xs font-mono font-bold text-sky-300">{audioPreview.duration}s</span>
                    <button
                      onClick={confirmAudioPreview}
                      className="w-8 h-8 rounded-full bg-sky-600 text-white flex items-center justify-center hover:bg-sky-500 shadow-md transition-all"
                    >
                      <Send className="w-4 h-4 ml-0.5" />
                    </button>
                    <button
                      onClick={cancelAudioPreview}
                      className="w-8 h-8 rounded-full bg-white/[0.08] text-slate-400 hover:text-white flex items-center justify-center transition-all"
                    >
                      <X className="w-4 h-4" />
                    </button>
                  </div>
                </motion.div>
              )}
            </AnimatePresence>

            {/* Reply Bar */}
            <AnimatePresence>
              {replyTo && (
                <motion.div
                  initial={{ opacity: 0, height: 0 }}
                  animate={{ opacity: 1, height: "auto" }}
                  exit={{ opacity: 0, height: 0 }}
                  className="overflow-hidden mb-2.5"
                >
                  <div className="flex items-center justify-between px-3.5 py-2 rounded-2xl bg-slate-900 border border-white/[0.08]">
                    <div className="flex items-center gap-2 min-w-0">
                      <CornerUpLeft className="w-4 h-4 text-sky-400 shrink-0" />
                      <div className="min-w-0">
                        <p className="text-[10px] font-bold text-sky-400 uppercase tracking-wider">
                          Respondendo a {replyTo.sender_id === user?.id ? "você" : other?.display_name || "usuário"}
                        </p>
                        <p className="text-xs text-slate-300 truncate">{replyTo.content || "Mídia"}</p>
                      </div>
                    </div>
                    <button onClick={() => setReplyTo(null)} className="p-1 rounded-lg text-slate-400 hover:text-white">
                      <X className="w-4 h-4" />
                    </button>
                  </div>
                </motion.div>
              )}
            </AnimatePresence>

            {/* View Once Indicator */}
            <AnimatePresence>
              {viewOnceMode && (
                <motion.div
                  initial={{ opacity: 0, height: 0 }}
                  animate={{ opacity: 1, height: "auto" }}
                  exit={{ opacity: 0, height: 0 }}
                  className="overflow-hidden mb-2.5"
                >
                  <div className="flex items-center justify-between px-3.5 py-1.5 rounded-2xl bg-amber-500/15 border border-amber-500/30 text-amber-400 text-xs font-bold">
                    <div className="flex items-center gap-1.5">
                      <Eye className="w-4 h-4" />
                      <span>Modo Visualização Única Ativado</span>
                    </div>
                    <button onClick={() => setViewOnceMode(false)}>
                      <X className="w-3.5 h-3.5" />
                    </button>
                  </div>
                </motion.div>
              )}
            </AnimatePresence>

            {/* Sticker Drawer */}
            <AnimatePresence>
              {showStickers && (
                <StickerPicker
                  onSelect={(s) => {
                    setShowStickers(false);
                    send({ type: "sticker", sticker_id: s.id, media_url: s.image_url, content: null });
                  }}
                  onClose={() => setShowStickers(false)}
                />
              )}
            </AnimatePresence>

            {/* Main Capsule Row */}
            <div className="flex items-center gap-2">

              {/* Input Capsule Container */}
              <div
                className={cn(
                  "flex-1 flex items-center gap-2.5 rounded-full bg-slate-900/90 border border-white/[0.08] px-3.5 py-1.5 transition-all shadow-md",
                  inputFocused ? "border-sky-500/50 ring-2 ring-sky-500/20" : ""
                )}
              >
                {/* Plus / Attachment Menu */}
                <button
                  ref={attachButtonRef}
                  onClick={() => setShowAttachMenu((v) => !v)}
                  className="w-8 h-8 rounded-full bg-white/[0.06] hover:bg-white/[0.1] text-sky-400 flex items-center justify-center shrink-0 transition-all active:scale-90"
                >
                  <Plus className="w-4 h-4" />
                </button>
                <AttachmentMenuPortal
                  isOpen={showAttachMenu}
                  onClose={() => setShowAttachMenu(false)}
                  onCamera={() => setCameraOpen(true)}
                  onGallery={() => fileInputRef.current?.click()}
                  onVideo={() => fileInputRef.current?.click()}
                  onViewOnce={() => {
                    setViewOnceMode(true);
                    fileInputRef.current?.click();
                  }}
                  triggerRef={attachButtonRef}
                />

                {/* Stickers / Emoji Button */}
                <button
                  onClick={() => setShowStickers((v) => !v)}
                  className={cn(
                    "w-8 h-8 rounded-full flex items-center justify-center shrink-0 transition-all active:scale-90",
                    showStickers ? "bg-sky-600/20 text-sky-400" : "text-slate-400 hover:text-white"
                  )}
                >
                  <Smile className="w-5 h-5" />
                </button>

                {/* Auto-expanding Input */}
                <textarea
                  rows={1}
                  value={text}
                  placeholder="Mensagem..."
                  className="flex-1 resize-none bg-transparent border-none outline-none text-sm leading-relaxed text-white placeholder:text-slate-500 px-1 py-1 max-h-28"
                  onFocus={() => setInputFocused(true)}
                  onBlur={() => setInputFocused(false)}
                  onChange={(e) => {
                    setText(e.target.value);
                    sendTyping();
                    e.target.style.height = "auto";
                    e.target.style.height = `${Math.min(e.target.scrollHeight, 110)}px`;
                  }}
                  onKeyDown={(e) => {
                    if (e.key === "Enter" && !e.shiftKey) {
                      e.preventDefault();
                      send();
                    }
                  }}
                />

                {/* Right side actions inside capsule when text is empty */}
                {!text.trim() && (
                  <div className="flex items-center gap-1 shrink-0">
                    {/* Voice Recording Button */}
                    <button
                      onClick={recording ? stopRecording : startRecording}
                      className={cn(
                        "w-8 h-8 rounded-full flex items-center justify-center transition-all active:scale-90",
                        recording ? "bg-rose-500 text-white animate-pulse" : "text-slate-400 hover:text-white"
                      )}
                    >
                      {recording ? <StopCircle className="w-4 h-4" /> : <Mic className="w-4 h-4" />}
                    </button>

                    {/* Gallery Button */}
                    <button
                      onClick={() => fileInputRef.current?.click()}
                      className="w-8 h-8 rounded-full flex items-center justify-center text-slate-400 hover:text-white transition-all active:scale-90"
                    >
                      <ImageIcon className="w-4 h-4" />
                    </button>

                    {/* Quick Heart Send (Instagram Love) */}
                    <button
                      onClick={sendInstantHeart}
                      className="w-8 h-8 rounded-full flex items-center justify-center text-rose-500 hover:scale-110 transition-all active:scale-90"
                    >
                      <Heart className="w-4 h-4 fill-rose-500" />
                    </button>
                  </div>
                )}
              </div>

              {/* Bold Send Button when typing */}
              <AnimatePresence>
                {text.trim() && (
                  <motion.button
                    initial={{ scale: 0.8, opacity: 0 }}
                    animate={{ scale: 1, opacity: 1 }}
                    exit={{ scale: 0.8, opacity: 0 }}
                    onClick={() => send()}
                    className="px-4 py-2 rounded-full bg-sky-600 hover:bg-sky-500 text-white text-xs font-bold shadow-md shadow-sky-600/30 transition-all active:scale-95 shrink-0 flex items-center gap-1"
                  >
                    <span>Enviar</span>
                    <Send className="w-3.5 h-3.5 ml-0.5" />
                  </motion.button>
                )}
              </AnimatePresence>
            </div>
          </div>

        </div>
      </div>

      {/* ════════════════════════════════════════════════════════════════════
          4. ACTION SHEET & MODALS
         ════════════════════════════════════════════════════════════════════ */}
      <AnimatePresence>
        {actionFor && (
          <>
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              onClick={() => setActionFor(null)}
              className="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm"
            />
            <motion.div
              initial={{ y: "100%", opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              exit={{ y: "100%", opacity: 0 }}
              transition={{ type: "spring", damping: 30, stiffness: 350 }}
              className="fixed bottom-0 left-0 right-0 z-50 mx-auto rounded-t-3xl p-5 bg-slate-900 border border-white/[0.08] max-w-lg space-y-4"
            >
              <div className="w-10 h-1 rounded-full mx-auto bg-white/20" />

              {/* Reaction Bar */}
              <div className="space-y-1.5">
                <p className="text-[10px] font-bold uppercase tracking-wider text-slate-400">Reagir</p>
                <ReactionPicker
                  messageId={actionFor.id}
                  onClose={() => setActionFor(null)}
                  onReacted={() => {
                    reloadReactions();
                    setActionFor(null);
                  }}
                />
              </div>

              <div className="h-px bg-white/[0.06]" />

              {/* Actions Grid */}
              <div className="grid grid-cols-4 gap-2">
                <button
                  onClick={() => {
                    setReplyTo(actionFor);
                    setActionFor(null);
                  }}
                  className="flex flex-col items-center gap-1.5 p-3 rounded-2xl bg-white/[0.04] hover:bg-white/[0.08]"
                >
                  <div className="w-10 h-10 rounded-xl bg-sky-500/20 text-sky-400 flex items-center justify-center">
                    <CornerUpLeft className="w-5 h-5" />
                  </div>
                  <span className="text-[11px] font-semibold text-slate-300">Responder</span>
                </button>

                {actionFor.type === "text" && actionFor.content && (
                  <button
                    onClick={() => {
                      navigator.clipboard.writeText(actionFor.content || "");
                      toast.success("Mensagem copiada!");
                      setActionFor(null);
                    }}
                    className="flex flex-col items-center gap-1.5 p-3 rounded-2xl bg-white/[0.04] hover:bg-white/[0.08]"
                  >
                    <div className="w-10 h-10 rounded-xl bg-emerald-500/20 text-emerald-400 flex items-center justify-center">
                      <Copy className="w-5 h-5" />
                    </div>
                    <span className="text-[11px] font-semibold text-slate-300">Copiar</span>
                  </button>
                )}

                {canEdit(actionFor) && (
                  <button
                    onClick={() => startEdit(actionFor)}
                    className="flex flex-col items-center gap-1.5 p-3 rounded-2xl bg-white/[0.04] hover:bg-white/[0.08]"
                  >
                    <div className="w-10 h-10 rounded-xl bg-purple-500/20 text-purple-400 flex items-center justify-center">
                      <Pencil className="w-5 h-5" />
                    </div>
                    <span className="text-[11px] font-semibold text-slate-300">Editar</span>
                  </button>
                )}

                {actionFor.sender_id === user?.id && (
                  <button
                    onClick={() => deleteMsg(actionFor)}
                    className="flex flex-col items-center gap-1.5 p-3 rounded-2xl bg-white/[0.04] hover:bg-white/[0.08]"
                  >
                    <div className="w-10 h-10 rounded-xl bg-rose-500/20 text-rose-400 flex items-center justify-center">
                      <Trash2 className="w-5 h-5" />
                    </div>
                    <span className="text-[11px] font-semibold text-slate-300">Apagar</span>
                  </button>
                )}
              </div>

              <button
                onClick={() => setActionFor(null)}
                className="w-full py-3 rounded-2xl text-xs font-bold text-slate-400 hover:text-white bg-white/[0.04] transition-all"
              >
                Cancelar
              </button>
            </motion.div>
          </>
        )}
      </AnimatePresence>

      {/* Nickname Modal */}
      <AnimatePresence>
        {showNicknameInput && (
          <>
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              onClick={() => setShowNicknameInput(false)}
              className="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm"
            />
            <motion.div
              initial={{ y: "100%", opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              exit={{ y: "100%", opacity: 0 }}
              transition={{ type: "spring", damping: 30, stiffness: 350 }}
              className="fixed bottom-0 left-0 right-0 z-50 mx-auto rounded-t-3xl p-5 bg-slate-900 border border-white/[0.08] max-w-lg space-y-4"
            >
              <div className="w-10 h-1 rounded-full mx-auto bg-white/20" />
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-2xl bg-amber-500/20 text-amber-400 flex items-center justify-center">
                  <Tag className="w-5 h-5" />
                </div>
                <div>
                  <p className="text-sm font-bold text-white">Definir Apelido</p>
                  <p className="text-xs text-slate-400">Apenas você verá esse apelido no chat</p>
                </div>
              </div>

              <div className="flex gap-2">
                <input
                  value={nicknameInputVal}
                  onChange={(e) => setNicknameInputVal(e.target.value.slice(0, 40))}
                  placeholder="Novo apelido..."
                  autoFocus
                  className="flex-1 px-4 py-2.5 rounded-2xl bg-white/[0.06] border border-white/[0.08] text-sm text-white outline-none focus:border-sky-500"
                />
                <button
                  onClick={() => {
                    setNicknameForUser(nicknameInputVal.trim() || null);
                    setShowNicknameInput(false);
                    toast.success("Apelido salvo!");
                  }}
                  className="px-5 py-2.5 rounded-2xl bg-sky-600 hover:bg-sky-500 text-white text-xs font-bold transition-all"
                >
                  Salvar
                </button>
              </div>

              {otherNickname && (
                <button
                  onClick={() => {
                    setNicknameForUser(null);
                    setShowNicknameInput(false);
                    toast.success("Apelido removido");
                  }}
                  className="w-full py-2.5 rounded-2xl text-xs font-bold text-rose-400 bg-rose-500/10 hover:bg-rose-500/20 transition-all"
                >
                  Remover Apelido
                </button>
              )}

              <button
                onClick={() => setShowNicknameInput(false)}
                className="w-full py-2.5 rounded-2xl text-xs font-bold text-slate-400 hover:text-white bg-white/[0.04] transition-all"
              >
                Cancelar
              </button>
            </motion.div>
          </>
        )}
      </AnimatePresence>

      {/* Wallpaper Picker Modal */}
      <AnimatePresence>
        {showBgPicker && (
          <>
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              onClick={() => setShowBgPicker(false)}
              className="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm"
            />
            <motion.div
              initial={{ y: "100%", opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              exit={{ y: "100%", opacity: 0 }}
              transition={{ type: "spring", damping: 30, stiffness: 350 }}
              className="fixed bottom-0 left-0 right-0 z-50 mx-auto rounded-t-3xl p-5 bg-slate-900 border border-white/[0.08] max-w-lg space-y-4 max-h-[85vh] overflow-y-auto"
            >
              <div className="w-10 h-1 rounded-full mx-auto bg-white/20" />
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-2xl bg-purple-500/20 text-purple-400 flex items-center justify-center">
                  <Palette className="w-5 h-5" />
                </div>
                <div>
                  <p className="text-sm font-bold text-white">Tema do Chat</p>
                  <p className="text-xs text-slate-400">Personalize cores e imagem de fundo da conversa</p>
                </div>
              </div>

              {/* Gradient Presets */}
              <div className="space-y-2">
                <p className="text-[10px] font-bold uppercase tracking-wider text-slate-400">Gradientes</p>
                <div className="flex flex-wrap gap-2">
                  {[
                    "linear-gradient(135deg, #0284c7 0%, #2563eb 100%)",
                    "linear-gradient(135deg, #059669 0%, #10b981 100%)",
                    "linear-gradient(135deg, #7c3aed 0%, #9333ea 100%)",
                    "linear-gradient(135deg, #e11d48 0%, #f43f5e 100%)",
                    "linear-gradient(135deg, #d97706 0%, #f59e0b 100%)",
                    "linear-gradient(135deg, #0f172a 0%, #1e293b 100%)",
                  ].map((grad, i) => (
                    <button
                      key={i}
                      onClick={() => {
                        setBgGradient(grad);
                        setBgImage(null);
                        if (id && user) {
                          supabase.from("conversation_backgrounds").upsert(
                            { conversation_id: id, background_id: null, custom_gradient: grad, set_by: user.id },
                            { onConflict: "conversation_id" }
                          );
                        }
                        setShowBgPicker(false);
                      }}
                      className="w-11 h-11 rounded-2xl border border-white/10 hover:scale-105 transition-all"
                      style={{ background: grad }}
                    />
                  ))}
                </div>
              </div>

              {/* Reset to Default */}
              <button
                onClick={removeWallpaper}
                className="w-full py-2.5 rounded-2xl text-xs font-bold text-rose-400 bg-rose-500/10 hover:bg-rose-500/20 transition-all"
              >
                Restaurar Tema Padrão
              </button>

              <button
                onClick={() => setShowBgPicker(false)}
                className="w-full py-2.5 rounded-2xl text-xs font-bold text-slate-400 hover:text-white bg-white/[0.04] transition-all"
              >
                Fechar
              </button>
            </motion.div>
          </>
        )}
      </AnimatePresence>

      <CameraCapture
        open={cameraOpen}
        onClose={() => setCameraOpen(false)}
        onCapture={(file) => {
          file.type.startsWith("video/") ? sendVideo(file) : sendImage(file, viewOnceMode);
        }}
      />

      <ChatMediaViewer
        src={mediaViewer?.src || null}
        type={mediaViewer?.type || "image"}
        onClose={() => setMediaViewer(null)}
      />
    </div>
  );
}