/* panels.jsx — 各コンポーネントのドロワー（v4） */
const EP = window.UWEngine;
const cl = (o) => JSON.parse(JSON.stringify(o));
/* カード右のボタン：選択中は「選択中」、未選択は ラベル（＋ 追加／選択） */
const actA = (on, fn, lbl, off) => ({ label: on ? off ? T("外す") : T("選択中") : lbl || T("＋ 追加"), ghost: on, onClick: on && !off ? () => {} : fn });
const actS = (on, fn) => actA(on, fn, T("選択"));
const upd = (st, set, path, v) => {const s = cl(st);let o = s;const k = path.split('.');k.slice(0, -1).forEach((x) => o = o[x]);o[k[k.length - 1]] = v;set(s);};
/* 選択パネルを開いたときの最初のスクロール位置。
 * パネルは項目を切り替えても同じ .dw-b を使い回すので、前の項目のスクロール位置が残る。開くたびに位置を決め直す。
 *   ref あり … その要素を .dw-b の中央に ／ ref なし（または要素なし）… 一番上 */
function useInitialScroll(ref) {
  React.useLayoutEffect(() => {
    const el = ref && ref.current,box = el ? el.closest('.dw-b') : document.querySelector('.dw-b');
    if (!box) return;
    if (!el) {box.scrollTop = 0;return;}
    const b = box.getBoundingClientRect(),r = el.getBoundingClientRect();
    box.scrollTop = box.scrollTop + (r.top - b.top) - (box.clientHeight - r.height) / 2; // 範囲外は自動で端に止まる
  }, []);
}

/* ---------------- カメラ ---------------- */
function PanelCamera({ st, set, go, notify }) {
  const tg = st.system === 'tg',cams = EP.camerasFor(st.system),cur = tg ? st.tgCamera : st.mlCamera;
  const brands = [...new Set(cams.map((c) => c.brand))];
  const pick = (id) => {
    if (tg) {const s = { ...st, tgCamera: id };set(s);go('camera', null, s);return;}
    const r = EP.onMirrorlessCameraChange(st, id);
    if (r.notice === 'lensUnsupported') notify(T("選択中のレンズは ") + EP.CAM[id].name_ja + T(" に対応していません。レンズを選び直してください"));else
    if (r.notice === 'port') notify(T("レンズはそのまま使えます。ポート構成を選んでください"));
    go('camera', r.next, r.st);
  };
  return <>
    <p className="hint">{T("カメラを選ぶと、対応するハウジングが自動で決まります。")}</p>
    {brands.map((b) => <div key={b}><div className="sec-t">{b}</div>
      {cams.filter((c) => c.brand === b).map((c) => {
        const hs = EP.housingsForCamera(c.camera_id);
        return <Card key={c.camera_id} id={hs[0] && hs[0].is_own_product ? hs[0].housing_id : c.camera_id} title={c.name_ja} on={cur === c.camera_id}
        onClick={() => pick(c.camera_id)} act={actS(cur === c.camera_id, () => pick(c.camera_id))} desc={T("ハウジング：") + hs.map((h) => h.name_ja).join(' / ')} noWeight />;
      })}</div>)}
  </>;
}

