"use client";

import { useCart } from "@/hooks/useCart";
import { usePathname } from "next/navigation";
import { useState, useEffect } from "react";
import { useSelector } from "react-redux";
import Link from "next/link";
const TopBar = ({ menuOpen, setMenuOpen, cartItemCount }: { menuOpen: boolean; setMenuOpen: (open: boolean) => void, cartItemCount: number }) => {
  const [isSticky, setIsSticky] = useState(false);
  const pathname = usePathname();

  useEffect(() => {
    const handleScroll = () => {
      const headerBtm = document.querySelector('.headerbtm') as HTMLElement;
      if (headerBtm) {
        const wScroll = window.scrollY;
        const headerBtmHeight = headerBtm.offsetHeight;
        
        if (wScroll > headerBtmHeight) {
          setIsSticky(true);
        } else {
          setIsSticky(false);
        }
      }
    };

    window.addEventListener('scroll', handleScroll);
    
    // Call once to set initial state
    handleScroll();
    
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <header className="headercontainer">
      <div className="headertp">
        <div className="mx-auto w-full px-3 max-w-[1180px]">
          <div className="headertpinner">
            <div className="headlocation">
              <i className="icon icon-globe"></i>
              <span>India</span>
            </div>
            <div className="offertetx">Today only! Beat the clock to get 25% off your spring favorites.</div>
            <ul>
              <li><Link href="/wishlist">Wishlist</Link></li>
              <li><Link href="/appointments">Appointments</Link></li>
              <li><Link href="/stores">Stores</Link></li>
            </ul>
          </div>
        </div>
      </div>
      <div className={`headerbtm ${isSticky ? 'sticky' : ''}`}>
        <div className="mx-auto w-full px-3 max-w-[1180px]">
          <div className="headtoprow">
            <div className="navigation">
              <div className="navigationbox">
                <div className="navuser">
               
                   <Link className="userimg" href="">
                    <img alt="" src="/images/logo-icon.png" />
                  </Link>
                  <div className="w-full">
                    <h3><Link href="#">Dulhe Sahab</Link></h3>
                  </div>
                </div>
                <ul className="sf-menu">
                  <li className={pathname === "/" ? "active" : ""}><Link href="/">Home</Link></li>
                  <li className={pathname === "/about" ? "active" : ""}><Link href="#">About Us</Link></li>
                  <li className={pathname === "/products" ? "active" : ""}><Link href="/products">Products</Link></li>
                  <li className={pathname === "/contact" ? "active" : ""}><Link href="#">Contact Us</Link></li>
                </ul>
              </div>
            </div>
            <div className="logocontainer">
              <Link href="/">
                <img alt="Logo" src="/images/logo.png" />
              </Link>
            </div>
            <div className="userbts">
              <div className="searchbx">
                <div className="mx-auto w-full px-3 max-w-[1180px]">
                  <div className="flex flex-wrap -mx-3">
                    <div className="w-full px-3">
                      <div className="searchbxinner">
                        <div className="formgroup">
                          <input className="form-control" name="" placeholder="Search..." type="text" />
                          <button className="searchbutton" type="button"><i className="icon icon-search-o"></i></button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="cartbtns">
                <Link className="cartbtn searchbtn lg:hidden" href="#">
                  <i className="icon icon-search-o"></i>
                </Link>
                <Link className="cartbtn" href="#">
                  <i className="icon icon-user-o"></i>
                </Link>
                <Link className="cartbtn" href="/cart" style={{ position: "relative" }}>
                  <i className="icon icon-cart-bag"></i>

                  {cartItemCount > 0 && (
                    <span
                      style={{
                        position: "absolute",
                        top: "-6px",
                        right: "-6px",
                        background: "red",
                        color: "white",
                        borderRadius: "50%",
                        width: "18px",
                        height: "18px",
                        fontSize: "11px",
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                        fontWeight: "bold",
                      }}
                    >
                      {cartItemCount}
                    </span>
                  )}
                </Link>
              </div>
              {/* Hamburger Menu Button */}
              <button 
                className="NavBar" 
                onClick={() => setMenuOpen(!menuOpen)}
                aria-label="Toggle menu"
              >
                <i className="icon icon-segment"></i>
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* Mobile Menu Overlay */}
      {menuOpen && (
        <>
          <div 
            className="mobile-menu-overlay"
            onClick={() => setMenuOpen(false)}
            style={{
              position: 'fixed',
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
              backgroundColor: 'rgba(0, 0, 0, 0.5)',
              zIndex: 999,
            }}
          />
          <div 
            className="mobile-menu"
            style={{
              position: 'fixed',
              top: 0,
              left: 0,
              bottom: 0,
              width: '280px',
              backgroundColor: 'white',
              zIndex: 1000,
              boxShadow: '2px 0 8px rgba(0,0,0,0.15)',
              transform: menuOpen ? 'translateX(0)' : 'translateX(-100%)',
              transition: 'transform 0.3s ease-in-out',
              overflowY: 'auto',
            }}
          >
            <div style={{ padding: '20px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px', paddingBottom: '20px', borderBottom: '1px solid #eee' }}>
                <img alt="Logo" src="/images/logo.png" style={{ height: '40px' }} />
                <button 
                  onClick={() => setMenuOpen(false)}
                  style={{
                    background: 'none',
                    border: 'none',
                    fontSize: '24px',
                    cursor: 'pointer',
                    padding: '8px',
                  }}
                >
                  ✕
                </button>
              </div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
                <li style={{ marginBottom: '15px' }}>
                  <Link href="#" style={{ textDecoration: 'none', color: '#333', fontSize: '16px', display: 'block', padding: '10px 0' }} onClick={() => setMenuOpen(false)}>Home</Link>
                </li>
                <li style={{ marginBottom: '15px' }}>
                  <Link href="#" style={{ textDecoration: 'none', color: '#333', fontSize: '16px', display: 'block', padding: '10px 0' }} onClick={() => setMenuOpen(false)}>About Us</Link>
                </li>
                <li style={{ marginBottom: '15px' }}>
                  <Link href="/products" style={{ textDecoration: 'none', color: '#333', fontSize: '16px', display: 'block', padding: '10px 0' }} onClick={() => setMenuOpen(false)}>Products</Link>
                </li>
                <li style={{ marginBottom: '15px' }}>
                  <Link href="/contact" style={{ textDecoration: 'none', color: '#333', fontSize: '16px', display: 'block', padding: '10px 0' }} onClick={() => setMenuOpen(false)}>Contact Us</Link>
                </li>
                <li style={{ marginTop: '20px', paddingTop: '20px', borderTop: '1px solid #eee' }}>
                  <Link href="/wishlist" style={{ textDecoration: 'none', color: '#333', fontSize: '16px', display: 'block', padding: '10px 0' }} onClick={() => setMenuOpen(false)}>Wishlist</Link>
                </li>
                <li>
                  <Link href="/appointments" style={{ textDecoration: 'none', color: '#333', fontSize: '16px', display: 'block', padding: '10px 0' }} onClick={() => setMenuOpen(false)}>Appointments</Link>
                </li>
                <li>
                  <Link href="/stores" style={{ textDecoration: 'none', color: '#333', fontSize: '16px', display: 'block', padding: '10px 0' }} onClick={() => setMenuOpen(false)}>Stores</Link>
                </li>
              </ul>
            </div>
          </div>
        </>
      )}
    </header>
  );
};

const AppHeader = () => {
  const { cart } = useCart()
  // console.log('CART', cart)
  const [searchOpen, setSearchOpen] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <header className="sticky top-0 z-50 shadow-md">
      <TopBar menuOpen={menuOpen} setMenuOpen={setMenuOpen} cartItemCount={cart?.length || 0} />
    </header>
  );
};

export default AppHeader;