"use client";

import { useState, useEffect } from "react";
import {
  Navbar,
  Nav,
  Container,
  Offcanvas,
  Button,
  Row,
  Col,
  Dropdown,
} from "react-bootstrap";
import Link from "next/link";
import { usePathname } from "next/navigation";
import Image from "next/image";
import { SubMenu } from "./SubMenu";
import { useDispatch, useSelector } from "react-redux";
import { fetchHeader } from "@/redux/slices/headerSlice";

export default function Navigation() {
  const [scrolled, setScrolled] = useState(false);
  const [show, setShow] = useState(false);
  const [activeMenu, setActiveMenu] = useState(null);

  const pathname = usePathname();

  const isActive = (path) => pathname === path;

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 50);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const handleMenuClick = (menu) => {
    setActiveMenu((prev) => (prev === menu ? null : menu));
  };

  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(fetchHeader());
  }, []);

  const headerData = useSelector((state) => state.header.data);

  return (
    <>
      <Navbar
        fixed="top"
        expand="lg"
        className={`custom-navbar ${scrolled ? "scrolled" : ""}`}
      >
        <Container className="custom_container d-flex justify-content-between align-items-center">
          {/* Left side: Logo + Nav */}
          <div className="d-flex align-items-center">
            <Navbar.Brand href="/">
              <Image
                src="/image/logo.png"
                alt="logo"
                width={140}
                height={60}
                className="img-fluid"
              />
            </Navbar.Brand>
            <Nav className="d-none d-lg-flex ms-4 gap-4">
              <Nav.Link as={Link} href="/" onClick={() => setShow(false)}>
                Collection
              </Nav.Link>
              <Nav.Link
                as={Link}
                href="/brands"
                className={isActive("/brands") ? "active" : ""}
              >
                Brands
              </Nav.Link>
              <Nav.Link
                as={Link}
                href="/products"
                className={isActive("/products") ? "active" : ""}
              >
                Products
              </Nav.Link>
              <Nav.Link
                as={Link}
                href="/projects"
                className={isActive("/projects") ? "active" : ""}
              >
                Projects
              </Nav.Link>
            </Nav>
          </div>

          {/* Right side */}
          <div className="d-none d-lg-flex align-items-center gap-4">
            <Nav.Link as={Link} href="/" onClick={() => setShow(false)}>
              About
            </Nav.Link>
            <Nav.Link as={Link} href="/" onClick={() => setShow(false)}>
              Catalogue
            </Nav.Link>
            <Nav.Link as={Link} href="/" onClick={() => setShow(false)}>
              Contacts
            </Nav.Link>

            {/* Language Dropdown */}
            <Dropdown>
              <Dropdown.Toggle variant="link" id="language-dropdown">
                English
              </Dropdown.Toggle>
              <Dropdown.Menu>
                <Dropdown.Item href="#/en">English</Dropdown.Item>
                <Dropdown.Item href="#/fr">Français</Dropdown.Item>
                <Dropdown.Item href="#/de">Deutsch</Dropdown.Item>
              </Dropdown.Menu>
            </Dropdown>
          </div>

          {/* Mobile Toggle */}
          <Navbar.Toggle onClick={() => setShow(true)} />
        </Container>
      </Navbar>

      {/* Mobile Offcanvas */}
      <Offcanvas
        show={show}
        onHide={() => setShow(false)}
        placement="end"
        className="custom-offcanvas"
      >
        <Offcanvas.Header closeButton>
          <Offcanvas.Title>
            <Image
              src="/image/logo.png"
              alt="logo"
              width={140}
              height={50}
              className="img-fluid"
            />
          </Offcanvas.Title>
        </Offcanvas.Header>
        <Offcanvas.Body>
          <Nav className="flex-column gap-1">
            <Nav.Link as={Link} href="/" onClick={() => setShow(false)}>
              Collection
            </Nav.Link>
            <Nav.Link as={Link} href="/brands" onClick={() => setShow(false)}>
              Brands
            </Nav.Link>
            <Nav.Link as={Link} href="/products" onClick={() => setShow(false)}>
              Products
            </Nav.Link>
            <Nav.Link as={Link} href="/projects" onClick={() => setShow(false)}>
              Projects
            </Nav.Link>
            <Nav.Link as={Link} href="/about" onClick={() => setShow(false)}>
              About
            </Nav.Link>
            <Nav.Link
              as={Link}
              href="/catalogue"
              onClick={() => setShow(false)}
            >
              Catalogue
            </Nav.Link>
            <Nav.Link as={Link} href="/contacts" onClick={() => setShow(false)}>
              Contacts
            </Nav.Link>
            <Dropdown className="lang-btn">
              <Dropdown.Toggle>English</Dropdown.Toggle>
              <Dropdown.Menu>
                <Dropdown.Item>English</Dropdown.Item>
                <Dropdown.Item>Français</Dropdown.Item>
                <Dropdown.Item>Deutsch</Dropdown.Item>
              </Dropdown.Menu>
            </Dropdown>
          </Nav>
        </Offcanvas.Body>
      </Offcanvas>
    </>
  );
}