/* app.jsx — 画面全体（v5：JP/EN共通ベース） */
const EA = window.UWEngine;
const SP = window.UW_STORE || 'uw_jp', KEY = SP + '_state_v4', FAV = SP + '_favorites';
const SHOW_PRICE = EA.SHOW_PRICE;
const DEV = !!window.UW_DEV; // 開発用の表示（不足データのタブなど）
const fresh = () => JSON.parse(JSON.stringify(EA.DEFAULT));
const load = () => {
  const d = fresh();
  try {
    const s = JSON.parse(localStorage.getItem(KEY));
    if (s && s.v === 4) {
      const m = Object.assign({}, d, s, { tg: Object.assign({}, d.tg, s.tg), ml: Object.assign({}, d.ml, s.ml) });
      m.mounts = {};EA.MOUNTS.forEach((k) => {m.mounts[k] = Object.assign(EA.emptyMount(), (s.mounts || {})[k]);});
      ['floats', 'adj', 'extra', 'off', 'visited'].forEach((k) => {if (!m[k] || typeof m[k] !== 'object') m[k] = {};});
      if (!Array.isArray(m.custom)) m.custom = [];
      // TG の前面は合計2つまで（正面＋上部のホルダー）。古い保存データで3つ以上ある場合は切り詰める
      const lz = Array.isArray(m.tg.lenses) ? m.tg.lenses : [];m.tg.lenses = lz.slice(0, m.tg.ringLight ? 1 : EA.MAX_FRONTS);
      if (m.tg.rig === 'none' && m.tg.top === 'holder') m.tg.top = 'none'; // RSバヨネットレンズホルダーは RIG が必要
      return m;
    }
  } catch (e) {}
  return d;
};

const TITLES = { camera: T("カメラ"), lens: T("レンズ・ポート"), rig: 'RIG', ring: T("リングライト"), lensTg: T("レンズ"), top: T("シューベース"), strobe: T("ストロボ"), light: T("ライト"),
  conv: T("コンバーター"), fiber: T("ストロボ接続"), arms: T("アーム"), clamp: T("クランプ"), floats: T("フロート"), add: T("未登録の製品を追加") };
const PANELS = () => ({ camera: PanelCamera, lens: PanelLens, rig: PanelRig, ring: PanelRing, lensTg: PanelTgLens, top: PanelTop, strobe: PanelStrobe, light: PanelLight,
  conv: PanelConverter, fiber: PanelFiber, arms: PanelArms, clamp: PanelClamp, floats: PanelFloats, add: PanelAdd });

function sumOf(res, pred, mode, sea) {
  const its = res.items.filter((i) => i.qty > 0 && pred(i));
  if (!its.length) return null;
  if (SHOW_PRICE && mode === 'price') {const on = its.filter((i) => !i.off);return { v: on.reduce((a, i) => a + (i.priceIncl || 0), 0), price: true };}
  return { v: its.reduce((a, i) => a + (sea ? i.sea : i.fresh), 0), miss: its.some((i) => i.missing) };
}

function componentList(st, res) {
  const E = EA,M = res.st.mounts,t = st.tg,tg = st.system === 'tg',L = [];
  const lightsOf = (strobe) => E.MOUNTS.filter((k) => M[k].pid && E.isStrobe(M[k].pid) === strobe && !(st.sym && k === 'L')).
  map((k) => (st.sym && k === 'R' ? T("左右") : E.MOUNT_NAME[k]) + T("：") + E.displayName(M[k].pid)).join(T("、"));
  if (tg) {
    const rigS = t.rig === 'none' ? T("－") : (t.rig === 'single' ? T("RSシングルグリップセット") + (t.grips > 1 ? T("＋RSスタンダードグリップ×") + (t.grips - 1) : '') : T("RSメインフレーム") + (t.multi ? T("＋マルチアングルグリップ") : t.grips ? T("＋スタンダードグリップ×") + t.grips : T("（グリップなし）"))) + (t.ballBase ? T("・ボールベース×") + t.ballBase : '');
    L.push({ k: 'rig', t: 'RIG', s: rigS, g: ['RIG', T("アクセサリー")] });
    const recv = (E.RECEIVERS.find((r) => r.id === t.receiver) || {}).label;
    L.push({ k: 'ring', t: T("リングライト"), s: t.ringLight ? E.info(t.ringLight).name + (recv ? T("（") + recv + T("）") : '') : T("－"), g: [T("リングライト")] });
    L.push({ k: 'lensTg', t: T("レンズ"), s: (t.lenses || []).length ? t.lenses.map((id) => E.info(id).name.replace(/^(WF|FIX)/, '')).join(T("、")) + (recv ? T("（") + recv + T("）") : '') : T("－"), g: [T("レンズ"), T("受け側（前面）")] });
    L.push({ k: 'top', t: T("シューベース"), s: [t.top === 'shoemount' ? T("RSシューマウント") : t.top === 'holder' ? T("RSバヨネットレンズホルダー") : t.top === 'ballbase' ? T("RSボールベース") : null, t.shoeConv !== 'none' ? E.info(t.shoeConv).name : null].filter(Boolean).join(T(" ＋ ")) || T("－"), g: [T("シューベース")] });
  }
  L.push({ k: 'strobe', t: T("ストロボ"), s: lightsOf(true) || T("－"), g: [T("ストロボ")] });
  L.push({ k: 'light', t: T("ライト"), s: lightsOf(false) || T("－"), g: [T("ライト")] });
  if (!tg) {const cv = st.ml.converter;L.push({ k: 'conv', t: T("コンバーター"), s: cv ? E.info(cv).name : T("－"), g: [T("コンバーター")] });}
  if (!tg && M.T.pid) L.push({ k: 'shoeMl', t: T("シューベース"), s: T("アクセサリーシューボールベースII（自動）"), g: [T("シューベース")], noOpen: true });
  const fb = res.items.filter((i) => i.group === T("ストロボ接続") && i.qty > 0);
  L.push({ k: 'fiber', t: T("ストロボ接続"), s: res.strobes ? fb.map((i) => i.name + '×' + i.qty).join(T("、")) : T("不要（ストロボなし）"), g: [T("ストロボ接続")] });
  const arms = (st.sym ? ['R', 'T'] : ['R', 'L', 'T']).filter((k) => M[k].arms.length).map((k) => (st.sym && k === 'R' ? T("左右") : E.MOUNT_NAME[k]) + T("：") + M[k].arms.map(E.armSize).join('+'));
  L.push({ k: 'arms', t: T("アーム"), s: arms.join(T("、")) || T("－"), g: [T("アーム")] });
  const cl = res.items.find((i) => i.key === 'auto:clamp');
  L.push({ k: 'clamp', t: T("クランプ"), s: cl ? cl.name + ' ×' + cl.qty + (cl.adjusted ? T("（手動）") : T("（自動）")) : T("－"), g: [T("クランプ")], bad: cl && cl.qty !== res.clampAuto });
  const fl = EA.FLOATS.filter((id) => st.floats[id]).map((id) => E.info(id).name.replace('HDB-', '') + '×' + st.floats[id]).join(T("、"));
  L.push({ k: 'floats', t: T("フロート"), s: fl || T("－"), g: [T("フロート")], bad: !res.floatOk, key: true });
  const sea = st.water === 'sea';
  L.forEach((x) => {x.sum = sumOf(res, (i) => x.g.includes(i.group), st.mode, sea);});
  return L;
}

