"use client";

import React, { useEffect, useRef } from "react";
import { usePresenceStore } from "@/hooks/usePresenceStore";
import { Badge } from "@/components/ui/badge";
import { Users } from "lucide-react";

export const PresenceIndicator = () => {
  const { presenceData, fetchPresenceData, updatePresence } =
    usePresenceStore();
  const mounted = useRef(false);

  useEffect(() => {
    if (mounted.current) return;
    mounted.current = true;

    const sync = async () => {
      await updatePresence(window.location.pathname);
      await fetchPresenceData();
    };

    // Initial sequence
    sync();

    // Heartbeat: Send our status every 45s (TTL is 60s)
    const heartbeatInterval = setInterval(() => {
      updatePresence(window.location.pathname);
    }, 45000);

    // Polling: Get others' status every 30s
    const pollInterval = setInterval(() => {
      fetchPresenceData();
    }, 30000);

    return () => {
      clearInterval(heartbeatInterval);
      clearInterval(pollInterval);
      mounted.current = false;
    };
  }, [fetchPresenceData, updatePresence]);

  const onlineCount =
    presenceData?.users?.filter((user) => user.status === "online").length || 0;

  return (
    <div
      className="flex items-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-md transition-all"
      tabIndex={0}
      role="status"
      aria-label={`${onlineCount} Benutzer online`}
      data-testid="presence-indicator"
    >
      <Badge
        variant="outline"
        className="flex items-center gap-1.5 px-2.5 py-1.5 font-semibold bg-background/50 backdrop-blur-sm border-primary/20 text-foreground"
      >
        <div className="relative flex h-2 w-2">
          {onlineCount > 0 && (
            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
          )}
          <span
            className={`relative inline-flex rounded-full h-2 w-2 ${onlineCount > 0 ? "bg-green-500" : "bg-gray-400"}`}
          ></span>
        </div>
        <Users className="h-3.5 w-3.5 text-primary" />
        <span className="text-xs tabular-nums tracking-tight">
          {onlineCount} Online
        </span>
      </Badge>
    </div>
  );
};