/* eslint-disable @typescript-eslint/no-explicit-any */
"use client"

import { useState, useEffect } from "react"
import { Link, usePage } from "@inertiajs/react"
import { motion, AnimatePresence } from "framer-motion"
import {
  FiMenu, FiX, FiDollarSign, FiTrendingUp
} from "react-icons/fi"
import { FaCubes } from "react-icons/fa"
import styles from "./navbar.module.scss"
import LanguageSwitcher from "../translator"

// Sample nav links
const navLinks = [
  {
    name: "Investments",
    dropdown: [
      { icon: <FiTrendingUp />, title: "Crypto Investment", description: "Diversify with top cryptocurrencies and tokens.", href: "/crypto-trading" },
       { icon: <FiDollarSign />, title: "Forex Investment", description: "Trade on the global forex market with expert tools.", href: "forex-trading" },
    ],
  },
  { name: "Marketplace", dropdown: [{ icon: <FiTrendingUp />, title: "Signals", description: "Access premium trading signals", href: "/signals" }] },
 
  {
    name: "Company",
    dropdown: [
      { icon: <FiTrendingUp />, title: "About Us", description: "Learn more about us", href: "/about-us" },
    ],
  },

 {
    name: "Education",
    dropdown: [
      { icon: <FiTrendingUp />, title: "Courses", description: "Access quality industy kowlege", href: "/education" },
    ],
  },
  {
    name: "Support",
    dropdown: [
      { icon: <FaCubes />, title: "Contact Us", description: "Get support when you need it", href: "/contact-us" },
    ],
  },
]

export default function Navbar() {
  const { url, auth } = usePage().props as any
  const [menuOpen, setMenuOpen] = useState(false)
  const [scrolled, setScrolled] = useState(false)
  const [openDropdown, setOpenDropdown] = useState("")

  const { appSettings } =
      usePage().props as unknown as any

  // Handle scroll shadow
  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 10)
    window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

  // Close mobile menu on resize >1024
  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth > 1024) setMenuOpen(false)
    }
    window.addEventListener("resize", handleResize)
    return () => window.removeEventListener("resize", handleResize)
  }, [])

  const isActive = (href: string) => typeof url === "string" && url.startsWith(href)

  return (
    <header className={`${styles.navbar} ${scrolled ? styles.scrolled : ""}`}>
      <div className={styles.container}>
        {/* Logo */}
        <Link href="/" className={styles.logo}>
           <img src={appSettings?.website_logo} height={150} width={150} alt="logo" />
        </Link>

        {/* Desktop Nav */}
        <nav className={styles.navDesktop}>
          {navLinks.map(link => (
            <div
              key={link.name}
              className={styles.navItem}
              onMouseEnter={() => setOpenDropdown(link.name)}
              onMouseLeave={() => setOpenDropdown("")}
            >
              <Link
                href={"#"}
                className={`${styles.navLink} ${isActive("") ? styles.active : ""}`}
              >
                {link.name}
              </Link>

              {/* Dropdown */}
              {link.dropdown && (
                <AnimatePresence>
                  {openDropdown === link.name && (
                    <motion.div
                      className={styles.dropdown}
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: 10 }}
                      transition={{ duration: 0.25 }}
                    >
                      {link.dropdown.map(item => (
                        <Link key={item.title} href={item.href} className={styles.dropdownItem}>
                          <div className={styles.icon}>{item.icon}</div>
                          <div className={styles.info}>
                            <strong>{item.title}</strong>
                            <span>{item.description}</span>
                          </div>
                        </Link>
                      ))}
                    </motion.div>
                  )}
                </AnimatePresence>
              )}
            </div>
          ))}
        </nav>

        {/* Language Switcher + Theme + Auth */}
        <div className={styles.navExtras}>
          {/* Language Switcher */}
          <LanguageSwitcher />

          {/* Auth Buttons */}
          <div className={styles.auth}>
            {auth.user ? (
              <>
                {/* <Link href="/dashboard/home" className={styles.register}>Dashboard</Link> */}
                <Link href="/logout" method="post" as="button" className={styles.login}>Logout</Link>
              </>
            ) : (
              <>
                <Link href="/login" className={styles.login}>Login</Link>
                <Link href="/register" className={styles.register}>Get Started</Link>
              </>
            )}
          </div>

          {/* Mobile Hamburger */}
          <button
            className={styles.menuToggle}
            onClick={() => setMenuOpen(!menuOpen)}
            aria-label="Toggle menu"
          >
            {menuOpen ? <FiX /> : <FiMenu />}
          </button>
        </div>
      </div>

      {/* Mobile Menu */}
      <AnimatePresence>
        {menuOpen && (
          <motion.nav
            className={styles.navMobile}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.3 }}
          >
            {navLinks.map(link => (
              <div key={link.name} className={styles.mobileDropdownWrapper}>
                <Link
                  href={"#"}
                  className={styles.navLinkMobile}
                  onClick={() => setMenuOpen(false)}
                >
                  {link.name}
                </Link>

                {link.dropdown && (
                  <div className={styles.mobileDropdown}>
                    {link.dropdown.map(item => (
                      <Link
                        key={item.title}
                        href={item.href}
                        className={styles.dropdownItemMobile}
                        onClick={() => setMenuOpen(false)}
                      >
                        <div className={styles.icon}>{item.icon}</div>
                        <div className={styles.info}>
                          <strong>{item.title}</strong>
                          <span>{item.description}</span>
                        </div>
                      </Link>
                    ))}
                  </div>
                )}
              </div>
            ))}
            <div className={ styles["buttons"] }>
              <Link className={ styles["login--btn"] } href="/login">Login</Link>
            <Link className={ styles["register--btn"] } href="/register">Register</Link>
            </div>
          </motion.nav>
        )}
      </AnimatePresence>
    </header>
  )
}