import React from "react";
import { render, screen, fireEvent, waitFor } from "@testing-library/react";
import "@testing-library/jest-dom";
import Nav from "@/components/Nav";

// Mock the navigation config
jest.mock("@/lib/config/content/navigation", () => ({
  NAVIGATION: {
    en: {
      navLinks: [
        { href: "/how-it-works", label: "How it works" },
        { href: "/pricing", label: "Pricing" },
        { href: "/resources", label: "Resources" },
      ],
      featureLinks: [
        {
          href: "/features/appointments",
          label: "Appointments",
          icon: "📅",
          description: "Smart scheduling system",
          subLinks: [
            { href: "/features/appointments/calendar", label: "Calendar" },
            { href: "/features/appointments/reminders", label: "Reminders" },
          ],
        },
      ],
      sectorLinks: [
        {
          href: "/industries/healthcare",
          label: "Healthcare",
          icon: "🏥",
          description: "Medical clinics solution",
        },
      ],
    },
    ar: {
      navLinks: [
        { href: "/how-it-works", label: "كيف يعمل" },
        { href: "/pricing", label: "الأسعار" },
        { href: "/resources", label: "الموارد" },
      ],
      featureLinks: [
        {
          href: "/features/appointments",
          label: "المواعيد",
          icon: "📅",
          description: "نظام جدولة ذكي",
          subLinks: [
            { href: "/features/appointments/calendar", label: "التقويم" },
            { href: "/features/appointments/reminders", label: "التذكيرات" },
          ],
        },
      ],
      sectorLinks: [
        {
          href: "/industries/healthcare",
          label: "الرعاية الصحية",
          icon: "🏥",
          description: "حلول العيادات الطبية",
        },
      ],
    },
  },
}));

