import { ReactNode, useState, useRef, useEffect } from 'react';
import { useAuthStore } from '../../store/authStore';
import { useNavigate, useLocation } from 'react-router-dom';
import {
  LayoutDashboard, FolderOpen, LogOut, User, Settings,
  Menu, X, ChevronRight, Save, Cloud, Code2, Blocks, FileType
} from 'lucide-react';

interface AppLayoutProps {
  children: ReactNode;
  sidebarContent?: ReactNode;
  showSidebar?: boolean;
}

export default function AppLayout({ children, sidebarContent, showSidebar }: AppLayoutProps) {
  const { user, logout } = useAuthStore();
  const navigate = useNavigate();
  const location = useLocation();
  const isEditor = location.pathname.startsWith('/project/');
  const [showProfileMenu, setShowProfileMenu] = useState(false);
  const profileRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      if (profileRef.current && !profileRef.current.contains(e.target as Node)) {
        setShowProfileMenu(false);
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  return (
    <div className="min-h-screen bg-surface-950 flex flex-col">
      {/* Top Navigation */}
      <header className="h-14 glass border-b border-surface-700 flex items-center justify-between px-4 z-50">
        <div className="flex items-center gap-3">
          <button
            onClick={() => navigate('/dashboard')}
            className="flex items-center gap-2 text-white font-bold text-lg hover:text-primary-400 transition-colors"
          >
            <Blocks className="w-6 h-6 text-primary-500" />
            RealBlocks
          </button>
          {isEditor && (
            <>
              <ChevronRight className="w-4 h-4 text-surface-400" />
              <span className="text-surface-200 text-sm font-medium">
                {useAuthStore.getState().token ? 'Project Editor' : ''}
              </span>
            </>
          )}
        </div>

        <div className="flex items-center gap-2">
          {user && (
            <>
              <span className="text-surface-300 text-sm hidden md:block">
                {user.username}
              </span>
              <div className="relative" ref={profileRef}>
                <button
                  onClick={() => setShowProfileMenu(!showProfileMenu)}
                  className="w-8 h-8 rounded-full bg-primary-600 flex items-center justify-center text-white text-sm font-medium hover:bg-primary-500 transition-colors"
                >
                  {user.username.charAt(0).toUpperCase()}
                </button>
                {showProfileMenu && (
                  <div className="absolute right-0 top-full mt-2 w-48 bg-surface-800 border border-surface-700 rounded-lg shadow-xl py-1 z-50">
                    <button
                      onClick={() => { setShowProfileMenu(false); navigate('/settings'); }}
                      className="w-full flex items-center gap-2 px-4 py-2 text-sm text-surface-200 hover:bg-surface-700 transition-colors"
                    >
                      <Settings className="w-4 h-4" />
                      Settings
                    </button>
                    <div className="border-t border-surface-700 my-1" />
                    <button
                      onClick={() => { logout(); navigate('/login'); }}
                      className="w-full flex items-center gap-2 px-4 py-2 text-sm text-red-400 hover:bg-surface-700 transition-colors"
                    >
                      <LogOut className="w-4 h-4" />
                      Logout
                    </button>
                  </div>
                )}
              </div>
            </>
          )}
        </div>
      </header>

      {/* Main Content Area */}
      <div className="flex-1 flex overflow-hidden">
        {/* Sidebar (for editor) */}
        {showSidebar && sidebarContent && (
          <aside className="w-64 panel flex-shrink-0 overflow-y-auto">
            {sidebarContent}
          </aside>
        )}

        {/* Main Content */}
        <main className="flex-1 overflow-hidden">
          {children}
        </main>
      </div>
    </div>
  );
}