"use client";

import React, { useEffect, useState } from "react";
import { Mask } from "antd-mobile";
import Link from "next/link";

export default function IosInstallStepModal({ isVisible, setIsVisible }) {
  const [stepIndex, setStepIndex] = useState(1);
  useEffect(() => {
    if (!isVisible) {
      setStepIndex(1);
      return;
    }
    const timeoutId = setTimeout(
      () =>
        setStepIndex((prev) => {
          if (prev === 6) return 1;
          return prev + 1;
        }),
      3000
    );
    return () => {
      clearTimeout(timeoutId);
    };
  }, [isVisible, stepIndex]);

  return (
    <Mask
      visible={isVisible}
      onMaskClick={() => setIsVisible(false)}
      opacity="thick"
    >
      <div className="w-full h-screen flex justify-center items-center">
        <div className="flex flex-col relative items-center py-8 px-4 bg-[#17161A] rounded-2xl w-4/5">
          <svg
            onClick={() => setIsVisible(!isVisible)}
            className="absolute right-4 top-4"
            viewBox="0 0 1024 1024"
            width="20"
            height="20"
          >
            <path
              d="M155.00305177 868.99694823c-21.96904297-21.96904297-21.96904297-60.41486817 0-82.38391112l631.60998534-631.60998534c21.96904297-21.96904297 60.41486817-21.96904297 82.38391112 0s21.96904297 60.41486817 0 82.38391112l-631.60998534 631.60998534c-21.96904297 21.96904297-60.41486817 21.96904297-82.38391112 0z"
              fill="#ffffff"
            ></path>
            <path
              d="M155.00305177 155.00305177c21.96904297-21.96904297 60.41486817-21.96904297 82.38391112 0l631.60998534 631.60998534c21.96904297 21.96904297 21.96904297 60.41486817 0 82.38391112s-60.41486817 21.96904297-82.38391112 0l-631.60998534-631.60998534c-21.96904297-21.96904297-21.96904297-60.41486817 0-82.38391112z"
              fill="#ffffff"
            ></path>
          </svg>
          <div className="flex flex-col gap-1 mb-4">
            <p className="text-white text-center font-medium text-sm">
              安装前请先删除旧版APP
            </p>
            <p className="text-white text-center font-medium text-sm">
              请等待安装完成，然后开始设置
            </p>
            <p className="text-white text-center font-medium text-sm">
              请务必按以下步骤进行设置，详细
              <Link
                className="link text-primary cursor-pointer"
                href="/doc/ioshowtoinstall"
              >
                安装教程
              </Link>
            </p>
          </div>
          <img
            src={
              process.env.NEXT_PUBLIC_CDN_URL +
              `/public/images/iosinstall_${stepIndex}.png`
            }
            alt=""
          />
          <div className="mt-4 flex w-full h-12 rounded-full items-center justify-center bg-primary">
            {stepIndex === 1 && (
              <p className="text-base font-medium text-white">
                第1步：打开【设置】
              </p>
            )}
            {stepIndex === 2 && (
              <p className="text-base font-medium text-white">
                第2步：点击【通用】
              </p>
            )}
            {stepIndex === 3 && (
              <p className="text-base font-medium text-white">
                第3步：点击【VPN与设备管理】
              </p>
            )}
            {stepIndex === 4 && (
              <p className="text-base font-medium text-white">
                第4步：点击【证书】
              </p>
            )}
            {stepIndex === 5 && (
              <p className="text-base font-medium text-white">
                第5步：点击【信任证书】
              </p>
            )}
            {stepIndex === 6 && (
              <p className="text-base font-medium text-white">
                第6步：在弹出页点击【信任】
              </p>
            )}
          </div>
        </div>
      </div>
    </Mask>
  );
}