/* eslint jsx-a11y/click-events-have-key-events: warn */

/* eslint jsx-a11y/no-static-element-interactions: warn */
import { useAbly, useChannel } from 'ably/react';
import { useRouter } from 'next/navigation';
import { useEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom';

import { useStores } from '@/app/(root)/AppProviders';
import ImageWithFallback from '@/components/image/ImageWithFallback';
import { Tooltip } from '@/components/tooltip/Tooltip';
import { ProjectMetadataSchema, ProjectStore } from '@/state/projectStore';

type ActiveUser = {
  clientId: string;
  data: {
    uid?: string;
    handle?: string;
    avatar_image_url?: string;
  };
};

type Props = {
  project: ProjectStore;
};

export const WorkspacePresenceIndicator = ({ project }: Props) => {
  const { session } = useStores();
  const [activeUsers, setActiveUsers] = useState<ActiveUser[]>([]);
  const [presenceContainer, setPresenceContainer] =
    useState<HTMLElement | null>(null);
  const [showDropdown, setShowDropdown] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);
  const channelName = `suno-collab-workspace:${project.userSelectedProjectId}`;
  const router = useRouter();
  const ablyClient = useAbly();
  const { channel } = useChannel(channelName);

  // Find the presence container in the DOM
  useEffect(() => {
    const findContainer = () => {
      const container = document.querySelector(
        '[data-presence-container]'
      ) as HTMLElement;
      if (container) {
        setPresenceContainer(container);
        return true; // Container found
      }
      return false; // Container not found
    };

    // Try to find immediately
    if (findContainer()) {
      return; // Container found, no need to poll
    }

    // If not found, keep searching with a reasonable interval
    const interval = setInterval(() => {
      if (findContainer()) {
        clearInterval(interval); // Stop polling once found
      }
    }, 100); // Check every 100ms

    // Cleanup interval after a reasonable timeout (5 seconds)
    const timeout = setTimeout(() => {
      clearInterval(interval);
      console.warn('Presence container not found after 5 seconds');
    }, 5000);

    return () => {
      clearInterval(interval);
      clearTimeout(timeout);
    };
  }, []);

  useEffect(() => {
    if (
      !channel ||
      !(project.projectsById[project.currentProjectId] as ProjectMetadataSchema)
        ?.shared
    )
      return;

    const setupPresence = async () => {
      // Get current presence set
      try {
        const members = await channel.presence.get();
        setActiveUsers(members as unknown as ActiveUser[]);
      } catch (error) {
        console.error('Error getting presence members:', error);
      }

      // Enter presence
      try {
        await channel.presence.enter({
          uid: String(session.user?.id),
          handle: session.user?.handle,
          avatar_image_url: session.user?.avatar_image_url,
        });
      } catch (error) {
        console.error('Error entering presence:', error);
      }
      // Subscribe to presence events
      channel.presence.subscribe('enter', (member) => {
        setActiveUsers((prev) => {
          // Don't add if already present or if the user is the current user
          if (
            prev.find((user) => user.clientId === member.clientId) ||
            member.clientId === ablyClient.auth.clientId
          ) {
            return prev;
          }
          return [...prev, member as ActiveUser];
        });
      });

      channel.presence.subscribe('leave', (member) => {
        setActiveUsers((prev) =>
          prev.filter((user) => user.clientId !== member.clientId)
        );
      });

      channel.presence.subscribe('update', (member) => {
        setActiveUsers((prev) =>
          prev.map((user) =>
            user.clientId === member.clientId ? (member as ActiveUser) : user
          )
        );
      });
    };

    setupPresence();

    // Cleanup subscriptions
    return () => {
      if (channel) {
        channel.presence.unsubscribe();
        channel.presence.leave();
      }
    };
  }, [
    channel,
    (project.projectsById[project.currentProjectId] as ProjectMetadataSchema)
      ?.shared,
    project.userSelectedProjectId,
    session.user?.id,
    session.user?.handle,
    session.user?.avatar_image_url,
    ablyClient.auth.clientId,
  ]);

  // Close dropdown when clicking outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (
        dropdownRef.current &&
        !dropdownRef.current.contains(event.target as Node)
      ) {
        setShowDropdown(false);
      }
    };

    if (showDropdown) {
      document.addEventListener('mousedown', handleClickOutside);
    }

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [showDropdown]);

  // Don't render if project not shared or no container
  if (
    !(project.projectsById[project.currentProjectId] as ProjectMetadataSchema)
      ?.shared ||
    !presenceContainer
  ) {
    return null;
  }

  // Don't render if no active users (but still return null to avoid portal issues)
  if (activeUsers.length === 0) {
    return null;
  }

  // Limit users shown
  const maxUsers = 1;
  const displayUsers = activeUsers.slice(0, maxUsers);

  const handleUserClick = (user: ActiveUser) => {
    if (user.data.handle) {
      router.push(`/@${user.data.handle}`);
    }
  };

  const handleDropdownToggle = () => {
    setShowDropdown(!showDropdown);
  };

  const handleDropdownUserClick = (user: ActiveUser) => {
    if (user.data.handle) {
      router.push(`/@${user.data.handle}`);
      setShowDropdown(false);
    }
  };

  const presenceContent = (
    <div className='ml-2 flex items-center gap-1'>
      {displayUsers.map((user, _) => (
        <div key={user.clientId} className='group relative'>
          <Tooltip label={user.data.handle || 'Anonymous user'}>
            <div
              className='cursor-pointer transition-transform hover:scale-105'
              onClick={() => handleUserClick(user)}
            >
              {user.data.avatar_image_url ? (
                <ImageWithFallback
                  src={user.data.avatar_image_url}
                  alt={user.data.handle || 'User avatar'}
                  className='h-6 w-6 rounded-full border border-border-primary'
                  fallbackSrc='https://cdn-o.suno.com/auras/Aura-01.png'
                />
              ) : (
                <div className='flex h-6 w-6 items-center justify-center rounded-full border border-border-primary bg-secondary'>
                  <span className='text-xs font-medium text-foreground-primary'>
                    {(user.data.handle || 'A')[0].toUpperCase()}
                  </span>
                </div>
              )}
              {/* Online indicator */}
              <div className='absolute -right-0.5 -bottom-0.5 h-2.5 w-2.5 rounded-full border border-background-primary bg-accent-green-on-primary'></div>
            </div>
          </Tooltip>
        </div>
      ))}
      {activeUsers.length > maxUsers && (
        <div className='relative' ref={dropdownRef}>
          <button
            onClick={handleDropdownToggle}
            className='flex h-6 w-6 cursor-pointer items-center justify-center rounded-full border border-border-primary text-xs font-medium text-foreground-secondary transition-colors hover:bg-secondary/80'
            title={`${activeUsers.length - maxUsers} more users`}
          >
            +{activeUsers.length - maxUsers}
          </button>

          {/* Dropdown */}
          {showDropdown && (
            <div className='absolute top-full right-0 z-20 mt-2 min-w-[200px] rounded-lg border border-border-primary bg-background-secondary p-2 shadow-lg'>
              <div className='mb-2 px-1 text-xs font-medium text-foreground-secondary'>
                All online users ({activeUsers.length})
              </div>
              {activeUsers.map((user) => (
                <div
                  key={user.clientId}
                  className='flex cursor-pointer items-center gap-2 rounded px-2 py-1 transition-colors hover:bg-secondary/20'
                  onClick={() => handleDropdownUserClick(user)}
                >
                  {user.data.avatar_image_url ? (
                    <ImageWithFallback
                      src={user.data.avatar_image_url}
                      alt={user.data.handle || 'User avatar'}
                      className='h-5 w-5 rounded-full border border-border-primary'
                      fallbackSrc='https://cdn-o.suno.com/auras/Aura-01.png'
                    />
                  ) : (
                    <div className='flex h-5 w-5 items-center justify-center rounded-full border border-border-primary bg-secondary'>
                      <span className='text-xs font-medium text-foreground-primary'>
                        {(user.data.handle || 'A')[0].toUpperCase()}
                      </span>
                    </div>
                  )}
                  <span className='truncate text-sm text-foreground-primary'>
                    {user.data.handle || 'Anonymous user'}
                  </span>
                </div>
              ))}
              <div className='absolute right-2 bottom-full h-0 w-0 border-r-4 border-b-4 border-l-4 border-transparent border-b-background-secondary'></div>
            </div>
          )}
        </div>
      )}
    </div>
  );

  return createPortal(presenceContent, presenceContainer);
};