import { describe, it, expect, beforeEach } from "vitest"
import { mount } from "@vue/test-utils"
import { createRouter, createWebHistory } from "vue-router"
import { createVuetify } from "vuetify"
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import HeaderNavBar from "../../src/components/HeaderNavBar.vue"

globalThis.ResizeObserver = require('resize-observer-polyfill');

// Mock routes for testing
const routes = [
  { path: "/", component: { template: "<div>Home</div>" } },
  { path: "/about", component: { template: "<div>About</div>" } }
]

const router = createRouter({
  history: createWebHistory(),
  routes
});

const vuetify = createVuetify({
  components,
  directives,
})

describe("HeaderNavBar", () => {
  let wrapper: any

  beforeEach(() => {
    wrapper = mount({
			template: `
        <v-app>
          <v-layout>
            <HeaderNavBar />
          </v-layout>
        </v-app>
      `,
		}, {
      global: {
				components: {
					HeaderNavBar,
				},
        plugins: [router, vuetify]
      }
    })
  })

  it("renders the component", () => {
    expect(wrapper.exists()).toBe(true)
    expect(wrapper.findComponent({ name: "VAppBar" }).exists()).toBe(true)
  })

  it("renders both navigation buttons", () => {
    const homeButton = wrapper.find("[data-role='homeNavigation']");
    const aboutButton = wrapper.find("[data-role='aboutNavigation']");

    expect(homeButton.exists()).toBe(true);
    expect(aboutButton.exists()).toBe(true);
    expect(homeButton.text()).toContain("Home");
    expect(aboutButton.text()).toContain("About");
  });

  it("has correct icons on buttons", () => {
    const homeButton = wrapper.find("[data-role='homeNavigation']");
    const aboutButton = wrapper.find("[data-role='aboutNavigation']");

		expect(homeButton.find("i").attributes("class")).toContain("mdi-home-outline");
		expect(aboutButton.find("i").attributes("class")).toContain("mdi-chat-question-outline");
  });

  it("has correct RouterLink paths", () => {
    const routerLinks = wrapper.findAllComponents({ name: "RouterLink" });
    
    expect(routerLinks).toHaveLength(2);
    expect(routerLinks[0].props("to")).toBe("/");
    expect(routerLinks[1].props("to")).toBe("/about");
  });

  it("applies correct button variants based on active route", async () => {
    // Navigate to home route
    await router.push("/")
    await wrapper.vm.$nextTick()

    // Check home button is elevated (active) and about is outlined (inactive)
    const homeButton = wrapper.find("[data-role='homeNavigation']");
    const aboutButton = wrapper.find("[data-role='aboutNavigation']");

		expect(homeButton.find("button").attributes("class")).toContain("elevated");
		expect(aboutButton.find("button").attributes("class")).toContain("outlined");

    // // Navigate to about route
    await router.push("/about");
    await wrapper.vm.$nextTick();

    // // Check about button is now elevated and home is outlined
    expect(homeButton.find("button").attributes("class")).toContain("outlined");
		expect(aboutButton.find("button").attributes("class")).toContain("elevated");
  });

  it("has correct button styling classes", () => {
    const routerLinks = wrapper.findAllComponents({ name: "RouterLink" });

    for (const link of routerLinks) {
      expect(link.classes()).toContain("mx-2")
      expect(link.classes()).toContain("text-decoration-none")
    }

		const buttons = wrapper.findAllComponents({ name: "v-btn" });
    for (const button of buttons) {
			expect(button.attributes("class")).toContain("v-btn--size-large");
			expect(button.attributes("class")).toContain("-primary");
		}
  });

  it("has proper app bar structure", () => {
    const appBar = wrapper.findComponent({ name: "VAppBar" });
    const container = wrapper.findComponent({ name: "VContainer" });

    expect(appBar.attributes("fixed")).toBe("");
    expect(appBar.attributes("app")).toBe("");
    expect(container.classes()).toContain("d-flex");
    expect(container.classes()).toContain("align-center");
    expect(container.classes()).toContain("pa-0");
  });

  it("maintains accessibility attributes", () => {
    const homeButton = wrapper.find("[data-role='homeNavigation']");
    expect(homeButton.attributes("data-role")).toBe('homeNavigation');

    // Check that buttons are actual button elements for screen readers
    const buttons = wrapper.findAll("button");
    expect(buttons).toHaveLength(2);
    for (const button of buttons) {
      expect(button.element.tagName).toBe("BUTTON");
    }
  });
});