"use client";

import Link from "next/link";

import "./style.css";

import { MessageLang } from "@/lang/component/client";

export default function SignUp() {
    const FormSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();

        const res = await fetch("/api/signup", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                email: e.currentTarget.email.value,
                password: e.currentTarget.password.value,
                id: e.currentTarget.username.value,
                rule: e.currentTarget.ruleCheck.checked,
            }),
        });
        const data = await res.text();
        const json = JSON.parse(data);

        if (json.status === "success") {
            alert("アカウントの作成に成功しました。\nご登録いただいたメールアドレスに確認用メールを送信しました。\n確認メールをクリックしてアカウントを有効化してください。")
            window.location.href = "/";
        }else{
            if(json.error === "User already exists"){
                alert("同じユーザー名が既に使用されています")
            }else if(json.error === "Please read and accept the terms and conditions"){
                alert("利用規約とプライバシーポリシーに同意してください")
            }else if(json.error === "Body Required"){
                alert("Bodyは必須です")
            }else if(json.error === "Password must be at least 8 characters long"){
                alert("パスワードは8文字以上にしてください")
            }else if(json.error === "Username must be at least 3 alphanumeric characters"){
                alert("ユーザー名は3文字以上の英数字のIDにしてください")
            }else if(json.error === "Failed to create user"){
                alert("ユーザーの作成に失敗しました")
            }
        }
    }

    return (
        <form onSubmit={FormSubmit}>
            <h1 className="title"><MessageLang text="Signup" /></h1>

            <label className="label"><MessageLang text="username" /></label>
            <div className="field" style={{ position: 'relative' }}>
                <span className="input-out">@</span>
                <input type="text" name="username" placeholder="username" className="input" style={{ paddingLeft: '25px' }} required />
            </div>
            <p className="help"><MessageLang text="idHelp" /></p>

            <label className="label"><MessageLang text="email" /></label>
            <input className="input" type="email" name="email" placeholder="info@example.com" required />
            <p className="help"><MessageLang text="mailHelp" /></p>

            <label className="label"><MessageLang text="password" /></label>
            <input type="password" name="password" className="input" placeholder="password" required />
            <p className="help"><MessageLang text="passwordHelp" /></p>

            <span style={{margin: "5px"}} />

            <label className="label checkbox">
                <input type="checkbox" name="ruleCheck" required />
                <Link href="/terms">利用規約</Link>と<Link href="/privacypolicy">プライバシーポリシー</Link>に同意する
            </label>

            <button type="submit" className="button">サインアップ</button>
        </form>
    )
}