import React, { useState, useEffect, useRef } from 'react';
import { Link, NavLink, useNavigate, useLocation } from 'react-router-dom';
import { useAuth } from './AuthContext';

export const Layout = ({ children }) => {
  const { user, logout } = useAuth();
  const navigate = useNavigate();
  const location = useLocation();

  const searchParams = new URLSearchParams(location.search);
  const urlQuery = searchParams.get('q') || '';
  const [globalSearchQuery, setGlobalSearchQuery] = useState(urlQuery);

  useEffect(() => {
    setGlobalSearchQuery(urlQuery);
  }, [urlQuery]);

  const [isDemoMode, setIsDemoMode] = useState(false);
  const [isProfileOpen, setIsProfileOpen] = useState(false);
  const [isNotificationsOpen, setIsNotificationsOpen] = useState(false);
  const [notifications, setNotifications] = useState([]);
  const [loadingNotifications, setLoadingNotifications] = useState(false);
  const [hasUnreadNotifications, setHasUnreadNotifications] = useState(false);

  const notificationsRef = useRef(null);
  const profileRef = useRef(null);

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (notificationsRef.current && !notificationsRef.current.contains(event.target)) {
        setIsNotificationsOpen(false);
      }
      if (profileRef.current && !profileRef.current.contains(event.target)) {
        setIsProfileOpen(false);
      }
    };
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);
  
  const fetchNotifications = async () => {
    if (!user) return;
    setLoadingNotifications(true);
    try {
      const token = localStorage.getItem('wss_token') || sessionStorage.getItem('wss_token');
      const res = await fetch('/api/auth/notifications', {
        headers: { 'Authorization': `Bearer ${token}` }
      });
      if (res.ok) {
        const data = await res.json();
        const fetched = data.notifications || [];
        
        const lastSeenId = localStorage.getItem('last_seen_notification_id');
        
        if (fetched.length > 0 && String(fetched[0].id) !== lastSeenId) {
          setHasUnreadNotifications(true);
        }
        
        setNotifications(fetched);
      }
    } catch (err) {
      console.error("Failed to fetch notifications:", err);
    } finally {
      setLoadingNotifications(false);
    }
  };

  useEffect(() => {
    if (user) {
      fetchNotifications();
      const interval = setInterval(fetchNotifications, 60000); // refresh every minute
      return () => clearInterval(interval);
    }
  }, [user]);
  useEffect(() => {
    setIsDemoMode(!!window.WSS_DEMO_MODE);
    const checkInterval = setInterval(() => {
      setIsDemoMode(!!window.WSS_DEMO_MODE);
    }, 1000);
    return () => clearInterval(checkInterval);
  }, []);

  // Force removal of dark theme and clear localStorage keys
  useEffect(() => {
    document.documentElement.classList.remove('dark');
    localStorage.removeItem('color-theme');
  }, []);

  const [impersonationToken, setImpersonationToken] = useState(null);
  const [organizations, setOrganizations] = useState([]);

  useEffect(() => {
    setImpersonationToken(localStorage.getItem('original_admin_token'));
  }, [location.pathname]);

  useEffect(() => {
    const fetchOrgs = async () => {
      const adminToken = localStorage.getItem('original_admin_token') || localStorage.getItem('wss_token') || sessionStorage.getItem('wss_token');
      // Only attempt if they might be an admin
      if (!adminToken) return;
      
      try {
        const res = await fetch('/api/auth/organizations', {
          headers: { 'Authorization': `Bearer ${adminToken}` }
        });
        if (res.ok) {
          const data = await res.json();
          setOrganizations(data.organizations || []);
        }
      } catch (err) {
        console.error("Failed to fetch organizations for dropdown", err);
      }
    };
    
    const isSuperAdmin = user?.role === 'super_admin' || user?.role === 'admin' || localStorage.getItem('original_admin_token');
    if (isSuperAdmin) {
      fetchOrgs();
    }
  }, [user]);

  const handleReturnToAdmin = () => {
    const orig = localStorage.getItem('original_admin_token');
    if (orig) {
      localStorage.removeItem('original_admin_token');
      localStorage.setItem('wss_token', orig);
      window.location.href = location.pathname;
    }
  };

  const handleLogout = () => {
    const isSuperAdmin = user?.role === 'super_admin' || sessionStorage.getItem('superAdminAuth') === 'true';
    logout();
    sessionStorage.removeItem('superAdminAuth');
    localStorage.removeItem('original_admin_token');
    navigate(isSuperAdmin ? '/' : '/login');
  };

  let navItems = [];
  
  if (user?.role === 'executive_user') {
    navItems = [
      { to: '/scans/history', label: 'Organization Reports', icon: 'analytics' },
      { to: '/settings', label: 'Settings', icon: 'settings' },
    ];
  } else {
    navItems = [
      { to: '/dashboard', label: 'Dashboard', icon: 'dashboard' },
      { to: '/scans/new', label: 'New Scan', icon: 'security' },
      { to: '/scans/history', label: 'Reports', icon: 'analytics' },
      { to: '/scans/results', label: 'Vulnerabilities', icon: 'bug_report' },
      { to: '/settings', label: 'Settings', icon: 'settings' },
    ];
  }

  if (user?.role === 'super_admin') {
    navItems.push({ to: '/super-admin', label: 'Global Management', icon: 'admin_panel_settings' });
  }

  return (
    <div className="bg-background text-on-background font-body-md text-body-md antialiased min-h-screen flex flex-col md:flex-row w-full transition-colors duration-300">
      
      {/* SideNavBar (Stitch Layout) */}
      <nav className="bg-white dark:bg-inverse-surface h-screen w-64 flex-col fixed left-0 top-0 border-r border-outline-variant dark:border-outline z-40 hidden md:flex py-lg px-md gap-sm text-left">
        
        {/* Header Branding */}
        <div className="mb-xl flex flex-col gap-sm">
          <div className="flex items-center gap-sm">
            <div className="h-14 flex items-center justify-center">
              <img src="/logo.png" alt="LarShield Logo" className="h-full object-contain" />
            </div>
            <div>
              <h1 className="font-bold brand-gradient tracking-tight m-0 text-[15px] leading-snug">LarShield</h1>
              <p className="font-label-sm text-[12px] text-on-surface-variant uppercase tracking-wider m-0">
                {(user?.role === 'super_admin' || user?.role === 'admin') ? 'Admin' : 
                 user?.role === 'org_admin' ? 'Organization' : 
                 user?.subscription_tier || 'Free Tier'}
              </p>
            </div>
          </div>
          
          {user?.role !== 'executive_user' && (
            <NavLink 
              to="/scans/new" 
              className="mt-md w-full bg-primary text-on-primary rounded-lg py-sm px-md font-label-md text-label-md flex items-center justify-center gap-xs hover:opacity-90 transition-opacity border-0 cursor-pointer"
              style={{ textDecoration: 'none' }}
            >
              <span className="material-symbols-outlined" style={{ fontSize: '18px' }}>add</span>
              Quick Scan
            </NavLink>
          )}
        </div>

        {/* Navigation Links */}
        <div className="flex flex-col gap-base flex-1">
          {navItems.map((item) => (
            <NavLink
              key={item.to}
              to={item.to}
              className={({ isActive }) => 
                `flex items-center gap-sm px-sm py-sm rounded-lg transition-colors cursor-pointer transition-all duration-200 border-0 ${
                  isActive 
                    ? 'text-primary dark:text-primary-fixed-dim font-bold bg-surface-container-high dark:bg-on-secondary-fixed-variant' 
                    : 'text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-secondary-fixed-variant'
                }`
              }
              style={{ textDecoration: 'none' }}
            >
              <span className="material-symbols-outlined">{item.icon}</span>
              <span className="font-label-md text-label-md">{item.label}</span>
            </NavLink>
          ))}

          {/* Help Page Link */}
          <NavLink 
            to="/help"
            className={({ isActive }) => 
              `flex items-center gap-sm px-sm py-sm rounded-lg transition-colors cursor-pointer transition-all duration-200 mt-auto border-0 ${
                isActive 
                  ? 'text-primary dark:text-primary-fixed-dim font-bold bg-surface-container-high dark:bg-on-secondary-fixed-variant' 
                  : 'text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-secondary-fixed-variant'
              }`
            }
            style={{ textDecoration: 'none' }}
          >
            <span className="material-symbols-outlined">help</span>
            <span className="font-label-md text-label-md">Help</span>
          </NavLink>
        </div>


        {/* Sidebar Status / Log Out */}
        <div className="mt-md pt-md border-t border-outline-variant">
          <button 
            onClick={handleLogout}
            className="w-full flex items-center gap-sm px-sm py-sm rounded-lg text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-secondary-fixed-variant transition-colors cursor-pointer transition-all duration-200 border-0 bg-transparent text-left"
          >
            <span className="material-symbols-outlined">logout</span>
            <span className="font-label-md text-label-md">Log Out</span>
          </button>
        </div>
      </nav>

      {/* TopNavBar (Stitch Layout) */}
      <header className="bg-surface/80 dark:bg-inverse-surface/80 backdrop-blur-md fixed top-0 w-full z-50 border-b border-outline-variant dark:border-outline shadow-sm flex justify-between items-center h-16 px-gutter max-w-container-max mx-auto md:w-[calc(100%-16rem)] md:left-64 md:px-lg">
        
        {/* Mobile Hamburger menu */}
        <div className="md:hidden flex items-center gap-sm">
          <span className="material-symbols-outlined text-primary cursor-pointer">menu</span>
          <span className="font-bold brand-gradient text-[15px] leading-snug">LarShield</span>
        </div>

        {/* Search Bar Utility */}
        <div className="hidden md:flex flex-1 max-w-md ml-xl relative">
          <span className="material-symbols-outlined absolute left-sm top-1/2 -translate-y-1/2 text-outline" style={{ fontSize: '20px' }}>search</span>
          <input 
            className="w-full bg-surface-container-lowest border border-outline-variant rounded-lg pl-xl pr-sm py-xs font-body-sm text-body-sm text-on-surface focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all placeholder:text-outline" 
            placeholder="Search vulnerabilities, reports, assets..." 
            type="text"
            value={globalSearchQuery}
            onChange={(e) => setGlobalSearchQuery(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === 'Enter') {
                if (globalSearchQuery.trim()) {
                  navigate(`/scans/history?q=${encodeURIComponent(globalSearchQuery.trim())}`);
                } else {
                  navigate(`/scans/history`);
                }
              }
            }}
          />
        </div>

        {/* Right Nav Icons / Mode Selector */}
        <div className="flex items-center gap-gutter ml-auto">

          {/* Organization Display / Admin Dropdown */}
          {(user?.role === 'admin' || user?.role === 'super_admin' || impersonationToken) && organizations.length > 0 ? (
            <div className="flex items-center">
              <select
                className="bg-surface-container border border-outline-variant rounded-md px-sm py-xs font-label-sm text-on-surface focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary max-w-[200px] truncate"
                value={impersonationToken ? (user?.org_id || '') : ''}
                onChange={async (e) => {
                  const targetOrgId = e.target.value;
                  if (!targetOrgId) {
                    // Return to Admin
                    handleReturnToAdmin();
                    return;
                  }
                  
                  try {
                    const activeToken = localStorage.getItem('original_admin_token') || localStorage.getItem('wss_token');
                    const res = await fetch(`/api/auth/impersonate/${targetOrgId}`, {
                      method: 'POST',
                      headers: { 'Authorization': `Bearer ${activeToken}` }
                    });
                    
                    if (res.ok) {
                      const data = await res.json();
                      localStorage.setItem('original_admin_token', activeToken);
                      localStorage.setItem('wss_token', data.access_token);
                      window.location.href = location.pathname; // Reload current page with new token
                    }
                  } catch (err) {
                    console.error("Failed to impersonate from dropdown:", err);
                  }
                }}
              >
                <option value="">-- Return to Admin --</option>
                {organizations.map(org => (
                  <option key={org.id} value={org.id}>{org.name}</option>
                ))}
              </select>
            </div>
          ) : user?.org_name ? (
            <div className="hidden md:flex items-center gap-xs font-label-md text-label-md text-on-surface bg-surface-container-low px-sm py-xs rounded-md border border-outline-variant">
              <span className="material-symbols-outlined text-[18px] text-primary">domain</span>
              <span className="font-bold">{user.org_name}</span>
            </div>
          ) : null}
          
          {/* Active Status Badge */}
          {isDemoMode ? (
            <div className="hidden md:inline-flex items-center gap-xs bg-yellow-500/10 border border-yellow-500/30 rounded-full px-sm py-[2px] font-label-sm text-label-sm text-yellow-600 dark:text-yellow-500 font-bold uppercase tracking-wider">
              <span className="w-2 h-2 rounded-full bg-yellow-500 animate-pulse"></span> Sandbox Mode
            </div>
          ) : (
            <div className="hidden md:inline-flex items-center gap-xs bg-green-500/10 border border-green-500/30 rounded-full px-sm py-[2px] font-label-sm text-label-sm text-green-600 dark:text-green-500 font-bold uppercase tracking-wider">
              <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span> Connected
            </div>
          )}



          {/* Profile & Controls */}
          <div className="flex items-center gap-sm">
            <div className="relative" ref={notificationsRef}>
              <button 
                onClick={() => {
                  const willOpen = !isNotificationsOpen;
                  setIsNotificationsOpen(willOpen);
                  setIsProfileOpen(false);
                  if (willOpen) {
                    setHasUnreadNotifications(false);
                    if (notifications.length > 0) {
                      localStorage.setItem('last_seen_notification_id', String(notifications[0].id));
                    }
                  }
                }}
                className="text-on-surface-variant dark:text-surface-variant hover:text-primary transition-colors duration-200 active:opacity-80 transition-all flex items-center justify-center relative border-0 bg-transparent cursor-pointer"
              >
                <span className="material-symbols-outlined text-[26px]">notifications</span>
                {hasUnreadNotifications && (
                  <span className="absolute top-0 right-0 flex h-2.5 w-2.5">
                    <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-error opacity-75"></span>
                    <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-error border-[1.5px] border-white dark:border-inverse-surface"></span>
                  </span>
                )}
              </button>
              
              {isNotificationsOpen && (
                <div className="absolute right-0 mt-sm w-80 bg-surface border border-outline-variant rounded-xl shadow-xl z-50 flex flex-col overflow-hidden">
                  <div className="px-md py-md border-b border-outline-variant bg-surface/95 backdrop-blur-sm flex justify-between items-center z-10 shrink-0">
                    <h3 className="font-label-lg text-label-lg font-bold text-on-surface m-0 flex items-center gap-xs">
                      <span className="material-symbols-outlined text-primary text-xl">notifications</span>
                      Notifications
                    </h3>
                    <button 
                      onClick={fetchNotifications} 
                      className="border border-outline-variant/50 bg-surface-container-lowest hover:bg-surface-container rounded-full w-8 h-8 flex items-center justify-center cursor-pointer transition-all text-on-surface-variant hover:text-primary shadow-sm"
                      title="Refresh Notifications"
                    >
                      <span className={"material-symbols-outlined text-base" + (loadingNotifications ? " animate-spin" : "")}>sync</span>
                    </button>
                  </div>
                  
                  <div className="flex flex-col bg-surface-container-lowest overflow-hidden">
                    {loadingNotifications && notifications.length === 0 ? (
                      <div className="p-xl flex-1 flex flex-col justify-center items-center text-on-surface-variant font-body-sm gap-sm">
                        <span className="material-symbols-outlined animate-spin text-3xl text-primary/60">sync</span>
                        <span>Loading notifications...</span>
                      </div>
                    ) : notifications.length === 0 ? (
                      <div className="p-xl flex-1 flex flex-col justify-center items-center text-on-surface-variant font-body-sm gap-xs text-center">
                        <div className="w-12 h-12 rounded-full bg-surface-container flex items-center justify-center mb-sm shadow-inner border border-outline-variant/30">
                          <span className="material-symbols-outlined text-3xl text-on-surface-variant/60">notifications_off</span>
                        </div>
                        <span className="font-bold text-on-surface font-label-md">All Caught Up!</span>
                        <span className="text-xs opacity-80 mt-1">You have no new notifications right now.</span>
                      </div>
                    ) : (
                      notifications.slice(0, 3).map(n => (
                        <div key={n.id} className="flex gap-md p-md border-b border-outline-variant/40 hover:bg-surface-container-low transition-colors cursor-default text-left group">
                          <div className={`w-10 h-10 rounded-full flex items-center justify-center shrink-0 shadow-sm ${n.bg || 'bg-primary/10'}`}>
                            <span className={`material-symbols-outlined text-[20px] ${n.color || 'text-primary'}`}>{n.icon}</span>
                          </div>
                          <div className="flex flex-col flex-1 justify-center">
                            <span className="font-label-md text-label-md font-bold text-on-surface group-hover:text-primary transition-colors">{n.title}</span>
                            <span className="font-body-sm text-[13px] text-on-surface-variant leading-snug mt-[2px]">{n.message}</span>
                            <span className="font-label-sm text-[11px] text-on-surface-variant/60 mt-xs uppercase tracking-wider">{new Date(n.timestamp).toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}</span>
                          </div>
                        </div>
                      ))
                    )}
                  </div>
                </div>
              )}
            </div>
            
            {!user && (
              <button className="flex items-center gap-xs text-primary font-label-md text-label-md hover:bg-primary/5 px-sm py-xs rounded-lg transition-colors border-0 bg-transparent cursor-pointer">
                <span className="font-bold">Book Demo</span>
                <span className="material-symbols-outlined" style={{ fontSize: '18px' }}>calendar_today</span>
              </button>
            )}
            
            {user && (
              <div className="relative ml-sm" ref={profileRef}>
                <button 
                  onClick={() => {
                    setIsProfileOpen(!isProfileOpen);
                    setIsNotificationsOpen(false);
                  }}
                  className="flex items-center gap-xs border-0 bg-transparent cursor-pointer hover:opacity-80 transition-opacity"
                >
                  <span className="material-symbols-outlined text-on-surface-variant dark:text-surface-variant" style={{ fontSize: '28px', fontVariationSettings: "'FILL' 1" }}>account_circle</span>
                  <span className="hidden lg:inline text-xs font-semibold text-on-surface-variant dark:text-surface-variant">
                    {user.email.split('@')[0]}
                  </span>
                </button>
                
                {isProfileOpen && (
                  <div className="absolute right-0 mt-xs w-48 bg-surface border border-outline-variant rounded-lg shadow-lg overflow-hidden z-50">
                    <div className="px-md py-sm border-b border-outline-variant bg-surface-container-low">
                      <p className="font-label-md text-label-md font-bold text-on-surface truncate">{user.email}</p>
                      <p className="font-body-sm text-body-sm text-on-surface-variant capitalize">{(user.role || 'User').replace(/_/g, ' ')}</p>
                    </div>
                    <div className="p-xs">
                      <button 
                        onClick={() => {
                          setIsProfileOpen(false);
                          navigate('/settings');
                        }}
                        className="w-full text-left px-sm py-xs font-label-md text-label-md text-on-surface hover:bg-surface-container rounded transition-colors flex items-center gap-xs border-0 bg-transparent cursor-pointer"
                      >
                        <span className="material-symbols-outlined text-[18px]">person</span>
                        My Profile
                      </button>

                      <button 
                        onClick={handleLogout}
                        className="w-full text-left px-sm py-xs font-label-md text-label-md text-error hover:bg-error/10 rounded transition-colors flex items-center gap-xs border-0 bg-transparent cursor-pointer mt-xs"
                      >
                        <span className="material-symbols-outlined text-[18px]">logout</span>
                        Logout
                      </button>
                    </div>
                  </div>
                )}
              </div>
            )}
          </div>
        </div>
      </header>

      {/* Main Content Render Area */}
      <main className="flex-grow pt-[64px] md:pl-64 min-h-screen bg-background pb-xl w-full text-left">
        {impersonationToken && (
          <div className="bg-primary text-white px-md py-sm flex justify-between items-center shadow-md mx-md md:mx-xl mt-md md:mt-0 mb-sm rounded-lg animate-fade-in">
            <div className="flex items-center gap-sm">
              <span className="material-symbols-outlined text-[20px]">vpn_key</span>
              <span className="font-bold text-[14px]">Impersonation Mode Active</span>
              <span className="hidden md:inline text-[13px] opacity-90 border-l border-white/30 pl-sm ml-sm">
                You are currently viewing data for <strong>{organizations.find(o => o.id === user?.org_id)?.name || 'this organization'}</strong>.
              </span>
            </div>
            <button 
              onClick={handleReturnToAdmin} 
              className="bg-white text-primary hover:bg-surface-container transition-colors px-3 py-1.5 rounded-md font-bold text-[12px] border-0 cursor-pointer shadow-sm flex items-center gap-xs"
            >
              <span className="material-symbols-outlined text-[16px]">exit_to_app</span>
              Return
            </button>
          </div>
        )}
        <div className="px-md py-sm md:px-xl md:py-md max-w-container-max mx-auto flex flex-col gap-gutter">
          {children}
        </div>
      </main>

    </div>
  );
};