/* ---------------- ミラーレス：レンズ ---------------- */
function PanelLens({ st, set, res, go }) {
  const h = res.housing;if (!h) return <p className="hint">{T("先にカメラを選択してください。")}</p>;
  const lensIds = EP.lensesForHousing(h),lens = lensIds.includes(st.ml.lens) ? st.ml.lens : '';
  const ls = lens ? EP.setsFor(h, lens) : [],cur = ls.find((s) => s.set_id === st.ml.setId) || null;
  const [q, setQ] = React.useState(''),[edit, setEdit] = React.useState(!lens);
  const shown = lensIds.filter((id) => !q || EP.lensName(id).toLowerCase().includes(q.toLowerCase()));
  const pickLens = (id) => {uwTrack(id, 'select', 'mirrorless');const s = cl(st);s.ml.lens = id;const x = EP.setsFor(h, id);s.ml.setId = x.length === 1 ? x[0].set_id : '';s.ml.gears = 'auto';set(s);setEdit(false);setQ('');};
  const gears = cur ? EP.gearsOf(cur) : [],selG = cur ? st.ml.gears === 'auto' ? EP.autoGears(cur, lens) : st.ml.gears : [];
  const togG = (g) => {const s = cl(st);const now = selG.includes(g) ? selG.filter((x) => x !== g) : [...selG, g];s.ml.gears = now;set(s);};
  const pickPort = (s) => {if (cur && s.set_id === cur.set_id) return;const x = cl(st);x.ml.setId = s.set_id;x.ml.gears = 'auto';set(x);};
  return <>
    <div className="sec-t">{T("① レンズ")} <span className="sp" /><span className="pn">{h.name_ja} {T("対応")} {lensIds.length} {T("本")}</span></div>
    {lens && !edit ?
    <Card none title={EP.lensName(lens)} on desc={EP.isZoomLens(lens) ? T("ズームレンズ") : T("単焦点レンズ")} onClick={() => setEdit(true)} acts={<button className="ubtn sm" onClick={() => setEdit(true)}>{T("変更")}</button>} /> :
    <><input className="srch" placeholder={T("レンズ名で絞り込み")} value={q} onChange={(e) => setQ(e.target.value)} />
        <div className="lens-list">{shown.map((id) => <button key={id} className={'lens-it' + (id === lens ? ' on' : '')} onClick={() => pickLens(id)}>{EP.lensName(id)}<span className="pn">{EP.setsFor(h, id).length} {T("構成")}</span></button>)}</div></>}
    {lens && <>
      <div className="sec-t">{T("② ポート構成")} <span className="sp" /><span className="pn">{T("システムビルダーのセット定義")}</span></div>
      {!cur && ls.length > 1 && <div className="fit ng">{T("ポート構成を選んでください")}</div>}
      {ls.map((s) =>
      <Card key={s.set_id} id={s.port_id} on={!!(cur && s.set_id === cur.set_id)} title={EP.info(s.port_id).name} noWeight onClick={() => pickPort(s)} act={actS(!!(cur && s.set_id === cur.set_id), () => pickPort(s))}
      desc={<ul className="plist">{EP.portParts(s).map((p, i) => <li key={i}>{EP.info(p).name}</li>)}{EP.gearsOf(s).map((g) => <li key={g} className="g">{EP.gearLabel(g)}</li>)}</ul>} />
      )}
      {cur && gears.length > 0 && <>
        <div className="sec-t">{T("③ ギア")} <span className="sp" /><span className="pn">{EP.isZoomLens(lens) ? T("ズームギアは必須") : T("必要なものだけ選択")}</span></div>
        <p className="hint">{EP.isZoomLens(lens) ? T("ズームレンズの場合、ズームギアは水中でレンズのズーム機能を利用するために必須です。") : T("単焦点レンズはAFで使う方が多く、通常ギアは不要です（機種によってはギアを付けるとAFが効きません）。")}</p>
        {gears.map((g) => <Card key={g} id={g} title={EP.gearLabel(g)} on={selG.includes(g)} onClick={() => togG(g)} act={actA(selG.includes(g), () => togG(g), T("選択"), true)} />)}
      </>}
      <a className="sb-link" href={EP.sbLink(h, st.mlCamera, lens)} target="_blank" rel="noopener"><div><b>{T("システムビルダーで構成を確認")}</b>{T("ポート・リング・ギアの詳細はシステムビルダーを参照")}</div><span className="ar">{T("→")}</span></a>
    </>}
  </>;
}

/* ---------------- ミラーレス：コンバーター ---------------- */
function PanelConverter({ st, set, res, go }) {
  const convs = EP.convertersFor(res.housing);
  const label = (c) => c.category_id === 'converter_electric' ? T("電気接続（現在は選択できません）") : /UWT/.test(c.name_ja) ? T("HSS/TTL対応") : /MDX/.test(c.name_ja) ? T("TTL対応") : null;
  // 最初に開いたとき、おすすめ（最初の「おすすめ」カード）を画面の中央に表示する
  const recId = (convs.find((c) => c.category_id !== 'converter_electric' && /UWT/.test(c.name_ja)) || {}).product_id;
  const recRef = React.useRef(null);
  useInitialScroll(recId ? recRef : null);
  return <>
    <p className="hint">{T("水中ストロボを利用するために必要な製品です。")}</p>
    {convs.map((c) => {const el = c.category_id === 'converter_electric';
      return <div key={c.product_id} ref={c.product_id === recId ? recRef : null}><Card id={c.product_id} dis={el} on={st.ml.converter === c.product_id} rec={/UWT/.test(c.name_ja)} desc={label(c)} act={actA(st.ml.converter === c.product_id, () => {const s = cl(st);s.ml.converter = c.product_id;go('conv', null, s);})}
      onClick={() => {const s = cl(st);s.ml.converter = c.product_id;go('conv', null, s);}} /></div>;})}
    <Card none title={T("使わない（ストロボなし）")} on={!st.ml.converter} onClick={() => {const s = cl(st);s.ml.converter = '';go('conv', null, s);}} />
  </>;
}

