siftlode/frontend/src/components/ChatDock.tsx

import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useQueryClient } from "@tanstack/react-query";
import { ChevronDown, ChevronUp, X } from "lucide-react";
import { closeChat, initDock, notifyIncoming, toggleMinimize, useDockChats, type DockChat } from "../lib/chatDock";
import { useUnlocked } from "../lib/messaging";
import { onMessage } from "../lib/messagesSocket";
import * as e2ee from "../lib/e2ee";
import Avatar from "./Avatar";
import ChatThread from "./ChatThread";

// The Messenger-style floating chat dock: open conversations live here, bottom-right, across
// page navigation (state persisted per user). Always mounted (for human users) so it also owns
// the app-wide live-message subscription and restores this device's unlock state on load.
export default function ChatDock({ meId }: { meId: number }) {
  const qc = useQueryClient();
  const chats = useDockChats();
  const unlocked = useUnlocked();

  // Restore the per-device unlocked key and the persisted dock windows once, app-wide.
  useEffect(() => {
    initDock(meId);
    e2ee.loadFromDevice(meId);
  }, [meId]);

  // Live delivery: refresh the conversation list, unread badge, and the affected thread; and
  // for an INCOMING message, open or flash that partner's dock window.
  useEffect(
    () =>
      onMessage(({ message: m, from }) => {
        qc.invalidateQueries({ queryKey: ["conversations"] });
        qc.invalidateQueries({ queryKey: ["message-unread"] });
        const partnerId = m.sender_id === meId ? m.recipient_id : m.sender_id;
        qc.invalidateQueries({ queryKey: ["thread", partnerId] });
        // Auto-open/flash only for messages from someone else (not my own echo) and only for
        // real user conversations.
        if (m.kind === "user" && m.sender_id !== meId && from) {
          notifyIncoming({ id: from.id, name: from.name, avatar_url: from.avatar_url });
        }
      }),
    [qc, meId]
  );

  if (chats.length === 0) return null;
  return (
    <div className="fixed bottom-0 right-0 z-40 flex flex-row-reverse items-end gap-3 p-4 pointer-events-none">
      {chats.map((c) => (
        <ChatWindow key={c.partnerId} chat={c} meId={meId} unlocked={unlocked} />
      ))}
    </div>
  );
}

function ChatWindow({ chat, meId, unlocked }: { chat: DockChat; meId: number; unlocked: boolean }) {
  const { t } = useTranslation();
  const [flashing, setFlashing] = useState(false);

  // One-shot attention flash whenever a new message bumps the counter.
  useEffect(() => {
    if (chat.flash <= 0) return;
    setFlashing(true);
    const id = setTimeout(() => setFlashing(false), 800);
    return () => clearTimeout(id);
  }, [chat.flash]);

  return (
    <div
      className={`pointer-events-auto w-80 max-w-[calc(100vw-2rem)] glass rounded-2xl shadow-2xl flex flex-col overflow-hidden transition-all duration-300 ${
        flashing ? "ring-2 ring-accent" : "ring-0"
      }`}
    >
      <div className="flex items-center gap-2 px-3 py-2 border-b border-border bg-card/50">
        <button
          onClick={() => toggleMinimize(chat.partnerId)}
          className="flex items-center gap-2 min-w-0 flex-1 text-left"
          title={chat.minimized ? t("messages.expand") : t("messages.minimize")}
        >
          <Avatar src={chat.avatar} fallback={chat.name} className="w-7 h-7 rounded-full shrink-0 text-xs" />
          <span className="font-semibold text-sm truncate">{chat.name}</span>
        </button>
        <button
          onClick={() => toggleMinimize(chat.partnerId)}
          className="shrink-0 p-1 rounded-md text-muted hover:text-fg hover:bg-bg transition"
          aria-label={chat.minimized ? t("messages.expand") : t("messages.minimize")}
        >
          {chat.minimized ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
        </button>
        <button
          onClick={() => closeChat(chat.partnerId)}
          className="shrink-0 p-1 rounded-md text-muted hover:text-fg hover:bg-bg transition"
          aria-label={t("messages.close")}
        >
          <X className="w-4 h-4" />
        </button>
      </div>
      {!chat.minimized && (
        <div className="flex flex-col h-96">
          <ChatThread meId={meId} partnerId={chat.partnerId} isSystem={false} unlocked={unlocked} />
        </div>
      )}
    </div>
  );
}