import { Outlet, NavLink, useNavigate } from 'react-router-dom';
import { useAuth } from '../auth/AuthContext';
import { UserAvatar } from '../components/UserAvatar';
import styles from './AppLayout.module.css';

export function AppLayout() {
  const { user, logout } = useAuth();
  const navigate = useNavigate();

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

  return (
    <div className={styles.layout}>
      {/* Sidebar */}
      <aside className={styles.sidebar}>
        <div className={styles.brand}>
          <h2>INSIGHT</h2>
        </div>

        <nav className={styles.nav}>
          <NavLink
            to="/"
            end
            className={({ isActive }) =>
              `${styles.navLink} ${isActive ? styles.active : ''}`
            }
          >
            Dashboard
          </NavLink>

          {/* Admin-Bereich (nur fuer PLATFORM_ADMIN) */}
          {user?.role === 'PLATFORM_ADMIN' && (
            <>
              <div className={styles.navSection}>Administration</div>
              <NavLink
                to="/admin/users"
                className={({ isActive }) =>
                  `${styles.navLink} ${isActive ? styles.active : ''}`
                }
              >
                Benutzer
              </NavLink>
              <NavLink
                to="/admin/tenants"
                className={({ isActive }) =>
                  `${styles.navLink} ${isActive ? styles.active : ''}`
                }
              >
                Mandanten
              </NavLink>
            </>
          )}
        </nav>

        <div className={styles.userInfo}>
          <div
            className={styles.userProfile}
            onClick={() => navigate('/profile')}
            role="button"
            tabIndex={0}
            onKeyDown={(e) => {
              if (e.key === 'Enter' || e.key === ' ') navigate('/profile');
            }}
          >
            <div className={styles.userProfileInner}>
              <UserAvatar
                firstName={user?.firstName ?? ''}
                lastName={user?.lastName ?? ''}
                avatar={user?.avatar}
                size={36}
              />
              <div className={styles.userDetails}>
                <div className={styles.userName}>
                  {user?.firstName} {user?.lastName}
                </div>
                <div className={styles.userEmail}>{user?.email}</div>
              </div>
            </div>
            <div className={styles.profileHint}>Zum Profil &rarr;</div>
          </div>
          <button className={styles.logoutBtn} onClick={handleLogout}>
            Abmelden
          </button>
        </div>
      </aside>

      {/* Main Content */}
      <main className={styles.main}>
        <Outlet />
      </main>
    </div>
  );
}