import { Button, Card, Stack, Typography } from "@mui/material";
import { FC, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";

import { Centroid } from "@/common/components/Centroid";
import { LoginForm } from "@/features";
import { useIdentityStore } from "@/features/Login/lib/identity.store";

export const LoginPage: FC = () => {
	const navigate = useNavigate();
	const { t } = useTranslation("translation");
	const [isShowPasswordForgetting, setIsShowPasswordForgetting] =
		useState(false);
	const user = useIdentityStore((x) => x.user);

	useEffect(() => {
		if (user) {
			navigate("/app");
		}
	}, [user, navigate]);

	return (
		<Centroid>
			<Stack direction="row" spacing="30px">
				<Card
					sx={{
						background:
							"linear-gradient(142.14deg, #020C6AE6, #0463EEE6)",
						maxWidth: "720px",
						borderRadius: "30px",
						padding: "0 11%",
					}}
				>
					<Centroid>
						<Stack spacing="38.75px" alignItems="center">
							<img
								src="/images/alarm_signal.png"
								alt="signal"
								width="80%"
								height="auto"
							/>
							<Typography
								variant="h6"
								color="white "
								textAlign="center"
							>
								{t(
									"Centralized monitoring system for fire and security alarm activation reports at social infrastructure facilities in the city and region.",
								)}
							</Typography>
						</Stack>
					</Centroid>
				</Card>

				<Card
					elevation={0}
					sx={{
						border: "1px solid #ccc",
						width: "500px",
						height: "750px",
						borderRadius: "30px",
					}}
				>
					<Centroid>
						<Stack spacing="76px" alignItems="center" padding={6}>
							<Typography variant="h5">
								{t("Welcome!")}
							</Typography>

							<Typography variant="h6" textAlign="center">
								{t(
									isShowPasswordForgetting
										? "If you have forgotten your login or password, please contact the administrator to restore access."
										: "Enter your login and password to access your account.",
								)}
							</Typography>

							{!isShowPasswordForgetting && <LoginForm />}

							<Button
								variant={
									isShowPasswordForgetting
										? "contained"
										: "text"
								}
								fullWidth
								sx={{
									textTransform: "none",
									height: "60px",
									fontSize: "18px",
									color: isShowPasswordForgetting
										? "white"
										: "var(--primary-600)",
									backgroundColor: isShowPasswordForgetting
										? "var(--primary-600)"
										: undefined,
									borderRadius: "10px",
								}}
								onClick={() =>
									isShowPasswordForgetting
										? navigate("/")
										: setIsShowPasswordForgetting(true)
								}
							>
								{t(
									isShowPasswordForgetting
										? "To main"
										: "Forgot your password?",
								)}
							</Button>
						</Stack>
					</Centroid>
				</Card>
			</Stack>
		</Centroid>
	);
};
