import { useState } from 'react';
import { Link } from 'react-router-dom';
import Button from '../components/common/button/Button';
import styled from 'styled-components';

import { TextInput, BtnWrapper, ButtonClose, Title } from '../styles/Components';
import LogoUrl from '../assets/img/logo.png';

import Modal from '../components/common/modal/Modal';

const LoginFail = () => {
	const [userId, setUserId] = useState('');
	const [userPw, setUserPw] = useState('');
	const [stateModal, setStateModal] = useState('hidden');
	const handleModal = () => {
		if (stateModal === 'hidden') {
			setStateModal('view');
		} else {
			setStateModal('hidden');
		}
	};
	return (
		<>
			<FormBox>
				<Logo src={LogoUrl} alt="caliverse" />
				<LoginTitle>ADMIN LOGIN</LoginTitle>
				<FormWrapper action="" $flow="column">
					<InputWrapper>
						<TextInput fontSize="15px" $padding="16px 20px" name="userid" placeholder="ID를 입력하세요(test@test.co.kr)" value={userId} onChange={e => setUserId(e.target.value)} />
						<TextInput fontSize="15px" $padding="16px 20px" name="password" id="userpw" placeholder="비밀번호를 입력하세요" value={userPw} onChange={e => setUserPw(e.target.value)} />
					</InputWrapper>
					<Button
						type="submit"
						theme="primary"
						size="large"
						text="로그인"
						width="100%"
						handleClick={e => {
							e.preventDefault();
							//window.location.href = '/account/edit';
							handleModal();
						}}
					/>
				</FormWrapper>
				<JoinButton to="/account/regist">회원가입</JoinButton>
				<LoginInfo>
					<LoginInfoItem>- 관리자 승인된 계정으로 접속하실 수 있습니다.</LoginInfoItem>
					<LoginInfoItem>
						- 로그인 오류 및 비밀번호 재설정은 <Link to="mailto:admin@caliverse.co.kr">admin@caliverse.co.kr</Link>로 문의바랍니다.
					</LoginInfoItem>
				</LoginInfo>
			</FormBox>
			<Modal $view={stateModal} min="440px" $padding="40px">
				<BtnWrapper $justify="flex-end">
					<ButtonClose onClick={handleModal} />
				</BtnWrapper>
				<Title $align="center">로그인 실패</Title>
				<NoticeSummary $maxwidth="400px">
					<table>
						<tbody>
							<tr>
								<th>사유</th>
								<td>비밀번호 기간 만료</td>
							</tr>
							<tr>
								<th>만료일</th>
								<td>2023-07-24</td>
							</tr>
						</tbody>
					</table>
				</NoticeSummary>
				<NoticeDetail $align="center">
					비밀번호 기간 갱신은 관리자 메일을 통해
					<br />
					문의해주시기 바랍니다.
					<br />
					<br />
					관리자 문의 : caliverse@caliverse.com
				</NoticeDetail>
				<Button
					text="확인"
					theme="line"
					handleClick={e => {
						e.preventDefault();
						window.location.href = '/account/edit';
					}}
				/>
			</Modal>
		</>
	);
};

export default LoginFail;

const JoinButton = styled(Link)`
	text-decoration: underline;
	font-size: 14px;
	margin: 28px 0;
	border-radius: 0;
`;

const FormBox = styled.div`
	background: #fff;
	width: 486px;
	padding: 75px 45px;
	text-align: center;
	border-radius: 30px;
	color: #8d8d8d;
`;

const Logo = styled.img`
	display: block;
	margin: auto;
`;

const LoginTitle = styled.span`
	background: #ececec;
	border-radius: 50px;
	color: #adadad;
	margin-top: 40px;
	font-size: 12px;
	display: inline-block;
	width: 110px;
	padding: 5px 10px;
	letter-spacing: 1px;
`;

const FormWrapper = styled.form`
	margin-top: 40px;
`;

const InputWrapper = styled.div`
	display: flex;
	flex-flow: column;
	gap: 6px;
	margin-bottom: 20px;
`;

const LoginInfo = styled.ul`
	text-align: left;
`;
const LoginInfoItem = styled.li`
	width: 100%;
	font-size: 14px;
	line-height: 1.6;
	word-break: keep-all;
	padding-left: 10px;
	text-indent: -10px;
	a {
		color: #333;
		font-weight: 500;
		display: inline-block;
		word-break: break-all;
		border-radius: 0;
		text-indent: 0;
	}
`;

const NoticeSummary = styled.div`
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	padding: 20px 40px;
	margin-bottom: 20px;
	max-width: ${props => props.$maxwidth || 'auto'};
	table {
		th {
			text-align: left;
			font-weight: 600;
		}
		th,
		td {
			padding: 8px 0;
		}
	}
`;
const NoticeDetail = styled.div`
	background: #f6f6f6;
	padding: 30px 20px;
	margin-bottom: 20px;
	line-height: 2;
	text-align: ${props => props.$align || 'left'};
`;
