'use client';

import './style.scss';
import Link from 'next/link';
import Image from 'next/image';
import { useState, useEffect } from 'react';
import useAuth from '@/hooks/useAuth';
import { formatDate, stripHtmlTags } from '@/lib/utils/client';
import NavTabs from '../navTabs';
import Loading from '@/app/component/Loading';

export default function Profile()
{
	const { member } = useAuth();
	const [error, setError] = useState<string>('');
	const [loading, setLoading] = useState<boolean>(true);

	useEffect(() => {
		if (error) {
			alert(error);
			setError('');
		}
	}, [error]);

	useEffect(() => {
		if (member) {
			setLoading(false);
		}
	}, [member]);

	if (!member) {
		return <Loading />;
	}

	return (
		<>
		<NavTabs />

		<div id="profile">
			{ loading && <Loading /> }

			<h1>내 정보</h1>
			<div className="grid grid-cols-1 xl:grid-cols-2 gap-3">
				<table className="table-auto">
					<caption>등록 정보</caption>
					<colgroup>
						<col style={{width: "100%", minWidth: "80px", maxWidth: "30%"}}/>
						<col/>
						<col/>
					</colgroup>
					<tbody>
						<tr>
							<th>사용자 ID</th>
							<td colSpan={2}>{member?.sid}</td>
						</tr>
						<tr>
							<th>이메일</th>
							<td>{member?.email}</td>
							<td>
								<Link href="/change-email" className="btn btn-default">이메일 변경</Link>
							</td>
						</tr>
						<tr>
							<th>별명</th>
							<td>{member?.name || '-'}</td>
							<td>
								<Link href="/change-name" className="btn btn-default">별명 변경</Link>
							</td>
						</tr>
						<tr>
							<th>본인인증</th>
							<td>{member?.isAuthCertified ? '인증 완료' : '-'}</td>
							<td></td>
						</tr>
						<tr>
							<th>회원가입 일시</th>
							<td colSpan={2}>{formatDate(member.createdAt)}</td>
						</tr>
						<tr>
							<th>마지막 로그인 일시</th>
							<td colSpan={2}>{formatDate(member.lastLoginAt)}</td>
						</tr>
						<tr>
							<th>알림 수신</th>
							<td>
								<div className="flex items-center gap-6">
									<div className="flex items-center gap-4">
									<label className="flex items-center gap-2 text-gray-700">
										<input type="checkbox" checked={member.memberApprove.isReceiveSMS} readOnly disabled className="h-5 w-5 accent-gray-500 cursor-not-allowed" />
										SMS
									</label>

									<label className="flex items-center gap-2 text-gray-700">
										<input type="checkbox" checked={member.memberApprove.isReceiveEmail} readOnly disabled className="h-5 w-5 accent-gray-500 cursor-not-allowed" />
										메일
									</label>

									<label className="flex items-center gap-2 text-gray-700">
										<input type="checkbox" checked={member.memberApprove.isReceiveNote} readOnly disabled className="h-5 w-5 accent-gray-500 cursor-not-allowed" />
										쪽지
									</label>
									</div>
								</div>
							</td>
							<td>
								<Link href="/change-approve" className="btn btn-default">수신 설정</Link>
							</td>
						</tr>
					</tbody>
				</table>

				<table className="mt-3 xl:mt-0 table-auto">
					<caption>활동 정보</caption>
					<colgroup>
						<col style={{width: "100%", minWidth: "80px", maxWidth: "30%"}}/>
						<col width="*"/>
						<col width="*"/>
					</colgroup>
					<tbody>
						<tr>
							<th>회원 사진</th>
							<td>
								{/* {member?.photo ? <Image src={member?.photo} alt="회원 사진" width={98} height={98} style={{objectFit: "cover"}} unoptimized={true} /> : '-'} */}
							</td>
							<td>
								<Link href="/change-photo" className="btn btn-default">사진 변경</Link>
							</td>
						</tr>
						<tr>
							<th>회원 등급</th>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<th>한마디</th>
							<td colSpan={2}>
								<div className="grid grid-cols-[1fr_auto] gap-2 items-center">
									<span className="truncate">{member?.summary || '-'}</span>
									<Link href="/change-summary" className="btn btn-default">한마디 변경</Link>
								</div>
							</td>
						</tr>
						<tr>
							<th>자기소개</th>
							<td colSpan={2}>
								<div className="grid grid-cols-[1fr_auto] gap-2 items-center">
									<span className="truncate">{stripHtmlTags(member.intro) || '-'}</span>
									<Link href="/change-intro" className="btn btn-default">자기소개 변경</Link>
								</div>
							</td>
						</tr>
						<tr>
							<th>경험치</th>
							<td colSpan={2}>{member?.exp}</td>
						</tr>
						<tr>
							<th>작성 게시글</th>
							<td colSpan={2}>{member?.posts}</td>
						</tr>
						<tr>
							<th>작성 댓글</th>
							<td colSpan={2}>{member?.comments}</td>
						</tr>
						<tr>
							<th>구독자</th>
							<td colSpan={2}>{member?.following}</td>
						</tr>
					</tbody>
				</table>
			</div>

			<br />

			<dl>
				<dt>회원님의 개인정보는 안전하게 보호됩니다.</dt>
				<dd>※ 의심스러운 활동이 감지되면 즉시 비밀번호를 변경하세요.</dd>
				<dd>※ 보안을 위해 비밀번호를 주기적으로 변경하는 것이 좋습니다.</dd>
				<dd>※ 자동 로그인 기능을 사용하면, 로그인 상태가 유지됩니다.</dd>
				<dd>※ 공용 컴퓨터에서는 자동 로그인을 사용하지 않는 것이 좋습니다.  </dd>
			</dl>
		</div>
		</>
	);
}