/* ---------------- TG：RIG ---------------- */
function PanelRig({ st, set, go, notify }) {
  const t = st.tg,u = (k, v) => upd(st, set, 'tg.' + k, v);
  const on = t.rig !== 'none',single = t.rig === 'single',frame = t.rig === 'frame';
  /* グリップは「フレーム」とは別の選択項目。tg.grips はシングルグリップセット付属の1本を含む総本数（状態の持ち方は従来どおり）。
   *   RSスタンダードグリップ（独立）… シングルグリップセットは付属1本に追加で最大1本（合計2本）／メインフレームは最大2本
   *   RSマルチアングルグリップ（独立）… メインフレーム選択時のみ。スタンダードグリップとは併用不可（片方を選ぶともう片方を自動で解除） */
  const bundled = single ? 1 : 0,stdMax = single ? 1 : 2;
  const stdQty = on && !t.multi ? Math.max(0, t.grips - bundled) : 0;
  const ballCap = (grips, multi) => multi ? 2 : Math.max(0, 2 - grips);
  const maxBall = ballCap(t.grips, t.multi);
  const setRig = (r) => {
    if (r === t.rig) return; // 選択中のカードを押し直してもグリップ・ボールベースの選択は変えない
    const s = cl(st),prev = t.rig,had = prev === 'frame' ? (t.multi ? 2 : t.grips) : prev === 'single' ? t.grips - 1 : 0;
    s.tg.rig = r;
    if (r === 'none') {s.tg.grips = 0;s.tg.multi = false;s.tg.ballBase = 0;s.tg.acc = [];s.tg.top = 'none';}
    if (r === 'single') { // 追加分は1本までに切り詰め、マルチアングルは解除
      s.tg.multi = false;s.tg.grips = 1 + Math.min(1, prev === 'frame' && !t.multi ? t.grips : prev === 'single' ? t.grips - 1 : 0);
      s.tg.ballBase = Math.min(s.tg.ballBase, ballCap(s.tg.grips, false));
      if (prev === 'frame' && (t.multi || had > 1)) notify && notify(T("RSシングルグリップセットに合わせてグリップを調整しました"));
    }
    if (r === 'frame') {s.tg.multi = false;s.tg.grips = 0;}
    set(s);
  };
  const setStd = (n) => {
    const s = cl(st),wasMulti = s.tg.multi;
    s.tg.multi = false;s.tg.grips = bundled + n;s.tg.ballBase = Math.min(s.tg.ballBase, ballCap(s.tg.grips, false));
    set(s);
    if (wasMulti && n > 0) notify && notify(T("RSスタンダードグリップを選んだため、RSマルチアングルグリップを解除しました"));
  };
  const setMulti = (v) => {
    const s = cl(st),hadStd = !t.multi && t.grips - bundled > 0;
    s.tg.multi = v;if (v) s.tg.grips = 0;
    set(s);
    if (v && hadStd) notify && notify(T("RSマルチアングルグリップを選んだため、RSスタンダードグリップを解除しました"));
  };
  const acc = EP.DB.uw_components.filter((c) => c.category === 'grip_accessory');
  return <>
    <div className="sec-t">{T("フレーム")}</div>
    <Card none title={T("RIGなし")} desc={T("PT-059単体")} on={t.rig === 'none'} onClick={() => setRig('none')} />
    <Card id="RS_SINGLEGRIPSET" rec on={t.rig === 'single'} onClick={() => setRig('single')} act={actA(t.rig === 'single', () => setRig('single'))} desc={T("メインフレーム＋グリップ1本")} />
    <Card id="RS_MAINFRAME" on={t.rig === 'frame'} onClick={() => setRig('frame')} act={actA(t.rig === 'frame', () => setRig('frame'))} />
    <div className="sec-t">{T("グリップ")}</div>
    <Card id="RS_STDGRIP" dis={!on} on={stdQty > 0} onClick={() => setStd(stdQty > 0 ? 0 : 1)} act={actA(stdQty > 0, () => setStd(stdQty > 0 ? 0 : 1), null, true)}
    desc={!on ? T("フレームを選ぶと追加できます") : single ? T("シングルグリップセット付属の1本に追加できます（最大1本）") : T("最大 ") + stdMax + T(" 本")}>
      {stdQty > 0 && <Step value={stdQty} min={1} max={stdMax} onChange={setStd} />}
    </Card>
    <Card id="RS_MULTIGRIP" dis={!frame} on={t.multi && frame} onClick={() => setMulti(!t.multi)} act={actA(t.multi && frame, () => setMulti(!t.multi), null, true)}
    desc={!frame ? T("RSメインフレームを選ぶと使えます") : T("スタンダードグリップとは併用できません")} />
    <div className="sec-t">{T("ボールベース")}</div>
    <Card id="RS_BALLBASE" dis={!on || maxBall === 0} on={t.ballBase > 0} onClick={() => u('ballBase', t.ballBase > 0 ? 0 : 1)} act={actA(t.ballBase > 0, () => u('ballBase', t.ballBase > 0 ? 0 : 1), null, true)}
    desc={!on ? T("フレームを選ぶと追加できます") : maxBall === 0 ? T("グリップ2本の場合は追加できません") : T("最大 ") + maxBall + T(" 個")}>
      {t.ballBase > 0 && <Step value={t.ballBase} min={1} max={maxBall} onChange={(v) => u('ballBase', v)} />}
    </Card>
    <div className="sec-t">{T("アクセサリー")}</div>
    {acc.map((c) => {const has = t.acc.includes(c.component_id),tg = () => u('acc', has ? t.acc.filter((x) => x !== c.component_id) : [...t.acc, c.component_id]);
      return <Card key={c.component_id} id={c.component_id} dis={!on} on={has} onClick={tg} act={actA(has, tg, null, true)} />;})}
  </>;
}

/* ---------------- TG：受け側（リングライト・レンズで共通） ---------------- */
function Receiver({ st, set }) {
  const t = st.tg,hasBY = (t.lenses || []).includes(EP.BY_INCLUDED);
  return <>
    <div className="sec-t">{T("受け側（PT-059前面）")} <span className="sp" /><span className="pn">{T("リングライトとレンズで共通・1つだけ")}</span></div>
    <Chips value={hasBY ? (t.receiver === 'RS_BAYBASE' ? 'RS_BAYBASE' : EP.BY_BASE) : t.receiver === 'FIX_BAYBASE_M52' || t.receiver === 'SS_BAYBASE_M52' ? EP.BY_BASE : t.receiver} onPick={(v) => upd(st, set, 'tg.receiver', v)}
    options={EP.RECEIVERS.map((r) => ({ v: r.id, l: r.label + (r.rec ? T("（おすすめ）") : ''), x: hasBY && r.id === 'screw' }))} />
    <p className="hint" style={{ marginTop: 8 }}>{T("バヨネットアダプターは自動で追加します。")}</p>
  </>;
}
/* 前面（リングライト＋レンズ）は合計2つまで：正面に1つ、上部の RSバヨネットレンズホルダーに1つ。
 * 2つ目を選んだら上部をホルダーにする（RIGがないときは2つ目を選べない） */
