import React, { useState, useEffect, useCallback } from "react";
import "./UI9.css";
import { useNavigate } from "react-router-dom";
import DecorLine from "../../components/DecorLine";

import BackButton from "../../components/BackButton";
import ConfirmButton from "../../components/ConfirmButton";
import success from "../../assets/success.png";
import UI9A from "../../assets/ui9A.png";
import UI9B from "../../assets/ui9B.png";
const UI9: React.FC = () => {
  const navigate = useNavigate();
  // 是否认证成功
  const isAuthenticated = false;
  const handleBack = () => {
    navigate(-1);
  };

  const handleConfirm = useCallback(() => {
    localStorage.removeItem("selectedExamId");
    localStorage.removeItem("lastIdCardNo");
    navigate("/");
  }, [navigate]);

  const [countdown, setCountdown] = useState(10);
  const [backTime, setBackTime] = useState("确认(10S)");

  useEffect(() => {
    if (countdown > 0) {
      setBackTime(`确认(${countdown}S)`);
      const timer = setTimeout(() => setCountdown((prev) => prev - 1), 1000);
      return () => clearTimeout(timer);
    }
    if (countdown <= 0) {
      navigate("/");
      return;
    }
    setBackTime("确认");
  }, [countdown, navigate]);

  return (
    <div className="ui9-root">
      <span className="ui9-title">太平VIP客户认证</span>
      <DecorLine />
      {isAuthenticated ? (
        <>
          <span className="ui9-text">认证成功</span>
          <img className="ui9-success-img" src={success} alt="success" />
        </>
      ) : (
        <>
          <span className="ui9-text">一对一专属服务</span>
          <img className="ui9-vip-img" src={UI9A} alt="vip" />
          {/* 认证二维码 */}
          <img className="ui9-qrcode" src={UI9B} alt="二维码位置" />
          <span className="ui9-instruction">如您体检方面有任何问题，可以联系咨询企业微信客服</span>
        </>
      )}
      <div className="ui9-confirm-section">
        <BackButton text="返回" onClick={handleBack} />
        <ConfirmButton text={backTime} onClick={handleConfirm} />
      </div>
    </div>
  );
};

export default UI9;