vexplor_dev/frontend/components/messenger/ChatPanel.tsx

"use client";

import React, { useEffect, useRef, useState } from "react";
import { MessageSquare, Pencil, Check, X, ChevronsDown } from "lucide-react";
import { useMessages, useMarkAsRead, useUpdateRoom } from "@/hooks/useMessenger";
import { useAuth } from "@/hooks/useAuth";
import { useMessengerContext } from "@/contexts/MessengerContext";
import { useMessengerSocket } from "@/hooks/useMessengerSocket";
import { MessageItem } from "./MessageItem";
import { MessageInput } from "./MessageInput";
import type { Room } from "@/hooks/useMessenger";

interface ChatPanelProps {
  room: Room | null;
}

export function ChatPanel({ room }: ChatPanelProps) {
  const { user } = useAuth();
  const { selectedRoomId } = useMessengerContext();
  const { data: messages } = useMessages(selectedRoomId);
  const markAsRead = useMarkAsRead();
  const updateRoom = useUpdateRoom();
  const { emitTypingStart, emitTypingStop, typingUsers } = useMessengerSocket();
  const scrollRef = useRef<HTMLDivElement>(null);
  const [isAtBottom, setIsAtBottom] = useState(true);
  const [scrollReady, setScrollReady] = useState(false);
  const [isEditingName, setIsEditingName] = useState(false);
  const [editName, setEditName] = useState("");
  const editInputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (selectedRoomId) {
      markAsRead.mutate(selectedRoomId);
    }
  }, [selectedRoomId, messages?.length]);

  const lastMessageId = messages?.[messages.length - 1]?.id;

  // Hide messages until scrolled to bottom (prevents visible jump on room open)
  useEffect(() => {
    setScrollReady(false);
  }, [selectedRoomId]);

  // Scroll to bottom when messages load or room changes
  // Two-pass: immediate rAF + 600ms delayed (for async image loads)
  useEffect(() => {
    requestAnimationFrame(() => {
      const el = scrollRef.current;
      if (el) {
        el.scrollTop = el.scrollHeight;
        setScrollReady(true);
      }
    });
    const t = setTimeout(() => {
      const el = scrollRef.current;
      if (el) el.scrollTop = el.scrollHeight;
    }, 600);
    return () => clearTimeout(t);
  }, [lastMessageId, selectedRoomId]);

  // Re-attach scroll listener whenever room changes (scrollRef mounts after room is set)
  useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;
    const onScroll = () => {
      setIsAtBottom(el.scrollHeight - el.scrollTop - el.clientHeight < 60);
    };
    el.addEventListener("scroll", onScroll);
    return () => el.removeEventListener("scroll", onScroll);
  }, [room?.id]);

  if (!room) {
    return (
      <div className="flex-1 flex flex-col items-center justify-center text-muted-foreground gap-2">
        <MessageSquare className="h-10 w-10" />
        <p className="text-sm">대화를 선택하세요</p>
      </div>
    );
  }

  const roomTyping = selectedRoomId ? typingUsers.get(selectedRoomId) : undefined;

  // First message in a time group (shows avatar + name)
  const isFirstInGroup = (idx: number) => {
    if (idx === 0) return true;
    const prev = messages![idx - 1];
    const curr = messages![idx];
    if (prev.senderId !== curr.senderId || curr.isDeleted || prev.isDeleted) return true;
    const gap = new Date(curr.createdAt).getTime() - new Date(prev.createdAt).getTime();
    return gap > 5 * 60 * 1000;
  };

  const isLastInGroup = (idx: number) => {
    if (!messages) return true;
    if (idx === messages.length - 1) return true;
    const curr = messages[idx];
    const next = messages[idx + 1];
    if (curr.senderId !== next.senderId || next.isDeleted || curr.isDeleted) return true;
    // Gap > 5 minutes → new time group
    const gap = new Date(next.createdAt).getTime() - new Date(curr.createdAt).getTime();
    return gap > 5 * 60 * 1000;
  };

  // Date separator helper
  const shouldShowDate = (idx: number) => {
    if (idx === 0) return true;
    const prev = new Date(messages![idx - 1].createdAt).toDateString();
    const curr = new Date(messages![idx].createdAt).toDateString();
    return prev !== curr;
  };

  // Compute display name based on room type
  const displayName = (() => {
    if (room.type === "dm") {
      const other = room.participants.find((p) => p.userId !== user?.userId);
      return other?.userName ?? room.name;
    }
    if (room.name) return room.name;
    const others = room.participants.filter((p) => p.userId !== user?.userId);
    if (others.length <= 2) {
      return others.map((p) => p.userName).join(", ");
    }
    return `${others[0].userName}, ${others[1].userName} 외 ${others.length - 2}명`;
  })();

  return (
    <div className="flex-1 flex flex-col min-w-0 min-h-0 overflow-hidden relative">
      {/* Header */}
      <div className="border-b px-4 py-2 flex items-center gap-2">
        {isEditingName ? (
          <form
            className="flex items-center gap-1 flex-1 min-w-0"
            onSubmit={(e) => {
              e.preventDefault();
              const trimmed = editName.trim();
              if (trimmed && trimmed !== room.name) {
                updateRoom.mutate({ roomId: room.id, name: trimmed });
              }
              setIsEditingName(false);
            }}
          >
            <input
              ref={editInputRef}
              value={editName}
              onChange={(e) => setEditName(e.target.value)}
              className="font-semibold text-sm bg-transparent border-b border-primary outline-none flex-1 min-w-0"
              autoFocus
            />
            <button type="submit" className="p-0.5 hover:bg-muted rounded">
              <Check className="h-3.5 w-3.5 text-primary" />
            </button>
            <button type="button" onClick={() => setIsEditingName(false)} className="p-0.5 hover:bg-muted rounded">
              <X className="h-3.5 w-3.5 text-muted-foreground" />
            </button>
          </form>
        ) : (
          <>
            <h3 className="font-semibold text-sm truncate">{displayName}</h3>
            <button
              onClick={() => { setEditName(room.name); setIsEditingName(true); }}
              className="p-0.5 hover:bg-muted rounded shrink-0"
            >
              <Pencil className="h-3.5 w-3.5 text-muted-foreground" />
            </button>
            <span className="text-xs text-muted-foreground">
              {room.participants.length}명
            </span>
          </>
        )}
      </div>

      {/* Messages */}
      <div ref={scrollRef} className={`flex-1 min-h-0 overflow-y-auto relative${scrollReady ? "" : " invisible"}`}>
        <div className="pt-2">
          {messages?.map((msg, idx) => (
            <div key={msg.id}>
              {shouldShowDate(idx) && (
                <div className="flex items-center gap-2 px-4 py-2">
                  <div className="flex-1 h-px bg-border" />
                  <span className="text-[10px] text-muted-foreground">
                    {new Date(msg.createdAt).toLocaleDateString("ko-KR", {
                      year: "numeric",
                      month: "long",
                      day: "numeric",
                      weekday: "short",
                    })}
                  </span>
                  <div className="flex-1 h-px bg-border" />
                </div>
              )}
              <MessageItem
                message={msg}
                isOwn={msg.senderId === user?.userId}
                showAvatar={isFirstInGroup(idx)}
                isLastInGroup={isLastInGroup(idx)}
              />
            </div>
          ))}
          <div className="px-4 h-5 flex items-center text-xs text-muted-foreground">
            {roomTyping && roomTyping.length > 0 ? `${roomTyping.join(", ")}님이 입력 중...` : ""}
          </div>
        </div>
      </div>

      {!isAtBottom && (
        <button
          onClick={() => { const el = scrollRef.current; if (el) el.scrollTop = el.scrollHeight; }}
          className="absolute bottom-14 left-1/2 -translate-x-1/2 z-10 flex items-center gap-1 bg-primary text-primary-foreground text-xs px-3 py-1.5 rounded-full shadow-md hover:bg-primary/90"
        >
          <ChevronsDown className="h-3.5 w-3.5" />
          최신 메시지
        </button>
      )}

      {/* Input */}
      <MessageInput
        roomId={room.id}
        onTypingStart={() => emitTypingStart(room.id)}
        onTypingStop={() => emitTypingStop(room.id)}
      />
    </div>
  );
}