"use client";

import { FC, useState } from "react";
import {
  Box,
  Grid,
  Container,
  IconButton,
  Typography,
  TextField,
} from "@mui/material";
import {
  Apple as AppleIcon,
  Google as GoogleIcon,
  Key as KeyIcon,
} from "@mui/icons-material";
import { signIn } from "next-auth/react";
import Image from "next/image";
import LinkLogo from "public/link-logo-small.png";
import { colors, fonts } from "@link-stack/ui";
import { useSearchParams } from "next/navigation";

type LoginProps = {
  session: any;
};

export const Login: FC<LoginProps> = ({ session }) => {
  const origin =
    typeof window !== "undefined" && window.location.origin
      ? window.location.origin
      : "";
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const params = useSearchParams();
  const error = params.get("error");
  const { darkGray, cdrLinkOrange, white } = colors;
  const { poppins } = fonts;
  const buttonStyles = {
    borderRadius: 500,
    width: "100%",
    fontSize: "16px",
    fontWeight: "bold",
    backgroundColor: white,
    "&:hover": {
      color: white,
      backgroundColor: cdrLinkOrange,
    },
  };
  const fieldStyles = {
    "& label.Mui-focused": {
      color: cdrLinkOrange,
    },
    "& .MuiInput-underline:after": {
      borderBottomColor: cdrLinkOrange,
    },
    "& .MuiFilledInput-underline:after": {
      borderBottomColor: cdrLinkOrange,
    },
    "& .MuiOutlinedInput-root": {
      "&.Mui-focused fieldset": {
        borderColor: cdrLinkOrange,
      },
    },
  };

  return (
    <Box sx={{ backgroundColor: darkGray, height: "100vh" }}>
      <Container maxWidth="md" sx={{ p: 10 }}>
        <Grid container spacing={2} direction="column" alignItems="center">
          <Grid
            item
            container
            direction="row"
            justifyContent="center"
            alignItems="center"
          >
            <Grid item>
              <Box
                sx={{
                  width: "70px",
                  height: "70px",
                  margin: "0 auto",
                }}
              >
                <Image
                  src={LinkLogo}
                  alt="Link logo"
                  width={70}
                  height={70}
                  style={{
                    objectFit: "cover",
                    filter: "grayscale(100) brightness(100)",
                  }}
                />
              </Box>
            </Grid>
            <Grid item>
              <Typography
                variant="h2"
                sx={{
                  fontSize: 36,
                  color: "white",
                  fontWeight: 700,
                  mt: 1,
                  ml: 0.5,
                  fontFamily: poppins.style.fontFamily,
                }}
              >
                CDR Link
              </Typography>
            </Grid>
          </Grid>

          <Grid item sx={{ width: "100%" }}>
            {!session ? (
              <Container
                maxWidth="xs"
                sx={{
                  p: 3,
                  mt: 3,
                }}
              >
                <Grid
                  container
                  spacing={3}
                  direction="column"
                  alignItems="center"
                >
                  {error ? (
                    <Grid item sx={{ width: "100%" }}>
                      <Box sx={{ backgroundColor: "red", p: 3 }}>
                        <Typography
                          variant="body1"
                          sx={{
                            fontSize: 18,
                            color: "white",
                            textAlign: "center",
                          }}
                        >
                          {`${error} error`}
                        </Typography>
                      </Box>
                    </Grid>
                  ) : null}
                  <Grid item sx={{ width: "100%" }}>
                    <IconButton
                      sx={buttonStyles}
                      onClick={() =>
                        signIn("google", {
                          callbackUrl: `${origin}`,
                        })
                      }
                    >
                      <GoogleIcon sx={{ mr: 1 }} />
                      Sign in with Google
                    </IconButton>
                  </Grid>
                  <Grid item sx={{ width: "100%" }}>
                    <IconButton
                      aria-label="Sign in with Apple"
                      sx={buttonStyles}
                      onClick={() =>
                        signIn("apple", {
                          callbackUrl: `${window.location.origin}`,
                        })
                      }
                    >
                      <AppleIcon sx={{ mr: 1 }} />
                      Sign in with Apple
                    </IconButton>
                  </Grid>
                  <Grid>
                    <Typography
                      variant="body1"
                      sx={{
                        fontSize: 18,
                        color: white,
                        textAlign: "center",
                        mt: 3,
                      }}
                    >
                      ⸺ or ⸺
                    </Typography>
                  </Grid>
                  <Grid item sx={{ width: "100%" }}>
                    <TextField
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      label="Email"
                      variant="filled"
                      size="small"
                      fullWidth
                      sx={{ ...fieldStyles, backgroundColor: white }}
                    />
                  </Grid>
                  <Grid item sx={{ ...fieldStyles, width: "100%" }}>
                    <TextField
                      value={password}
                      onChange={(e) => setPassword(e.target.value)}
                      label="Password"
                      variant="filled"
                      size="small"
                      fullWidth
                      sx={{ backgroundColor: white }}
                      type="password"
                    />
                  </Grid>
                  <Grid item sx={{ width: "100%" }}>
                    <IconButton
                      sx={buttonStyles}
                      onClick={() =>
                        signIn("credentials", {
                          email,
                          password,
                          callbackUrl: `${origin}/setup`,
                        })
                      }
                    >
                      <KeyIcon sx={{ mr: 1 }} />
                      Sign in with Zammad credentials
                    </IconButton>
                  </Grid>
                </Grid>
              </Container>
            ) : null}
            {session ? (
              <Box component="h4">
                {` ${session.user.name ?? session.user.email}.`}
              </Box>
            ) : null}
          </Grid>
        </Grid>
      </Container>
    </Box>
  );
};
