import React, { useEffect, useState } from "react";
import "./u2.css";
import { useNavigate } from "react-router-dom";
import DecorLine from "../../components/DecorLine";
import nan from "../../assets/nan.png";
import nv from "../../assets/nv.png";
import semicircle from "../../assets/semicircle.png";
import BackButton from "../../components/BackButton";
import ConfirmButton from "../../components/ConfirmButton";
import {
  getPatientInfo,
  getVipStatus,
  getOptionalItemList,
  PatientInfo,
} from "../../api/hisApi";

const U2: React.FC = () => {
  const navigate = useNavigate();
  const idCardNo = localStorage.getItem("lastIdCardNo");
  const [patientInfo, setPatientInfo] = useState<PatientInfo | null>(null);
  const [loading, setLoading] = useState<boolean>(() => !!idCardNo);
  const [isVip, setIsVip] = useState<number | null>(null);
  const vipCalledRef = React.useRef(false);

  useEffect(() => {
    if (idCardNo) {
      setLoading(true);
      getPatientInfo(idCardNo)
        .then((res) => {
          if (res.Status === 200 && res.Data) {
            setPatientInfo(res.Data);
            localStorage.setItem("name", res.Data.name);
            localStorage.setItem("gender", res.Data.gender_name);
          } else {
            alert(`${res.Message}，请联系前台`);
          }
        })
        .catch((err) => {
          console.error(err);
          alert(`获取用户信息异常: ${err.message}`);
        })
        .finally(() => {
          setLoading(false);
        });
    }
  }, [idCardNo]);

  // 获取 VIP 状态，避免重复请求
  useEffect(() => {
    if (!idCardNo) return;
    if (vipCalledRef.current) return;
    vipCalledRef.current = true;
    getVipStatus(idCardNo)
      .then((res) => {
        if (res.Status === 200) {
          setIsVip(res.Data?.is_vip ?? 0);
        } else {
          console.warn("获取 VIP 状态失败:", res.Message);
          setIsVip(0);
        }
      })
      .catch((err) => {
        console.error("getVipStatus error", err);
        setIsVip(0);
      });
  }, [idCardNo]);

  const handleBack = () => {
    navigate(-1);
  };

  const handleConfirm = () => {
    // 判断是否为有效签到
    if (!patientInfo?.is_valid_exam || patientInfo.is_valid_exam !== 1) {
      // alert("当前签到无效，请联系前台工作人员处理");
      return;
    }
    if (!idCardNo) {
      alert("未获取到身份证号，请重新刷卡");
      navigate("/");
      return;
    }

    // 判断是否为 VIP 客户（0 否，1 是）
    if (isVip === 1) {
      navigate("/u3");
      return;
    } else {
      // 调用接口判断是否有可选套餐
      getOptionalItemList(idCardNo)
        .then((res) => {
          if (res.Status === 200) {
            localStorage.setItem(
              "selectedExamId",
              res.Data.packageInfo.physical_exam_id.toString() || ""
            );

            const isPackageUndecided =
              res.Data?.packageInfo?.is_optional_package === 1 &&
              res.Data?.packageInfo.registration_time?.length > 0;
            if (isPackageUndecided) {
              navigate("/u4", { state: { optionalData: res.Data } });
            } else {
              // 如果没有可选套餐，检查是否有错误消息需要提示
              if (!res.Data?.packageInfo && res.Message) {
                alert(res.Message);
              } else {
                navigate("/UI6");
              }
            }
          } else {
            if (res.Message) {
              alert(res.Message);
            } else {
              navigate("/UI6");
            }
          }
        })
        .catch((err) => {
          console.error("getOptionalItemList error", err);
          navigate("/UI6");
        });
    }
  };

  // 根据 gender_name 和姓名生成问候称呼：取姓名第一个字 + (先生|女士)
  const getGreeting = () => {
    // 在加载中或没有姓名时不返回欢迎语，避免先渲染空的问候
    if (loading || !patientInfo?.name) return "";
    const name = patientInfo.name.trim();
    const firstChar = name ? name.charAt(0) : "";
    const genderName = (patientInfo?.gender_name || "").trim();
    let title = "";
    if (genderName === "男") title = "先生";
    else if (genderName === "女") title = "女士";
    return `尊敬的${
      firstChar ? `${firstChar}${title}` : title
    }，请确认您的个人信息：`;
  };

  // 返回头像地址：使用 gender_name 字段（"女" 显示女性头像），忽略 photo_path
  const getAvatarSrc = () => {
    const genderName = (patientInfo?.gender_name || "").trim();
    if (genderName === "女") return nv;
    return nan;
  };

  // 根据 gender_name 返回显示的性别标签（用于界面展示）
  const getGenderLabel = () => {
    const genderName = (patientInfo?.gender_name || "").trim();
    if (!genderName) return "";
    return genderName;
  };

  // 脱敏证件号：保留前6后4，其余替换为*
  const maskIdCard = (id?: string | null) => {
    if (!id) return "---";
    const s = String(id).trim();
    if (s.length <= 10) return s.replace(/.(?!.{4})/g, "*");
    const head = s.slice(0, 6);
    const tail = s.slice(-4);
    const middleLen = s.length - 10;
    return head + "*".repeat(middleLen) + tail;
  };

  // 在数据加载时显示占位，加载完成后再渲染完整内容
  if (loading) {
    return <></>;
  }

  return (
    <div className="u2-root">
      <span className="u2-title">{getGreeting()}</span>
      <DecorLine />
      <div className="u2-info-card">
        <div className="u2-info-top">
          <div className="u2-avatar-container">
            <img className="u2-avatar" src={getAvatarSrc()} alt="avatar" />
          </div>
          <div className="u2-details-list">
            <div className="u2-detail-row">
              <div className="u2-detail-bar" />
              <div className="u2-detail-text">
                姓名：{loading ? "" : patientInfo?.name || "---"}
              </div>
            </div>

            <div className="u2-detail-row">
              <div className="u2-detail-bar" />
              <div className="u2-detail-text">
                性别：{loading ? "" : getGenderLabel()}
              </div>
            </div>

            <div className="u2-detail-row">
              <div className="u2-detail-bar" />
              <div className="u2-detail-text">
                年龄：{loading ? "" : patientInfo?.age || "---"}
              </div>
            </div>

            <div className="u2-detail-row">
              <div className="u2-detail-bar" />
              <div className="u2-detail-text">
                证件号：
                {loading ? "" : maskIdCard(idCardNo || patientInfo?.IdCard)}
              </div>
            </div>

            <div className="u2-detail-row">
              <div className="u2-detail-bar" />
              <div className="u2-detail-text">
                手机号：{loading ? "" : patientInfo?.phone || "---"}
              </div>
            </div>

            <div className="u2-detail-row">
              <div className="u2-detail-bar" />
              <div className="u2-detail-text">
                婚姻状况：{loading ? "" : patientInfo?.marital_name || "---"}
              </div>
            </div>
          </div>
        </div>
        {!patientInfo?.is_valid_exam || patientInfo.is_valid_exam !== 1 ? (
          <div className="u2-error-msg">
            未查询到您当日的体检预约信息，建议核对预约日期!
          </div>
        ) : (
          ""
        )}
      </div>
      <span className="u2-instruction">
        <span className="u2-asterisk">*</span> 如信息有误，请联系前台
      </span>
      <img className="u2-semicircle" alt="start button" src={semicircle} />
      <div className="u2-confirm-section">
        <BackButton text="返回" onClick={handleBack} />
        <ConfirmButton text="确认" onClick={handleConfirm} />
      </div>
    </div>
  );
};

export default U2;