ServiceManager/frontend/src/components/Layout.tsx

import { NavLink } from '@/components/NavLink';
import { Activity, Settings, Server, Menu, X, Users, LogIn, Key } from 'lucide-react';
import { cn } from '@/lib/utils';
import { useState } from 'react';
import { Button } from '@/components/ui/button';

interface LayoutProps {
  children: React.ReactNode;
}

export function Layout({ children }: LayoutProps) {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="sticky top-0 z-50 border-b border-border/50 bg-background/80 backdrop-blur-lg">
        <div className="container flex h-14 sm:h-16 items-center justify-between px-4">
          <div className="flex items-center gap-2 sm:gap-3">
            <div className="p-1.5 sm:p-2 rounded-lg bg-primary/10">
              <Activity className="w-5 h-5 sm:w-6 sm:h-6 text-primary" />
            </div>
            <div>
              <h1 className="text-base sm:text-lg font-bold">Status Monitor</h1>
              <p className="text-[10px] sm:text-xs text-muted-foreground hidden sm:block">Surveillance en temps réel</p>
            </div>
          </div>
          
          {/* Desktop Navigation */}
          <nav className="hidden sm:flex items-center gap-1">
            <NavLink
              to="/"
              end
              className={cn(
                'flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium',
                'text-muted-foreground hover:text-foreground hover:bg-muted/50',
                'transition-colors'
              )}
              activeClassName="bg-muted text-foreground"
            >
              <Server className="w-4 h-4" />
              Dashboard
            </NavLink>
            <NavLink
              to="/admin"
              className={cn(
                'flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium',
                'text-muted-foreground hover:text-foreground hover:bg-muted/50',
                'transition-colors'
              )}
              activeClassName="bg-muted text-foreground"
            >
              <Settings className="w-4 h-4" />
              Administration
            </NavLink>
            <NavLink
              to="/admin/users"
              className={cn(
                'flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium',
                'text-muted-foreground hover:text-foreground hover:bg-muted/50',
                'transition-colors'
              )}
              activeClassName="bg-muted text-foreground"
            >
              <Users className="w-4 h-4" />
              Utilisateurs
            </NavLink>
            <NavLink
              to="/admin/api-keys"
              className={cn(
                'flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium',
                'text-muted-foreground hover:text-foreground hover:bg-muted/50',
                'transition-colors'
              )}
              activeClassName="bg-muted text-foreground"
            >
              <Key className="w-4 h-4" />
              Clés API
            </NavLink>
            <NavLink
              to="/login"
              className={cn(
                'flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium',
                'text-muted-foreground hover:text-foreground hover:bg-muted/50',
                'transition-colors'
              )}
              activeClassName="bg-muted text-foreground"
            >
              <LogIn className="w-4 h-4" />
              Connexion
            </NavLink>
          </nav>

          {/* Mobile Menu Button */}
          <Button
            variant="ghost"
            size="icon"
            className="sm:hidden"
            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
          >
            {mobileMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
          </Button>
        </div>

        {/* Mobile Navigation */}
        {mobileMenuOpen && (
          <nav className="sm:hidden border-t border-border/50 bg-background/95 backdrop-blur-lg">
            <div className="container px-4 py-3 space-y-1">
              <NavLink
                to="/"
                end
                className={cn(
                  'flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium w-full',
                  'text-muted-foreground hover:text-foreground hover:bg-muted/50',
                  'transition-colors'
                )}
                activeClassName="bg-muted text-foreground"
                onClick={() => setMobileMenuOpen(false)}
              >
                <Server className="w-5 h-5" />
                Dashboard
              </NavLink>
              <NavLink
                to="/admin"
                className={cn(
                  'flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium w-full',
                  'text-muted-foreground hover:text-foreground hover:bg-muted/50',
                  'transition-colors'
                )}
                activeClassName="bg-muted text-foreground"
                onClick={() => setMobileMenuOpen(false)}
              >
                <Settings className="w-5 h-5" />
                Administration
              </NavLink>
              <NavLink
                to="/admin/users"
                className={cn(
                  'flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium w-full',
                  'text-muted-foreground hover:text-foreground hover:bg-muted/50',
                  'transition-colors'
                )}
                activeClassName="bg-muted text-foreground"
                onClick={() => setMobileMenuOpen(false)}
              >
                <Users className="w-5 h-5" />
                Utilisateurs
              </NavLink>
              <NavLink
                to="/admin/api-keys"
                className={cn(
                  'flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium w-full',
                  'text-muted-foreground hover:text-foreground hover:bg-muted/50',
                  'transition-colors'
                )}
                activeClassName="bg-muted text-foreground"
                onClick={() => setMobileMenuOpen(false)}
              >
                <Key className="w-5 h-5" />
                Clés API
              </NavLink>
              <NavLink
                to="/login"
                className={cn(
                  'flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium w-full',
                  'text-muted-foreground hover:text-foreground hover:bg-muted/50',
                  'transition-colors'
                )}
                activeClassName="bg-muted text-foreground"
                onClick={() => setMobileMenuOpen(false)}
              >
                <LogIn className="w-5 h-5" />
                Connexion
              </NavLink>
            </div>
          </nav>
        )}
      </header>

      {/* Main Content */}
      <main className="container py-4 sm:py-8 px-4">
        {children}
      </main>

      {/* Footer */}
      <footer className="border-t border-border/50 py-4 sm:py-6">
        <div className="container text-center text-xs sm:text-sm text-muted-foreground px-4">
          <p>Status Monitor — Surveillance distribuée des services</p>
        </div>
      </footer>
    </div>
  );
}