const frontCount = (t, ring, lenses) => (ring ? 1 : 0) + lenses.length;
/* RSバヨネットレンズホルダーは自動では追加しない。2つ目を選んだときは、足りないものを警告（engine.js の build）で知らせる。
 * 1つ以下に戻り、RIGなしなら残っているホルダーを外す */
const withHolder = (s) => {const n = frontCount(s.tg, s.tg.ringLight, s.tg.lenses || []);
  if (n < 2 && s.tg.top === 'holder' && s.tg.rig === 'none') s.tg.top = 'none';return false;};
function FrontNote({ st }) {
  const t = st.tg,lay = EP.tgFrontLayout(t),n = frontCount(t, t.ringLight, t.lenses || []);
  const nm = (id) => id ? EP.info(id).name : T("－");
  return <div className="fit ok" style={{ lineHeight: 1.7 }}>
    {T("正面：")}{nm(lay.front)}<br />{T("上部（RSバヨネットレンズホルダー）：")}{nm(lay.top)}
    <div className="pn" style={{ fontFamily: 'inherit' }}>{n >= 2 ? T("リングライト・レンズは合計2つまでです。リングライトは正面、レンズは上部に付きます。") : T("1つ目は正面、2つ目は上部の RSバヨネットレンズホルダーに付きます（リングライトは常に正面）。")}</div>
  </div>;
}
function PanelRing({ st, set, go, notify }) {
  const t = st.tg,lenses = t.lenses || [];
  const pick = (id) => {
    const s = cl(st);s.tg.ringLight = id;
    withHolder(s);
    if (id && frontCount(s.tg, id, lenses) >= 2) notify && notify(T("リングライトとレンズを併用するには、RSバヨネットレンズホルダーが必要です（警告を確認してください）"));
    set(s);
  };
  // レンズ2つ選択中は追加できない。レンズと併用するときは M52ねじ込みのリングライトは選べない（受け側をバヨネットに）
  const ringFull = !t.ringLight && lenses.length >= EP.MAX_FRONTS,ringScrew = lenses.length >= 1 && t.receiver === 'screw',ringDis = ringFull || ringScrew;
  return <>
    <Receiver st={st} set={set} />
    <div className="sec-t">{T("リングライト")}</div>
    {(t.ringLight || lenses.length > 0) && <FrontNote st={st} />}
    {ringFull && <div className="fit ng">{T("レンズを2つ選択中のため、リングライトは追加できません（合計2つまで）")}</div>}
    {!ringFull && ringScrew && <div className="fit ng">{T("レンズと併用する場合、M52ねじ込みのリングライトは選べません。受け側をバヨネットにしてください")}</div>}
    {!ringDis && lenses.length === 1 && !t.ringLight && <p className="hint">{T("追加すると、リングライトを正面、レンズを上部の RSバヨネットレンズホルダーに付けます（RIG SYSTEM と RSバヨネットレンズホルダーを別途追加してください）。")}</p>}
    <Card none title={T("使わない")} on={!t.ringLight} onClick={() => pick('')} />
    {EP.RING_LIGHTS.map((id) => <Card key={id} id={id} on={t.ringLight === id} dis={ringDis && t.ringLight !== id} onClick={() => pick(id)} act={actA(t.ringLight === id, () => pick(t.ringLight === id ? '' : id), null, true)}
    desc={t.receiver && t.receiver !== 'screw' ? T("＋ ") + EP.info(EP.ADAPTER[id]).name : t.receiver === 'screw' ? T("M52ねじ込み。ストロボ併用時は MG01＋光ファイバーケーブルが必要です") : null} />)}
  </>;
}
function PanelTgLens({ st, set, go, notify }) {
  const t = st.tg,lenses = t.lenses || [],n = frontCount(t, t.ringLight, lenses),full = n >= EP.MAX_FRONTS,needRig = false;
  const tog = (id) => {
    const s = cl(st),on = lenses.includes(id);
    if (!on && (full || needRig)) return;
    s.tg.lenses = on ? lenses.filter((x) => x !== id) : [...lenses, id];
    if (id === EP.BY_INCLUDED && !on && s.tg.receiver !== 'RS_BAYBASE') s.tg.receiver = EP.BY_BASE;
    withHolder(s);
    if (!on && frontCount(s.tg, s.tg.ringLight, s.tg.lenses) >= 2) notify && notify(T("2つ目のリングライト・レンズには、上部の RSバヨネットレンズホルダーが必要です（警告を確認してください）"));
    set(s);
  };
  return <>
    <Receiver st={st} set={set} />
    <div className="sec-t">{T("レンズ")} <span className="sp" /><span className="pn">{t.ringLight ? T("リングライトと合わせて2つまで") : T("2つまで（正面＋上部）")}</span></div>
    {n > 0 && <FrontNote st={st} />}
    {full && <div className="fit ng">{T("リングライト・レンズは合計2つまでです。入れ替える場合は、選択中のものを外してください")}</div>}
    {!full && needRig && <div className="fit ng">{T("2つ目を付けるには、RIG（RSメインフレーム）と上部の RSバヨネットレンズホルダーが必要です")}</div>}
    {EP.FRONT_LENSES.map((id) => <Card key={id} id={id} on={lenses.includes(id)} dis={!lenses.includes(id) && (full || needRig)} onClick={() => tog(id)} act={actA(lenses.includes(id), () => tog(id), null, true)}
    desc={id === EP.BY_INCLUDED ? EP.EN ? 'With SEA&SEA Bayonet Mount Base M52' : T("FIXマウントベースM52とのセット") : t.receiver && t.receiver !== 'screw' ? T("＋ ") + EP.info(EP.ADAPTER[id]).name : T("M52ねじ込み")} />)}
  </>;
}

