"use client";

import React from "react";
import { Form, Input, Toast } from "antd-mobile";
import { cryptoPassword, generateSignature } from "@/utils/crypto";
import { useRouter, useSearchParams } from "next/navigation";
import baseRequest from "@/utils/baseRequest";

export default function SetPassword() {
  const router = useRouter();
  const searchParams = useSearchParams();

  //点击登录
  const handleSubmit = async (value) => {
    if (!value.password) {
      Toast.show({
        content: "请完善信息",
      });
      return;
    }
    if (value.password.length < 8) {
      Toast.show({
        content: "密码不得小于8位",
      });
      return;
    }
    if (value.password.length > 15) {
      Toast.show({
        content: "密码不得大于15位",
      });
      return;
    }
    if (!value.confirm_password) {
      Toast.show({
        content: "请再次输入您的密码",
      });
      return;
    }
    if (value.password != value.confirm_password) {
      Toast.show({
        content: "两次输入密码不一致",
      });
      return;
    }
    const mobile_phone = searchParams.get("mobile_phone");
    const region_code = searchParams.get("region_code");
    if (!mobile_phone || !region_code) {
      Toast.show({
        content: "设置出错，请下载app设置密码",
      });
      return;
    }
    //MD5加密密码
    const encryptedPassword = cryptoPassword(value.password);
    //设置密码并登录
    const base = baseRequest();
    const signature = generateSignature({
      mobile_phone: mobile_phone,
      region_code: region_code,
      new_password: encryptedPassword,
      ...base,
    });
    try {
      const response = await fetch(
        `/api/login/set_password?signature=${signature}`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            mobile_phone: mobile_phone,
            region_code: region_code,
            new_password: encryptedPassword,
            ...base,
          }),
        }
      );
      const data = await response.json();
      if (data.ret === -1) {
        Toast.show({
          content: data.msg,
        });
        router.back();
        return;
      }
      router.back();
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <section className="flex flex-1 flex-col">
      <div className="flex flex-row justify-center mt-24">
        <Form
          style={{
            "--border-top": "0",
            "--border-bottom": "0",
            "--border-inner": "0",
          }}
          layout="horizontal"
          onFinish={handleSubmit}
        >
          <div className="w-96 p-4 bg-[#07050A]">
            <h1 className="text-3xl font-semibold">设置密码</h1>
            <p className="text-base text-secondary mb-10">请牢记密码</p>
            <div className="rounded-2xl overflow-hidden border-neutral border">
              <Form.Item name="password">
                <div className="flex flex-row">
                  <p className="mr-4 text-white whitespace-nowrap">密码</p>
                  <Input placeholder="请输入密码" type="password" clearable />
                </div>
              </Form.Item>
              <hr className="mx-4 border-neutral" />
              <Form.Item name="confirm_password">
                <div className="flex flex-row">
                  <p className="mr-4 text-white whitespace-nowrap">确认密码</p>
                  <Input
                    placeholder="请再次输入密码"
                    type="password"
                    clearable
                  />
                </div>
              </Form.Item>
            </div>
            <div className="flex flex-col items-center mt-12">
              <button
                type="submit"
                className="btn btn-primary w-full text-base text-white font-medium"
              >
                登录
              </button>
              <p
                onClick={() => router.back()}
                className="text-base inline-block text-secondary text-center font-medium mt-4"
              >
                跳过
              </p>
            </div>
          </div>
        </Form>
      </div>
    </section>
  );
}