"use client";

import { useEffect, useState } from "react";
import { getSocket, connectSocket } from "@/lib/socket";
import { getAccessToken } from "@/lib/api";

interface TypingIndicatorProps {
  channelId: string;
  currentUserId?: string;
}

export function TypingIndicator({ channelId, currentUserId }: TypingIndicatorProps) {
  const [typingUsers, setTypingUsers] = useState<Set<string>>(new Set());
  const [typingNames, setTypingNames] = useState<Map<string, string>>(new Map());

  useEffect(() => {
    const token = getAccessToken();
    if (!token) return;

    const socket = connectSocket(token);

    const handleTypingStart = (data: { userId: string; channelId: string; name?: string }) => {
      if (data.channelId !== channelId) return;
      if (data.userId === currentUserId) return;

      setTypingUsers((prev) => {
        const next = new Set(prev);
        next.add(data.userId);
        return next;
      });
      if (data.name) {
        setTypingNames((prev) => {
          const next = new Map(prev);
          next.set(data.userId, data.name!);
          return next;
        });
      }
    };

    const handleTypingStop = (data: { userId: string; channelId: string }) => {
      if (data.channelId !== channelId) return;
      setTypingUsers((prev) => {
        const next = new Set(prev);
        next.delete(data.userId);
        return next;
      });
    };

    socket.on("typing:start", handleTypingStart);
    socket.on("typing:stop", handleTypingStop);

    return () => {
      socket.off("typing:start", handleTypingStart);
      socket.off("typing:stop", handleTypingStop);
    };
  }, [channelId, currentUserId]);

  // Clear typing users when channel changes
  useEffect(() => {
    setTypingUsers(new Set());
  }, [channelId]);

  if (typingUsers.size === 0) return null;

  const names = Array.from(typingUsers).map(
    (uid) => typingNames.get(uid) || "Someone"
  );

  let text: string;
  if (names.length === 1) {
    text = `${names[0]} is typing...`;
  } else if (names.length === 2) {
    text = `${names[0]} and ${names[1]} are typing...`;
  } else {
    text = `${names[0]} and ${names.length - 1} others are typing...`;
  }

  return (
    <div className="px-4 py-1 text-xs text-gray-500 flex items-center gap-2">
      <div className="flex gap-0.5">
        <span className="w-1 h-1 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: "0ms" }} />
        <span className="w-1 h-1 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: "150ms" }} />
        <span className="w-1 h-1 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: "300ms" }} />
      </div>
      <span>{text}</span>
    </div>
  );
}