vexplor_dev/frontend/components/messenger/ChatPanel.tsx

"use client";

import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
import { MessageSquare, Pencil, Check, X } 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 { MessageInputHandle } from "./MessageInput";
import type { Room } from "@/hooks/useMessenger";

interface ChatPanelProps {
  room: Room | null;
  messageInputRef?: React.RefObject<MessageInputHandle | null>;
  onCaptureClick?: () => void;
}

export function ChatPanel({ room, messageInputRef, onCaptureClick }: 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 [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;

  useLayoutEffect(() => {
    const el = scrollRef.current;
    if (el) el.scrollTop = el.scrollHeight;
  }, [lastMessageId]);

  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">
      {/* 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">
        <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>

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