import { describe, it, expect, beforeEach } from "vitest";
import { mount } from "@vue/test-utils";
import { setActivePinia, createPinia } from "pinia";
import { useAreasStore } from "../../../../stores/areas.js";
import { useFavoritesStore } from "../../../../stores/favorites.js";
import AreaFavoritesPage from "../AreaFavoritesPage.vue";

describe("AreaFavoritesPage", () => {
  beforeEach(() => {
    setActivePinia(createPinia());
  });

  it("renders loading state", () => {
    const store = useAreasStore();
    store.isLoading = true;
    const wrapper = mount(AreaFavoritesPage);
    expect(wrapper.text()).toContain("Loading areas");
  });

  it("renders empty state when no favorites", async () => {
    const wrapper = mount(AreaFavoritesPage);
    await new Promise((resolve) => setTimeout(resolve, 50));
    expect(wrapper.text()).toContain("No favorite areas");
  });

  it("renders favorite areas after loading", async () => {
    const favoritesStore = useFavoritesStore();
    favoritesStore.add(1); // Kitchen from MSW mock

    const wrapper = mount(AreaFavoritesPage);
    await new Promise((resolve) => setTimeout(resolve, 50));

    expect(wrapper.text()).toContain("Kitchen");
    expect(wrapper.text()).toContain("room");
  });
});