"use client";

import { useChatWidgetStore } from "@/hooks/useChatWidgetStore";
import { usePresenceStore } from "@/hooks/usePresenceStore";
import { Badge } from "@/components/ui/badge";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { MoreVertical } from "lucide-react";
import { cn } from "@/lib/utils";

export function ChatToggleButton() {
  const { isMinimized, unreadCount, toggleMinimized } = useChatWidgetStore();
  const { presenceData } = usePresenceStore();

  if (!isMinimized) return null;

  return (
    <div
      role="button"
      tabIndex={0}
      aria-label="Chat öffnen"
      onClick={toggleMinimized}
      onKeyDown={(e) => {
        if (e.key === "Enter" || e.key === " ") {
          e.preventDefault();
          toggleMinimized();
        }
      }}
      className="fixed bottom-6 right-6 z-50 w-16 h-16 rounded-full bg-primary text-primary-foreground flex items-center justify-center cursor-pointer hover:bg-primary/90 transition-all active:scale-95 shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
    >
      <div className="relative">
        <Badge
          variant="secondary"
          className="absolute -top-1 -right-1 text-xs"
        >
          {unreadCount || presenceData?.users?.length || 0}
        </Badge>
        <Avatar className="h-8 w-8">
          <AvatarImage src="/logo.webp" alt="Chat" />
          <AvatarFallback>C</AvatarFallback>
        </Avatar>
      </div>
    </div>
  );
}