import { ReactNode } 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/');

  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="w-8 h-8 rounded-full bg-primary-600 flex items-center justify-center text-white text-sm font-medium">
                {user.username.charAt(0).toUpperCase()}
              </div>
              <button
                onClick={() => { logout(); navigate('/login'); }}
                className="btn-ghost p-2"
                title="Logout"
              >
                <LogOut className="w-4 h-4" />
              </button>
            </>
          )}
        </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-auto">
          {children}
        </main>
      </div>
    </div>
  );
}