import Button from "../components/ui/Button";
import FloatingActionButton from "../components/ui/FloatingActionButton";
import { useMe, useLogout } from "../hooks/useAuth";
import { useNavigate } from "react-router";
import ShareFilledIcon from "../components/icons/ShareFilledIcon";
import usePopupStore from "../store/popupStore";
<<<<<<< HEAD
import ParticipantsPopup from "../components/popups/ParticipantsPopup";
=======
import SettingsModal from "../components/modals/SettingsModal";
import useModalStore from "../store/modalStore";
import CogFilledIcon from "../components/icons/CogFilledIcon";
>>>>>>> 79fb7f2748fcb76e887daa397ff450afc389a2b3

function HomePage() {
  const { data: user } = useMe();
  const logoutMutation = useLogout();
  const navigate = useNavigate();

  const handleLogout = async () => {
    await logoutMutation.mutateAsync();
    navigate("/login");
  };

  const { setPopup } = usePopupStore();
  const { setModal } = useModalStore();

  return (
    <div className="py-8 min-h-screen bg-gray-50">
      <div className="px-4 mx-auto max-w-4xl">
        <div className="p-8 bg-white rounded-lg shadow-md">
          <h1 className="mb-6 text-3xl font-bold">Главная страница</h1>

          {/* Потестить модалки */}

          <FloatingActionButton
            variant="default"
<<<<<<< HEAD
            onClick={() => setPopup(<ParticipantsPopup />)}
=======
            onClick={() =>
              setPopup(
                <SharePopup link={"https://estate.stream/ahdy12jdco1"} />
              )
            }
>>>>>>> 79fb7f2748fcb76e887daa397ff450afc389a2b3
          >
            <div className="2xl:size-[1.111vw] size-4 text-white">
              <ShareFilledIcon />
            </div>
          </FloatingActionButton>

          <FloatingActionButton
            variant="default"
            onClick={() => setModal(<SettingsModal />)}
          >
            <div className="2xl:size-[1.111vw] size-4 text-white">
              <CogFilledIcon />
            </div>
          </FloatingActionButton>

          <div className="space-y-4">
            <div className="p-4 bg-blue-50 rounded-lg border border-blue-200">
              <h2 className="mb-2 text-xl font-semibold">
                Добро пожаловать, {user?.fullName}!
              </h2>
              <p className="text-gray-600">Email: {user?.email}</p>
              <p className="text-gray-600">Роль: {user?.role}</p>
            </div>

            {user?.currentCompany && (
              <div className="p-4 bg-green-50 rounded-lg border border-green-200">
                <h3 className="mb-2 text-lg font-semibold">Компания</h3>
                <p className="font-medium text-gray-700">
                  {user.currentCompany.name}
                </p>
                {user.currentCompany.description && (
                  <p className="mt-1 text-sm text-gray-600">
                    {user.currentCompany.description}
                  </p>
                )}
              </div>
            )}

            {user?.currentBranch && (
              <div className="p-4 bg-purple-50 rounded-lg border border-purple-200">
                <h3 className="mb-2 text-lg font-semibold">Филиал</h3>
                <p className="font-medium text-gray-700">
                  {user.currentBranch.name}
                </p>
                {user.currentBranch.address && (
                  <p className="mt-1 text-sm text-gray-600">
                    Адрес: {user.currentBranch.address}
                  </p>
                )}
                {(user.currentBranch.city || user.currentBranch.country) && (
                  <p className="text-sm text-gray-600">
                    {[user.currentBranch.city, user.currentBranch.country]
                      .filter(Boolean)
                      .join(", ")}
                  </p>
                )}
              </div>
            )}

            {!user?.currentBranch && !user?.currentCompany && (
              <div className="p-4 bg-yellow-50 rounded-lg border border-yellow-200">
                <p className="text-yellow-800">
                  Вы не привязаны ни к одному филиалу. Обратитесь к
                  администратору.
                </p>
              </div>
            )}

            <Button
              onClick={handleLogout}
              disabled={logoutMutation.isPending}
              className="hover:bg-red-700 disabled:opacity-50 px-4 py-2 text-white bg-red-600 rounded-md"
            >
              {logoutMutation.isPending ? "Выход..." : "Выйти"}
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default HomePage;