/* ---------- 主要システム（カメラ／レンズ） ---------- */
function MainSystem({ st, res, open, next }) {
  const tg = st.system === 'tg',cam = EA.CAM[tg ? st.tgCamera : st.mlCamera];
  const lensOk = !tg && st.ml.lens && res.housing && EA.lensesForHousing(res.housing).includes(st.ml.lens);
  const port = res.items.filter((i) => i.group === T("レンズ・ポート") && ['port', 'ring'].includes(EA.info(i.id).cat));
  const Box = ({ k, label, value, sub, img }) =>
  <button className={'ms-box' + (next === k ? ' next' : '') + (!value ? ' empty' : '')} onClick={() => open(k)}>
      <span className="ms-img">{img ? <img src={img} alt="" /> : <span>{label}</span>}</span>
      <span className="ms-t"><span className="lbl">{label}</span><b>{value || T("選択してください")}</b>{sub && <span className="pn">{sub}</span>}</span>
      <span className="ar">{next === k ? T("選択 →") : T("変更")}</span>
    </button>;

  return (
    <section className="ms" data-screen-label={T("主要システム")}>
      <div className="ms-h">{T("主要システム")}</div>
      <div className={'ms-g' + (tg ? ' one' : '')}>
        <Box k="camera" label={T("カメラ")} value={cam && cam.name_ja} sub={res.housing ? T("ハウジング：") + res.housing.name_ja : T("ハウジングは自動で決まります")} img={res.housing && res.housing.image_url} />
        {!tg && <Box k="lens" label={T("レンズ・ポート")} value={lensOk && EA.lensName(st.ml.lens)} sub={lensOk ? port.map((i) => i.name).join(T(" ・ ")) || T("ポート未選択") : null} img={port[0] && EA.info(port[0].id).img} />}
      </div>
    </section>);

}

