'use client';

import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { useLanguage } from '@/context/LanguageContext';
import { useCart } from '@/context/CartContext';
import { useWishlist } from '@/context/WishlistContext';
import { useAuth } from '@/context/AuthContext';
import InstantSearch from '@/components/ui/InstantSearch';
import styles from './Header.module.css';

export default function Header() {
  const { t, language, toggleLanguage, isRTL } = useLanguage();
  const { itemCount } = useCart();
  const { count: wishlistCount } = useWishlist();
  const { user, logout, isAdmin } = useAuth();
  const [menuOpen, setMenuOpen] = useState(false);
  const [searchOpen, setSearchOpen] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');
  const [scrolled, setScrolled] = useState(false);
  const [userMenuOpen, setUserMenuOpen] = useState(false);

  useEffect(() => {
    const handler = () => setScrolled(window.scrollY > 30);
    window.addEventListener('scroll', handler);
    return () => window.removeEventListener('scroll', handler);
  }, []);

  const navLinks = [
    { href: '/', label: t.nav.home },
    { href: '/products', label: t.nav.products },
    { href: '/deals', label: t.nav.deals },
    { href: '/compare', label: t.nav.compare },
    { href: '/track', label: t.nav.track },
  ];

  return (
    <header className={`${styles.header} ${scrolled ? styles.scrolled : ''}`}>
      {/* Top Bar */}
      <div className={styles.topBar}>
        <div className={styles.topBarContent}>
          <span>🚀 {t.banners.delivery}</span>
          <div className={styles.topBarRight}>
            <a href="https://wa.me/96590965152" target="_blank" rel="noreferrer" className={styles.topLink}>
              💬 WhatsApp
            </a>
          </div>
        </div>
      </div>

      {/* Main Header */}
      <div className={styles.main}>
        <div className={styles.inner}>
          {/* Logo */}
          <Link href="/" className={styles.logo}>
            <Image src="/logo.png" alt="Fast Time Phone" width={44} height={44} className={styles.logoImg} />
            <div className={styles.logoText}>
              <span className={styles.logoName}>FAST TIME</span>
              <span className={styles.logoSub}>PHONE</span>
            </div>
          </Link>

          {/* Navigation */}
          <nav className={`${styles.nav} ${menuOpen ? styles.navOpen : ''}`}>
            {navLinks.map(link => (
              <Link key={link.href} href={link.href} className={styles.navLink} onClick={() => setMenuOpen(false)}>
                {link.label}
              </Link>
            ))}
            {isAdmin && (
              <Link href="/admin" className={`${styles.navLink} ${styles.adminLink}`} onClick={() => setMenuOpen(false)}>
                ⚙️ {t.nav.admin}
              </Link>
            )}
          </nav>

          {/* Actions */}
          <div className={styles.actions}>
            {/* Search */}
            <button className={styles.actionBtn} onClick={() => setSearchOpen(!searchOpen)} aria-label="Search">
              🔍
            </button>

            {/* Language Toggle */}
            <button className={styles.langBtn} onClick={toggleLanguage}>
              {language === 'en' ? 'العربية' : 'English'}
            </button>

            {/* Wishlist */}
            <Link href="/account/wishlist" className={styles.actionBtn} aria-label="Wishlist">
              ♥ {wishlistCount > 0 && <span className={styles.badge}>{wishlistCount}</span>}
            </Link>

            {/* Cart */}
            <Link href="/cart" className={`${styles.actionBtn} ${styles.cartBtn}`} aria-label="Cart">
              🛒 <span className={styles.badge}>{itemCount}</span>
            </Link>

            {/* User */}
            {user ? (
              <div className={styles.userMenu} onClick={() => setUserMenuOpen(!userMenuOpen)}>
                <button className={styles.actionBtn}>👤 {user.name.split(' ')[0]}</button>
                {userMenuOpen && (
                  <div className={styles.dropdown}>
                    <Link href="/account" className={styles.dropdownItem}>{t.account.title}</Link>
                    <Link href="/account/orders" className={styles.dropdownItem}>{t.account.orders}</Link>
                    <Link href="/account/wishlist" className={styles.dropdownItem}>{t.account.wishlist}</Link>
                    {isAdmin && <Link href="/admin" className={styles.dropdownItem}>{t.nav.admin}</Link>}
                    <button className={styles.dropdownItem} onClick={logout}>{t.header.logout}</button>
                  </div>
                )}
              </div>
            ) : (
              <Link href="/auth/login" className="btn btn-primary btn-sm">{t.header.login}</Link>
            )}

            {/* Hamburger */}
            <button className={styles.hamburger} onClick={() => setMenuOpen(!menuOpen)} aria-label="Menu">
              <span className={menuOpen ? styles.barOpen : ''}></span>
              <span className={menuOpen ? styles.barOpen : ''}></span>
              <span className={menuOpen ? styles.barOpen : ''}></span>
            </button>
          </div>
        </div>

        {/* Search Bar */}
        {searchOpen && (
          <div className={styles.searchBar} style={{ padding: '0', background: 'transparent', border: 'none' }}>
            <InstantSearch onClose={() => setSearchOpen(false)} />
          </div>
        )}
      </div>
    </header>
  );
}
