/**
 * Navigation Bar Component for Redirect Intelligence v2
 * 
 * Main navigation with brand, links, and user menu
 */

import React from 'react';
import {
  Box,
  Flex,
  HStack,
  Link,
  Button,
  Menu,
  MenuButton,
  MenuList,
  MenuItem,
  MenuDivider,
  Avatar,
  Text,
  Badge,
  useColorModeValue,
  useColorMode,
  IconButton,
  Heading,
} from '@chakra-ui/react';
import { Link as RouterLink, useNavigate } from 'react-router-dom';
import { MoonIcon, SunIcon, ExternalLinkIcon } from '@chakra-ui/icons';
import { FiLogOut, FiUser, FiSettings } from 'react-icons/fi';

import { useAuth } from '../../contexts/AuthContext';

interface NavbarProps {
  rightSide?: boolean;
}

export function Navbar({ rightSide = false }: NavbarProps) {
  const { colorMode, toggleColorMode } = useColorMode();
  const { user, logout, isAuthenticated } = useAuth();
  const navigate = useNavigate();
  
  const linkColor = useColorModeValue('gray.600', 'gray.300');
  const linkHoverColor = useColorModeValue('brand.600', 'brand.400');

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

  if (rightSide) {
    return (
      <HStack spacing={4}>
        {/* Color mode toggle */}
        <IconButton
          aria-label="Toggle color mode"
          icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
          onClick={toggleColorMode}
          variant="ghost"
          size="sm"
        />

        {/* User menu or auth buttons */}
        {isAuthenticated && user ? (
          <Menu>
            <MenuButton
              as={Button}
              variant="ghost"
              size="sm"
              leftIcon={<Avatar size="xs" name={user.name} />}
            >
              <Text fontSize="sm" fontWeight="medium">
                {user.name}
              </Text>
            </MenuButton>
            <MenuList>
              <MenuItem icon={<FiUser />} onClick={() => navigate('/dashboard')}>
                Dashboard
              </MenuItem>
              <MenuItem icon={<FiSettings />} disabled>
                Settings
              </MenuItem>
              <MenuDivider />
              <MenuItem icon={<FiLogOut />} onClick={handleLogout}>
                Sign out
              </MenuItem>
            </MenuList>
          </Menu>
        ) : (
          <HStack spacing={2}>
            <Button
              as={RouterLink}
              to="/login"
              variant="ghost"
              size="sm"
            >
              Sign in
            </Button>
            <Button
              as={RouterLink}
              to="/register"
              colorScheme="brand"
              size="sm"
            >
              Sign up
            </Button>
          </HStack>
        )}
      </HStack>
    );
  }

  return (
    <HStack spacing={8}>
      {/* Brand/Logo */}
      <Flex alignItems="center">
        <Heading
          as={RouterLink}
          to="/"
          size="md"
          color={useColorModeValue('brand.600', 'brand.400')}
          _hover={{ textDecoration: 'none' }}
        >
          🔗 Redirect Intelligence
        </Heading>
        <Badge ml={2} colorScheme="brand" variant="subtle" fontSize="xs">
          v2
        </Badge>
      </Flex>

      {/* Navigation Links */}
      <HStack spacing={6}>
        <Link
          as={RouterLink}
          to="/"
          color={linkColor}
          _hover={{ color: linkHoverColor, textDecoration: 'none' }}
          fontWeight="medium"
          fontSize="sm"
        >
          Home
        </Link>
        
        <Link
          as={RouterLink}
          to="/track"
          color={linkColor}
          _hover={{ color: linkHoverColor, textDecoration: 'none' }}
          fontWeight="medium"
          fontSize="sm"
        >
          Track URL
        </Link>
        
        <Link
          as={RouterLink}
          to="/analysis"
          color={linkColor}
          _hover={{ color: linkHoverColor, textDecoration: 'none' }}
          fontWeight="medium"
          fontSize="sm"
        >
          Analysis
        </Link>

        {isAuthenticated && (
          <Link
            as={RouterLink}
            to="/dashboard"
            color={linkColor}
            _hover={{ color: linkHoverColor, textDecoration: 'none' }}
            fontWeight="medium"
            fontSize="sm"
          >
            Dashboard
          </Link>
        )}

        {/* Legacy API docs link */}
        <Link
          href="/api/docs"
          color={linkColor}
          _hover={{ color: linkHoverColor, textDecoration: 'none' }}
          fontWeight="medium"
          fontSize="sm"
          isExternal
        >
          API Docs
          <ExternalLinkIcon mx="2px" />
        </Link>
      </HStack>
    </HStack>
  );
}
