import { Box, Button, Link, Paper, Stack, TextField, Typography } from "@mui/material";
import { brand } from "@/lib/brand";
import { useNavigate } from "@/router";

export default function LoginPage() {
  const navigate = useNavigate();

  return (
    <Box
      data-testid="login-page"
      sx={{
        minHeight: "100vh",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        background: brand.headerGradient,
        p: 2,
      }}
    >
      <Paper sx={{ width: 400, p: 4 }}>
        <Stack spacing={2}>
          <Typography
            variant="h5"
            sx={{ fontWeight: 800, letterSpacing: "0.06em", color: "primary.dark" }}
          >
            {brand.wordmark}
          </Typography>
          <Typography color="text.secondary">Sign in (mock auth — Cognito in AP-14)</Typography>
          <TextField label="Email" size="small" fullWidth defaultValue="adam@seahavenind.com" />
          <TextField label="Password" type="password" size="small" fullWidth defaultValue="mock" />
          <Button
            variant="contained"
            fullWidth
            onClick={() => navigate("/")}
            data-testid="login-submit"
          >
            Sign In
          </Button>
          <Button variant="outlined" fullWidth>
            SSO
          </Button>
          <Link href="#forgot" underline="hover" variant="body2">
            Forgot password?
          </Link>
        </Stack>
      </Paper>
    </Box>
  );
}