import React from 'react';
import { Link, useLocation, useNavigate, Outlet } from 'react-router-dom';
import { QrCode, Scan, Calendar, Mail, LogOut } from 'lucide-react';
import { useAuth } from '../context/AuthContext';

export const Layout: React.FC = () => {
    const location = useLocation();
    const navigate = useNavigate();
    const { logout } = useAuth();

    const isActive = (path: string) => location.pathname === path;

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

    return (
        <div className="min-h-screen flex flex-col">
            <nav className="glass-panel sticky top-0 z-50 border-x-0 border-t-0 rounded-none">
                <div className="container py-4 flex justify-between items-center">
                    <Link to="/" className="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-purple-400 flex items-center gap-2">
                        <QrCode className="text-indigo-400" />
                        EventQR
                    </Link>

                    <div className="flex gap-6 items-center">
                        <Link
                            to="/"
                            className={`flex items-center gap-2 hover:text-indigo-400 transition-colors ${isActive('/') ? 'text-indigo-400' : 'text-slate-400'}`}
                        >
                            <Calendar size={20} />
                            <span className="hidden sm:inline">Events</span>
                        </Link>
                        <Link
                            to="/generate"
                            className={`flex items-center gap-2 hover:text-indigo-400 transition-colors ${isActive('/generate') ? 'text-indigo-400' : 'text-slate-400'}`}
                        >
                            <Mail size={20} />
                            <span className="hidden sm:inline">Generate</span>
                        </Link>
                        <Link
                            to="/scan"
                            className={`flex items-center gap-2 hover:text-indigo-400 transition-colors ${isActive('/scan') ? 'text-indigo-400' : 'text-slate-400'}`}
                        >
                            <Scan size={20} />
                            <span className="hidden sm:inline">Scan</span>
                        </Link>

                        <div className="w-px h-6 bg-slate-700 mx-2"></div>

                        <button
                            onClick={handleLogout}
                            className="flex items-center gap-2 text-slate-400 hover:text-red-400 transition-colors"
                            title="Logout"
                        >
                            <LogOut size={20} />
                        </button>
                    </div>
                </div>
            </nav>

            <main className="flex-1 container py-8 page-transition">
                <Outlet />
            </main>

            <footer className="py-6 text-center text-slate-600 text-sm">
                <p>© 2024 EventQR Tool. Built for seamless event management.</p>
            </footer>
        </div>
    );
};