proposal-system/web/src/pages/auth/LoginPage.tsx

import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { Box, Button, Card, CardContent, Typography, Divider, Stack } from '@mui/material';
import GoogleIcon from '@mui/icons-material/Google';
import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings';
import EngineeringIcon from '@mui/icons-material/Engineering';
import PersonIcon from '@mui/icons-material/Person';
import { useAuth } from '../../hooks/useAuth';
import { authApi } from '../../lib/api/auth';
import { setUser, setError } from '../../app/slices/authSlice';

const COGNITO_DOMAIN = import.meta.env.VITE_COGNITO_DOMAIN || '';
const CLIENT_ID = import.meta.env.VITE_COGNITO_CLIENT_ID || '';
const REDIRECT_URI = `${window.location.origin}/callback`;

function buildLoginUrl(): string {
  const params = new URLSearchParams({
    client_id: CLIENT_ID,
    response_type: 'code',
    scope: 'openid email profile',
    redirect_uri: REDIRECT_URI,
    identity_provider: 'Google',
  });
  return `https://${COGNITO_DOMAIN}/oauth2/authorize?${params.toString()}`;
}

export default function LoginPage() {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const { isAuthenticated } = useAuth();
  const [loading, setLoading] = useState(false);

  const isDevMode = !CLIENT_ID;

  useEffect(() => {
    if (isAuthenticated) {
      navigate('/', { replace: true });
    }
  }, [isAuthenticated, navigate]);

  const devUsers: Record<string, { email: string; name: string }> = {
    SysAdmin: { email: 'adam@seahavenind.com', name: 'Adam Moussa' },
    Admin: { email: 'sarah@seahavenind.com', name: 'Sarah Chen' },
    Dispatcher: { email: 'mike@seahavenind.com', name: 'Mike Torres' },
  };

  const handleDevLogin = async (role: string) => {
    setLoading(true);
    try {
      const { email, name } = devUsers[role] ?? devUsers.SysAdmin;
      const user = await authApi.devLogin(email, name, role);
      dispatch(setUser(user));
      navigate('/', { replace: true });
    } catch (err) {
      dispatch(setError(err instanceof Error ? err.message : 'Dev login failed'));
    } finally {
      setLoading(false);
    }
  };

  return (
    <Box
      sx={{
        minHeight: '100vh',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'flex-start',
        pt: '7%',
        bgcolor: '#333',
      }}
    >
      <Box sx={{ width: '100%', maxWidth: 400, mx: 2 }}>
        <Card sx={{ borderRadius: 0, boxShadow: '0 0 10px rgba(0,0,0,0.3)', border: 'none' }}>
          <Box
            sx={{
              height: 100,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              bgcolor: '#fff',
              borderBottom: '1px solid #b8b5b5',
              px: 3,
            }}
          >
            <Typography sx={{ fontSize: '24px', fontWeight: 600, color: '#003A5D' }}>
              Sea Haven Industries
            </Typography>
          </Box>
          <Box
            sx={{
              bgcolor: '#003A5D',
              height: 40,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              borderBottom: '1px solid #b8b5b5',
            }}
          >
            <Typography sx={{ fontSize: '14px', fontWeight: 700, color: '#fff' }}>
              Proposal System
            </Typography>
          </Box>
          <CardContent sx={{ p: '30px', textAlign: 'center' }}>
            {isDevMode ? (
              <>
                <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
                  Development Mode — Select a role to sign in as:
                </Typography>
                <Stack spacing={2}>
                  <Button
                    variant="contained"
                    size="large"
                    fullWidth
                    startIcon={<AdminPanelSettingsIcon />}
                    onClick={() => handleDevLogin('SysAdmin')}
                    disabled={loading}
                    sx={{ py: 1.5, bgcolor: '#003A5D', '&:hover': { bgcolor: '#00527d' } }}
                  >
                    Sign in as SysAdmin
                  </Button>
                  <Button
                    variant="contained"
                    size="large"
                    fullWidth
                    startIcon={<EngineeringIcon />}
                    onClick={() => handleDevLogin('Admin')}
                    disabled={loading}
                    sx={{ py: 1.5, bgcolor: '#0c4f6f', '&:hover': { bgcolor: '#083a52' } }}
                  >
                    Sign in as Admin
                  </Button>
                  <Button
                    variant="outlined"
                    size="large"
                    fullWidth
                    startIcon={<PersonIcon />}
                    onClick={() => handleDevLogin('Dispatcher')}
                    disabled={loading}
                    sx={{ py: 1.5 }}
                  >
                    Sign in as Dispatcher
                  </Button>
                </Stack>
                <Divider sx={{ my: 2 }} />
                <Typography variant="caption" color="text.secondary">
                  Dev login is only available when VITE_COGNITO_CLIENT_ID is not set
                </Typography>
              </>
            ) : (
              <>
                <Typography variant="body2" color="text.secondary" sx={{ mb: 4 }}>
                  Sign in with your Sea Haven Google account to continue.
                </Typography>
                <Button
                  variant="contained"
                  size="large"
                  fullWidth
                  startIcon={<GoogleIcon />}
                  href={buildLoginUrl()}
                  sx={{ py: 1.5, bgcolor: '#003A5D', '&:hover': { bgcolor: '#00527d' } }}
                >
                  Sign in with Google
                </Button>
              </>
            )}
          </CardContent>
        </Card>
        <Typography sx={{ textAlign: 'center', color: '#fff', fontSize: '12px', mt: 2, opacity: 0.7 }}>
          Sea Haven Industries &copy; {new Date().getFullYear()}
        </Typography>
      </Box>
    </Box>
  );
}