"use client";

import React, { useState } from "react";
import { Button, Toast } from "antd-mobile";
import { useRouter } from "next/navigation";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
import OwnInput from "@/components/OwnInput";
import UploadImgs from "@/components/UploadImgs";
import { multiUploadImage } from "@/utils/upload";
import { get } from "@/utils/storeInfo";
import requireAPI from "@/utils/requireAPI";
export default function JoinStreamer() {
  const router = useRouter();
  const [formData, setFormData] = useState({
    name: "",
    platforms: "",
    contact: "",
    imageAssets: [],
  });
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async (values) => {
    if (
      !values.name ||
      !values.platforms ||
      !values.contact ||
      values.imageAssets.length === 0
    ) {
      Toast.show({
        icon: "fail",
        content: "请完善信息后提交",
        position: 60,
      });
      return;
    }
    setIsSubmitting(true);
    const account = await get("account");
    const account_shot = await multiUploadImage(values.imageAssets, 1);
    if (!account_shot.image_ids.length) {
      Toast.show({
        icon: "fail",
        content: "上传失败，请联系客服进行上传",
        position: 60,
      });
      setIsSubmitting(false);
      return;
    }
    //上传表单
    const body = {
      avatar: { image_ids: [account?.avatar.images[0].id] },
      name: values.name,
      contact_way: values.contact,
      account_shot: account_shot,
      main_platform: values.platforms,
    };

    try {
      const streamerData = await requireAPI(
        "POST",
        "/api/streamer_auth_approval/create_basic",
        {
          body,
        },
        true,
        10000
      );
      if (streamerData.ret === -1) {
        Toast.show({
          icon: "fail",
          content: streamerData.msg,
          position: 60,
        });
        return;
      }
      //提交成功后跳转成功页
      router.replace(
        "/my/streamerVerification/afterSubmitStreamerVerification"
      );
    } catch (error) {
      console.error(error);
    } finally {
      setIsSubmitting(false);
    }
  };
  return (
    <div>
      {/* 头部标题 */}
      <div className="p-4 fixed top-0 z-10 w-full bg-black flex justify-between items-center">
        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full">
          <FontAwesomeIcon
            icon={faAngleLeft}
            style={{ maxWidth: "12px" }}
            size="xl"
            onClick={() => {
              router.back();
            }}
          />
        </div>
        <p className="text-base text-center leading-9">达人入驻</p>
        <p
          className="text-base text-center leading-9 text-[#FF669E]"
          onClick={() => {
            router.push(
              `/webView/${encodeURIComponent("/doc/platformguidelines")}`
            );
          }}
        >
          平台准则
        </p>
      </div>
      {/* 内容 */}
      <div className="pt-16 p-4 mt-2">
        <div className="flex justify-between items-center">
          <p className="text-sm">
            <span>审核资料（仅用于审核，不对外展示）</span>
            <span className="text-[#f00]">*</span>
          </p>
        </div>
        <div className="mt-4">
          <div className="flex justify-between items-center">
            <p className="text-sm">
              <span>昵称</span>
              <span className="text-[#f00]">*</span>
            </p>
          </div>
          <div className="mt-2 px-4 py-3 h-12 rounded-[0.8rem] bg-[#FFFFFF1a] flex justify-between items-center">
            <OwnInput
              type="text"
              placeholder="请输入可搜索到您的昵称"
              maxLength={20}
              value={formData.name}
              onChange={(value) =>
                setFormData((old) => ({ ...old, name: value }))
              }
            />
          </div>
        </div>
        <div className="mt-6">
          <div className="flex justify-between items-center">
            <p className="text-sm">
              <span>主营平台</span>
              <span className="text-[#f00]">*</span>
            </p>
            <p className="text-[#ffffffae] text-xs">
              （若有多个，按粉丝从多到少排序）
            </p>
          </div>
          <div className="mt-2 px-4 py-3 h-12 rounded-[0.8rem] bg-[#FFFFFF1a] flex justify-between items-center">
            <OwnInput
              type="text"
              placeholder="请输入平台名称"
              value={formData.platforms}
              onChange={(value) =>
                setFormData((old) => ({ ...old, platforms: value }))
              }
            />
          </div>
        </div>
        <div className="mt-6">
          <div className="flex justify-between items-center">
            <p className="text-sm">
              <span>联系方式</span>
              <span className="text-[#f00]">*</span>
            </p>
            <p className="text-[#ffffffae] text-xs">注明方式，如“电话:xxxxx”</p>
          </div>
          <div className="mt-2 px-4 py-3 h-12 rounded-[0.8rem] bg-[#FFFFFF1a] flex justify-between items-center">
            <OwnInput
              type="text"
              placeholder="请输入您的联系方式"
              maxLength={20}
              value={formData.contact}
              onChange={(value) =>
                setFormData((old) => ({ ...old, contact: value }))
              }
            />
          </div>
        </div>
        <div className="mt-6">
          <div className="flex justify-between items-center">
            <p className="text-sm">
              <span>账号截图</span>
              <span className="text-[#f00]">*</span>
            </p>
            <p className="text-[#ffffffae] text-xs">
              各平台账号截图（最多9张）
            </p>
          </div>
          <div className="mt-2">
            <UploadImgs
              type={1}
              assets={formData.imageAssets}
              getImgs={(imgs) => {
                setFormData((old) => ({ ...old, imageAssets: imgs }));
              }}
            />
          </div>
        </div>

        <div className="mt-10 flex justify-center">
          <Button
            size="middle"
            shape="rounded"
            block
            style={{
              "--background-color": "#FF669E",
              paddingLeft: "32px",
              paddingRight: "32px",
            }}
            disabled={isSubmitting}
            onClick={() => handleSubmit(formData)}
          >
            {isSubmitting ? "正在提交..." : "提交"}
          </Button>
        </div>
      </div>
    </div>
  );
}