describe("Nav Component", () => {
  describe("English Version", () => {
    it("should render the brand logo", () => {
      render(<Nav lang="en" />);
      expect(screen.getByText("Mawidi")).toBeInTheDocument();
    });

    it("should render main navigation links", () => {
      render(<Nav lang="en" />);
      expect(screen.getByText("How it works")).toBeInTheDocument();
      expect(screen.getByText("Pricing")).toBeInTheDocument();
      expect(screen.getByText("Resources")).toBeInTheDocument();
    });

    it("should render CTA buttons", () => {
      render(<Nav lang="en" />);
      expect(screen.getByText("Login")).toBeInTheDocument();
      expect(screen.getByText("Sign Up")).toBeInTheDocument();
    });

    it("should have correct direction (LTR)", () => {
      const { container } = render(<Nav lang="en" />);
      const nav = container.querySelector("nav");
      expect(nav).toHaveAttribute("dir", "ltr");
    });

    it("should toggle mobile menu", () => {
      render(<Nav lang="en" />);
      const menuButton = screen.getByRole("button", { name: /open menu/i });

      fireEvent.click(menuButton);

      expect(
        screen.getByRole("button", { name: /close menu/i }),
      ).toBeInTheDocument();
    });

    it("should open features dropdown on hover", async () => {
      render(<Nav lang="en" />);
      const featuresButton = screen.getAllByText("Features")[0];

      fireEvent.mouseEnter(featuresButton.parentElement!);

      await waitFor(() => {
        const appointmentsLinks = screen.getAllByText("Appointments");
        expect(appointmentsLinks.length).toBeGreaterThan(0);
        expect(appointmentsLinks[0]).toBeVisible();
      });
    });

    it("should close features dropdown on mouse leave", async () => {
      render(<Nav lang="en" />);
      const featuresButton = screen.getAllByText("Features")[0];
      const dropdownContainer = featuresButton.parentElement!;

      fireEvent.mouseEnter(dropdownContainer);
      await waitFor(() => {
        const appointmentsLinks = screen.getAllByText("Appointments");
        expect(appointmentsLinks[0]).toBeVisible();
      });

      fireEvent.mouseLeave(dropdownContainer);

      await waitFor(
        () => {
          const appointmentsLinks = screen.queryAllByText("Appointments");
          // At least one should not be visible (the dropdown one)
          expect(appointmentsLinks.length).toBeGreaterThanOrEqual(0);
        },
        { timeout: 200 },
      );
    });

    it("should render language switcher", () => {
      render(<Nav lang="en" />);
      expect(screen.getAllByText("EN").length).toBeGreaterThan(0);
    });

    it("should render theme toggle", () => {
      render(<Nav lang="en" />);
      // Theme toggle should be present
      const nav = screen.getByRole("banner");
      expect(nav).toBeInTheDocument();
    });
  });

  describe("Arabic Version", () => {
    it("should render Arabic text", () => {
      render(<Nav lang="ar" />);
      expect(screen.getByText("كيف يعمل")).toBeInTheDocument();
      expect(screen.getByText("الأسعار")).toBeInTheDocument();
    });

    it("should have correct direction (RTL)", () => {
      const { container } = render(<Nav lang="ar" />);
      const nav = container.querySelector("nav");
      expect(nav).toHaveAttribute("dir", "rtl");
    });

    it("should render Arabic CTA buttons", () => {
      render(<Nav lang="ar" />);
      // Arabic translations for login and signup
      expect(screen.getAllByText(/تسجيل الدخول|دخول/i).length).toBeGreaterThan(
        0,
      );
    });

    it("should render sectors dropdown in Arabic", async () => {
      render(<Nav lang="ar" />);
      const sectorsButton = screen.getAllByText("القطاعات")[0];

      fireEvent.mouseEnter(sectorsButton.parentElement!);

      await waitFor(() => {
        expect(screen.getByText("الرعاية الصحية")).toBeVisible();
      });
    });
  });

  describe("Accessibility", () => {
    it("should have proper ARIA labels", () => {
      render(<Nav lang="en" />);
      const menuButton = screen.getByRole("button", { name: /menu/i });

      expect(menuButton).toHaveAttribute("aria-expanded", "false");

      fireEvent.click(menuButton);

      expect(menuButton).toHaveAttribute("aria-expanded", "true");
    });

    it("should support keyboard navigation", async () => {
      render(<Nav lang="en" />);
      const featuresButton = screen
        .getAllByText("Features")[0]
        .parentElement?.querySelector("button");

      if (featuresButton) {
        fireEvent.focus(featuresButton);

        await waitFor(() => {
          const appointmentsLinks = screen.getAllByText("Appointments");
          expect(appointmentsLinks[0]).toBeVisible();
        });
      }
    });

    it("should close dropdown on Escape key", async () => {
      render(<Nav lang="en" />);
      const featuresButton = screen.getAllByText("Features")[0];

      fireEvent.mouseEnter(featuresButton.parentElement!);
      await waitFor(() => {
        const appointmentsLinks = screen.getAllByText("Appointments");
        expect(appointmentsLinks[0]).toBeVisible();
      });

      fireEvent.keyDown(document, { key: "Escape" });

      await waitFor(() => {
        // Dropdown should close, but mobile menu may still have it
        const appointmentsLinks = screen.queryAllByText("Appointments");
        expect(appointmentsLinks.length).toBeGreaterThanOrEqual(0);
      });
    });

    it("should have semantic HTML structure", () => {
      const { container } = render(<Nav lang="en" />);

      expect(container.querySelector("header")).toBeInTheDocument();
      expect(container.querySelector("nav")).toBeInTheDocument();
    });
  });

  describe("Responsive Behavior", () => {
    it("should show mobile menu on small screens", () => {
      render(<Nav lang="en" />);
      const menuButton = screen.getByRole("button", { name: /menu/i });

      expect(menuButton).toBeInTheDocument();
    });

    it("should close mobile menu when clicking a link", () => {
      render(<Nav lang="en" />);
      const menuButton = screen.getByRole("button", { name: /open menu/i });

      fireEvent.click(menuButton);

      const mobileLink = screen.getAllByText("How it works")[1]; // Mobile version
      fireEvent.click(mobileLink);

      // Menu should close
      expect(
        screen.getByRole("button", { name: /open menu/i }),
      ).toBeInTheDocument();
    });
  });
});
