motovaultpro/frontend/src/pages/SettingsPage.tsx

/**
 * @ai-summary Settings page component for desktop application
 */

import React, { useState } from 'react';
import { useAuth0 } from '@auth0/auth0-react';
import { useUnits } from '../core/units/UnitsContext';
import { 
  Box, 
  Typography, 
  Switch, 
  Divider, 
  Avatar,
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
  ListItemSecondaryAction,
  Button as MuiButton,
  Select,
  MenuItem,
  FormControl
} from '@mui/material';
import AccountCircleIcon from '@mui/icons-material/AccountCircle';
import NotificationsIcon from '@mui/icons-material/Notifications';
import PaletteIcon from '@mui/icons-material/Palette';
import SecurityIcon from '@mui/icons-material/Security';
import StorageIcon from '@mui/icons-material/Storage';
import { Card } from '../shared-minimal/components/Card';

export const SettingsPage: React.FC = () => {
  const { user, logout } = useAuth0();
  const { unitSystem, setUnitSystem } = useUnits();
  const [notifications, setNotifications] = useState(true);
  const [emailUpdates, setEmailUpdates] = useState(false);
  const [darkMode, setDarkMode] = useState(false);

  const handleLogout = () => {
    logout({ logoutParams: { returnTo: window.location.origin } });
  };

  return (
    <Box sx={{ py: 2 }}>
      <Typography variant="h4" sx={{ fontWeight: 700, color: 'text.primary', mb: 4 }}>
        Settings
      </Typography>

      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
        {/* Account Section */}
        <Card>
          <Typography variant="h6" sx={{ fontWeight: 600, mb: 3 }}>
            Account
          </Typography>
          
          <Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
            <Avatar
              sx={{ 
                width: 64, 
                height: 64, 
                bgcolor: 'primary.main',
                fontSize: '1.5rem',
                fontWeight: 600,
                mr: 3
              }}
            >
              {user?.name?.charAt(0) || user?.email?.charAt(0)}
            </Avatar>
            <Box>
              <Typography variant="h6" sx={{ fontWeight: 500 }}>
                {user?.name || 'User'}
              </Typography>
              <Typography variant="body2" color="text.secondary">
                {user?.email}
              </Typography>
              <Typography variant="caption" color="text.secondary">
                Verified account
              </Typography>
            </Box>
          </Box>

          <List disablePadding>
            <ListItem>
              <ListItemIcon>
                <AccountCircleIcon />
              </ListItemIcon>
              <ListItemText 
                primary="Profile Information" 
                secondary="Manage your account details"
              />
              <ListItemSecondaryAction>
                <MuiButton variant="outlined" size="small">
                  Edit
                </MuiButton>
              </ListItemSecondaryAction>
            </ListItem>
            <Divider />
            <ListItem>
              <ListItemIcon>
                <SecurityIcon />
              </ListItemIcon>
              <ListItemText 
                primary="Security & Privacy" 
                secondary="Password, two-factor authentication"
              />
              <ListItemSecondaryAction>
                <MuiButton variant="outlined" size="small">
                  Manage
                </MuiButton>
              </ListItemSecondaryAction>
            </ListItem>
          </List>
        </Card>

        {/* Notifications Section */}
        <Card>
          <Typography variant="h6" sx={{ fontWeight: 600, mb: 3 }}>
            Notifications
          </Typography>
          
          <List disablePadding>
            <ListItem>
              <ListItemIcon>
                <NotificationsIcon />
              </ListItemIcon>
              <ListItemText 
                primary="Push Notifications" 
                secondary="Receive notifications about your vehicles"
              />
              <ListItemSecondaryAction>
                <Switch
                  checked={notifications}
                  onChange={(e) => setNotifications(e.target.checked)}
                  color="primary"
                />
              </ListItemSecondaryAction>
            </ListItem>
            <Divider />
            <ListItem>
              <ListItemText 
                primary="Email Updates" 
                secondary="Receive maintenance reminders and updates"
                sx={{ pl: 7 }}
              />
              <ListItemSecondaryAction>
                <Switch
                  checked={emailUpdates}
                  onChange={(e) => setEmailUpdates(e.target.checked)}
                  color="primary"
                />
              </ListItemSecondaryAction>
            </ListItem>
          </List>
        </Card>

        {/* Appearance & Units Section */}
        <Card>
          <Typography variant="h6" sx={{ fontWeight: 600, mb: 3 }}>
            Appearance & Units
          </Typography>
          
          <List disablePadding>
            <ListItem>
              <ListItemIcon>
                <PaletteIcon />
              </ListItemIcon>
              <ListItemText 
                primary="Dark Mode" 
                secondary="Use dark theme for better night viewing"
              />
              <ListItemSecondaryAction>
                <Switch
                  checked={darkMode}
                  onChange={(e) => setDarkMode(e.target.checked)}
                  color="primary"
                />
              </ListItemSecondaryAction>
            </ListItem>
            <Divider />
            <ListItem>
              <ListItemText 
                primary="Units for distance and capacity" 
                secondary="Choose between Imperial (miles, gallons) or Metric (kilometers, liters)"
                sx={{ pl: 7 }}
              />
              <ListItemSecondaryAction>
                <FormControl size="small" sx={{ minWidth: 120 }}>
                  <Select
                    value={unitSystem}
                    onChange={(e) => setUnitSystem(e.target.value as 'imperial' | 'metric')}
                    displayEmpty
                    sx={{ 
                      fontSize: '0.875rem',
                      '& .MuiSelect-select': {
                        py: 1
                      }
                    }}
                  >
                    <MenuItem value="imperial">Imperial</MenuItem>
                    <MenuItem value="metric">Metric</MenuItem>
                  </Select>
                </FormControl>
              </ListItemSecondaryAction>
            </ListItem>
          </List>
        </Card>

        {/* Data & Storage Section */}
        <Card>
          <Typography variant="h6" sx={{ fontWeight: 600, mb: 3 }}>
            Data & Storage
          </Typography>
          
          <List disablePadding>
            <ListItem>
              <ListItemIcon>
                <StorageIcon />
              </ListItemIcon>
              <ListItemText 
                primary="Export Data" 
                secondary="Download your vehicle and fuel log data"
              />
              <ListItemSecondaryAction>
                <MuiButton variant="outlined" size="small">
                  Export
                </MuiButton>
              </ListItemSecondaryAction>
            </ListItem>
            <Divider />
            <ListItem>
              <ListItemText 
                primary="Clear Cache" 
                secondary="Remove cached data to free up space"
                sx={{ pl: 7 }}
              />
              <ListItemSecondaryAction>
                <MuiButton variant="outlined" size="small" color="warning">
                  Clear
                </MuiButton>
              </ListItemSecondaryAction>
            </ListItem>
          </List>
        </Card>

        {/* Account Actions */}
        <Card>
          <Typography variant="h6" sx={{ fontWeight: 600, mb: 3, color: 'error.main' }}>
            Account Actions
          </Typography>
          
          <Box sx={{ display: 'flex', gap: 2 }}>
            <MuiButton 
              variant="contained" 
              color="error"
              onClick={handleLogout}
              sx={{ borderRadius: '999px' }}
            >
              Sign Out
            </MuiButton>
            <MuiButton 
              variant="outlined" 
              color="error"
              sx={{ borderRadius: '999px' }}
            >
              Delete Account
            </MuiButton>
          </Box>
        </Card>
      </Box>
    </Box>
  );
};