/* ---------------- TG：シューベース ---------------- */
function PanelTop({ st, set, go }) {
  const t = st.tg,frame = t.rig !== 'none',free = !frame || t.top === 'shoemount';
  const conv = EP.DB.uw_components.filter((c) => c.category === 'shoe_ball_base');
  // 上にストロボ・ライトを付けられる状態になったら「ストロボ」へ戻る（RSボールベース、またはシューベースの部品を選んだとき）
  const setTop = (v) => {const s = cl(st);s.tg.top = v;if (v !== 'shoemount' && frame || v === 'holder') s.tg.shoeConv = 'none';if (v === 'ballbase' && go) go('top', 'strobe', s);else set(s);};
  const setConv = (id) => {const s = cl(st);s.tg.shoeConv = id;if (id !== 'none' && go) go('top', 'strobe', s);else set(s);};
  const T1 = (id, v, desc) => <Card id={id} on={t.top === v} onClick={() => setTop(v)} act={actA(t.top === v, () => setTop(v))} desc={desc} />;
  const two = frontCount(t, t.ringLight, t.lenses || []) >= 2; // リングライト・レンズを2つ使う → 上部は RSバヨネットレンズホルダーが必要
  return <>
    {two && <div className="fit ng">{T("リングライト・レンズを2つ使う場合、上部は RSバヨネットレンズホルダー を選びます。シューベース（RSシューマウント＋アクセサリーシューボールベースII／PTSA-02、PTSA-02単体）やRSボールベースとは、どちらか一方しか使えません。")}</div>}
    {(frame || t.top === 'holder') && <>
      <div className="sec-t">{T("① 上部に付けるもの")}<span className="sp" /><span className="pn">{T("どれか1つ")}</span></div>
      <Card none title={T("なし")} on={t.top === 'none'} onClick={() => setTop('none')} />
      {frame && T1('RS_SHOEMOUNT', 'shoemount', T("シューベースを復活"))}
      {T1('RS_BAYHOLDER', 'holder', T("2つ目のレンズを保持"))}
      {frame && T1('RS_BALLBASE', 'ballbase', T("上部にボールベース（クランプで取付）"))}
    </>}
    {t.top === 'ballbase' ? <p className="hint">{T("上部はRSボールベースのみです。ストロボ・ライトの「＋ 上に追加」で取り付けてください。")}</p> : <>
    <div className="sec-t">{frame ? T("② ") : ''}{T("シューベースに付けるもの")}</div>
    {!free && <div className="fit ng">{T("RSシューマウントを選ぶと選択できます")}</div>}
    <Card none title={T("なし")} dis={!free} on={t.shoeConv === 'none'} onClick={() => setConv('none')} />
    {conv.map((c) => <Card key={c.component_id} id={c.component_id} dis={!free || t.top === 'holder'} on={t.shoeConv === c.component_id} onClick={() => setConv(c.component_id)}
    act={actA(t.shoeConv === c.component_id, () => setConv(c.component_id))} desc={c.provides_ys_base ? T("YSベース") : T("ボールベース")} />)}
    </>}
  </>;
}