/* ---------- 結果 ---------- */
function Result({ st, set, res, openK, onHelp }) {
  const t = res.totals,sea = st.water === 'sea',price = SHOW_PRICE && st.mode === 'price';
  const uwRaw = sea ? t.totalUnderwaterWeightSea : t.totalUnderwaterWeightFresh,other = sea ? t.totalUnderwaterWeightFresh : t.totalUnderwaterWeightSea;
  const uw = Math.round(uwRaw); // 判定は表示と同じ整数値で行う（300g は適正、301g から重い）
  const R = 1000,pos = (v) => 50 + Math.max(-50, Math.min(50, v / R * 50)) + '%';
  const empty = !res.items.length,inRec = uw >= EA.REC_RANGE.min && uw <= EA.REC_RANGE.max;
  const hasArms = res.armPids.length > 0,hasFloats = res.items.some((i) => EA.FLOATS.includes(i.id) && i.qty > 0);
  const state = empty ? T("カメラから選択を始めましょう") : inRec ? T("快適な重量です") : uw < 0 ? T("浮いてしまいます") : uw < EA.REC_RANGE.min ? T("中性浮力に近い状態です") : uw <= 500 ? T("少し重めです。フロートを追加しましょう") : T("重めです。フロートで軽くしましょう");
  return (
    <section className="res" data-screen-label={T("結果")}>
      <div className="res-top">
        <div>
          {price ? <>
            <div className="lbl">{T("合計金額（税込）")}</div>
            <div className="uw" style={{ color: 'var(--navy)' }}><Num value={res.priceTotal} yenMode /></div>
            <div className="state">{T("カメラ・レンズ・他社純正ハウジング・付属品の価格は含まれていません")}{res.noPrice.length ? T("。価格未登録 ") + res.noPrice.length + T(" 品目も除いています") : ''}</div>
          </> : <>
            <div className="lbl">{T("水中重量（")}{sea ? T("海水") : T("淡水")}{T("）")}<span className="ref">{T("参考値")}</span></div>
            <div className={'uw ' + (inRec ? 'ok' : uw < 0 ? 'fl' : 'sk')}><Num value={uw} sign /></div>
            <div className={'state' + (inRec ? ' okc' : '')}>{state}{res.incomplete.length ? T("（重量未登録 ") + res.incomplete.length + T(" 品目を除く）") : ''}</div>
            {!sea && <div className="fresh-note">＊{T("淡水での重量です。海で使う場合は「海水」に切り替えてください。")}</div>}
          </>}
        </div>
        <div className="tgl">
          {SHOW_PRICE && <div className="water"><button aria-pressed={!price} onClick={() => set({ ...st, mode: 'weight' })}>{T("重量")}</button><button aria-pressed={price} onClick={() => set({ ...st, mode: 'price' })}>{T("価格")}</button></div>}
          {!price && <div className="water"><button aria-pressed={sea} onClick={() => set({ ...st, water: 'sea' })}>{T("海水")}</button><button aria-pressed={!sea} onClick={() => set({ ...st, water: 'fresh' })}>{T("淡水")}</button></div>}
        </div>
      </div>
      {!price && <>
        <div className="xg">
          <div className="xg-tr" />
          <div className="xg-rec" style={{ left: pos(EA.REC_RANGE.min), width: `calc(${pos(EA.REC_RANGE.max)} - ${pos(EA.REC_RANGE.min)})` }} />
          <div className="xg-recl" style={{ left: pos((EA.REC_RANGE.min + EA.REC_RANGE.max) / 2) }}>{T("快適 +")}{EA.REC_RANGE.min}{T("〜+")}{EA.REC_RANGE.max}g</div>
          {[-1000, -500, 0, 500, 1000].map((v) => <div key={v} className={'xg-tk' + (v === 0 ? ' z' : '')} style={{ left: pos(v) }}><span>{v > 0 ? '+' + v : v}</span></div>)}
          <div className="xg-pin o" style={{ left: pos(other) }} title={sea ? T("淡水") : T("海水")} />
          <div className={'xg-pin' + (Math.abs(uw) > R ? ' over' : '')} style={{ left: pos(uw) }} />
        </div>
        <div className="xg-l"><span>{T("← 浮く")}</span><span>{T("沈む →")}</span></div>
      </>}
      {!price && !empty && uw < 0 && <div className="ualert fl">⚠ <b>{hasFloats ? T("浮いてしまいます。必要に応じてフロートを調整してください。") : T("浮いてしまいます。組み合わせを変更することで総重量を変化させられます。")}</b>{T("（")}{fmt(Math.round(uw), true)}{T("g）")}
        {hasFloats && <button className="ubtn sm" onClick={() => openK('floats')}>{T("フロートを調整")}</button>}</div>}
      {!price && !empty && uw > EA.REC_RANGE.max && <div className="ualert sk"><b>{uw <= 500 ? T("少し重めです。フロートを追加しましょう。") : T("フロートを増やすと軽くなります。")}</b>+{EA.REC_RANGE.min}{T("〜+")}{EA.REC_RANGE.max}{T("g 程度にすると水中で扱いやすくなります。")}
        <button className="ubtn sm dark" onClick={() => openK(hasArms ? 'floats' : 'arms')}>{hasArms ? T("おすすめのフロートを見る") : T("アームを付けてフロートを追加")}</button></div>}
      <div className="stats">
        {price ? <>
          <div><div className="lbl">{T("水中重量（")}{sea ? T("海水") : T("淡水")}{T("）")}</div><div className="v">{fmt(Math.round(uw), true)} g</div></div>
          <div><div className="lbl">{T("陸上重量")}</div><div className="v">{fmt(Math.round(t.totalAirWeight))} g</div></div>
          <div><div className="lbl">{T("価格未登録")}</div><div className="v">{res.noPrice.length} {T("品目")}</div></div>
        </> : <>
          <div><div className="lbl">{T("陸上重量")}</div><div className="v"><Num value={t.totalAirWeight} /></div></div>
          <div><div className="lbl">{sea ? T("淡水なら") : T("海水なら")}</div><div className="v"><Num value={other} sign /></div></div>
          <div><div className="lbl">{T("重量未登録")}</div><div className="v" style={{ color: res.incomplete.length ? 'var(--warn)' : 'var(--on)' }}>{res.incomplete.length} {T("品目")}</div></div>
        </>}
      </div>
      <div className="msgs">
        {res.errors.map((m, i) => <button key={'e' + i} className="msg" onClick={() => m.go && openK(m.go)}>⚠ {m.t}{m.go && <span className="go">{T("開く →")}</span>}</button>)}
        {res.warns.map((m, i) => <button key={'w' + i} className="msg w" onClick={() => m.go && openK(m.go)}>⚠ {m.t}{m.go && <span className="go">{T("開く →")}</span>}</button>)}
        {res.recs.map((m, i) => <button key={'r' + i} className="msg i" onClick={() => m.go && openK(m.go)}>★ {m.t}<span className="go">{T("開く →")}</span></button>)}
        {res.infos.map((m, i) => <div key={'i' + i} className="msg i">{T("ⓘ")} {m.t}</div>)}
        {!price && res.incomplete.length > 0 && <div className="msg w miss-l">
          <div><b>{T("重量未登録のため計算に含めていない製品（")}{res.incomplete.length}{T("）")}</b></div>
          <ul>{res.incomplete.map((i) => <li key={i.key}><PName id={i.id}>{i.name}</PName>{i.pn && <span className="pn">{i.pn}</span>}<span className="mk">{i.w == null ? T("陸上重量なし") : T("水中重量なし")}</span></li>)}</ul>
        </div>}
      </div>
      <p className="disc">{T("※ 表示値は登録データに基づく")}<b>{T("参考値")}</b>{T("です。個体差・計測条件・付属品の有無により実際の重量とは異なります。")} {T("重量はバッテリー・SDカードなどを含む状態の値です。")}<button className="ubtn link" onClick={() => onHelp('calc')}>{T("計算方法")}</button></p>
    </section>);

}

