window.FB = window.FB || {};

// 共用照片查看器: 点了才 load + loading 状态 + 无图占位
FB.PhotoView = function PhotoView({ code, name, lang, onClose }) {
  const { useState } = React;
  const t = FB.makeT(lang);
  const [state, setState] = useState("loading");   // loading | ok | none

  return (
    <div onClick={onClose} className="fixed inset-0 z-50 flex items-center justify-center p-6"
      style={{ background: "rgba(28,25,23,.6)" }}>
      <div className="bg-white rounded-3xl p-4 w-full max-w-xs text-center" onClick={(e) => e.stopPropagation()}>
        <p className="text-[15px] font-medium text-stone-800 leading-snug">{name}</p>
        <p className="text-[11px] text-stone-400 mb-3">{code}</p>

        <div className="relative rounded-2xl overflow-hidden bg-stone-100 flex items-center justify-center"
          style={{ minHeight: 180 }}>
          {state === "loading" && (
            <div className="absolute inset-0 flex flex-col items-center justify-center gap-2">
              <div style={{
                width: 26, height: 26, borderRadius: "50%",
                border: "2.5px solid #E7E5E4", borderTopColor: "#B91C1C",
                animation: "fbspin .7s linear infinite",
              }} />
              <span className="text-[11px] text-stone-400">{t("loading")}</span>
            </div>
          )}
          {state === "none" && (
            <div className="py-14 text-stone-400 text-sm">🖼 {t("noPhoto")}</div>
          )}
          <img src={FB.photoUrl(code)} alt={code}
            onLoad={() => setState("ok")}
            onError={() => setState("none")}
            className="w-full object-contain"
            style={{ maxHeight: 320, display: state === "ok" ? "block" : "none" }} />
        </div>

        <button onClick={onClose} className="mt-3 text-sm text-stone-500 h-10 px-6">
          {lang === "zh" ? "关闭" : lang === "vi" ? "Đóng" : "Close"}
        </button>
      </div>
      <style>{"@keyframes fbspin{to{transform:rotate(360deg)}}"}</style>
    </div>
  );
};

// 小图标按钮: 放在任何列表行里 (SVG, 让「点了能看照片」看得出来)
FB.PhotoBtn = function PhotoBtn({ onClick }) {
  return (
    <button onClick={(e) => { e.stopPropagation(); onClick(); }}
      className="w-8 h-8 rounded-lg flex items-center justify-center text-stone-300 active:bg-stone-100 shrink-0"
      aria-label="photo">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor"
        strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <path d="M4 5h16v14H4zM4 15l4-4 5 5M14 13l2-2 4 4M9.5 9a1 1 0 100 .01" />
      </svg>
    </button>
  );
};