const { Builder, By, until } = require("selenium-webdriver");

(async function testHomePage() {
  const driver = await new Builder().forBrowser("chrome").build();

  try {
    await driver.get("http://localhost:3000/");
    await driver.wait(until.elementLocated(By.css("body")), 10000);

    // 1. ✅ Page Title Test
    const title = await driver.getTitle();
    console.log(`\n📄 Page Title: "${title}" ${title ? "✅" : "❌"}`);

    // 2. ✅ Favicon Check
    try {
      const favicon = await driver.findElement(By.css("link[rel='icon']"));
      const href = await favicon.getAttribute("href");
      console.log(`🔗 Favicon Found: ${href ? href : "Missing"} ${href ? "✅" : "❌"}`);
    } catch {
      console.log("🔗 Favicon - Not Found ❌");
    }

    // 3. ✅ Section Visibility
    console.log("\n🔍 Checking Section Visibility...");
    const sections = [
      { name: "Header", selector: ".header-style-two" },
      { name: "Hero", selector: ".banner-section" },
      { name: "Popular Dishes", selector: "#popular-dishes" },
      { name: "Menu Card", selector: ".fluid-section-two" },
      { name: "Sixty5 Street Specials", selector: "#sixty5-street-specials" },
      { name: "Menu", selector: "#menu" },
      { name: "Services", selector: ".menu-page-section" },
      { name: "Gallery", selector: "#gallery" },
      { name: "Footer", selector: ".footer-style-two" },
    ];

    for (let section of sections) {
      try {
        const el = await driver.findElement(By.css(section.selector));
        const isDisplayed = await el.isDisplayed();
        console.log(`${section.name} Section - ${isDisplayed ? "Visible ✅" : "Not Visible ❌"}`);
      } catch {
        console.log(`${section.name} Section - Not Found ❌`);
      }
    }

    // 4. ✅ In-Page Anchor Links
    console.log("\n🧪 Testing Anchor Navigation Buttons...");
    const navTests = [
      { label: "Explore Menu", selector: "a[href='#menu']", anchorId: "menu" },
    ];

    for (const test of navTests) {
      try {
        const link = await driver.findElement(By.css(test.selector));
        await link.click();
        await driver.sleep(1000);
        const target = await driver.findElement(By.css(`#${test.anchorId}`));
        const isDisplayed = await target.isDisplayed();
        console.log(`Clicked '${test.label}' ➡️ ${isDisplayed ? "Scrolled Successfully ✅" : "Failed ❌"}`);
      } catch {
        console.log(`Clicked '${test.label}' ➡️ Error ❌`);
      }
    }

    // 6. ✅ Check All Images on Page
    console.log("\n🖼️ Checking All Images on Home Page...");
    try {
      const images = await driver.findElements(By.css("img"));

      let allLoaded = true;

      for (let i = 0; i < images.length; i++) {
        const img = images[i];
        const isLoaded = await driver.executeScript(
          "return arguments[0].complete && arguments[0].naturalWidth > 0;",
          img
        );

        const src = await img.getAttribute("src");
        if (isLoaded) {
          console.log(`✅ Image ${i + 1}: ${src}`);
        } else {
          console.log(`❌ Image ${i + 1} Not Loaded: ${src}`);
          allLoaded = false;
        }
      }

      if (allLoaded) {
        console.log("🎉 All images are properly loaded ✅");
      } else {
        console.log("⚠️ Some images failed to load ❌");
      }
    } catch (e) {
      console.log("❌ Error during image check:", e.message);
    }

    // 7. ✅ 404 Page Test
    console.log("\n🔎 Testing 404 Not Found Page...");
    await driver.get("http://localhost:3000/thispagedoesnotexist");
    await driver.sleep(1000);
    const bodyText = await driver.findElement(By.css("body")).getText();
    if (bodyText.includes("404") || bodyText.toLowerCase().includes("not found")) {
      console.log("404 Page - Working ✅");
    } else {
      console.log("404 Page - Not Detected ❌");
    }

  } catch (err) {
    console.error("❌ Error:", err.message);
  } finally {
    await driver.quit();
  }
})();