import { Menu, Plus, Users } from "lucide-react";
import { useNavigate } from "react-router-dom";

import { useToast } from "../context/ToastContext";
import { useMe } from "../hooks/auth";

export function BottomBar({ onMenu }: { onMenu: () => void }) {
  const { data: me } = useMe();
  const navigate = useNavigate();
  const toast = useToast();
  const hasGroup = me?.active_group_id != null;
  const activeGroup = me?.groups.find((g) => g.id === me?.active_group_id);

  const onCreate = () => {
    if (!hasGroup) {
      toast.show("Вы не состоите в группе. Создайте или вступите в группу.");
      navigate("/group");
      return;
    }
    navigate("/match/new");
  };

  return (
    <nav className="bottom-bar">
      <button className="slot" onClick={() => navigate("/group")}>
        <Users size={20} />
        <span className="name">{activeGroup ? activeGroup.name : "Группа"}</span>
      </button>

      <div className="spacer" />

      <button className="slot" onClick={onMenu} aria-label="Меню">
        <Menu size={20} />
        <span>Меню</span>
      </button>

      <button
        className="fab"
        aria-disabled={!hasGroup}
        aria-label="Создать партию"
        onClick={onCreate}
      >
        <Plus size={26} />
      </button>
    </nav>
  );
}