'use client';

import React, { useState } from 'react';
import { ShoppingBag, Box, Briefcase, Sparkles, Layers, Sun, Moon, User, LogOut, History, UserPlus, LogIn, ChevronDown, Check, Coins, Search, X, Menu } from 'lucide-react';
import { useApp } from '@/context/AppContext';
import { motion, AnimatePresence } from 'motion/react';
import { translations } from '@/lib/translations';
import { supabase } from '@/src/supabaseClient';

export default function Navbar() {
  const { 
    activeView, 
    setActiveView, 
    cart, 
    setCartOpen, 
    theme, 
    toggleTheme,
    currency,
    setCurrency,
    language,
    setLanguage,
    currentUser,
    registerUser,
    loginUser,
    logoutUser,
    orders,
    searchQuery,
    setSearchQuery,
    authModalOpen,
    setAuthModalOpen,
    authModalTab,
    setAuthModalTab
  } = useApp();
  
  const isDark = theme === 'dark';
  const t = translations[language];
  const totalCartItems = cart.reduce((sum, item) => sum + item.quantity, 0);

  // Responsive state
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  // User auth credentials inputs
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [contact, setContact] = useState('');
  const [authError, setAuthError] = useState('');
  const [authSuccess, setAuthSuccess] = useState('');
  const [showProfileDropdown, setShowProfileDropdown] = useState(false);
  const [showHistoryModal, setShowHistoryModal] = useState(false);
  const [isGoogleLoading, setIsGoogleLoading] = useState(false);

  const handleGoogleAuth = () => {
    setAuthError('');
    setIsGoogleLoading(true);
    setTimeout(() => {
      const googleEmail = 'labawkjohn@gmail.com';
      const googleName = 'John Labawk';
      const success = registerUser(googleName, googleEmail, '@labawkjohn');
      setIsGoogleLoading(false);
      if (success) {
        setAuthModalOpen(false);
        setName('');
        setEmail('');
        setPassword('');
        setContact('');
      } else {
        setAuthError('Google Authentication failed. Please try manual entry.');
      }
    }, 900);
  };

  const handleRegister = async (e: React.FormEvent) => {
    e.preventDefault();
    setAuthError('');
    setAuthSuccess('');
    if (!name.trim() || !email.trim() || !password.trim()) {
      setAuthError('Please fill in required fields.');
      return;
    }

    try {
      const { data, error } = await supabase.auth.signUp({
        email,
        password,
      });

      if (error) {
        setAuthError(error.message);
        return;
      }

      if (!data.session) {
        setAuthSuccess("Check your email and confirm your account before logging in.");
        return;
      }

      // Synchronize locally to keep state congruent
      const success = registerUser(name, email, contact);
      if (success) {
        setAuthModalOpen(false);
        setName('');
        setEmail('');
        setPassword('');
        setContact('');
        
        // Redirect to Home page
        setActiveView('storefront');
        if (typeof window !== 'undefined') {
          window.history.pushState({}, '', '/');
        }
      } else {
        setAuthError('Authentication error. Try again.');
      }
    } catch (err: any) {
      setAuthError(err.message || 'Signup failed.');
    }
  };

  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    setAuthError('');
    setAuthSuccess('');
    if (!email.trim() || !password.trim()) {
      setAuthError('Please provide both email and password.');
      return;
    }

    try {
      const { data, error } = await supabase.auth.signInWithPassword({
        email,
        password,
      });

      if (error) {
        setAuthError(error.message);
        return;
      }

      if (!data.session) {
        setAuthError("Failed to establish a valid session. Please verify your credentials or check your verification email.");
        return;
      }

      // Sync state or register profile if they're logging in first time in the schema
      let success = loginUser(email);
      if (!success) {
        // Fallback dummy profile name setup inside Local Storage if we don't hold them in local list
        const defaultName = email.split('@')[0];
        success = registerUser(defaultName, email);
      }

      if (success) {
        setAuthModalOpen(false);
        setEmail('');
        setPassword('');
        
        // Redirect to Home page
        setActiveView('storefront');
        if (typeof window !== 'undefined') {
          window.history.pushState({}, '', '/');
        }
      } else {
        setAuthError('Failed to initialize local session.');
      }
    } catch (err: any) {
      setAuthError(err.message || 'Login failed.');
    }
  };

  // Filter orders created by this email
  const userOrders = currentUser 
    ? orders.filter(o => o.clientEmail.toLowerCase() === currentUser.email.toLowerCase())
    : [];

  return (
    <>
      <header className="sticky top-4 z-50 w-full max-w-7xl mx-auto px-4 sm:px-6">
        <div className={`h-20 rounded-3xl border transition-all duration-300 px-4 sm:px-10 flex items-center justify-between shadow-[0_8px_32px_0_rgba(0,0,0,0.15)] ${
          isDark 
            ? 'border-white/10 bg-[#020205]/40 backdrop-blur-xl text-white' 
            : 'border-slate-200/80 bg-white/75 backdrop-blur-xl text-slate-900 shadow-[0_8px_32px_0_rgba(15,23,42,0.06)]'
        }`}>
           {/* Brand Logo and Title */}
          <div 
            onClick={() => setActiveView('storefront')} 
            className="flex items-center gap-3 cursor-pointer group"
            id="nav-logo"
          >
            <div className="w-8 h-8 bg-gradient-to-br from-cyan-400 to-purple-500 rounded-lg shadow-[0_0_15px_rgba(34,211,238,0.5)] flex items-center justify-center transition-transform group-hover:scale-105 duration-300">
              <Layers className="w-4.5 h-4.5 text-white" />
            </div>
            <div>
              <h1 className={`text-base sm:text-lg font-bold tracking-tight uppercase font-display transition-colors duration-300 ${
                isDark ? 'text-white' : 'text-slate-850'
              }`}>
                MASTER <span className="text-cyan-500">DIGITAL</span>
              </h1>
            </div>
          </div>

          {/* Desktop Navigation Links */}
          <nav className="hidden md:flex items-center gap-1 sm:gap-2" id="nav-menu">
            <button
              id="nav-link-store"
              onClick={() => setActiveView('storefront')}
              className={`relative px-3 py-2 text-xs font-semibold rounded-xl transition-all duration-300 flex items-center gap-1.5 cursor-pointer ${
                activeView === 'storefront'
                  ? isDark
                    ? 'bg-purple-500/10 text-purple-300 border border-purple-500/30'
                    : 'bg-purple-500/10 text-purple-600 border border-purple-500/20'
                  : 'text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-100 border border-transparent'
              }`}
            >
              <Box className="w-3.5 h-3.5" />
              <span>{t.store}</span>
            </button>

            <button
              id="nav-link-portfolio"
              onClick={() => setActiveView('portfolio')}
              className={`relative px-3 py-2 text-xs font-semibold rounded-xl transition-all duration-300 flex items-center gap-1.5 cursor-pointer ${
                activeView === 'portfolio'
                  ? isDark
                    ? 'bg-purple-500/10 text-purple-300 border border-purple-500/30'
                    : 'bg-purple-500/10 text-purple-600 border border-purple-500/20'
                  : 'text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-100 border border-transparent'
              }`}
            >
              <Briefcase className="w-3.5 h-3.5" />
              <span>{t.portfolio}</span>
            </button>

            {currentUser && (
              <button
                id="nav-link-profile"
                onClick={() => setActiveView('profile')}
                className={`relative px-3 py-2 text-xs font-semibold rounded-xl transition-all duration-300 flex items-center gap-1.5 cursor-pointer ${
                  activeView === 'profile'
                    ? isDark
                    ? 'bg-purple-500/10 text-purple-300 border border-purple-500/30'
                    : 'bg-purple-500/10 text-purple-600 border border-purple-500/20'
                    : 'text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-100 border border-transparent'
                }`}
              >
                <User className="w-3.5 h-3.5" />
                <span>{t.profile}</span>
              </button>
            )}
          </nav>

          {/* Sleek Global Search Bar */}
          <div className="relative hidden md:flex items-center mx-1 sm:mx-2" id="global-search-container">
            <span className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-slate-400/80">
              <Search className="w-3.5 h-3.5" />
            </span>
            <input
              type="text"
              placeholder={activeView === 'portfolio' ? t.searchPlaceholderPortfolio : t.searchPlaceholderStore}
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className={`text-[11px] sm:text-xs pl-8.5 pr-8 py-2 rounded-2xl border transition-all duration-300 outline-none w-20 xs:w-28 sm:w-44 md:w-56 lg:w-64 focus:w-28 xs:focus:w-40 sm:focus:w-56 md:focus:w-72 lg:focus:w-80 ${
                isDark
                  ? 'bg-white/5 border-white/5 hover:bg-white/[0.08] text-slate-200 placeholder-slate-500 focus:border-cyan-500/50 focus:bg-[#020205] focus:ring-1 focus:ring-cyan-500/10'
                  : 'bg-slate-100 border-slate-205 hover:bg-slate-200/50 text-slate-800 placeholder-slate-400 focus:border-purple-500/50 focus:bg-white focus:ring-1 focus:ring-purple-500/10'
              }`}
            />
            {searchQuery && (
              <button
                type="button"
                onClick={() => setSearchQuery('')}
                className="absolute inset-y-0 right-0 flex items-center pr-2.5 text-slate-400 hover:text-slate-200 dark:hover:text-white transition-colors"
                title="Clear Search"
              >
                <X className="w-3.5 h-3.5" />
              </button>
            )}
          </div>

          {/* Actions panel */}
          <div className="flex items-center gap-1.5 sm:gap-3">
            
            {/* Desktop Only Actions Panel */}
            <div className="hidden md:flex items-center gap-1.5 sm:gap-3">
              {/* Currency Selector Slider Container */}
              <div className={`p-1 rounded-full border flex items-center gap-0.5 ${
                isDark ? 'border-white/5 bg-slate-950/40' : 'border-slate-200 bg-slate-100'
              }`}>
                <button
                  onClick={() => setCurrency('USD')}
                  className={`px-2 py-1 text-[10px] font-mono font-bold rounded-full transition-all cursor-pointer ${
                    currency === 'USD'
                      ? 'bg-cyan-500 text-white shadow-sm'
                      : 'text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200'
                  }`}
                >
                  USD
                </button>
                <button
                  onClick={() => setCurrency('MMK')}
                  className={`px-2 py-1 text-[10px] font-mono font-bold rounded-full transition-all cursor-pointer ${
                    currency === 'MMK'
                      ? 'bg-cyan-500 text-white shadow-sm'
                      : 'text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200'
                  }`}
                >
                  MMK
                </button>
              </div>



              {/* Light/Dark Mode Switcher */}
              <button
                id="theme-toggle-btn"
                onClick={toggleTheme}
                className={`p-2 rounded-full border transition-all duration-300 cursor-pointer ${
                  isDark
                    ? 'border-white/5 bg-white/5 hover:bg-white/10 text-yellow-400'
                    : 'border-slate-200 bg-white hover:bg-slate-50 text-slate-705'
                }`}
              >
                {isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
              </button>

              {/* Interactive Shopping Cart Trigger (Next to Theme Switcher) */}
              <button
                id="nav-cart-btn"
                onClick={() => setCartOpen(true)}
                className={`relative flex items-center justify-center p-2.5 sm:px-4 py-2 rounded-full border transition-all duration-300 cursor-pointer font-semibold ${
                  isDark
                    ? 'border-white/5 bg-white/5 hover:bg-white/10 text-slate-100'
                    : 'border-slate-200 bg-white hover:bg-slate-100 text-slate-800'
                }`}
              >
                <ShoppingBag className="w-4 h-4 mr-0 sm:mr-1 text-cyan-500" />
                <span className="hidden sm:inline text-xs uppercase tracking-wider font-bold">{t.cart}</span>
                {totalCartItems > 0 && (
                  <span className="absolute -top-1.5 -right-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-gradient-to-r from-cyan-400 to-purple-500 text-[9px] font-bold text-white shadow border border-[#020205]">
                    {totalCartItems}
                  </span>
                )}
              </button>

              {/* Dynamic Auth Profile Widget */}
              <div className="relative">
                {currentUser ? (
                  <div className="flex items-center gap-1">
                    <button
                      onClick={() => setShowProfileDropdown(!showProfileDropdown)}
                      className={`flex items-center gap-1.5 px-3 py-2 text-xs font-bold rounded-full border transition-all duration-305 cursor-pointer ${
                        isDark
                          ? 'border-purple-550/30 bg-purple-500/10 text-purple-300 hover:bg-purple-500/20'
                          : 'border-purple-200 bg-purple-50 text-purple-700 hover:bg-purple-100'
                      }`}
                    >
                      <User className="w-3.5 h-3.5" />
                      <span className="max-w-[80px] truncate">{currentUser.name.split(' ')[0]}</span>
                      <ChevronDown className="w-3 h-3 opacity-60" />
                    </button>

                    <AnimatePresence>
                      {showProfileDropdown && (
                        <motion.div
                          initial={{ opacity: 0, y: 10, scale: 0.95 }}
                          animate={{ opacity: 1, y: 0, scale: 1 }}
                          exit={{ opacity: 0, y: 10, scale: 0.95 }}
                          transition={{ duration: 0.2 }}
                          className={`absolute right-0 mt-5 w-56 rounded-2xl border p-2.5 backdrop-blur-xl shadow-xl z-55 ${
                            isDark 
                              ? 'bg-[#100c22]/95 border-white/10 text-slate-100 shadow-black/80' 
                              : 'bg-white/95 border-slate-200 text-slate-900 shadow-slate-200/50'
                          }`}
                        >
                          <div className="px-2 py-1.5 border-b border-slate-300/10 mb-1.5 relative pr-8">
                            <p className="text-[10px] uppercase font-bold tracking-widest text-slate-400 font-mono">My Account</p>
                            <p className="text-xs font-bold font-sans truncate mt-0.5">{currentUser.name}</p>
                            <p className="text-[10px] text-slate-500 truncate">{currentUser.email}</p>
                            <button
                              onClick={() => setShowProfileDropdown(false)}
                              className="absolute top-1 right-1 p-1 rounded-lg text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors cursor-pointer"
                              title="Close Menu"
                            >
                              <X className="w-3.5 h-3.5" />
                            </button>
                          </div>

                          <button
                            onClick={() => {
                              setActiveView('profile');
                              setShowProfileDropdown(false);
                            }}
                            className={`w-full text-left px-2 py-2 rounded-lg text-xs font-medium flex items-center gap-2 transition-all ${
                              isDark ? 'hover:bg-white/5 text-slate-200' : 'hover:bg-slate-100 text-slate-700'
                            }`}
                          >
                            <History className="w-3.5 h-3.5 text-cyan-500" />
                            <span>My Profile & Ledger ({userOrders.length})</span>
                          </button>

                          <button
                            onClick={() => {
                              logoutUser();
                              setShowProfileDropdown(false);
                            }}
                            className={`w-full text-left px-2 py-2 rounded-lg text-xs font-bold flex items-center gap-2 transition-all mt-1 bg-red-500/5 hover:bg-red-500/10 text-red-400`}
                          >
                            <LogOut className="w-3.5 h-3.5" />
                            <span>Logout</span>
                          </button>
                        </motion.div>
                      )}
                    </AnimatePresence>
                  </div>
                ) : (
                  <button
                    onClick={() => {
                      setAuthModalTab('register');
                      setAuthModalOpen(true);
                    }}
                    className={`px-4.5 py-2 text-xs font-bold rounded-full border transition-all duration-300 cursor-pointer flex items-center gap-1.5 ${
                      isDark
                        ? 'border-white/5 bg-white/5 hover:bg-white/10 text-slate-100'
                        : 'border-slate-250 bg-slate-900 hover:bg-slate-800 text-white'
                    }`}
                  >
                    <UserPlus className="w-3.5 h-3.5 text-purple-400" />
                    <span className="hidden xs:inline">{t.login}</span>
                  </button>
                )}
              </div>
            </div>

            {/* Interactive Shopping Cart Trigger (Mobile visible, next to menu button) */}
            <button
              id="nav-cart-btn-mobile"
              onClick={() => setCartOpen(true)}
              className={`relative md:hidden flex items-center justify-center p-2.5 rounded-full border transition-all duration-300 cursor-pointer font-semibold ${
                isDark
                  ? 'border-white/5 bg-white/5 hover:bg-white/10 text-slate-100'
                  : 'border-slate-200 bg-white hover:bg-slate-100 text-slate-800'
              }`}
            >
              <ShoppingBag className="w-4 h-4 text-cyan-500" />
              {totalCartItems > 0 && (
                <span className="absolute -top-1.5 -right-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-gradient-to-r from-cyan-400 to-purple-500 text-[9px] font-bold text-white shadow border border-[#020205]">
                  {totalCartItems}
                </span>
              )}
            </button>

            {/* Mobile Hamburger toggle button */}
            <button
              id="nav-hamburger-btn"
              onClick={() => {
                setMobileMenuOpen(!mobileMenuOpen);
              }}
              className={`p-2.5 rounded-full border transition-all duration-300 cursor-pointer md:hidden flex items-center justify-center ${
                isDark
                  ? 'border-white/5 bg-white/5 hover:bg-white/10 text-slate-100'
                  : 'border-slate-200 bg-white hover:bg-slate-100 text-slate-800'
              }`}
              aria-label="Toggle menu"
            >
              {mobileMenuOpen ? <X className="w-4 h-4" /> : <Menu className="w-4 h-4" />}
            </button>

          </div>
        </div>

        {/* Brand New Mobile Connective Dropdown Drawer */}
        <AnimatePresence>
          {mobileMenuOpen && (
            <motion.div
              initial={{ opacity: 0, scale: 0.95, y: -10 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.95, y: -10 }}
              transition={{ duration: 0.25, ease: "easeOut" }}
              className={`absolute top-full left-4 right-4 mt-2 p-5 rounded-3xl border backdrop-blur-2xl shadow-xl z-40 flex flex-col gap-4 max-h-[80vh] overflow-y-auto ${
                isDark 
                  ? 'bg-[#09071c]/95 border-cyan-500/10 text-white shadow-black/80' 
                  : 'bg-white/95 border-slate-200/80 text-slate-900 shadow-slate-200/40'
              }`}
            >
              {/* Search input in mobile view drawer */}
              <div className="relative flex items-center w-full">
                <span className="absolute inset-y-0 left-0 flex items-center pl-3.5 pointer-events-none text-slate-400">
                  <Search className="w-4 h-4" />
                </span>
                <input
                  type="text"
                  placeholder={activeView === 'portfolio' ? t.searchPlaceholderPortfolio : t.searchPlaceholderStore}
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className={`text-xs pl-9 pr-8 py-3 rounded-2xl border transition-all duration-300 outline-none w-full ${
                    isDark
                      ? 'bg-white/5 border-white/5 text-slate-200 placeholder-slate-500 focus:border-cyan-500/50 focus:bg-slate-950'
                      : 'bg-slate-100 border-slate-200 text-slate-800 placeholder-slate-400 focus:border-purple-500/50 focus:bg-white'
                  }`}
                />
                {searchQuery && (
                  <button
                    type="button"
                    onClick={() => setSearchQuery('')}
                    className="absolute inset-y-0 right-0 flex items-center pr-3 text-slate-400 hover:text-slate-100"
                  >
                    <X className="w-4 h-4" />
                  </button>
                )}
              </div>

              {/* Mobile primary layout navigation options */}
              <div className="grid grid-cols-2 gap-2.5">
                <button
                  onClick={() => {
                    setActiveView('storefront');
                    setMobileMenuOpen(false);
                  }}
                  className={`p-3 text-xs font-bold rounded-xl transition-all flex items-center justify-center gap-2 border cursor-pointer ${
                    activeView === 'storefront'
                      ? 'bg-purple-500/15 text-purple-400 border-purple-500/30'
                      : isDark
                        ? 'bg-white/5 border-transparent text-slate-300 hover:text-white'
                        : 'bg-slate-50 border-transparent text-slate-600 hover:text-slate-900'
                  }`}
                >
                  <Box className="w-4 h-4" />
                  <span>{t.store}</span>
                </button>

                <button
                  onClick={() => {
                    setActiveView('portfolio');
                    setMobileMenuOpen(false);
                  }}
                  className={`p-3 text-xs font-bold rounded-xl transition-all flex items-center justify-center gap-2 border cursor-pointer ${
                    activeView === 'portfolio'
                      ? 'bg-purple-500/15 text-purple-400 border-purple-500/30'
                      : isDark
                        ? 'bg-white/5 border-transparent text-slate-300 hover:text-white'
                        : 'bg-slate-50 border-transparent text-slate-600 hover:text-slate-900'
                  }`}
                >
                  <Briefcase className="w-4 h-4" />
                  <span>{t.portfolio}</span>
                </button>

                {currentUser && (
                  <button
                    onClick={() => {
                      setActiveView('profile');
                      setMobileMenuOpen(false);
                    }}
                    className={`col-span-2 p-3 text-xs font-bold rounded-xl transition-all flex items-center justify-center gap-2 border cursor-pointer ${
                      activeView === 'profile'
                        ? 'bg-purple-500/15 text-purple-400 border-purple-500/30 font-bold'
                        : isDark
                          ? 'bg-white/5 border-transparent text-slate-300 hover:text-white'
                          : 'bg-slate-50 border-transparent text-slate-600 hover:text-slate-900'
                    }`}
                  >
                    <User className="w-4 h-4 text-cyan-500" />
                    <span>My Profile Ledger ({userOrders.length})</span>
                  </button>
                )}
              </div>

              {/* Slider Toggles: Currency in mobile view */}
              <div className="flex flex-col sm:flex-row gap-3">
                {/* Currency selector component */}
                <div className={`p-1.5 rounded-2xl border flex-1 flex items-center justify-between ${
                  isDark ? 'border-white/5 bg-slate-950/40' : 'border-slate-205 bg-slate-100'
                }`}>
                  <span className="text-[10px] uppercase font-mono font-black tracking-wider pl-3.5 text-slate-400">
                    Currency
                  </span>
                  <div className="flex gap-1">
                    <button
                      onClick={() => setCurrency('USD')}
                      className={`px-3 py-1.5 text-xs font-mono font-bold rounded-xl transition-all cursor-pointer ${
                        currency === 'USD'
                          ? 'bg-cyan-500 text-white shadow-xs'
                          : 'text-slate-500 dark:text-slate-400'
                      }`}
                    >
                      USD
                    </button>
                    <button
                      onClick={() => setCurrency('MMK')}
                      className={`px-3 py-1.5 text-xs font-mono font-bold rounded-xl transition-all cursor-pointer ${
                        currency === 'MMK'
                          ? 'bg-cyan-500 text-white shadow-xs'
                          : 'text-slate-500 dark:text-slate-400'
                      }`}
                    >
                      MMK
                    </button>
                  </div>
                </div>
              </div>

              {/* Theme toggle & Profile Authentication options in Drawer Footer */}
              <div className="flex items-center justify-between border-t border-slate-300/10 pt-4 mt-1">
                {/* Visual Theme selector */}
                <div className="flex items-center gap-2.5">
                  <span className="text-xs font-bold text-slate-400">Theme</span>
                  <button
                    onClick={toggleTheme}
                    className={`p-2 py-1.5 rounded-xl border transition-all duration-300 cursor-pointer flex items-center gap-2 ${
                      isDark
                        ? 'border-white/5 bg-white/5 text-yellow-400'
                        : 'border-slate-200 bg-slate-100 text-slate-705'
                    }`}
                  >
                    {isDark ? <Sun className="w-3.5 h-3.5" /> : <Moon className="w-3.5 h-3.5" />}
                    <span className="text-xs font-semibold">{isDark ? 'Light' : 'Dark'}</span>
                  </button>
                </div>

                {/* Sign-in Or Logout profile action button */}
                <div>
                  {currentUser ? (
                    <button
                      onClick={() => {
                        logoutUser();
                        setMobileMenuOpen(false);
                      }}
                      className="px-4 py-2 rounded-xl text-xs font-bold transition-all bg-red-500/10 hover:bg-red-500/20 text-red-500 flex items-center gap-1.5 cursor-pointer border border-red-500/20"
                    >
                      <LogOut className="w-3.5 h-3.5" />
                      <span>{t.logout || "Logout"}</span>
                    </button>
                  ) : (
                    <button
                      onClick={() => {
                        setAuthModalTab('register');
                        setAuthModalOpen(true);
                        setMobileMenuOpen(false);
                      }}
                      className="px-4 py-2 rounded-xl text-xs font-bold transition-all bg-purple-600 hover:bg-purple-500 text-white flex items-center gap-1.5 shadow-md shadow-purple-500/20 cursor-pointer border border-purple-500/30"
                    >
                      <UserPlus className="w-3.5 h-3.5" />
                      <span>{t.login}</span>
                    </button>
                  )}
                </div>
              </div>

            </motion.div>
          )}
        </AnimatePresence>
      </header>

      {/* User Registration & Login Glassmorphic Modal */}
      <AnimatePresence>
        {authModalOpen && (
          <div className="fixed inset-0 z-100 flex items-center justify-center p-4">
            {/* Backdrop */}
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              onClick={() => setAuthModalOpen(false)}
              className="absolute inset-0 bg-black/60 backdrop-blur-sm"
            />

            {/* Modal Body */}
            <motion.div
              initial={{ opacity: 0, scale: 0.95, y: 20 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.95, y: 20 }}
              transition={{ duration: 0.3 }}
              className={`w-full max-w-md relative rounded-3xl border p-7 sm:p-8 backdrop-blur-2xl shadow-2xl ${
                isDark 
                  ? 'bg-[#100c25]/95 border-white/10 text-slate-100 shadow-black' 
                  : 'bg-white/95 border-slate-200 text-slate-900 shadow-slate-200'
              }`}
            >
              {/* Tab Toggles */}
              <div className="flex border-b border-slate-300/10 pb-4 mb-6">
                <button
                  onClick={() => {
                    setAuthModalTab('register');
                    setAuthError('');
                    setAuthSuccess('');
                  }}
                  className={`flex-1 text-center py-2 text-sm font-bold border-b-2 transition-all cursor-pointer ${
                    authModalTab === 'register'
                      ? 'border-purple-500 text-purple-500 dark:text-purple-400'
                      : 'border-transparent text-slate-400 hover:text-slate-200'
                  }`}
                >
                  Create Account
                </button>
                <button
                  onClick={() => {
                    setAuthModalTab('login');
                    setAuthError('');
                    setAuthSuccess('');
                  }}
                  className={`flex-1 text-center py-2 text-sm font-bold border-b-2 transition-all cursor-pointer ${
                    authModalTab === 'login'
                      ? 'border-purple-500 text-purple-500 dark:text-purple-400'
                      : 'border-transparent text-slate-400 hover:text-slate-200'
                  }`}
                >
                  Existing Sign In
                </button>
              </div>

              {authModalTab === 'register' ? (
                <form onSubmit={handleRegister} className="space-y-4">
                  <div>
                    <label className="block text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-1">
                      Full Name *
                    </label>
                    <input
                      type="text"
                      required
                      value={name}
                      onChange={(e) => setName(e.target.value)}
                      placeholder="e.g. Aung San"
                      className={`w-full px-4 py-2.5 rounded-xl border text-xs outline-none transition-all ${
                        isDark 
                          ? 'bg-slate-950/50 border-white/5 focus:border-cyan-500 text-white' 
                          : 'bg-slate-50 border-slate-200 focus:border-purple-500 text-slate-900'
                      }`}
                    />
                  </div>

                  <div>
                    <label className="block text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-1">
                      Email Address *
                    </label>
                    <input
                      type="email"
                      required
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      placeholder="e.g. customer@domain.com"
                      className={`w-full px-4 py-2.5 rounded-xl border text-xs outline-none transition-all ${
                        isDark 
                          ? 'bg-slate-950/50 border-white/5 focus:border-cyan-500 text-white' 
                          : 'bg-slate-50 border-slate-200 focus:border-purple-500 text-slate-900'
                      }`}
                    />
                  </div>

                  <div>
                    <label className="block text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-1">
                      Password *
                    </label>
                    <input
                      type="password"
                      required
                      autoComplete="new-password"
                      value={password}
                      onChange={(e) => setPassword(e.target.value)}
                      placeholder="••••••••"
                      className={`w-full px-4 py-2.5 rounded-xl border text-xs outline-none transition-all ${
                        isDark 
                          ? 'bg-slate-950/50 border-white/5 focus:border-cyan-500 text-white' 
                          : 'bg-slate-50 border-slate-200 focus:border-purple-500 text-slate-900'
                      }`}
                    />
                  </div>

                  <div>
                    <label className="block text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-1">
                      Messenger SLA Handler (Telegram / WhatsApp)
                    </label>
                    <input
                      type="text"
                      value={contact}
                      onChange={(e) => setContact(e.target.value)}
                      placeholder="e.g. @tele_handle or +959..."
                      className={`w-full px-4 py-2.5 rounded-xl border text-xs outline-none transition-all ${
                        isDark 
                          ? 'bg-slate-950/50 border-white/5 focus:border-cyan-500 text-white' 
                          : 'bg-slate-50 border-slate-200 focus:border-purple-500 text-slate-900'
                      }`}
                    />
                  </div>

                  {authError && (
                    <p className="text-xs text-red-500 font-medium bg-red-500/5 p-2 rounded-lg text-center">
                      {authError}
                    </p>
                  )}

                  {authSuccess && (
                    <p className="text-xs text-emerald-500 font-medium bg-emerald-500/5 p-3 rounded-xl text-center border border-emerald-500/20 font-sans">
                      {authSuccess}
                    </p>
                  )}

                  <button
                    type="submit"
                    className="w-full py-3.5 rounded-xl bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-500 hover:to-indigo-550 text-white font-semibold text-xs transition-all tracking-wider uppercase font-sans mt-2 cursor-pointer"
                  >
                    Register Profile
                  </button>
                </form>
              ) : (
                <form onSubmit={handleLogin} className="space-y-4">
                  <div>
                    <label className="block text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-1">
                      Registered Email
                    </label>
                    <input
                      type="email"
                      required
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      placeholder="e.g. customer@domain.com"
                      className={`w-full px-4 py-2.5 rounded-xl border text-xs outline-none transition-all ${
                        isDark 
                          ? 'bg-slate-950/50 border-white/5 focus:border-cyan-500 text-white' 
                          : 'bg-slate-50 border-slate-200 focus:border-purple-500 text-slate-900'
                      }`}
                    />
                  </div>

                  <div>
                    <div className="flex justify-between items-center mb-1">
                      <label className="block text-[10px] font-bold uppercase tracking-wider text-slate-400">
                        Password
                      </label>
                      <a
                        href="/login?tab=forgot"
                        onClick={() => setAuthModalOpen(false)}
                        className="text-[10px] text-cyan-400 hover:underline font-mono"
                      >
                        Forgot password?
                      </a>
                    </div>
                    <input
                      type="password"
                      required
                      autoComplete="current-password"
                      value={password}
                      onChange={(e) => setPassword(e.target.value)}
                      placeholder="••••••••"
                      className={`w-full px-4 py-2.5 rounded-xl border text-xs outline-none transition-all ${
                        isDark 
                          ? 'bg-slate-950/50 border-white/5 focus:border-cyan-500 text-white' 
                          : 'bg-slate-50 border-slate-200 focus:border-purple-500 text-slate-900'
                      }`}
                    />
                  </div>

                  {authError && (
                    <p className="text-xs text-red-500 font-medium bg-red-500/5 p-2 rounded-lg text-center">
                      {authError}
                    </p>
                  )}

                  <button
                    type="submit"
                    className="w-full py-3.5 rounded-xl bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-400 hover:to-blue-500 text-white font-semibold text-xs transition-all tracking-wider uppercase font-sans mt-2 cursor-pointer"
                  >
                    Verify Credentials & Sign In
                  </button>
                </form>
              )}

              <div className="relative my-5 flex items-center justify-center">
                <div className="absolute inset-0 flex items-center">
                  <div className="w-full border-t border-slate-300/10"></div>
                </div>
                <span className={`relative px-3 text-[10px] font-bold uppercase tracking-wider font-mono ${
                  isDark ? 'bg-[#100c25] text-slate-500' : 'bg-white text-slate-400'
                }`}>
                  or
                </span>
              </div>

              <button
                type="button"
                onClick={handleGoogleAuth}
                disabled={isGoogleLoading}
                className={`w-full flex items-center justify-center gap-3 py-3 rounded-xl font-semibold text-xs border tracking-wide transition-all cursor-pointer ${
                  isDark
                    ? 'border-white/10 bg-white/5 hover:bg-white/10 text-slate-200 hover:text-white'
                    : 'border-slate-200 bg-white hover:bg-slate-50 text-slate-700'
                } relative`}
              >
                {isGoogleLoading ? (
                  <div className="flex items-center gap-2">
                    <svg className="animate-spin h-4 w-4 text-purple-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    <span>Connecting with Google...</span>
                  </div>
                ) : (
                  <>
                    <svg className="w-4 h-4" viewBox="0 0 24 24">
                      <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4" />
                      <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
                      <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.06H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.94l2.85-2.22.81-.63z" fill="#FBBC05" />
                      <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.06l3.66 2.84c.87-2.6 3.3-4.52 6.16-4.52z" fill="#EA4335" />
                    </svg>
                    <span>{authModalTab === 'register' ? 'Sign Up with Google' : 'Sign In with Google'}</span>
                  </>
                )}
              </button>

              <button
                onClick={() => setAuthModalOpen(false)}
                className="absolute top-4 right-4 text-slate-500 hover:text-slate-350 dark:hover:text-white transition-colors"
              >
                ✕
              </button>
            </motion.div>
          </div>
        )}
      </AnimatePresence>

      {/* User Order Ledgers Modal */}
      <AnimatePresence>
        {showHistoryModal && (
          <div className="fixed inset-0 z-100 flex items-center justify-center p-4">
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              onClick={() => setShowHistoryModal(false)}
              className="absolute inset-0 bg-black/60 backdrop-blur-sm"
            />

            <motion.div
              initial={{ opacity: 0, scale: 0.95, y: 20 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.95, y: 20 }}
              transition={{ duration: 0.3 }}
              className={`w-full max-w-2xl relative rounded-3xl border p-7 backdrop-blur-2xl shadow-2xl max-h-[85vh] overflow-y-auto custom-scroll ${
                isDark 
                  ? 'bg-[#100c25]/95 border-white/10 text-slate-100' 
                  : 'bg-white/95 border-slate-200 text-slate-900'
              }`}
            >
              <div className="flex justify-between items-center pb-4 border-b border-slate-300/10 mb-6">
                <div>
                  <h3 className="font-display font-bold text-lg uppercase tracking-wide">My Registered Orders</h3>
                  <p className="text-[10px] text-slate-500">Tracking active service SLAs for {currentUser?.email}</p>
                </div>
                <button
                  onClick={() => setShowHistoryModal(false)}
                  className="p-1 rounded-full text-slate-400 hover:text-white"
                >
                  ✕
                </button>
              </div>

              {userOrders.length === 0 ? (
                <div className="text-center py-12">
                  <History className="w-10 h-10 text-slate-500 mx-auto opacity-30 mb-3" />
                  <p className="text-xs text-slate-500 font-medium">No order references listed for this profile.</p>
                  <p className="text-[10px] text-slate-400/80 mt-1">Make a booking or purchase channels to seed references.</p>
                </div>
              ) : (
                <div className="space-y-4">
                  {userOrders.map((order) => {
                    const orderStatusColor = {
                      pending: 'text-amber-400 bg-amber-400/10 border-amber-400/20',
                      in_progress: 'text-blue-400 bg-blue-400/10 border-blue-400/20',
                      completed: 'text-emerald-400 bg-emerald-400/10 border-emerald-400/20',
                      cancelled: 'text-red-400 bg-red-400/10 border-red-400/20',
                    }[order.status];

                    return (
                      <div
                        key={order.id}
                        className={`p-4 rounded-xl border flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 ${
                          isDark ? 'bg-white/5 border-white/5' : 'bg-slate-50 border-slate-200'
                        }`}
                      >
                        <div>
                          <div className="flex items-center gap-2">
                            <span className="font-mono text-xs font-bold text-cyan-500">{order.reference}</span>
                            <span className={`text-[10px] px-2 py-0.5 rounded-full border ${orderStatusColor} font-mono uppercase`}>
                              {order.status.replace('_', ' ')}
                            </span>
                          </div>
                          
                          <div className="mt-2 space-y-1">
                            {order.items.map((item, idx) => (
                              <p key={idx} className="text-[11px] text-slate-400">
                                • <span className="font-semibold text-slate-300 dark:text-slate-200">{item.product.name}</span> ({item.quantity}x)
                              </p>
                            ))}
                          </div>
                          <p className="text-[9px] text-slate-500 font-mono mt-1">Registered: {new Date(order.createdAt).toLocaleString()}</p>
                        </div>

                        <div className="text-right flex sm:flex-col justify-between items-center sm:items-end border-t sm:border-t-0 border-slate-300/10 pt-2 sm:pt-0">
                          <span className="text-[10px] text-slate-500 sm:hidden">Total Fee:</span>
                          <div>
                            {/* Conversion formatted subtotal price display */}
                            <span className="text-sm font-bold text-purple-400 font-mono">
                              {currency === 'MMK' 
                                ? (Math.round(order.totalPrice * 4000)).toLocaleString() + ' MMK'
                                : '$' + order.totalPrice.toFixed(2)}
                            </span>
                          </div>
                          <span className="text-[9px] uppercase font-bold text-cyan-400 tracking-wider">SLA Active</span>
                        </div>
                      </div>
                    );
                  })}
                </div>
              )}
            </motion.div>
          </div>
        )}
      </AnimatePresence>
    </>
  );
}