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

describe("Hero Component", () => {
  describe("English Version", () => {
    it("should render the main heading", () => {
      render(<Hero lang="en" />);
      expect(
        screen.getByText(/Turn WhatsApp agents and voice reception/i),
      ).toBeInTheDocument();
      expect(screen.getByText(/fully booked diaries/i)).toBeInTheDocument();
    });

    it("should render the subtitle", () => {
      render(<Hero lang="en" />);
      expect(
        screen.getByText(
          /WhatsApp agents and voice reception on tap for GCC clinics/i,
        ),
      ).toBeInTheDocument();
    });

    it("should render feature badges", () => {
      render(<Hero lang="en" />);
      expect(screen.getByText(/Managed reception team/i)).toBeInTheDocument();
      expect(
        screen.getByText(/Official WhatsApp approvals/i),
      ).toBeInTheDocument();
      expect(screen.getByText(/Owner-grade reporting/i)).toBeInTheDocument();
    });

    it("should render CTA buttons", () => {
      render(<Hero lang="en" />);
      expect(screen.getByText(/Book a discovery call/i)).toBeInTheDocument();
      expect(
        screen.getByRole("link", { name: /Book a discovery call/i }),
      ).toHaveAttribute("href", "/en/contact");
    });

    it("should render hero images", () => {
      render(<Hero lang="en" />);
      const images = screen.getAllByRole("img");
      expect(images.length).toBeGreaterThan(0);
    });

    it("should have slide navigation buttons", () => {
      render(<Hero lang="en" />);
      const buttons = screen
        .getAllByRole("button")
        .filter((btn) => btn.getAttribute("aria-label")?.includes("slide"));
      expect(buttons.length).toBeGreaterThan(0);
    });

    it("should render logo scroller section", () => {
      render(<Hero lang="en" />);
      expect(
        screen.getByText(/Trusted by many different companies/i),
      ).toBeInTheDocument();
    });
  });

  describe("Arabic Version", () => {
    it("should render Arabic heading", () => {
      render(<Hero lang="ar" />);
      expect(
        screen.getByText(/حوِّل وكلاء الواتساب والاستقبال الصوتي/i),
      ).toBeInTheDocument();
      expect(screen.getByText(/جداول ممتلئة/i)).toBeInTheDocument();
    });

    it("should render Arabic subtitle", () => {
      render(<Hero lang="ar" />);
      expect(
        screen.getByText(
          /وكلاء واتساب واستقبال صوتي عند الطلب للعيادات في الخليج/i,
        ),
      ).toBeInTheDocument();
    });

    it("should render Arabic feature badges", () => {
      render(<Hero lang="ar" />);
      expect(
        screen.getByText(/طاقم استقبال مدار بالكامل/i),
      ).toBeInTheDocument();
      expect(screen.getByText(/موافقات واتساب رسمية/i)).toBeInTheDocument();
      expect(screen.getByText(/تقارير واضحة للمالك/i)).toBeInTheDocument();
    });

    it("should render Arabic CTA", () => {
      render(<Hero lang="ar" />);
      expect(screen.getByText(/احجز جلسة تعريف/i)).toBeInTheDocument();
    });

    it("should render Arabic image alt texts", () => {
      render(<Hero lang="ar" />);
      const images = screen.getAllByRole("img");
      const arabicImage = images.find((img) =>
        img.getAttribute("alt")?.includes("صندوق محادثات"),
      );
      expect(arabicImage).toBeInTheDocument();
    });
  });

  describe("Image Carousel", () => {
    beforeEach(() => {
      jest.useFakeTimers();
    });

    afterEach(() => {
      jest.useRealTimers();
    });

    it("should auto-advance slides", async () => {
      render(<Hero lang="en" />);

      const slideButtons = screen
        .getAllByRole("button")
        .filter((btn) => btn.getAttribute("aria-label")?.includes("slide"));

      // First slide should be active
      expect(slideButtons[0]).toHaveAttribute("aria-current", "true");

      // Advance timer
      jest.advanceTimersByTime(6000);

      await waitFor(() => {
        const updatedButtons = screen
          .getAllByRole("button")
          .filter((btn) => btn.getAttribute("aria-label")?.includes("slide"));
        // Second slide should be active after 6 seconds
        expect(updatedButtons[1]).toHaveAttribute("aria-current", "true");
      });
    });

    it("should reset carousel on language change", () => {
      const { rerender } = render(<Hero lang="en" />);

      jest.advanceTimersByTime(6000);

      rerender(<Hero lang="ar" />);

      const slideButtons = screen
        .getAllByRole("button")
        .filter((btn) => btn.getAttribute("aria-label")?.includes("slide"));

      // First slide should be active after language change
      if (slideButtons.length > 0) {
        expect(slideButtons[0]).toHaveAttribute("aria-current", "true");
      } else {
        // If no slide buttons found, carousel may not be rendered
        expect(slideButtons.length).toBeGreaterThanOrEqual(0);
      }
    });
  });

  describe("Accessibility", () => {
    it("should have proper heading hierarchy", () => {
      const { container } = render(<Hero lang="en" />);
      const h1 = container.querySelector("h1");
      expect(h1).toBeInTheDocument();
    });

    it("should have proper ARIA labels for slide buttons", () => {
      render(<Hero lang="en" />);
      const slideButtons = screen
        .getAllByRole("button")
        .filter((btn) => btn.getAttribute("aria-label")?.includes("slide"));

      slideButtons.forEach((button, index) => {
        expect(button).toHaveAttribute("aria-label");
        expect(button.getAttribute("aria-label")).toContain(`${index + 1}`);
      });
    });

    it("should indicate current slide", () => {
      render(<Hero lang="en" />);
      const slideButtons = screen
        .getAllByRole("button")
        .filter((btn) => btn.getAttribute("aria-label")?.includes("slide"));

      const activeSlides = slideButtons.filter(
        (btn) => btn.getAttribute("aria-current") === "true",
      );

      expect(activeSlides).toHaveLength(1);
    });
  });

  describe("Styling and Layout", () => {
    it("should apply correct CSS classes", () => {
      const { container } = render(<Hero lang="en" />);
      const section = container.querySelector("section");
      expect(section).toHaveClass("bg-white");
    });

    it("should render checkmarks for badges", () => {
      render(<Hero lang="en" />);
      const checkmarks = screen.getAllByText("✓");
      expect(checkmarks.length).toBeGreaterThanOrEqual(3);
    });
  });
});