/**
 * @ai-summary Bottom navigation component with center FAB and hamburger menu
 * @ai-context Layout: Dashboard | Vehicles | + FAB | Stations | Hamburger
 */

import React from 'react';
import { Box, IconButton, Typography, useTheme, SpeedDial, SpeedDialAction, Backdrop, SpeedDialIcon } from '@mui/material';
import HomeRoundedIcon from '@mui/icons-material/HomeRounded';
import DirectionsCarRoundedIcon from '@mui/icons-material/DirectionsCarRounded';
import LocalGasStationRoundedIcon from '@mui/icons-material/LocalGasStationRounded';
import MenuRoundedIcon from '@mui/icons-material/MenuRounded';
import AddIcon from '@mui/icons-material/Add';
import CloseIcon from '@mui/icons-material/Close';
import { MobileScreen } from '../../../core/store/navigation';
import { quickActions, QuickAction } from './quickActions';

interface BottomNavigationProps {
  activeScreen: MobileScreen;
  onNavigate: (screen: MobileScreen) => void;
  onQuickAction: (action: QuickAction) => void;
  onHamburgerPress: () => void;
}

interface NavItem {
  screen: MobileScreen;
  label: string;
  icon: React.ReactNode;
}

const leftNavItems: NavItem[] = [
  { screen: 'Dashboard', label: 'Dashboard', icon: <HomeRoundedIcon /> },
  { screen: 'Vehicles', label: 'Vehicles', icon: <DirectionsCarRoundedIcon /> },
];

const rightNavItems: NavItem[] = [
  { screen: 'Stations', label: 'Stations', icon: <LocalGasStationRoundedIcon /> },
];

