/**
 * Mobile Navigation Component for Redirect Intelligence v2
 * 
 * Mobile-friendly navigation drawer
 */

import React from 'react';
import {
  VStack,
  Link,
  Text,
  Box,
  Divider,
  Button,
  HStack,
  Avatar,
  useColorModeValue,
} from '@chakra-ui/react';
import { Link as RouterLink, useNavigate } from 'react-router-dom';
import { ExternalLinkIcon } from '@chakra-ui/icons';

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

interface MobileNavProps {
  onClose: () => void;
}

export function MobileNav({ onClose }: MobileNavProps) {
  const { user, logout, isAuthenticated } = useAuth();
  const navigate = useNavigate();
  
  const linkColor = useColorModeValue('gray.600', 'gray.300');
  const linkHoverColor = useColorModeValue('brand.600', 'brand.400');

  const handleNavigation = (path: string) => {
    navigate(path);
    onClose();
  };

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

  return (
    <VStack spacing={4} align="stretch" p={4}>
      {/* User info */}
      {isAuthenticated && user && (
        <Box>
          <HStack mb={4}>
            <Avatar size="sm" name={user.name} />
            <Box>
              <Text fontWeight="medium" fontSize="sm">
                {user.name}
              </Text>
              <Text fontSize="xs" color="gray.500">
                {user.email}
              </Text>
            </Box>
          </HStack>
          <Divider />
        </Box>
      )}

      {/* Navigation Links */}
      <VStack spacing={3} align="stretch">
        <Link
          as={RouterLink}
          to="/"
          onClick={() => handleNavigation('/')}
          color={linkColor}
          _hover={{ color: linkHoverColor, textDecoration: 'none' }}
          fontWeight="medium"
          py={2}
        >
          Home
        </Link>
        
        <Link
          as={RouterLink}
          to="/track"
          onClick={() => handleNavigation('/track')}
          color={linkColor}
          _hover={{ color: linkHoverColor, textDecoration: 'none' }}
          fontWeight="medium"
          py={2}
        >
          Track URL
        </Link>
        
        <Link
          as={RouterLink}
          to="/analysis"
          onClick={() => handleNavigation('/analysis')}
          color={linkColor}
          _hover={{ color: linkHoverColor, textDecoration: 'none' }}
          fontWeight="medium"
          py={2}
        >
          Analysis
        </Link>

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

        <Link
          href="/api/docs"
          color={linkColor}
          _hover={{ color: linkHoverColor, textDecoration: 'none' }}
          fontWeight="medium"
          py={2}
          isExternal
        >
          API Docs
          <ExternalLinkIcon mx="2px" />
        </Link>
      </VStack>

      <Divider />

      {/* Auth buttons */}
      {isAuthenticated ? (
        <VStack spacing={2} align="stretch">
          <Button
            variant="ghost"
            onClick={() => handleNavigation('/dashboard')}
            size="sm"
          >
            Dashboard
          </Button>
          <Button
            variant="outline"
            onClick={handleLogout}
            size="sm"
          >
            Sign out
          </Button>
        </VStack>
      ) : (
        <VStack spacing={2} align="stretch">
          <Button
            variant="ghost"
            onClick={() => handleNavigation('/login')}
            size="sm"
          >
            Sign in
          </Button>
          <Button
            colorScheme="brand"
            onClick={() => handleNavigation('/register')}
            size="sm"
          >
            Sign up
          </Button>
        </VStack>
      )}
    </VStack>
  );
}