/* ---------- 内訳 ---------- */
/* 内訳のグループ → 「変更する」で開くコンポーネント */
const editKey = (g, tg) => ({ [T("ハウジング・カメラ")]: 'camera', RIG: 'rig', [T("アクセサリー")]: 'rig', [T("リングライト")]: 'ring', [T("レンズ")]: 'lensTg', [T("受け側（前面）")]: 'lensTg',
  [T("シューベース")]: tg ? 'top' : 'strobeTop', [T("ストロボ")]: 'strobe', [T("ライト")]: 'light', [T("コンバーター")]: 'conv', [T("ストロボ接続")]: 'fiber', [T("アーム")]: 'arms', [T("クランプ")]: 'clamp',
  [T("フロート")]: 'floats', [T("レンズ・ポート")]: 'lens', [T("追加した製品")]: 'add' })[g] || null;
function Breakdown({ st, set, res, onAdd }) {
  const groups = [],price = SHOW_PRICE && st.mode === 'price',sea = st.water === 'sea',tg = st.system === 'tg';
  res.items.forEach((i) => {let g = groups.find((x) => x.n === i.group);if (!g) groups.push(g = { n: i.group, its: [] });g.its.push(i);});
  const toggleOff = (it) => {const s = JSON.parse(JSON.stringify(st));if (s.off[it.key]) delete s.off[it.key];else s.off[it.key] = 1;set(s);};
  return (
    <section className="bd" data-screen-label={T("内訳")}>
      <div className="bd-hd"><b>{T("内訳")}</b><span className="pn">{res.items.filter((i) => i.qty > 0).length} {T("品目")}</span><span className="sp" />
        {!price && <span className="pn">{T("陸上重量 ／ 水中重量（")}{sea ? T("海水") : T("淡水")}{T("）")}</span>}
        {price && <span className="pn">{T("OFFにした製品は合計から除外")}</span>}
        {Object.keys(st.adj).length > 0 && <button className="ubtn link" onClick={() => set({ ...st, adj: {} })}>{T("数量調整をリセット")}</button>}</div>
      {!groups.length && <div className="bd-empty">{T("まだ何も選択されていません。")}</div>}
      {groups.map((g) =>
      <div key={g.n} className={'bd-sec' + (price ? '' : ' nosw')}>
          <div className="bd-g">{g.n}</div>
          {g.its.map((it) =>
        <div className={'bd-row' + (it.qty ? '' : ' zero') + (price && it.off ? ' offr' : '')} key={it.key}>
              {price ? !it.priceNA ? <Toggle checked={!it.off} onChange={() => toggleOff(it)} title={T("合計に含める")} /> : <span /> : null}
              <div className="nm">{it.table === 'cameras' || it.table === 'lenses' || !it.id ? <span>{it.name}</span> : <PName id={it.id} edit={editKey(g.n, tg)}>{it.name}</PName>}{it.pn && <span className="pn">{it.pn}</span>}
                {it.tag === T("自動") && <span className="tg auto">{it.tag}</span>}{it.note && <div className="bd-note1">※ {it.note}</div>}</div>
              {it.fixed ? <span className="qx">×{it.qty}</span> : <Step value={it.qty} min={0} max={20} step={it.step} onChange={(v) => set(EA.setQty(st, it, v))} />}
              <div className="v">{price ?
            it.priceNA ? <span className="pn">{T("対象外")}</span> : it.priceIncl == null ? T("－") : <span className={it.off ? 'strike' : ''}>{yen(it.priceIncl)}</span> :
            it.included ? <span className="pn">{it.inclNote || T("UWL-24M52BY付属")}</span> : <><span className="w0">{gTxt(it.w == null ? null : it.w * it.qty)}</span><span className="sl">/</span><span className={'w1 ' + (it.missing ? '' : (sea ? it.sea : it.fresh) < 0 ? 'fl' : 'sk')}>{it.missing && it.exposed ? T("－") : gTxt(sea ? it.sea : it.fresh, true)}</span></>}</div>
              {it.fixed ? <span /> : <button className="x" aria-label={T("削除")} title={T("内訳から削除")} onClick={() => set(EA.setQty(st, it, 0))}>×</button>}
            </div>
        )}
        </div>
      )}
      <div className="bd-foot"><button className="ubtn" onClick={onAdd}>{T("＋ 製品を追加")}</button></div>
      <div className="bd-note">{price ? T("税込価格。カメラ・レンズの価格は含みません。") : T("カメラ・レンズ・ギアはハウジングの中に入るため浮力は増えず、陸上重量がそのまま沈む側に加わります。")}{T("構成で決まる製品（×数量のみの行）はコンポーネントから変更してください。")}</div>
    </section>);

}

