import React, { useEffect, useState } from "react";
import "./u2.css";
import { useNavigate } from "react-router-dom";
import DecorLine from "../../components/DecorLine";
import avatar from "../../assets/avatar.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 (!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");
        });
    }
  };

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

  // 返回头像地址：优先使用读到的本地照片路径（file:///），否则使用默认 avatar
  const getAvatarSrc = () => {
    const photoPath = (patientInfo as any)?.photo_path || "";
    if (!photoPath) return avatar;
    // 如果已经是 file:// 协议，直接返回
    if (photoPath.startsWith("file://")) return photoPath;
    // 将 Windows 路径转换为 file:/// 格式（把反斜杠改为斜杠）
    const normalized = photoPath.replace(/\\/g, "/").replace(/\\/g, "/");
    return `file:///${normalized}`;
  };

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

  return (
    <div className="u2-root">
      <span className="u2-title">{getGreeting()}</span>
      <DecorLine />
      <div className="u2-info-card">
        <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 ? "" : patientInfo?.gender_name || "---"}
            </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">
              证件号：{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>
      <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;