/* profile-sheet.jsx — 選手名タップ → 顔写真・名前・プロフィールのシート。
   KANSAI.PROFILES[氏名(空白なし)] を参照。写真は元サイトURLを表示し出典＋元ページリンクを付ける。 */
// 写真の掲載許可が取れているチームのみ表示する（それ以外は著作権・肖像権配慮で非表示）。
// 現状の許可済み＝同志社大学ボート部（durc.jp）。増えたらこの判定に足す。
function photoAllowed(prof) {
  if (!prof || !prof.img) return false;
  const s = (prof.src || "") + " " + (prof.url || "") + " " + (prof.img || "");
  return /同志社|durc\.jp/.test(s);
}
function ProfileSheet({ name, prof, kana, onClose }) {
  const showImg = photoAllowed(prof);
  const displayKana = prof.kana || kana;
  // 開く時にダミー履歴を1段積んでおり（RowerName側）、閉じる操作は history.back() に一本化。
  // popstateをこのuseEffectで拾って実際のonCloseを呼ぶ（二重に履歴をいじらない）。
  React.useEffect(() => {
    const onPop = () => onClose();
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, [onClose]);
  const closeByBack = () => history.back();
  return (
    <div className="psheet-wrap" onClick={closeByBack}>
      <div className="psheet" onClick={(e) => e.stopPropagation()}>
        <div className="psheet-hd">
          <button type="button" className="psheet-x" aria-label="閉じる" onClick={closeByBack}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
          </button>
        </div>
        <div className={"psheet-hero" + (showImg ? "" : " nophoto")}>
          {showImg
            ? <img className="psheet-photo" src={prof.img} alt={name} loading="lazy" referrerPolicy="no-referrer" onError={(e) => { e.currentTarget.style.display = "none"; }} />
            : <div className="psheet-photo psheet-noimg" aria-hidden="true"><span>{(name || "?").slice(0, 1)}</span></div>}
          <div className="psheet-nmwrap">
            <div className="psheet-nm">{name}</div>
            {displayKana && <div className="psheet-kana">{displayKana}</div>}
          </div>
        </div>
        <div className="psheet-body">
          {(prof.sec || []).map((s, i) => (
            <div className="psec" key={i}>
              <div className="psec-t">{s.t}</div>
              {s.rows ? (
                <div className="psec-rows">
                  {s.rows.map((r, j) => (
                    <div className="psrow" key={j}><span className="pk">{r[0]}</span><span className="pv">{r[1]}</span></div>
                  ))}
                </div>
              ) : (
                <div className="psec-txt">
                  {String(s.body || "").split("\n").map((ln, j) => {
                    const isHead = ln.indexOf("＜") === 0 || /^\d{4}年?$/.test(ln);
                    const ym = isHead ? null : ln.match(/^(\d{4}年)([\s　].*)$/);
                    return (
                      <div key={j} className={"pline" + (isHead ? " phead" : ym ? " presult" : "")}>
                        {ym ? (<React.Fragment><span className="pyr">{ym[1]}</span>{ym[2]}</React.Fragment>) : ln}
                      </div>
                    );
                  })}
                </div>
              )}
            </div>
          ))}
        </div>
        <div className="psheet-ft">
          {prof.url && <a className="psheet-link" href={prof.url} target="_blank" rel="noopener noreferrer">{prof.linkLabel || "公式プロフィールを開く"}<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 4h6v6" /><path d="M20 4l-9 9" /><path d="M19 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h6" /></svg></a>}
          <div className="psheet-src">出典：{prof.src || "所属チーム公式サイト"}</div>
        </div>
      </div>
    </div>
  );
}

// 選手名。読み仮名(カタカナ)を名前の右に表示。
// タップで開けるリンク(下線)にするのは「写真あり(同志社)or 成績あり」の選手だけ。
// それ以外（写真も成績も無い＝大多数）は下線なしのただの文字。
function RowerName({ name, kana, light, hideKana }) {
  const [open, setOpen] = React.useState(false);
  const PROF = (window.KANSAI && window.KANSAI.PROFILES) || {};
  const key = name ? name.replace(/[\s　]/g, "") : "";
  const prof = key ? PROF[key] : null;
  const hasContent = !!(prof && (photoAllowed(prof) || (prof.sec && prof.sec.length)));
  const kanaEl = (kana && !hideKana) ? <i className="rn-kana">{kana}</i> : null;
  if (!hasContent) return <span className="rn-plain">{name || "—"}{kanaEl}</span>;
  const sheet = open && prof ? (() => {
    const el = <ProfileSheet name={name} prof={prof} kana={kana} onClose={() => setOpen(false)} />;
    const root = (typeof document !== "undefined") ? (document.querySelector(".app") || document.body) : null;
    return (window.ReactDOM && ReactDOM.createPortal && root) ? ReactDOM.createPortal(el, root) : el;
  })() : null;
  return (
    <React.Fragment>
      <button type="button" className={"rn-link" + (light ? " light" : "")} onClick={(e) => { e.stopPropagation(); history.pushState(null, ""); setOpen(true); }}>
        {name}
        <svg className="rn-ext" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9" /><path d="M12 11.5v4.5" /><path d="M12 8h.01" /></svg>
      </button>
      {kanaEl}
      {sheet}
    </React.Fragment>
  );
}
Object.assign(window, { ProfileSheet, RowerName });