/* ---------- ガイド ---------- */
function Guide({ onClose, tab0 }) {
  const [tab, setTab] = React.useState(typeof tab0 === 'string' ? tab0 : 'use');
  React.useEffect(() => {const f = (e) => e.key === 'Escape' && onClose();addEventListener('keydown', f);return () => removeEventListener('keydown', f);}, []);
  return (
    <div className="pop" onClick={onClose}>
      <div className="pop-b guide" onClick={(e) => e.stopPropagation()}>
        <button className="cls" onClick={onClose} aria-label={T("閉じる")}>×</button>
        <h3><span>{T("利用ガイド")}</span></h3>
        <div className="water g-tabs">{[['use', T("使い方")], ['why', T("水中重量の重要性")], ['calc', T("計算方法")]].map(([k, l]) => <button key={k} aria-pressed={tab === k} onClick={() => setTab(k)}>{l}</button>)}</div>
        {tab === 'use' && <ol className="g-ol">
          <li><b>{T("TG／ミラーレスを選ぶ")}</b> {T("ページ上部のボタンで切り替えます。")}</li>
          <li><b>{T("主要システムを選ぶ")}</b> {T("「カメラ」を押すとハウジングが自動で決まります。ミラーレスは続けて「レンズ・ポート」を選びます。")}</li>
          <li><b>{T("コンポーネントを順に選ぶ")}</b> {T("コンポーネントの一覧を押すと選択パネルが開きます（構成図は開いたまま）。「次へ」で次の項目に進みます。次に選ぶ項目は")}<span className="g-next">{T("次はこちら")}</span>{T("で示します。")}</li>
          <li><b>{T("左右対称")}</b> {T("ストロボ・ライト・アームは初期状態で左右対称です。OFFにすると右・左・上を個別に選べます。")}</li>
          <li><b>{T("構成図")}</b> {T("画像や「＋」を押すと、その部分のコンポーネントが開きます。コンポーネントを開いても構成図は残るので、見ながら選べます。")}</li>
          <li><b>{T("フロート")}</b> {T("「フロート」を開くと、水中重量を +")}{EA.REC_RANGE.min}{T("〜+")}{EA.REC_RANGE.max}{T("g にする組み合わせを提案します。押すとそのまま反映されます。")}</li>
          <li><b>{T("内訳")}</b> {T("数量の ± と × で増減・削除できます。製品名を押すと製品情報と製品ページへのリンクが表示されます。")}</li>
          {SHOW_PRICE && <li><b>{T("重量／価格")}</b> {T("価格に切り替えると税込の合計金額を表示します（カメラ・レンズは含みません）。内訳のスイッチをOFFにした製品は合計から除きます。")}</li>}
          <li><b>{T("おすすめ構成・お気に入り")}</b> {T("ページ上部のおすすめ構成を押すと一式を読み込みます。今の構成は「お気に入りに保存」で保存できます（このブラウザに保存）。")}</li>
        </ol>}
        {tab === 'why' && <div className="g-p">
          <p><b>{T("水中撮影に集中するために。")}</b></p>
          <p>{T("水中では、機材が重すぎると腕が疲れて構図が安定せず、軽すぎる（浮く）と手を離したときに機材が流され、ブレやすくなります。")}</p>
          <p>{T("ハウジング・ポート・ストロボの組み合わせに合わせてフロートを追加し、")}<b>{T("ほんの少し沈む（+")}{EA.REC_RANGE.min}{T("〜+")}{EA.REC_RANGE.max}{T("g）")}</b>{T("重さに整えると、手を離しても機材がゆっくり沈むだけで、片手でも楽に扱えます。")}</p>
          <p>{T("機材に合わせて最適な重さにして、水中撮影に没頭できるシステムを組みましょう。")}</p>
        </div>}
        {tab === 'calc' && <div className="g-p">
          <table className="pp-t"><tbody>
            <tr><th>W₀</th><td>{T("陸上重量（製品の重さ）")}</td></tr><tr><th>W₁</th><td>{T("淡水中重量（淡水 ρ=1.000 で計測した値。マイナス＝浮く）")}</td></tr>
            <tr><th>W₂</th><td>{T("海水中重量（ρ=1.025）")}</td></tr></tbody></table>
          <p>{T("浮力 F₁ ＝ W₀ − W₁（＝排水体積 V）。海水の浮力 F₂ ＝ V × 1.025。")}<br /><b>{T("W₂ ＝ W₀ − 1.025 ×（W₀ − W₁）")}</b></p>
          <p>{T("カメラ・レンズ・ギア・ハウジング内部のコンバーターは、ハウジングの中に入るため体積（浮力）は増えません。陸上重量をそのまま沈む側に加えます。")}</p>
          <p>{T("全体の水中重量は、各製品の水中重量の合計です。")}</p>
          <p className="pn">{T("登録データは計測値・公称値を含む参考値です。実際の機材では個体差や付属品により異なります。")}</p>
        </div>}
      </div>
    </div>);

}