export const BottomNavigation: React.FC<BottomNavigationProps> = ({
  activeScreen,
  onNavigate,
  onQuickAction,
  onHamburgerPress
}) => {
  const theme = useTheme();
  const [speedDialOpen, setSpeedDialOpen] = React.useState(false);

  const closeSpeedDial = () => setSpeedDialOpen(false);
  const openSpeedDial = () => setSpeedDialOpen(true);

  const NavButton: React.FC<{
    item: NavItem;
    isActive: boolean;
    onClick: () => void;
  }> = ({ item, isActive, onClick }) => (
    <Box
      onClick={() => {
        closeSpeedDial();
        onClick();
      }}
      sx={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        flex: 1,
        py: 1,
        cursor: 'pointer',
        color: isActive ? theme.palette.primary.main : theme.palette.text.secondary,
        transition: 'color 0.2s ease',
        minWidth: 64,
        '&:active': {
          opacity: 0.7
        }
      }}
    >
      <IconButton
        size="small"
        sx={{
          color: 'inherit',
          p: 0.5
        }}
        disableRipple
      >
        {item.icon}
      </IconButton>
      <Typography
        variant="caption"
        sx={{
          fontSize: '0.7rem',
          fontWeight: isActive ? 600 : 400,
          color: 'inherit',
          mt: 0.25
        }}
      >
        {item.label}
      </Typography>
    </Box>
  );

  return (
    <Box
      sx={{
        position: 'fixed',
        bottom: 0,
        left: 0,
        right: 0,
        zIndex: 1000,
        backgroundColor: theme.palette.background.paper,
        borderTop: `1px solid ${theme.palette.divider}`,
        display: 'flex',
        alignItems: 'flex-end',
        justifyContent: 'space-around',
        height: 64,
        paddingBottom: 'env(safe-area-inset-bottom, 0px)',
        overflow: 'visible'
      }}
    >
      {/* Left nav items */}
      {leftNavItems.map((item) => (
        <NavButton
          key={item.screen}
          item={item}
          isActive={activeScreen === item.screen}
          onClick={() => onNavigate(item.screen)}
        />
      ))}

      {/* Center quick actions */}
      <Box
        sx={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          alignSelf: 'stretch',
          flex: 1,
          position: 'relative',
          height: '100%'
        }}
      >
        <Backdrop
          open={speedDialOpen}
          onClick={closeSpeedDial}
          sx={{
            zIndex: theme.zIndex.speedDial - 1,
            backgroundColor: 'rgba(0, 0, 0, 0.15)'
          }}
        />
        <SpeedDial
          ariaLabel="Quick actions"
          icon={<SpeedDialIcon icon={<AddIcon />} openIcon={<CloseIcon />} />}
          open={speedDialOpen}
          onOpen={openSpeedDial}
          onClose={closeSpeedDial}
          direction="up"
          FabProps={{
            color: 'primary',
            sx: {
              boxShadow: '0 4px 12px rgba(122, 33, 42, 0.35)',
              width: 52,
              height: 52,
              '&:hover': {
                boxShadow: '0 6px 16px rgba(122, 33, 42, 0.45)'
              }
            },
            onClick: () => setSpeedDialOpen((prev) => !prev)
          }}
          sx={{
            position: 'fixed',
            bottom: 'calc(64px + env(safe-area-inset-bottom, 0px) - 26px)',
            left: '50%',
            transform: 'translateX(-50%)',
            zIndex: theme.zIndex.appBar + 1,
            '& .MuiSpeedDial-fab': {
              width: 52,
              height: 52
            },
            // Position actions container as a centered point above FAB - use !important to override MUI defaults
            '& .MuiSpeedDial-actions': {
              position: 'absolute !important',
              bottom: '56px !important',
              left: '50% !important',
              transform: 'translateX(-50%) !important',
              width: '0 !important',
              height: '0 !important',
              padding: '0 !important',
              margin: '0 !important',
              flexDirection: 'row !important'
            }
          }}
        >
          {quickActions.map(({ action, label, icon }, index) => {
            // Calculate semi-circle positions
            // 4 items spread across 120 degrees (-60 to +60 from vertical)
            const totalItems = quickActions.length;
            const spreadAngle = 120; // degrees - reduced for tighter fit
            const startAngle = 90 + spreadAngle / 2; // Start from left
            const angleStep = spreadAngle / (totalItems - 1);
            const angle = (startAngle - index * angleStep) * (Math.PI / 180);
            const radius = 80; // Distance from center
            const actionButtonOffset = 28; // Half of 56px wrapper width - centers the button instead of left edge
            const x = Math.cos(angle) * radius - actionButtonOffset;
            const y = -Math.sin(angle) * radius; // Negative because Y goes down in CSS

            // Dynamic tooltip placement - left side items get left labels, right side get right labels
            const tooltipPlacement = angle > Math.PI / 2 ? 'left' : 'right';

            return (
              <SpeedDialAction
                key={action}
                icon={icon}
                tooltipTitle={label}
                tooltipOpen
                tooltipPlacement={tooltipPlacement}
                onClick={() => {
                  onQuickAction(action);
                  closeSpeedDial();
                }}
                FabProps={{
                  sx: {
                    bgcolor: theme.palette.background.paper,
                    color: theme.palette.primary.main,
                    boxShadow: theme.shadows[4],
                    '&:hover': {
                      bgcolor: theme.palette.action.hover
                    }
                  }
                }}
                sx={{
                  position: 'absolute !important',
                  left: '0 !important',
                  right: 'auto !important',
                  top: '0 !important',
                  bottom: 'auto !important',
                  margin: '0 !important',
                  padding: '0 !important',
                  transform: `translate(${x}px, ${y}px) !important`,
                  transition: 'transform 0.2s ease, opacity 0.2s ease',
                  '& .MuiSpeedDialAction-staticTooltipLabel': {
                    whiteSpace: 'nowrap',
                    fontSize: '0.75rem',
                    padding: '4px 8px'
                  }
                }}
              />
            );
          })}
        </SpeedDial>
      </Box>

      {/* Right nav items */}
      {rightNavItems.map((item) => (
        <NavButton
          key={item.screen}
          item={item}
          isActive={activeScreen === item.screen}
          onClick={() => onNavigate(item.screen)}
        />
      ))}

      {/* Hamburger menu button */}
      <Box
        onClick={() => {
          closeSpeedDial();
          onHamburgerPress();
        }}
        sx={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          flex: 1,
          py: 1,
          cursor: 'pointer',
          color: theme.palette.text.secondary,
          transition: 'color 0.2s ease',
          minWidth: 64,
          '&:active': {
            opacity: 0.7
          }
        }}
      >
        <IconButton
          size="small"
          sx={{
            color: 'inherit',
            p: 0.5
          }}
          disableRipple
        >
          <MenuRoundedIcon />
        </IconButton>
        <Typography
          variant="caption"
          sx={{
            fontSize: '0.7rem',
            fontWeight: 400,
            color: 'inherit',
            mt: 0.25
          }}
        >
          More
        </Typography>
      </Box>
    </Box>
  );
};

// Re-export NavigationItem for backward compatibility if needed
export interface NavigationItem {
  key: string;
  label: string;
  icon: React.ReactNode;
}
