import React from 'react';
import { Container, Navbar, Nav, ButtonGroup, Button } from 'react-bootstrap';
import { Link, NavLink, Outlet, useLocation } from 'react-router';
import KeyboardIcon from '@mui/icons-material/Keyboard';
import { useKeyboardNavigationActivity } from '../contexts/KeyboardNavigationContext';
import KeyboardShortcutsModal from './KeyboardShortcutsModal';
import { defaultKeyboardShortcuts } from '../hooks/useKeyboardListNavigation';
import './Layout.scss';
import type { LayoutProps, NavLinkItem } from '../types/layout.types';

const Layout: React.FC<LayoutProps> = ({
  children,
  brandText = 'PD0MZ HAM View',
  brandTo = '/',
  buttonGroup,
  navLinks = [],
  gutterSize = 16
}) => {
  const location = useLocation();
  const { isKeyboardNavigationActive, showGlobalShortcuts, setShowGlobalShortcuts } = useKeyboardNavigationActivity();

  const isActive = (link: NavLinkItem): boolean => {
    return location.pathname.startsWith(link.to);
  };

  const resolvedGutter = typeof gutterSize === 'number' ? `${gutterSize}px` : gutterSize;

  return (
    <div className="layout-container" style={{ ['--layout-gutter' as string]: resolvedGutter }}>
      <Navbar bg="transparent" variant="dark" expand="lg" className="layout-navbar px-4">
        <Container fluid>
          <div className="d-flex align-items-center">
            <Navbar.Brand as={Link} to={brandTo} className="fw-bold brand-text">
              {brandText}
            </Navbar.Brand>
            {buttonGroup && <div className="ms-3">{buttonGroup}</div>}
          </div>

          <Navbar.Toggle aria-controls="layout-navbar-nav" />
          <Navbar.Collapse id="layout-navbar-nav" className="justify-content-end">
            <div className="ms-auto d-flex align-items-center gap-3">
              {isKeyboardNavigationActive && (
                <div className="d-none d-lg-block">
                  <ButtonGroup className="keyboard-nav-group">
                    <Button
                      variant="outline-light"
                      active
                      onClick={() => setShowGlobalShortcuts(true)}
                      aria-label="Show keyboard shortcuts"
                      title="Show keyboard shortcuts (F1 or ?)"
                    >
                      <KeyboardIcon />
                    </Button>
                  </ButtonGroup>
                </div>
              )}
              <Nav className="ms-2">
              {navLinks.map((link, index) => (
                <Nav.Link
                  key={index}
                  as={NavLink}
                  to={link.to}
                  end={link.end}
                  className={`mx-2 nav-link-custom ${isActive(link) ? 'active' : ''}`}
                >
                  {link.label}
                </Nav.Link>
              ))}
              </Nav>
            </div>
          </Navbar.Collapse>
        </Container>
      </Navbar>

      <Container fluid className="main-content d-flex flex-column" style={{ marginTop: resolvedGutter }}>
        {children || <Outlet />}
      </Container>

      <KeyboardShortcutsModal
        show={showGlobalShortcuts}
        onHide={() => setShowGlobalShortcuts(false)}
        shortcuts={defaultKeyboardShortcuts}
      />

      <footer className="layout-footer">
        <p>&copy; {new Date().getFullYear()} PD0MZ. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default Layout;