/* ---------------- ストロボ／ライト ---------------- */
function LightPanel({ st, set, kind, go, topHint }) {
  const s0 = EP.normalize(st),M = s0.mounts;
  const fams = EP.lightingFamilies(st.system, kind);
  const isK = (pid) => pid && EP.isStrobe(pid) === (kind === 'strobe');
  const used = EP.MOUNTS.filter((k) => isK(M[k].pid));
  const strobes = EP.strobeCount(s0),topOk = st.system === 'mirrorless' || st.tg.shoeConv !== 'none' || st.tg.rig !== 'none' && st.tg.top === 'ballbase';
  const total = EP.MOUNTS.filter((k) => M[k].pid).length,full = total >= EP.MAX_STROBES; // ストロボ・ライトは合計3つまで
  const recF = EP.recommendedStrobe(st); // おすすめのストロボ（ミラーレス・ワイドレンズ選択時＝YS-D130R、TGでそれ以外＝CUBee）
  const addFam = (f, pos) => {uwTrack(EP.defaultMember(f), pos === 'T' ? 'add_top' : 'add', st.system);set(EP.addLighting(st, EP.defaultMember(f), pos));};
  const setPid = (k, pid) => {const s = EP.normalize(st);s.mounts[k].pid = pid;if (s.sym && k !== 'T') s.mounts[k === 'R' ? 'L' : 'R'].pid = pid;set(EP.normalize(s));};
  return <>
    {topHint && <div className="fit ok">{st.system === 'tg' ? T("上に付けるには「シューベース」でアクセサリーシューボールベースII・PTSA-02、またはRSボールベース（RIG使用時）を選んでください") : T("シューベースに付ける場合は「＋ 上に追加」を押してください（アクセサリーシューボールベースIIを自動で追加）")}</div>}
    <SymSwitch st={st} set={set} />
    <p className="hint">{T("ストロボ・ライトは合計3つまで。右・左・上を併用できます。")}</p>
    {used.length > 0 && <div className="sec-t">{T("選択中")}</div>}
    {used.map((k) => {if (st.sym && k === 'L') return null;const m = M[k],f = EP.FAM[EP.FAM_OF[m.pid]],mem = EP.member(m.pid);
      return <div className="lr" key={k}>
        <div className="lr-h"><span className="mk">{st.sym && k !== 'T' ? T("左右") : EP.MOUNT_NAME[k]}</span>
          <span className="nm"><PName id={m.pid}>{EP.famName(m.pid)}</PName><div className="pn">{m.pid}</div></span>
          <button className="x" aria-label={T("外す")} onClick={() => set(EP.removeLighting(st, k))}>×</button></div>
        {f && f.axes.map((ax, i) => {const opts = EP.axisOptions(f.id, i);if (opts.length < 2) return null;
          return <div className="lr-o" key={ax}><span className="k">{EP.AXIS_LABEL[ax] || ax}</span>
            <Chips sm value={mem.parts[i]} onPick={(v) => setPid(k, EP.withVariant(m.pid, i, v))} options={opts.map((o) => ({ v: o, l: T(o) }))} /></div>;})}
        {k === 'T' && st.system === 'tg' && st.tg.shoeConv === 'OM_PTSA02' && <div className="pn" style={{ marginTop: 6 }}>{T("PTSA-02 にYSベースで取付")}</div>}
      </div>;})}
    {kind === 'light' && st.system === 'tg' && <p className="hint">{T("前面に付けるリングライト（RL1500）は「リングライト」で選択します。")}</p>}
    {fams.length > 0 && <div className="sec-t">{T("製品を追加")}</div>}
    {fams.slice().sort((a, b) => (kind === 'strobe' && b.id === recF) - (kind === 'strobe' && a.id === recF)).map(({ id: f, note }) => {const pid = EP.defaultMember(f);
      return <Card key={f} id={pid} rec={kind === 'strobe' && f === recF} title={<PName id={pid}>{EP.FAM[f].name}</PName>} desc={note} onClick={() => !full && addFam(f)}
      acts={<><button className="ubtn sm dark" disabled={full} onClick={() => addFam(f)}>{st.sym ? T("＋ 左右に追加") : T("＋ 追加")}</button>
        {topOk && <button className="ubtn sm" disabled={full || !!M.T.pid} onClick={() => addFam(f, 'T')}>{T("＋ 上に追加")}</button>}</>} />;})}
    {full && <div className="fit ok">{T("ストロボ・ライトは3つ選択済みです")}</div>}
  </>;
}
const PanelStrobe = (p) => <LightPanel {...p} kind="strobe" />;
const PanelLight = (p) => <LightPanel {...p} kind="light" />;

/* ---------------- ストロボ接続（光ファイバー） ---------------- */
function PanelFiber({ st, set, res, openChart }) {
  const r = res.rule;
  return <>
    {!res.strobes ? <p className="hint">{T("ストロボを選ぶと自動で追加されます（ライトのみの場合は不要）。")}</p> : <>
      <div className="fit ok">{r ? r.note : T("適用ルールなし")}</div>
      <p className="hint">{T("YS-D3 DUO は電気接続にも対応していますが、現在は光接続のみ選択できます。数量は内訳から調整できます。")}</p>
      {r && r.mg01 && <Card id="MG01" on desc={(st.tg.lenses || []).includes('SS_UWL24BAY') ? T("レンズに同梱") : T("1個")} />}
      {r && r.cable_id && <Card id={r.cable_id} on desc={T("ストロボ ") + res.strobes + T(" 灯・固定")} />}
      {r && r.extra_id && <Card id={r.extra_id} on desc={T("PT-059付属品")} />}
    </>}
    {(!r || !!r.per_strobe) && <>
      <div className="size-row"><span className="t">{T("長さ")}</span><button className="ubtn link" onClick={() => openChart('fiber')}>{T("適正サイズを探そう ▭")}</button></div>
      <Chips value={st.fiberSize} onPick={(v) => upd(st, set, 'fiberSize', v)} options={EP.FIBER.map((f) => ({ v: f.size, l: f.size }))} />
      <div style={{ marginTop: 12 }}><Card id={(EP.FIBER.find((f) => f.size === st.fiberSize) || {}).pid} on={!!res.strobes} desc={res.strobes ? '× ' + res.strobes + T("（灯数分）") : null} /></div>
    </>}
  </>;
}

