/**
 * @ai-summary Main layout component with navigation (desktop/mobile adaptive)
 */

import React from 'react';
import { useAuth0 } from '@auth0/auth0-react';
import { Link, useLocation } from 'react-router-dom';
import { useLogout } from '../core/auth/useLogout';
import { Container, Paper, Typography, Box, IconButton, Avatar, Tooltip } 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 BuildRoundedIcon from '@mui/icons-material/BuildRounded';
import PlaceRoundedIcon from '@mui/icons-material/PlaceRounded';
import SettingsRoundedIcon from '@mui/icons-material/SettingsRounded';
import DescriptionRoundedIcon from '@mui/icons-material/DescriptionRounded';
import HelpOutlineRoundedIcon from '@mui/icons-material/HelpOutlineRounded';
import MenuIcon from '@mui/icons-material/Menu';
import ChevronLeftRoundedIcon from '@mui/icons-material/ChevronLeftRounded';
import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
import { useAppStore } from '../core/store';
import { Button } from '../shared-minimal/components/Button';
import { NotificationBell } from '../features/notifications';
import { useThemeSync } from '../shared-minimal/theme/useThemeSync';

interface LayoutProps {
  children: React.ReactNode;
  mobileMode?: boolean;
}

export const Layout: React.FC<LayoutProps> = ({ children, mobileMode = false }) => {
  const { user } = useAuth0();
  const { logout } = useLogout();
  const { sidebarOpen, sidebarCollapsed, toggleSidebar, setSidebarOpen, toggleSidebarCollapse } = useAppStore();
  const location = useLocation();

  // Sync theme preference with backend
  useThemeSync();

  // Ensure desktop has a visible navigation by default (only on mount)
  React.useEffect(() => {
    if (!mobileMode && !sidebarOpen) {
      setSidebarOpen(true);
    }
  }, [mobileMode, setSidebarOpen]); // Removed sidebarOpen from dependencies

  const navigation = [
    { name: 'Dashboard', href: '/garage/dashboard', icon: <HomeRoundedIcon sx={{ fontSize: 20 }} /> },
    { name: 'Vehicles', href: '/garage/vehicles', icon: <DirectionsCarRoundedIcon sx={{ fontSize: 20 }} /> },
    { name: 'Fuel Logs', href: '/garage/fuel-logs', icon: <LocalGasStationRoundedIcon sx={{ fontSize: 20 }} /> },
    { name: 'Maintenance', href: '/garage/maintenance', icon: <BuildRoundedIcon sx={{ fontSize: 20 }} /> },
    { name: 'Gas Stations', href: '/garage/stations', icon: <PlaceRoundedIcon sx={{ fontSize: 20 }} /> },
    { name: 'Documents', href: '/garage/documents', icon: <DescriptionRoundedIcon sx={{ fontSize: 20 }} /> },
    { name: 'Settings', href: '/garage/settings', icon: <SettingsRoundedIcon sx={{ fontSize: 20 }} /> },
    { name: 'Guide', href: '/guide', icon: <HelpOutlineRoundedIcon sx={{ fontSize: 20 }} /> },
  ];

  const sidebarWidth = sidebarCollapsed ? 64 : 256;

  // Mobile layout
  if (mobileMode) {
    return (
      <div className="w-full min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 dark:from-paper dark:via-nero dark:to-paper">
        <Container
          maxWidth={false}
          sx={{
            borderRadius: 0,
            p: 0,
            boxShadow: 0,
            minHeight: '100vh',
            display: 'flex',
            flexDirection: 'column',
            width: '100%',
            maxWidth: '100% !important'
          }}
        >
          {/* App header */}
          <div className="px-5 pt-5 pb-3">
            <div className="flex items-center justify-between">
              <div className="bg-primary-500 dark:bg-transparent rounded px-2 py-1 inline-flex items-center">
                <img
                  src="/images/logos/motovaultpro-title-slogan.png"
                  alt="MotoVaultPro"
                  className="h-6 w-auto"
                />
              </div>
              <div className="flex items-center gap-2">
                <NotificationBell />
                <div className="text-xs text-slate-500 dark:text-titanio">v1.0</div>
              </div>
            </div>
          </div>
          {/* Content area */}
          <div className="flex-1 px-5 pb-20 space-y-5 overflow-y-auto">
            <div className="min-h-[560px]">
              {children}
            </div>
          </div>
        </Container>
      </div>
    );
  }

  // Desktop layout
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 dark:from-paper dark:via-nero dark:to-paper">
      {/* Sidebar */}
      <Paper
        elevation={2}
        sx={{
          position: 'fixed',
          top: 0,
          left: 0,
          height: '100vh',
          width: sidebarWidth,
          zIndex: 1000,
          borderRadius: 0,
          borderRight: 1,
          borderColor: 'divider',
          transform: sidebarOpen ? 'translateX(0)' : 'translateX(-100%)',
          transition: 'transform 0.2s ease-in-out, width 0.2s ease-in-out',
          display: 'flex',
          flexDirection: 'column',
          overflow: 'hidden',
        }}
      >
        <Box
          sx={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: sidebarCollapsed ? 'center' : 'space-between',
            height: 64,
            px: sidebarCollapsed ? 1 : 2,
            borderBottom: 1,
            borderColor: 'divider',
            gap: 1
          }}
        >
          {!sidebarCollapsed && (
            <Box
              sx={(theme) => ({
                backgroundColor: 'primary.main',
                ...theme.applyStyles('dark', {
                  backgroundColor: 'transparent',
                }),
                borderRadius: 0.5,
                px: 0.5,
                py: 0.5,
                display: 'inline-flex',
                alignItems: 'center',
                overflow: 'hidden',
                flex: 1,
                minWidth: 0,
              })}
            >
              <img
                src="/images/logos/motovaultpro-title-slogan.png"
                alt="MotoVaultPro"
                style={{ height: 24, width: 'auto', maxWidth: '100%' }}
              />
            </Box>
          )}
          <IconButton
            onClick={toggleSidebarCollapse}
            size="small"
            sx={{ color: 'text.secondary', flexShrink: 0 }}
          >
            {sidebarCollapsed ? <ChevronRightRoundedIcon /> : <ChevronLeftRoundedIcon />}
          </IconButton>
        </Box>

        <Box sx={{ mt: 3, px: sidebarCollapsed ? 1 : 2, flex: 1 }}>
          {navigation.map((item) => {
            const isActive = location.pathname.startsWith(item.href);
            const navItem = (
              <Link
                key={item.name}
                to={item.href}
                style={{ textDecoration: 'none' }}
              >
                <Box
                  sx={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: sidebarCollapsed ? 'center' : 'flex-start',
                    px: sidebarCollapsed ? 1 : 2,
                    py: 1.5,
                    mb: 0.5,
                    borderRadius: 2,
                    transition: 'all 0.2s',
                    backgroundColor: isActive
                      ? 'primary.main'
                      : 'transparent',
                    color: isActive
                      ? 'primary.contrastText'
                      : 'text.primary',
                    '&:hover': {
                      backgroundColor: isActive
                        ? 'primary.dark'
                        : 'action.hover',
                    }
                  }}
                >
                  <Box sx={{ mr: sidebarCollapsed ? 0 : 2, display: 'flex', alignItems: 'center' }}>
                    {item.icon}
                  </Box>
                  {!sidebarCollapsed && (
                    <Typography variant="body2" sx={{ fontWeight: 500, whiteSpace: 'nowrap' }}>
                      {item.name}
                    </Typography>
                  )}
                </Box>
              </Link>
            );
            return sidebarCollapsed ? (
              <Tooltip key={item.name} title={item.name} placement="right" arrow>
                {navItem}
              </Tooltip>
            ) : (
              navItem
            );
          })}
        </Box>

        <Box sx={{ p: sidebarCollapsed ? 1 : 2, borderTop: 1, borderColor: 'divider', mt: 'auto' }}>
          {sidebarCollapsed ? (
            <Tooltip title={user?.name || user?.email || 'User'} placement="right" arrow>
              <Avatar
                sx={{
                  width: 32,
                  height: 32,
                  bgcolor: 'primary.main',
                  fontSize: '0.875rem',
                  fontWeight: 600,
                  mx: 'auto',
                  cursor: 'pointer',
                }}
                onClick={() => logout()}
              >
                {user?.name?.charAt(0) || user?.email?.charAt(0)}
              </Avatar>
            </Tooltip>
          ) : (
            <>
              <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
                <Avatar
                  sx={{
                    width: 32,
                    height: 32,
                    bgcolor: 'primary.main',
                    fontSize: '0.875rem',
                    fontWeight: 600
                  }}
                >
                  {user?.name?.charAt(0) || user?.email?.charAt(0)}
                </Avatar>
                <Box sx={{ ml: 1.5, flex: 1, minWidth: 0 }}>
                  <Typography variant="body2" sx={{ fontWeight: 500 }} noWrap>
                    {user?.name || user?.email}
                  </Typography>
                </Box>
              </Box>
              <Button
                variant="secondary"
                size="sm"
                className="w-full"
                onClick={() => logout()}
              >
                Sign Out
              </Button>
            </>
          )}
        </Box>
      </Paper>

      {/* Main content */}
      <Box
        sx={{
          ml: sidebarOpen ? `${sidebarWidth}px` : '0',
          transition: 'margin-left 0.2s ease-in-out',
        }}
      >
        {/* Top bar */}
        <Paper 
          elevation={1} 
          sx={{ 
            borderRadius: 0,
            borderBottom: 1,
            borderColor: 'divider'
          }}
        >
          <Box sx={{ 
            display: 'flex', 
            alignItems: 'center', 
            justifyContent: 'space-between', 
            height: 64, 
            px: 3 
          }}>
            <IconButton
              onClick={toggleSidebarCollapse}
              sx={{ color: 'text.secondary' }}
            >
              <MenuIcon />
            </IconButton>
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
              <NotificationBell />
              <Typography variant="body2" color="text.secondary">
                Welcome back, {user?.given_name || user?.name?.split(' ')[0] || user?.nickname || user?.email}
              </Typography>
            </Box>
          </Box>
        </Paper>

        {/* Page content */}
        <Box component="main" sx={{ p: 3 }}>
          <Container maxWidth="xl">
            {children}
          </Container>
        </Box>
      </Box>

      {/* Backdrop */}
      {sidebarOpen && (
        <Box
          sx={{
            position: 'fixed',
            inset: 0,
            zIndex: 999,
            bgcolor: 'rgba(0,0,0,0.5)',
            display: { lg: 'none' }
          }}
          onClick={toggleSidebar}
        />
      )}
    </div>
  );
};
