import { useAuthStore } from "../stores/authStore";
import { Box, Home, LogOut, Server } from "lucide-react";
import { ReactNode } from "react";
import { NavLink, useNavigate } from "react-router-dom";

interface LayoutProps {
    children: ReactNode;
}

export default function Layout({ children }: LayoutProps) {
    const { user, logout } = useAuthStore();
    const navigate = useNavigate();

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

    const navItems = [
        { to: '/', icon: Home, label: 'Dashboard' },
        { to: '/containers', icon: Box, label: 'Container' },
    ];

    return (
        <div className="min-h-screen bg-gray-950">
            {/* Header */}
            <header className="bg-gray-900 border-b border-gray-800 sticky top-0 z-50">
                <div className="max-2-7xl mx-auto px-4 py-4">
                    <div className="flex items-center justify-between">
                        <div className="flex items-center gap-3">
                            <div className="bg-unraid-orange p-2 rounded-lg">
                                <Server size={24} />
                            </div>
                            <h1 className="text-xl font-bold">Unraid Monitor</h1>
                        </div>

                        <div className="flex items-center gap-4">
                            <span className="text-sm text-gray-400">{user?.username}</span>
                            <button
                                onClick={handleLogout}
                                className="flex items-center gap-2 text-gray-400 hover:text-white transition-colors"
                            >
                                <LogOut size={20} />
                                <span className="hidden sm:inline">Abmelden</span>
                            </button>
                        </div>
                    </div>
                </div>
            </header>

            {/* Mobile Navigation */}
            <nav className="md:hidden bg-gray-900 border-b border-gray-800 sticky top-[73px] z-40">
                <div className="flex">
                    {navItems.map((item) => (
                        <NavLink
                            key={item.to}
                            to={item.to}
                            className={({isActive}) =>
                                `flex-1 flex flex-col items-center gap-1 py-3 transition-colors ${
                                    isActive
                                        ? 'text-unraid-orange border-b-2 border-unraid-orange'
                                        : 'text-gray-400 hover:text-white'
                                }`
                            }
                        >
                            <item.icon size={20} />
                            <span className="text-xs">{item.label}</span>
                        </NavLink>
                    ))}
                </div>
            </nav>

            <div className="flex">
                {/* Desktop Sidebar */}
                <aside className="hidden md:block w-64 bg-gray-900 min-h-[calc(100vh-73px)] border-r border-gray-800 sticky top-[73px]">
                    <nav className="p-4 space-y-2">
                        {navItems.map((item) => (
                        <NavLink
                            key={item.to}
                            to={item.to}
                            className={({isActive}) =>
                                `flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${
                                    isActive
                                        ? 'bg-unraid-orange text-white'
                                        : 'text-gray-400 hover:bg-gray-800 hover:text-white'
                                }`
                            }
                        >
                            <item.icon size={20} />
                            <span>{item.label}</span>
                        </NavLink>
                    ))}
                    </nav>
                </aside>

                {/* Main Content */}
                <main className="flex-1 p-4 md:p-6 max-w-7xl mx-auto w-full">
                    {children}
                </main>
            </div>
        </div>
    );
}