import { Link, usePage, router } from '@inertiajs/react';
import { Navbar, Nav, Container, Dropdown } from 'react-bootstrap';
import { Settings, Users, Building, Activity, LogOut } from 'lucide-react';

export default function AdminNavigation() {
    const { auth } = usePage().props as any;

    return (
        <Navbar bg="dark" variant="dark" expand="lg" className="admin-navbar">
            <Container fluid>
                <Navbar.Brand as={Link} href={route('admin.dashboard')} className="d-flex align-items-center gap-2">
                    <div className="admin-logo">
                        <Settings size={24} />
                    </div>
                    <span className="fw-bold">Admin Panel</span>
                </Navbar.Brand>

                <Navbar.Toggle aria-controls="admin-navbar-nav" />

                <Navbar.Collapse id="admin-navbar-nav">
                    <Nav className="me-auto">
                        <Nav.Link
                            as={Link}
                            href={route('admin.dashboard')}
                            className={route().current('admin.dashboard') ? 'active' : ''}
                        >
                            <Activity size={18} className="me-2" />
                            Dashboard
                        </Nav.Link>

                        <Nav.Link
                            as={Link}
                            href={route('admin.tenants.index')}
                            className={route().current('admin.tenants.*') ? 'active' : ''}
                        >
                            <Building size={18} className="me-2" />
                            Tenants
                        </Nav.Link>

                        {/* Futuras secciones
                        <Nav.Link
                            as={Link}
                            href={route('admin.users.index')}
                            className={route().current('admin.users.*') ? 'active' : ''}
                        >
                            <Users size={18} className="me-2" />
                            Usuarios
                        </Nav.Link>
                        */}
                    </Nav>

                    <Nav>
                        <Dropdown align="end">
                            <Dropdown.Toggle as={Nav.Link} className="d-flex align-items-center gap-2">
                                <div className="user-avatar">
                                    {auth.user?.name?.charAt(0)}
                                </div>
                                {auth.user?.name}
                            </Dropdown.Toggle>

                            <Dropdown.Menu>
                                <Dropdown.Header>
                                    <small className="text-muted">Super Administrador</small>
                                </Dropdown.Header>
                                <Dropdown.Divider />
                                <Dropdown.Item
                                    as={Link}
                                    href={route('dashboard')}
                                >
                                    Volver al Dashboard
                                </Dropdown.Item>
                                <Dropdown.Divider />
                                <Dropdown.Item
                                    as="button"
                                    onClick={() => router.post(route('logout'))}
                                    className="text-danger dropdown-item"
                                >
                                    <LogOut size={16} className="me-2" />
                                    Cerrar Sesión
                                </Dropdown.Item>
                            </Dropdown.Menu>
                        </Dropdown>
                    </Nav>
                </Navbar.Collapse>
            </Container>

            <style>{`
                .admin-navbar {
                    background: linear-gradient(135deg, #575A4F 0%, #454842 100%) !important;
                    box-shadow: 0 2px 20px rgba(0,0,0,0.1);
                }

                .admin-logo {
                    width: 40px;
                    height: 40px;
                    background: rgba(255,255,255,0.1);
                    border-radius: 8px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .navbar-nav .nav-link {
                    display: flex;
                    align-items: center;
                    padding: 0.75rem 1rem;
                    border-radius: 8px;
                    margin: 0 0.25rem;
                    transition: all 0.3s ease;
                }

                .navbar-nav .nav-link:hover {
                    background: rgba(255,255,255,0.1);
                    transform: translateY(-1px);
                }

                .navbar-nav .nav-link.active {
                    background: rgba(255,255,255,0.2);
                    color: #fff !important;
                }

                .user-avatar {
                    width: 32px;
                    height: 32px;
                    background: #0d6efd;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: white;
                    font-weight: 600;
                    font-size: 0.875rem;
                }

                .dropdown-toggle::after {
                    display: none;
                }
            `}</style>
        </Navbar>
    );
}