/* ---------- おすすめ構成・お気に入り ---------- */
function Presets({ st, set, notify, onClose }) {
  const recs = EA.DB.uw_recommended_configs.filter((r) => r.system_type === st.system).sort((a, b) => a.sort_order - b.sort_order);
  const [favs, setFavs] = React.useState(() => {try {return JSON.parse(localStorage.getItem(FAV)) || [];} catch (e) {return [];}});
  React.useEffect(() => {localStorage.setItem(FAV, JSON.stringify(favs));}, [favs]);
  const mine = favs.filter((f) => f.st.system === st.system);
  const save = () => {const name = prompt(T("お気に入りの名前"), (EA.CAM[st.system === 'tg' ? st.tgCamera : st.mlCamera] || {}).name_ja || T("構成"));if (!name) return;setFavs([...favs, { id: Date.now(), name, st }]);notify(T("お気に入りに保存しました"));};
  return (
    <div className="presets">
      <div className="ps-h">{T("おすすめ構成（")}{st.system === 'tg' ? 'TG' : T("ミラーレス")}{T("）")}<span className="sp" />{onClose && <button className="x" aria-label={T("閉じる")} onClick={onClose}>×</button>}</div>
      <div className="ps-l">{recs.map((r, i) =>
        <button key={r.config_id} className="ps-c" onClick={() => {set(EA.applyConfig(r.config, st));notify(T("「") + T(r.title) + T("」を読み込みました"));}}>
          <span className="ps-n">{i + 1}</span><span><b>{T(r.title)}</b><span className="pn">{T(r.description)}</span></span></button>)}</div>
      <div className="ps-h" style={{ marginTop: 10 }}>{T("お気に入り")}<span className="sp" /><button className="ubtn sm" onClick={save}>{T("＋ 今の構成を保存")}</button></div>
      {mine.length ? <div className="ps-l">{mine.map((f) =>
        <div key={f.id} className="ps-c fav"><button className="ps-a" onClick={() => {set(JSON.parse(JSON.stringify(f.st)));notify(T("「") + f.name + T("」を読み込みました"));}}><b>{f.name}</b></button>
          <button className="x" aria-label={T("削除")} onClick={() => setFavs(favs.filter((x) => x.id !== f.id))}>×</button></div>)}</div> :
      <p className="pn">{T("保存した構成はありません")}</p>}
    </div>);

}

