'use client';

import { useState, useRef, useEffect } from 'react';
import { useTheme } from 'next-themes';
import { usePathname, useRouter } from 'next/navigation';
import Link from 'next/link';
import { 
  Bell, 
  Moon, 
  Sun, 
  LogOut, 
  User as UserIcon, 
  ChevronRight, 
  HelpCircle, 
  ShieldAlert,
  Calendar,
  Clock,
  Layers,
  Store,
  Building2
} from 'lucide-react';
import { useAppDispatch, useAppSelector } from '@/store/hooks';
import { logout } from '@/features/auth/authSlice';
import { cn } from '@/utils/cn';
import Cookies from 'js-cookie';
import { setDsoWorkspaceMode } from '@/features/theme/themeSlice';

export function Navbar() {
  const pathname = usePathname();
  const { theme, setTheme } = useTheme();
  const dispatch = useAppDispatch();
  const router = useRouter();
  const user = useAppSelector((s) => s.auth.user);
  const activeDsoMode = useAppSelector((s) => s.ui.dsoWorkspaceMode);

  const [menuOpen, setMenuOpen] = useState(false);
  const menuRef = useRef<HTMLDivElement>(null);

  const [dateTime, setDateTime] = useState<Date | null>(null);

  useEffect(() => {
    setDateTime(new Date());
    const timer = setInterval(() => setDateTime(new Date()), 1000);
    return () => clearInterval(timer);
  }, []);

  const crumbs = pathname.split('/').filter(Boolean);

  const handleLogout = () => {
    dispatch(logout());
    Cookies.remove('refreshToken');
    router.replace('/signin');
  };

  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
        setMenuOpen(false);
      }
    }
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  const formattedDate = dateTime
    ? dateTime.toLocaleDateString('en-US', {
        weekday: 'short',
        month: 'short',
        day: 'numeric',
        year: 'numeric',
      })
    : '';

  const formattedTime = dateTime
    ? dateTime.toLocaleTimeString('en-US', {
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: true,
      })
    : '';

  return (
    <header className="relative z-40 flex h-14 w-full items-center justify-between border-b border-border/40 bg-surface/90 px-4 backdrop-blur-md select-none">
      {/* BREADCRUMBS */}
      <nav className="flex items-center gap-1.5 text-[11px] font-medium tracking-tight text-muted-foreground/80" aria-label="Breadcrumb">
        <span className="hover:text-foreground cursor-pointer transition-colors">Console</span>
        {crumbs.map((crumb, i) => {
          const isLast = i === crumbs.length - 1;
          return (
            <span key={i} className="flex items-center gap-1.5">
              <ChevronRight className="h-3 w-3 text-muted-foreground/40 shrink-0" />
              <span className={cn(
                'capitalize transition-colors',
                isLast ? 'font-semibold text-foreground' : 'hover:text-foreground cursor-pointer'
              )}>
                {crumb.replace(/-/g, ' ')}
              </span>
            </span>
          );
        })}
      </nav>

      {/* RIGHT UTILITIES & WORKSPACE SWITCHER */}
      <div className="flex items-center gap-2">
        {/* 🌟 GLOBAL WORKSPACE PERSPECTIVE SWITCHER FOR DSO */}
        {user?.role === 'DISTRICT_SECTOR_OWNER' && (
          <div className="flex items-center bg-muted/40 p-0.5 rounded-lg border border-border/40 mr-2">
            <button
              onClick={() => dispatch(setDsoWorkspaceMode('DSO'))}
              className={cn(
                "flex items-center gap-1 px-2 py-1 rounded-md text-[10px] font-bold transition-all cursor-pointer",
                activeDsoMode === 'DSO'
                  ? "bg-primary text-primary-foreground shadow-xs"
                  : "text-muted-foreground hover:text-foreground"
              )}
              title="Switch to DSO Territory View"
            >
              <Layers className="h-3 w-3" />
              <span className="hidden md:inline">DSO Territory</span>
            </button>

            <button
              onClick={() => dispatch(setDsoWorkspaceMode('RESELLER'))}
              className={cn(
                "flex items-center gap-1 px-2 py-1 rounded-md text-[10px] font-bold transition-all cursor-pointer",
                activeDsoMode === 'RESELLER'
                  ? "bg-primary text-primary-foreground shadow-xs"
                  : "text-muted-foreground hover:text-foreground"
              )}
              title="Switch to Reseller Storage View"
            >
              <Store className="h-3 w-3" />
              <span className="hidden md:inline">Reseller Hub</span>
            </button>

            <button
              onClick={() => dispatch(setDsoWorkspaceMode('INSTITUTE'))}
              className={cn(
                "flex items-center gap-1 px-2 py-1 rounded-md text-[10px] font-bold transition-all cursor-pointer",
                activeDsoMode === 'INSTITUTE'
                  ? "bg-primary text-primary-foreground shadow-xs"
                  : "text-muted-foreground hover:text-foreground"
              )}
              title="Switch to Direct Campus Operations"
            >
              <Building2 className="h-3 w-3" />
              <span className="hidden md:inline">Direct Institute</span>
            </button>
          </div>
        )}

        {/* LIVE DATE & TIME DISPLAY */}
        {dateTime && (
          <div className="hidden lg:flex items-center gap-2 text-[10px] font-medium font-mono text-muted-foreground/90 bg-muted/30 border border-border/30 rounded-lg px-2.5 py-1">
            <span className="flex items-center gap-1">
              <Calendar className="h-3 w-3 text-primary/70 shrink-0" />
              <span>{formattedDate}</span>
            </span>
            <span className="h-3 w-px bg-border/40" />
            <span className="flex items-center gap-1 text-foreground font-semibold">
              <Clock className="h-3 w-3 text-emerald-500 shrink-0" />
              <span>{formattedTime}</span>
            </span>
          </div>
        )}

        {/* Theme Toggle */}
        <button
          onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
          className="rounded-lg p-1.5 text-muted-foreground/80 border border-transparent hover:border-border/40 hover:bg-muted/40 hover:text-foreground transition-all duration-150 cursor-pointer"
        >
          {theme === 'dark' ? <Sun className="h-3.5 w-3.5" /> : <Moon className="h-3.5 w-3.5" />}
        </button>

        {/* Notifications */}
        <button className="relative rounded-lg p-1.5 text-muted-foreground/80 border border-transparent hover:border-border/40 hover:bg-muted/40 hover:text-foreground transition-all duration-150 cursor-pointer">
          <Bell className="h-3.5 w-3.5" />
          <span className="absolute right-1.5 top-1.5 h-1.5 w-1.5 rounded-full bg-primary ring-1 ring-background" />
        </button>

        <span className="h-4 w-px bg-border/40 mx-0.5" />

        {/* User Menu */}
        <div className="relative z-50" ref={menuRef}>
          <button
            onClick={() => setMenuOpen((v) => !v)}
            className="flex items-center gap-2 rounded-lg p-1 border border-transparent hover:border-border/30 hover:bg-muted/30 transition-all duration-150 cursor-pointer"
          >
            <div className="flex h-6 w-6 items-center justify-center rounded-md bg-primary/10 text-[10px] font-bold text-primary border border-primary/10">
              {user?.name?.charAt(0).toUpperCase() ?? <UserIcon className="h-3 w-3" />}
            </div>
          </button>

          {menuOpen && (
            <div className="absolute right-0 top-9 w-48 origin-top-right rounded-lg border border-border/40 bg-surface p-1 shadow-md animate-in fade-in duration-150 z-[100]">
              <div className="px-2.5 py-2 border-b border-border/20">
                <p className="text-xs font-semibold text-foreground truncate">{user?.name ?? 'Administrator'}</p>
                <p className="text-[10px] text-muted-foreground/80 truncate mt-0.5">{user?.email}</p>
              </div>

              <div className="py-1">
                <button
                  onClick={handleLogout}
                  className="flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-xs font-medium text-destructive hover:bg-destructive/10 transition-colors cursor-pointer"
                >
                  <LogOut className="h-3 w-3" />
                  <span>Log out</span>
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    </header>
  );
}