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 { Alert, 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,
  });
  return `https://${COGNITO_DOMAIN}/oauth2/authorize?${params.toString()}`;
}

export default function LoginPage() {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const { isAuthenticated, error } = 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 dev = devUsers[role] ?? devUsers['SysAdmin']!;
      const user = await authApi.devLogin(dev.email, dev.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%',
        background: 'linear-gradient(135deg, #111827 0%, #172554 100%)',
      }}
    >
      <Box sx={{ width: '100%', maxWidth: 420, mx: 2 }}>
        <Card sx={{ borderRadius: '10px', boxShadow: '0 12px 32px rgba(15,23,42,0.24)', border: 'none' }}>
          <Box
            sx={{
              height: 100,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              bgcolor: '#fff',
              borderBottom: '1px solid #E5E7EB',
              px: 3,
            }}
          >
            <Typography sx={{ fontSize: '24px', fontWeight: 700, color: '#111827', letterSpacing: '-0.02em' }}>
              Sea Haven Industries
            </Typography>
          </Box>
          <Box
            sx={{
              bgcolor: '#111827',
              height: 40,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              borderBottom: '1px solid #E5E7EB',
            }}
          >
            <Typography sx={{ fontSize: '14px', fontWeight: 700, color: '#fff' }}>
              Proposal System
            </Typography>
          </Box>
          <CardContent sx={{ p: '30px', textAlign: 'center' }}>
            {error && (
              <Alert severity="error" sx={{ mb: 2, textAlign: 'left' }}>
                {error}
              </Alert>
            )}
            {isDevMode ? (
              <>
                <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
                  Development Sign-In — Select a role to preview the app.
                </Typography>
                <Stack spacing={2}>
                  <Button
                    variant="contained"
                    size="large"
                    fullWidth
                    startIcon={<AdminPanelSettingsIcon />}
                    onClick={() => handleDevLogin('SysAdmin')}
                    disabled={loading}
                    sx={{ py: 1.5, height: 64, borderRadius: '8px', bgcolor: '#2563EB', '&:hover': { bgcolor: '#1D4ED8' } }}
                  >
                    <Box sx={{ textAlign: 'left', flex: 1 }}>
                      <Box>SysAdmin</Box>
                      <Box sx={{ fontSize: '11px', fontWeight: 400, opacity: 0.8 }}>Full access</Box>
                    </Box>
                  </Button>
                  <Button
                    variant="contained"
                    size="large"
                    fullWidth
                    startIcon={<EngineeringIcon />}
                    onClick={() => handleDevLogin('Admin')}
                    disabled={loading}
                    sx={{ py: 1.5, height: 64, borderRadius: '8px', bgcolor: '#2563EB', '&:hover': { bgcolor: '#1D4ED8' } }}
                  >
                    <Box sx={{ textAlign: 'left', flex: 1 }}>
                      <Box>Admin</Box>
                      <Box sx={{ fontSize: '11px', fontWeight: 400, opacity: 0.8 }}>Review, price, and approve proposals</Box>
                    </Box>
                  </Button>
                  <Button
                    variant="contained"
                    size="large"
                    fullWidth
                    startIcon={<PersonIcon />}
                    onClick={() => handleDevLogin('Dispatcher')}
                    disabled={loading}
                    sx={{ py: 1.5, height: 64, borderRadius: '8px', bgcolor: '#2563EB', '&:hover': { bgcolor: '#1D4ED8' } }}
                  >
                    <Box sx={{ textAlign: 'left', flex: 1 }}>
                      <Box>Dispatcher</Box>
                      <Box sx={{ fontSize: '11px', fontWeight: 400, opacity: 0.8 }}>Submit and track proposals</Box>
                    </Box>
                  </Button>
                </Stack>
                <Divider sx={{ my: 2 }} />
                <Typography variant="caption" color="text.secondary">
                  Dev login is only shown when Cognito is not configured.
                </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, height: 64, borderRadius: '8px', bgcolor: '#2563EB', '&:hover': { bgcolor: '#1D4ED8' } }}
                >
                  Sign in with Google
                </Button>
              </>
            )}
          </CardContent>
        </Card>
        <Typography sx={{ textAlign: 'center', color: 'rgba(255,255,255,0.5)', fontSize: '12px', mt: 2 }}>
          Sea Haven Industries &copy; {new Date().getFullYear()}
        </Typography>
      </Box>
    </Box>
  );
}