function Calc({ st, set, onHelp }) {
  const res = React.useMemo(() => EA.build(st), [st]);
  const stRef = React.useRef(st);stRef.current = st;
  const [open, setOpen] = React.useState(null),[chart, setChart] = React.useState(null),[toast, setToast] = React.useState(null),[pop, setPop] = React.useState(null),[psOpen, setPsOpen] = React.useState(false), [topHint, setTopHint] = React.useState(false);
  const notify = (m) => {setToast(m);clearTimeout(window.__tt);window.__tt = setTimeout(() => setToast(null), 3600);};
  const next = EA.nextStep(st, res);
  const list = componentList(st, res);
  const P = PANELS()[open];
  const sea = st.water === 'sea',price = SHOW_PRICE && st.mode === 'price',uw = sea ? res.totals.totalUnderwaterWeightSea : res.totals.totalUnderwaterWeightFresh;
  const mark = (k) => {if (!k || st.visited[k]) return st;const s = JSON.parse(JSON.stringify(st));s.visited[k] = true;return s;};
  const openK = (k) => {if (k === 'shoeMl') return;if (k === 'strobeTop') { setTopHint(true); k = 'strobe'; } else setTopHint(false);setOpen(k);};
  // パネルからの遷移：go(完了した項目, 明示的な行き先)
  const go = (done, target, newSt) => {
    const base = newSt || stRef.current,dk = done;
    let s1 = base;if (dk && !base.visited[dk]) {s1 = JSON.parse(JSON.stringify(base));s1.visited[dk] = true;}
    if (s1 !== stRef.current) set(s1);
    const nx = target || EA.nextStep(s1, EA.build(s1), done);
    setOpen(nx && nx !== done ? nx : null);
  };
  const close = () => {if (open && !['add', 'clamp', 'fiber', 'top'].includes(open)) set(mark(open));setOpen(null);};
  const setSys = (sys) => {set({ ...st, system: sys, adj: {}, off: {} });const cam = sys === 'tg' ? st.tgCamera : st.mlCamera;if (!cam) setTimeout(() => setOpen('camera'), 150);};
  const bdRef = React.useRef(),dgRef = React.useRef(),resRef = React.useRef();
  const resetAll = () => {if (confirm(T("選択をすべて解除して、最初から選び直しますか？"))) {set({ ...fresh(), system: st.system, water: st.water, mode: st.mode });setOpen('camera');}};
  const isMobile = () => window.matchMedia && window.matchMedia('(max-width: 900px)').matches;
  // ドロワー下部のボタンは PC・スマホ共通で「閉じる」ではなく「次へ」にする（mob は他で使う場合のために残している）
  const [mob, setMob] = React.useState(isMobile());
  React.useEffect(() => {
    if (!window.matchMedia) return;
    const mq = window.matchMedia('(max-width: 900px)'),f = () => setMob(mq.matches);
    f();mq.addEventListener ? mq.addEventListener('change', f) : mq.addListener(f);
    return () => {mq.removeEventListener ? mq.removeEventListener('change', f) : mq.removeListener(f);};
  }, []);
  // 「次へ」を出す項目：PC・スマホ共通で、選択の流れ（EA.flow）に入っている項目（シューベース・クランプ・ストロボ接続・未登録追加は「閉じる」のまま）
  const footNext = !!open && open !== 'floats' && EA.flow(st, res).includes(open);
  // 構成図の高さを CSS 変数に（スマホは選択パネルを構成図の下に出す）
  React.useEffect(() => {
    const el = dgRef.current;if (!el) return;
    const upd = () => document.documentElement.style.setProperty('--dgh', Math.round(el.getBoundingClientRect().height) + 'px');
    upd();let ro = null;if (window.ResizeObserver) {ro = new ResizeObserver(upd);ro.observe(el);}
    addEventListener('resize', upd);return () => {if (ro) ro.disconnect();removeEventListener('resize', upd);};
  }, []);
  // コンポーネントを開くとき、構成図が見える位置までスクロール（PCは先頭、スマホは構成図が画面上端に固定される位置）
  React.useEffect(() => {
    if (!open || !dgRef.current) return;
    const el = dgRef.current,top = el.getBoundingClientRect().top + window.scrollY;
    window.scrollTo({ top: isMobile() ? Math.max(0, top) : 0, behavior: 'smooth' });
  }, [open]);
  const toResult = () => {const el = resRef.current;if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - (isMobile() ? (dgRef.current ? dgRef.current.getBoundingClientRect().height : 0) + 8 : 12), behavior: 'smooth' });};
  const uwColor = uw >= EA.REC_RANGE.min && uw <= EA.REC_RANGE.max ? 'var(--on)' : uw < 0 ? 'var(--float)' : 'var(--sink)';
  return (
    <PopCtx.Provider value={setPop}>
      <div className="hero">
        <div className="hero-tools">
          <button className="ht-btn" onClick={() => setPsOpen(!psOpen)} aria-expanded={psOpen} title={T("おすすめ構成・お気に入り")}><span className="ic">★</span><span className="tx">{T("おすすめ構成")}</span></button>
          <button className="ht-btn" onClick={onHelp} title={T("利用ガイド")}><span className="ic">{T("？")}</span><span className="tx">{T("利用ガイド")}</span></button>
          {psOpen && <><div className="ps-scrim" onClick={() => setPsOpen(false)} /><div className="ps-pop"><Presets st={st} set={(s) => {set(s);setOpen(null);setPsOpen(false);}} notify={notify} onClose={() => setPsOpen(false)} /></div></>}
        </div>
        <div className="pg-ttl"><h1>UNDERWATER WEIGHT CALCULATOR SYSTEM</h1><p>{T("水中重量計算システム")}</p><div className="ul" />
          <p className="pg-d">{T("ハウジング・ポート・ストロボ・アームを組み合わせて、水中での重さを計算します。フロートで +")}{EA.REC_RANGE.min}{T("〜+")}{EA.REC_RANGE.max}{T("g に整えると、水中で機材が扱いやすくなります。")}</p>
          <p className="pg-d pg-note">{T("※ 計算結果はあくまで目安です。製造時の個体差や使用環境、経年劣化などにより、実際の重量にはばらつきがあります。")}</p>
        </div>
        <div className="sys">
          <button aria-pressed={st.system === 'tg'} onClick={() => setSys('tg')}>TG</button>
          <button aria-pressed={st.system === 'mirrorless'} onClick={() => setSys('mirrorless')}>{T("ミラーレス")}</button>
        </div>
      </div>
      <div className="calc-grid">
        <div className="g-ms ms-wrap"><MainSystem st={st} res={res} open={openK} next={next} /></div>
        <div className="g-dg" ref={dgRef}>
          <Diagram st={st} res={res} onOpen={openK} />
          <div className="dg-reset"><button className="ubtn sm" onClick={resetAll}>{T("リセット")}</button></div>
        </div>
        <div className="g-res" ref={resRef}><Result st={st} set={set} res={res} openK={openK} onHelp={onHelp} /></div>
        <div className="g-cl">
          <div className="cl" data-screen-label={T("コンポーネント")}>
            <div className="cl-h">{T("コンポーネント")}</div>
            {list.map((x) =>
            <button className={'ci' + (next === x.k ? ' next' : '') + (x.key ? ' key' : '') + (x.noOpen ? ' sub' : '')} key={x.k} onClick={() => openK(x.k)}>
                <span className="t">{x.t}{x.bad && <span className="bad">!</span>}{next === x.k && <span className="nextb">{T("次はこちら")}</span>}</span>
                <span className="s">{x.s}</span>
                <span className={'d ' + (x.sum ? x.sum.price ? '' : x.sum.miss ? 'miss' : x.sum.v < 0 ? 'fl' : 'sk' : '')}>{x.sum ? x.sum.price ? yen(x.sum.v) : fmt(Math.round(x.sum.v), true) + 'g' : ''}</span>
                <span className="ar">{x.noOpen ? '' : T("→")}</span>
              </button>
            )}
            <div className="cl-f">
              <button className="ubtn block" onClick={() => setOpen('add')}>{T("＋ 未登録の製品を追加")}</button>
            </div>
          </div>
        </div>
        <div className="g-bd" ref={bdRef}><Breakdown st={st} set={set} res={res} onAdd={() => setOpen('add')} /></div>
      </div>
      <div className="bar">
        <div className="l"><span className="v" style={{ color: price ? 'var(--navy)' : uwColor }}>{price ? <Num value={res.priceTotal} yenMode /> : <Num value={uw} sign />}</span>
          <small>{price ? T("税込（カメラ・レンズ除く）") : (sea ? T("海水") : T("淡水")) + T("・参考値")}</small></div>
        <button className="r" onClick={() => {const el = bdRef.current;if (el) window.scrollTo({ top: el.getBoundingClientRect().top + scrollY - 12, behavior: 'smooth' });}}>{T("内訳を見る")}</button>
      </div>
      {P && <Drawer title={TITLES[open]} onClose={close}
      footer={<><div className="sum">{price ? T("合計（税込）") : T("水中重量（") + (sea ? T("海水") : T("淡水")) + T("）")}<b style={{ color: price ? 'var(--navy)' : uwColor }}>{price ? <Num value={res.priceTotal} yenMode /> : <Num value={uw} sign />}</b></div>
          <button className="ubtn dark" style={{ minWidth: 120 }} onClick={() => {if (open === 'floats') {close();setTimeout(toResult, 80);} else if (footNext) go(open);else close();}}>{open === 'floats' ? T("構成を確認") : footNext ? T("次へ") : T("閉じる")}</button></>}>
        <P key={open + st.system} st={st} set={set} res={res} openChart={setChart} go={go} notify={notify} topHint={topHint} onHelp={onHelp} />
      </Drawer>}
      {chart && <SizeChart kind={chart} onClose={() => setChart(null)} />}
      {pop && <ProductPop id={pop.id || pop} onClose={() => setPop(null)} priceMode={price} onEdit={pop.edit ? () => {const k = pop.edit;setPop(null);openK(k);} : null} />}
      {toast && <div className="utoast">{toast}</div>}
    </PopCtx.Provider>);

}

