import React from 'react';
import { Outlet, NavLink, useNavigate } from 'react-router-dom';
import { useAuth } from '../hooks/useAuth';
import { LogOut, Home, Server, Settings } from 'lucide-react';

function Layout() {
  const { user, logout, isAuthenticated } = useAuth();
  const navigate = useNavigate();

  React.useEffect(() => {
    if (!isAuthenticated) {
      navigate('/login');
    }
  }, [isAuthenticated, navigate]);

  const handleLogout = () => {
    logout();
    navigate('/login');
  };

  if (!isAuthenticated) {
    return null;
  }

  return (
    <div className="flex">
      <aside className="sidebar">
        <div className="mb-4">
          <h2 className="text-xl font-bold text-white mb-2">🎭 Skrzynka Impostora</h2>
          <p className="text-gray-300 text-sm">Panel administratora</p>
        </div>

        <nav className="mb-8">
          <NavLink to="/dashboard" className="nav-link">
            <Home size={16} className="inline mr-2" />
            Dashboard
          </NavLink>
          <NavLink to="/servers" className="nav-link">
            <Server size={16} className="inline mr-2" />
            Serwery
          </NavLink>
        </nav>

        <div className="mt-auto">
          <div className="border-t border-gray-600 pt-4">
            <div className="text-sm text-gray-300 mb-2">
              Zalogowany jako:
            </div>
            <div className="text-white font-medium mb-4">
              {user?.username}#{user?.discriminator}
            </div>
            <button
              onClick={handleLogout}
              className="discord-button secondary w-full flex items-center justify-center"
            >
              <LogOut size={16} className="mr-2" />
              Wyloguj
            </button>
          </div>
        </div>
      </aside>

      <main className="main-content">
        <Outlet />
      </main>
    </div>
  );
}

export default Layout;