/* ---------------- アーム ---------------- */
function PanelArms({ st, set, openChart, go }) {
  const s0 = EP.normalize(st),[k, setK] = React.useState('R'),[size, setSize] = React.useState('M');
  const key = st.sym && k === 'L' ? 'R' : k,arms = s0.mounts[key].arms;
  const idOf = (z) => EP.ARMS.find((id) => EP.armSize(id) === z);
  const setArms = (a) => {const s = EP.normalize(st);s.mounts[key].arms = a;set(EP.normalize(s));};
  const where = st.sym ? [['R', T("左右")], ['T', T("上")]] : [['R', T("右")], ['L', T("左")], ['T', T("上")]];
  return <>
    <SymSwitch st={st} set={set} />
    <div className="sec-t">{T("取付位置")}</div>
    <Chips value={st.sym && k === 'L' ? 'R' : k} onPick={setK} qty={{ R: s0.mounts.R.arms.length, L: s0.mounts.L.arms.length, T: s0.mounts.T.arms.length }}
    options={where.map(([x, l]) => ({ v: x, l: l + (s0.mounts[x].pid ? T("：") + EP.famName(s0.mounts[x].pid).replace('YS-D12S ', '') : '') }))} />
    <div className="sec-t">{T("アーム（ハウジング側から順）")}<span className="sp" /><span className="pn">{T("1か所に最大")} {EP.MAX_ARMS} {T("本")}{st.sym && key === 'R' ? T("・左右それぞれに付きます") : ''}</span></div>
    {!arms.length && <p className="hint">{T("アームなし（ストロボ・ライトをベースに直付け）")}</p>}
    {arms.map((a, i) => <Card key={i} id={a} title={i + 1 + T("本目：") + EP.FAM.ARM_DB.name + ' ' + EP.armSize(a)} on onRemove={() => setArms(arms.filter((_, j) => j !== i))}>
      <Chips sm value={EP.armSize(a)} onPick={(v) => {const x = arms.slice();x[i] = idOf(v);setArms(x);}} options={EP.ARMS.map((id) => ({ v: EP.armSize(id), l: EP.armSize(id) }))} />
    </Card>)}
    <div className="size-row"><span className="t">{T("サイズ")}</span><button className="ubtn link" onClick={() => openChart('arm')}>{T("適正サイズを探そう ▭")}</button></div>
    <Chips value={size} onPick={setSize} options={EP.ARMS.map((id) => ({ v: EP.armSize(id), l: EP.armSize(id) }))} />
    <div style={{ marginTop: 12 }}><Card id={idOf(size)} title={EP.FAM.ARM_DB.name + ' ' + size} onClick={() => arms.length < EP.MAX_ARMS && setArms([...arms, idOf(size)])}
    acts={<button className="ubtn sm dark" disabled={arms.length >= EP.MAX_ARMS} onClick={() => setArms([...arms, idOf(size)])}>{T("＋ 追加")}</button>} /></div>
    <p className="hint">{T("アーム1本につきクランプが1個増えます（自動）。")}</p>
  </>;
}

/* ---------------- クランプ ---------------- */
function PanelClamp({ st, set, res }) {
  const it = res.items.find((i) => i.key === 'auto:clamp'),adj = st.adj['auto:clamp'] || 0;
  return <>
    <p className="hint">{T("クランプはボールとボールをつなぐ部品です。取付位置ごとに「アームの本数＋1」個が必要です →")} <b>{T("自動")} {res.clampAuto} {T("個")}</b></p>
    {!it && <p className="hint">{T("ストロボ・ライトまたはアームを選ぶと自動で追加されます。")}</p>}
    {it && <Card id={it.id} on={it.qty > 0} desc={T("自動 ") + res.clampAuto + (adj ? T("（調整 ") + (adj > 0 ? '+' : '') + adj + T("）") : '')}>
      <Step value={it.qty} min={0} max={20} onChange={(v) => set(EP.setQty(st, it, v))} />
      {adj !== 0 && <button className="ubtn sm" onClick={() => {const s = cl(st);delete s.adj['auto:clamp'];set(s);}}>{T("自動に戻す")}</button>}
    </Card>}
  </>;
}