function Missing() {
  const list = React.useMemo(() => EA.missingList(), []),groups = [...new Set(list.map((x) => x.group))];
  const csv = () => {
    const rows = [['group', 'id', 'product_number', 'name', 'missing', 'weight_g', 'underwater_weight_g']].concat(list.map((x) => [x.group, x.id, x.pn || '', x.name, x.missing.join('/'), '', '']));
    const b = new Blob(['\uFEFF' + rows.map((r) => r.map((v) => /[",]/.test(v) ? '"' + String(v).replace(/"/g, '""') + '"' : v).join(',')).join('\r\n')], { type: 'text/csv' });
    const a = document.createElement('a');a.href = URL.createObjectURL(b);a.download = 'uw_missing.csv';a.click();
  };
  return (
    <div className="miss-wrap" data-screen-label={T("不足データ")}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '20px 0 14px' }}>
        <p className="hint" style={{ margin: 0, flex: 1 }}>{T("計算に使う製品のうち、重量が未登録のもの")} {list.length} {T("件。カメラ・レンズ・ギアは陸上重量のみ必要です。")}</p>
        <button className="ubtn" onClick={csv}>{T("CSVで書き出す")}</button>
      </div>
      <table className="mt"><thead><tr><th>{T("製品")}</th><th>{T("ID ／ 製品番号")}</th><th>{T("不足")}</th></tr></thead>
        <tbody>{groups.map((g) => <React.Fragment key={g}><tr><td className="g" colSpan={3}>{g}{T("（")}{list.filter((x) => x.group === g).length}{T("）")}</td></tr>
          {list.filter((x) => x.group === g).map((x) => <tr key={x.id}><td>{x.name}</td><td className="pn">{x.id}{x.pn && x.pn !== x.id ? ' / ' + x.pn : ''}</td><td style={{ color: 'var(--warn)' }}>{x.missing.join(T("・"))}</td></tr>)}</React.Fragment>)}</tbody></table>
    </div>);

}

/* 開発用：このブラウザで押した製品の回数（全ユーザーの集計は Google アナリティクスのイベント uw_select） */
function Counts() {
  const [c, setC] = React.useState(uwTrackCounts);
  const rows = Object.keys(c).map((name) => ({ name, n: c[name] })).sort((a, b) => b.n - a.n);
  return <div className="miss-wrap">
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '20px 0 14px' }}>
      <p className="hint" style={{ margin: 0, flex: 1 }}>{T("このブラウザで製品カード・追加ボタンを押した回数です。全ユーザーの集計は Google アナリティクスのイベント「uw_select」で確認できます。")}</p>
      <button className="ubtn" onClick={() => {localStorage.removeItem((window.UW_STORE || 'uw_jp') + '_select_counts');setC({});}}>{T("リセット")}</button>
    </div>
    <table className="mt"><thead><tr><th>{T("製品名")}</th><th>{T("回数")}</th></tr></thead>
      <tbody>{rows.map((r) => <tr key={r.name}><td>{r.name}</td><td className="n">{r.n}</td></tr>)}</tbody></table>
    {!rows.length && <p className="hint" style={{ marginTop: 12 }}>{T("まだ記録がありません")}</p>}
  </div>;
}

function App() {
  const [st, setSt] = React.useState(load);
  const [tab, setTab] = React.useState(() => localStorage.getItem(SP + '_tab') || 'calc');
  const [help, setHelp] = React.useState(false); // false／true／開くタブ名（'calc' など）
  React.useEffect(() => {localStorage.setItem(KEY, JSON.stringify(st));}, [st]);
  React.useEffect(() => {localStorage.setItem(SP + '_tab', tab);}, [tab]);
  return (
    <>
      {/* 開発用ツール（不足データなど）。公開時は HTML の UW_CONFIG.devTools を false にすると消える */}
      {DEV && <div className="devbar"><span className="tg">{T("開発用")}</span>
        <button aria-pressed={tab === 'calc'} onClick={() => setTab('calc')}>{T("計算ツール")}</button><button aria-pressed={tab === 'miss'} onClick={() => setTab('miss')}>{T("不足データ")}</button><button aria-pressed={tab === 'count'} onClick={() => setTab('count')}>{T("選択回数")}</button>
        <span className="pn">{T("公開時は UW_CONFIG.devTools: false で非表示")}</span></div>}
      {!DEV || tab === 'calc' ? <Calc st={st} set={setSt} onHelp={(t) => setHelp(typeof t === 'string' ? t : true)} /> : tab === 'count' ? <Counts /> : <Missing />}
      {help && <Guide tab0={help} onClose={() => setHelp(false)} />}
    </>);

}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);