MCP Shipping Control Center

import React, { useState } from 'react';
import {
  Box,
  Button,
  Paper,
  TextField,
  Typography,
  Alert,
  Snackbar,
  Divider,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  Switch,
  FormControlLabel
} from '@mui/material';
import { Check, Save } from '@mui/icons-material';
import authService from '../services/auth';
import apiService from '../services/api';

const Settings: React.FC = () => {
  const user = authService.getUser();
  const [oldPassword, setOldPassword] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [notification, setNotification] = useState<{ open: boolean; message: string; severity: 'success' | 'error' }>({ 
    open: false, 
    message: '', 
    severity: 'success' 
  });
  const [generalSettings, setGeneralSettings] = useState({
    theme: 'light',
    notifications: true,
    autoRefresh: true
  });

  const handlePasswordChange = async () => {
    if (!oldPassword || !newPassword || !confirmPassword) {
      setNotification({
        open: true,
        message: 'Please fill in all password fields',
        severity: 'error'
      });
      return;
    }

    if (newPassword !== confirmPassword) {
      setNotification({
        open: true,
        message: 'New passwords do not match',
        severity: 'error'
      });
      return;
    }

    if (newPassword.length < 8) {
      setNotification({
        open: true,
        message: 'Password must be at least 8 characters long',
        severity: 'error'
      });
      return;
    }

    try {
      await apiService.changePassword(oldPassword, newPassword);
      setNotification({
        open: true,
        message: 'Password changed successfully',
        severity: 'success'
      });
      setOldPassword('');
      setNewPassword('');
      setConfirmPassword('');
    } catch (error) {
      setNotification({
        open: true,
        message: 'Failed to change password',
        severity: 'error'
      });
    }
  };

  const handleGeneralSettingsChange = (field: string, value: any) => {
    setGeneralSettings({
      ...generalSettings,
      [field]: value
    });
  };

  const handleSaveSettings = () => {
    // In a real app, this would save to backend or localStorage
    setNotification({
      open: true,
      message: 'Settings saved successfully',
      severity: 'success'
    });
  };

  const handleCloseNotification = () => {
    setNotification({ ...notification, open: false });
  };

  return (
    <Box>
      <Typography variant="h4" gutterBottom>
        Settings
      </Typography>
      
      <Paper elevation={3} sx={{ p: 3, mb: 3 }}>
        <Typography variant="h6" gutterBottom>
          User Profile
        </Typography>
        
        <Box sx={{ mb: 3 }}>
          <TextField
            fullWidth
            label="Username"
            value={user?.username || ''}
            disabled
            margin="normal"
          />
          <TextField
            fullWidth
            label="Role"
            value={user?.role || ''}
            disabled
            margin="normal"
          />
        </Box>
      </Paper>
      
      <Paper elevation={3} sx={{ p: 3, mb: 3 }}>
        <Typography variant="h6" gutterBottom>
          Change Password
        </Typography>
        
        <TextField
          fullWidth
          type="password"
          label="Current Password"
          value={oldPassword}
          onChange={(e) => setOldPassword(e.target.value)}
          margin="normal"
        />
        <TextField
          fullWidth
          type="password"
          label="New Password"
          value={newPassword}
          onChange={(e) => setNewPassword(e.target.value)}
          margin="normal"
        />
        <TextField
          fullWidth
          type="password"
          label="Confirm New Password"
          value={confirmPassword}
          onChange={(e) => setConfirmPassword(e.target.value)}
          margin="normal"
        />
        
        <Box sx={{ mt: 2 }}>
          <Button
            variant="contained"
            color="primary"
            startIcon={<Save />}
            onClick={handlePasswordChange}
          >
            Change Password
          </Button>
        </Box>
      </Paper>
      
      <Paper elevation={3} sx={{ p: 3, mb: 3 }}>
        <Typography variant="h6" gutterBottom>
          General Settings
        </Typography>
        
        <FormControl fullWidth margin="normal">
          <InputLabel>Theme</InputLabel>
          <Select
            value={generalSettings.theme}
            onChange={(e) => handleGeneralSettingsChange('theme', e.target.value)}
          >
            <MenuItem value="light">Light</MenuItem>
            <MenuItem value="dark">Dark</MenuItem>
          </Select>
        </FormControl>
        
        <FormControlLabel
          control={
            <Switch
              checked={generalSettings.notifications}
              onChange={(e) => handleGeneralSettingsChange('notifications', e.target.checked)}
            />
          }
          label="Enable Notifications"
        />
        
        <FormControlLabel
          control={
            <Switch
              checked={generalSettings.autoRefresh}
              onChange={(e) => handleGeneralSettingsChange('autoRefresh', e.target.checked)}
            />
          }
          label="Auto-refresh Data"
        />
        
        <Box sx={{ mt: 2 }}>
          <Button
            variant="contained"
            color="primary"
            startIcon={<Save />}
            onClick={handleSaveSettings}
          >
            Save Settings
          </Button>
        </Box>
      </Paper>
      
      <Paper elevation={3} sx={{ p: 3 }}>
        <Typography variant="h6" gutterBottom>
          API Configuration
        </Typography>
        
        <Box sx={{ mb: 2 }}>
          <Typography variant="subtitle1">
            EasyPost API Key
          </Typography>
          <TextField
            fullWidth
            type="password"
            placeholder="••••••••••••••••"
            disabled
            margin="normal"
          />
        </Box>
        
        <Box sx={{ mb: 2 }}>
          <Typography variant="subtitle1">
            Veeqo API Key
          </Typography>
          <TextField
            fullWidth
            type="password"
            placeholder="••••••••••••••••"
            disabled
            margin="normal"
          />
        </Box>
        
        <Divider sx={{ my: 2 }} />
        
        <Box sx={{ mt: 2 }}>
          <Button
            variant="outlined"
            color="primary"
            onClick={() => {
              authService.logout();
              window.location.href = '/login';
            }}
          >
            Logout
          </Button>
        </Box>
      </Paper>
      
      <Snackbar
        open={notification.open}
        autoHideDuration={6000}
        onClose={handleCloseNotification}
        message={notification.message}
        severity={notification.severity}
      />
    </Box>
  );
};

export default Settings;