/* ---------------- フロート ---------------- */
function PanelFloats({ st, set, res, openChart, go }) {
  const setQ = (id, v) => {const s = cl(st);if (v) s.floats[id] = v;else delete s.floats[id];set(s);};
  const rec = React.useMemo(() => EP.recommendFloats(st), [JSON.stringify({ ...st, floats: {}, view: 0, off: 0, mode: 0 })]);
  const sea = st.water === 'sea',uwNow = Math.round(sea ? res.totals.totalUnderwaterWeightSea : res.totals.totalUnderwaterWeightFresh),hasF = EP.FLOATS.some((id) => st.floats[id] > 0);
  const msg = uwNow < 0 ? hasF ? T("浮いてしまいます。必要に応じてフロートを調整してください。") : T("浮いてしまいます。組み合わせを変更することで総重量を変化させられます。") : null;
  useInitialScroll(null); // 開いたときは一番上（快適な範囲の表示）から
  return <>
    <div className="rec-hero"><b>{T("快適な範囲 +")}{EP.REC_RANGE.min}{T("〜+")}{EP.REC_RANGE.max}g</b><span>{sea ? T("海水") : T("淡水")}{T("でほんの少し沈む重さ。手を離しても機材がゆっくり沈み、構図に集中できます。")}</span></div>
    {!rec.arms ? <><p className="hint">{T("フロートはアームに付けます。先にアームを選んでください。")}</p><button className="ubtn block" onClick={() => go('floats', 'arms')}>{T("アームを開く")}</button></> : <>
      <p className="hint">{T("フロートなしの水中重量：")}<b className="n" style={{ fontSize: 16 }}>{fmt(Math.round(rec.base), true)}g</b>{rec.incomplete ? T("（重量未登録 ") + rec.incomplete + T(" 品目・参考）") : ''}</p>
      {msg && <div className="fit ng">{msg}</div>}
      {rec.list.length ? rec.list.map((r, i) =>
      <div key={i} role="button" tabIndex={0} className="rec-it" onClick={() => set({ ...st, floats: r.floats })}>
          <span className="rk">{i + 1}</span><span className="rn">{Object.keys(r.floats).map((f) => EP.info(f).name + ' ×' + r.floats[f]).join(T("\u3000"))}</span>
          <span className="rv n">{fmt(Math.round(r.total), true)}g</span></div>) :
      msg ? null : <div className="fit ng">{rec.base < EP.REC_RANGE.min ? T("フロートなしで +") + EP.REC_RANGE.min + T("g を下回っています（") + fmt(Math.round(rec.base), true) + T("g）") : T("今のアームでは範囲内の組み合わせがありません")}</div>}
    </>}
    <div className="size-row"><span className="t">{T("個別に選ぶ")}</span><button className="ubtn link" onClick={() => openChart('arm')}>{T("適正サイズを探そう ▭")}</button></div>
    {EP.FLOATS.map((id) => <Card key={id} id={id} on={!!st.floats[id]} desc={T("長さ ") + EP.floatLen(id) + ' × φ' + ((EP.U[id] || {}).float_width || '')} onClick={() => !st.floats[id] && setQ(id, st.sym ? 2 : 1)}
    act={{ label: T("＋ 追加"), onClick: () => setQ(id, Math.min(12, (st.floats[id] || 0) + (st.sym ? 2 : 1))) }}>
      <Step value={st.floats[id] || 0} min={0} max={12} step={st.sym ? 2 : 1} onChange={(v) => setQ(id, v)} />
    </Card>)}
  </>;
}

/* ---------------- 未登録の製品を追加 ---------------- */
function PanelAdd({ st, set, onHelp }) {
  const upC = (i, p) => {const s = cl(st);Object.assign(s.custom[i], p);set(s);};
  const del = (i) => {const s = cl(st);s.custom.splice(i, 1);set(s);};
  return <>
    <p className="hint">{T("登録されていない製品を、計算に加えます。水中に露出するかどうかで計算方法が変わります。")} <button className="ubtn link" onClick={() => onHelp && onHelp('calc')}>{T("計算方法を見る")}</button></p>
    {st.custom.map((c, i) => {const exp = c.exposed !== false;
      return <div className="cust" key={i}>
        <input className="full" type="text" placeholder={T("製品名")} value={c.name} onChange={(e) => upC(i, { name: e.target.value })} />
        <div className="full"><div className="pn" style={{ marginBottom: 4 }}>{T("水中に露出する製品ですか？")}</div>
          <Chips sm value={exp ? 'y' : 'n'} onPick={(v) => upC(i, { exposed: v === 'y' })} options={[{ v: 'y', l: T("露出する") }, { v: 'n', l: T("露出しない") }]} />
          <div className="pn" style={{ marginTop: 4 }}>{exp ? T("水に触れる製品。陸上重量と水中重量（淡水）から浮力を計算します。") : T("ハウジングの中に入る製品。体積は増えず、陸上重量がそのまま沈む側に加わります。")}</div></div>
        <input type="number" placeholder={T("陸上重量 g")} value={c.w} onChange={(e) => upC(i, { w: e.target.value })} />
        {exp && <input type="number" placeholder={T("水中重量 g（淡水）")} value={c.uw} onChange={(e) => upC(i, { uw: e.target.value })} />}
        {exp && <Toggle checked={c.buoy} onChange={(v) => upC(i, { buoy: v })}>{T("浮力の符号が反転している（浮力＋表記で入力）")}</Toggle>}
        <button className="ubtn sm full" onClick={() => del(i)}>{T("この製品を削除")}</button>
      </div>;})}
    <button className="ubtn block" onClick={() => {const s = cl(st);s.custom.push({ name: '', w: '', uw: '', buoy: false, exposed: true, qty: 1 });set(s);}}>{T("＋ 未登録の製品を追加")}</button>
    <ul className="hint" style={{ marginTop: 14, paddingLeft: 18 }}>
      <li>{T("※メーカーによっては水中重量を浮力と表現している場合があります。")}</li>
      <li>{T("※メーカーによっては浮力の符号が反転している場合があります。")}</li>
    </ul>
  </>;
}

Object.assign(window, { PanelCamera, PanelLens, PanelConverter, PanelRig, PanelRing, PanelTgLens, PanelTop, PanelStrobe, PanelLight, PanelFiber, PanelArms, PanelClamp, PanelFloats, PanelAdd });