/* ui.jsx — 共通UI部品（v4） */
const E = window.UWEngine;
const fmt = (n, sign) => n == null ? '—' : (sign && n > 0 ? '+' : '') + (Math.round(n * 10) / 10).toLocaleString('ja-JP');
const yen = (n) => '¥' + Math.round(n).toLocaleString('ja-JP');
const gTxt = (v, sign) => v == null ? T("－") : fmt(Math.round(v * 10) / 10, sign) + 'g';

/* 数字がテレテレと変わる（値が変わったときだけ短くアニメーション） */
function useCountUp(target, ms = 480) {
  const [v, setV] = React.useState(target);
  const from = React.useRef(target),tm = React.useRef([]);
  React.useEffect(() => {
    const a = from.current,b = target;tm.current.forEach(clearTimeout);tm.current = [];
    if (a === b || document.hidden || window.matchMedia('(prefers-reduced-motion: reduce)').matches) {from.current = b;setV(b);return;}
    const N = 14;
    for (let i = 1; i <= N; i++) tm.current.push(setTimeout(() => {const p = i / N,e = 1 - Math.pow(1 - p, 3),x = i === N ? b : a + (b - a) * e;from.current = x;setV(x);}, ms / N * i));
    return () => tm.current.forEach(clearTimeout);
  }, [target]);
  return v;
}
function Num({ value, sign, unit = 'g', yenMode, className }) {
  const v = useCountUp(value || 0);
  const [bump, setBump] = React.useState(0);const prev = React.useRef(value);
  React.useEffect(() => {if (prev.current !== value) {setBump((b) => b + 1);prev.current = value;}}, [value]);
  return <span key={bump} className={'num-anim ' + (className || '')}>{yenMode ? yen(v) : <>{fmt(Math.round(v), sign)}{unit && <small>{unit}</small>}</>}</span>;
}

function Step({ value, min = 0, max = 99, step = 1, onChange }) {
  return (
    <span className="step" onClick={(e) => e.stopPropagation()}>
      <button aria-label={T("減らす")} disabled={value <= min} onClick={() => onChange(Math.max(min, value - step))}>−</button>
      <span>{value}</span>
      <button aria-label={T("増やす")} disabled={value >= max} onClick={() => onChange(Math.min(max, value + step))}>+</button>
    </span>);

}

function Toggle({ checked, disabled, onChange, children, title }) {
  return (
    <label className={'sw' + (disabled ? ' dis' : '')} title={title} onClick={(e) => e.stopPropagation()}>
      <input type="checkbox" checked={!!checked} disabled={disabled} onChange={(e) => onChange(e.target.checked)} /><i />{children}
    </label>);

}

function Chips({ options, value, onPick, sm, qty }) {
  return (
    <div className={'chips' + (sm ? ' sm' : '')}>
      {options.map((o) =>
      <button key={o.v} className={'chip' + (value === o.v ? ' on' : '') + (o.x ? ' x' : '')} disabled={o.x} title={o.title}
      onClick={(e) => {e.stopPropagation();onPick(o.v);}}>
          {o.l}{qty && qty[o.v] ? <span className="q">{qty[o.v]}</span> : null}
        </button>
      )}
    </div>);

}

/* 製品POP（名前を押すと表示。リンクは直接遷移せず、ここから開く） */
const PopCtx = React.createContext(() => {});
/* PName：製品名を押すと製品POP。edit＝「変更する」で開くコンポーネント（内訳から開いたとき） */
function PName({ id, children, className, edit }) {
  const open = React.useContext(PopCtx);
  if (!id) return <span className={className}>{children}</span>;
  return <button className={'pname ' + (className || '')} onClick={(e) => {e.stopPropagation();open(edit ? { id, edit } : id);}}>{children}</button>;
}

/* ===== 製品の選択回数の集計 =====
 * 製品カード・追加ボタンを押すたびに記録する。
 *   1) Google アナリティクス（サイト共通の gtag）にイベント「uw_select」を送る … 全ユーザーの集計はこちら（GA4 の「イベント」→ uw_select）
 *      item_id＝製品名（日本語名。EN版でも日本語名にそろえて集計できるようにする）／item_code＝製品ID／uw_action／uw_system／uw_lang
 *   2) このブラウザの localStorage にも回数を保存 … 開発用バーの「選択回数」で確認（自分の操作の確認用）
 * gtag が無い環境（ローカルなど）では 1) は何もしない。 */
const TRACK_KEY = (window.UW_STORE || 'uw_jp') + '_select_counts';
function uwTrack(id, action, system) {
  if (!id) return;
  const r = (E.info(id) || {}).row || {},name = r.name_ja || (E.info(id) || {}).name || id; // 集計のキーは製品名（日本語名）
  try {const c = JSON.parse(localStorage.getItem(TRACK_KEY) || '{}');c[name] = (c[name] || 0) + 1;localStorage.setItem(TRACK_KEY, JSON.stringify(c));} catch (e) {}
  try {if (typeof window.gtag === 'function') window.gtag('event', 'uw_select', { item_id: name, item_name: name, item_code: id, uw_action: action || 'select', uw_system: system || '', uw_lang: window.UW_LANG || 'ja' });} catch (e) {}
}
function uwTrackCounts() {try {return JSON.parse(localStorage.getItem(TRACK_KEY) || '{}');} catch (e) {return {};}}

function ProductPop({ id, onClose, priceMode, onEdit }) {
  React.useEffect(() => {const f = (e) => e.key === 'Escape' && onClose();addEventListener('keydown', f);return () => removeEventListener('keydown', f);}, []);
  const i = E.info(id),inside = i.table === 'cameras' || i.table === 'lenses' || ['gear', 'converter_ttl', 'converter_manual'].includes(i.cat);
  return (
    <div className="pop" onClick={onClose}>
      <div className="pop-b pp" onClick={(e) => e.stopPropagation()}>
        <button className="cls" onClick={onClose} aria-label={T("閉じる")}>×</button>
        <div className="pp-g">
          <div className="pp-img">{i.img ? <img src={i.img} alt="" /> : i.noPhoto ? null : <span>{T("画像準備中")}</span>}</div>
          <div>
            <div className="pn">{i.pn || T("製品番号 未登録")}</div>
            <div className="pp-n">{i.name}</div>
            <table className="pp-t"><tbody>
              <tr><th>{T("陸上重量")}</th><td>{gTxt(i.w)}</td></tr>
              {!inside && <tr><th>{T("水中重量（淡水）")}</th><td>{gTxt(i.u, true)}</td></tr>}
              {i.note && <tr><th>※</th><td className="pn" style={{ fontFamily: 'inherit' }}>{i.note}</td></tr>}
              {priceMode && E.SHOW_PRICE && <tr><th>{T("価格（税込）")}</th><td>{i.price == null ? T("－") : yen(i.price * E.TAX)}</td></tr>}
            </tbody></table>
          </div>
        </div>
        <div className={'pp-l' + (onEdit ? ' two' : '')}>
          {i.url ? <a className="ubtn" href={i.url} target="_blank" rel="noopener">{T("製品ページ ↗")}</a> : <span className="pn">{T("製品ページは未登録です")}</span>}
          {onEdit && <button className="ubtn dark" onClick={onEdit}>{T("変更する")}</button>}
        </div>
      </div>
    </div>);

}

/* カード：左に製品画像（DBの image_url）、右に名称・説明・重量 */
/* act＝カード右側のボタン { label, onClick, disabled }。カードを押したときも同じ動作。押すと選択回数を記録（uwTrack） */
function Card({ id, on, dis, onClick, title, desc, rec, none, noWeight, children, badge, onRemove, acts, act }) {
  const i = id ? E.info(id) : null;
  const click0 = onClick;
  onClick = click0 && id ? () => {if (!on) uwTrack(id, 'card');click0();} : click0;
  if (act && !acts) acts = <button className={'ubtn sm' + (act.ghost ? '' : ' dark')} disabled={dis || act.disabled} onClick={() => {if (id) uwTrack(id, 'button');act.onClick();}}>{act.label}</button>;
  const inside = i && (i.table === 'cameras' || i.table === 'lenses' || ['gear', 'converter_ttl', 'converter_manual'].includes(i.cat));
  return (
    <div role="button" tabIndex={dis ? -1 : 0} aria-pressed={!!on} className={'ucard' + (on ? ' on' : '') + (dis ? ' dis' : '') + (acts ? ' has-acts' : '')}
    onClick={dis ? undefined : onClick} onKeyDown={(e) => {if (!dis && (e.key === 'Enter' || e.key === ' ')) {e.preventDefault();onClick && onClick();}}}>
      {onRemove && <button className="card-x" aria-label={T("外す")} title={T("外す")} onClick={(e) => {e.stopPropagation();onRemove();}}>×</button>}
      <div className={'img' + (none ? ' none' : '')}>
        {none || i && i.noPhoto ? none ? '—' : '' : i && i.img ? <img src={i.img} alt="" loading="lazy" onError={(e) => {e.target.style.display = 'none';}} /> : <span className="ph">{T("画像")}<br />{T("準備中")}</span>}
      </div>
      <div className="bdy">
        <div className="nm">{i && !title ? <PName id={id}>{i.name}</PName> : title}{rec && <span className="rec">{T("おすすめ")}</span>}{badge}</div>
        {i && i.pn && <div className="pn">{i.pn}</div>}
        {desc && <div className="ds">{desc}</div>}
        {i && !noWeight && <div className="wt">{T("陸上")} {gTxt(i.w)}{!inside && <> {T("水中")} {gTxt(i.u, true)}</>}</div>}
        {children && <div className="row2" onClick={(e) => e.stopPropagation()}>{children}</div>}
      </div>
      {acts && <div className="acts" onClick={(e) => e.stopPropagation()}>{acts}</div>}
    </div>);

}

/* フロート：長さごとの上限本数と、混ぜる場合の組み合わせを分けて表示 */
function capSummary(size) {
  const pats = E.CAP[size] || [];
  const only = len => Math.max(0, ...pats.filter(p => p.every(x => x === len)).map(p => p.length));
  const mixed = pats.filter(p => p.includes(40) && p.includes(65)).map(p => ({ n40: p.filter(x => x === 40).length, n65: p.filter(x => x === 65).length }));
  const tot = Math.max(0, ...pats.map(p => p.reduce((a, b) => a + b, 0)));
  return { m40: only(40), m65: only(65), mixed, tot };
}
function Bar({ n, len }) { return <span className="fbar">{Array.from({ length: n }).map((_, i) => <i key={i} className={len === 65 ? 'l' : 's'} />)}</span>; }
function FloatChart({ FL }) {
  return <>
    <table className="ct"><thead><tr><th>{T("サイズ")}</th><th>{T("有効長")}</th><th>{T("長さ 40mm")}</th><th>{T("長さ 65mm")}</th><th>{T("長さを混ぜる場合")}</th></tr></thead>
      <tbody>{E.ARMS.map(id => { const s = E.armSize(id), c = capSummary(s), d = E.DIM[id] || {};
        return <tr key={id}><td><b>{s}</b><div className="pn">{id}</div></td><td className="n">{d.effective_mm ? d.effective_mm + 'mm' : '–'}</td>
          <td><Bar n={c.m40} len={40} /><div className="n">{c.m40}{T("本まで")}</div></td>
          <td><Bar n={c.m65} len={65} /><div className="n">{c.m65 ? c.m65 + T("本まで") : '–'}</div></td>
          <td className="l">{c.mixed.length ? c.mixed.map((m, k) => <div key={k} className="mixr"><Bar n={m.n65} len={65} /><Bar n={m.n40} len={40} /> <span className="pn">65×{m.n65} + 40×{m.n40}</span></div>) : '–'}</td></tr>; })}</tbody></table>
    <p className="pop-n">{T("65mm は 40mm の約1.6本分の長さです。アームにおさまる合計の長さで判定しています。")} {T("複数のアームがある場合は、フロートを各アームに振り分けて装着できるかを判定します。")}</p>
    <table className="ct" style={{ marginTop: 18 }}><thead><tr><th>{T("フロート")}</th><th>{T("長さ × 太さ")}</th><th>{T("陸上 / 水中")}</th></tr></thead>
      <tbody>{FL.map(f => <tr key={f.id}><td className="l">{f.name}<div className="pn">{f.id}</div></td>
        <td className="n">{(E.U[f.id] || {}).float_length} × φ{(E.U[f.id] || {}).float_width}</td><td className="n">{gTxt(f.w)} / {gTxt(f.u, true)}</td></tr>)}</tbody></table>
  </>;
}
function FiberChart() {
  const arms = E.ARMS.map(id => ({ id, s: E.armSize(id), d: E.DIM[id] || {} }));
  const GUIDE = { S: T("直付け～アームS 1本"), M: T("アームM 1本～S 2本"), L: T("アームL・M 2本以上") };
  return <>
    <table className="ct"><thead><tr><th>{T("サイズ")}</th><th>{T("製品")}</th><th>{T("全長")}</th><th>{T("対応するアーム構成の目安")}</th></tr></thead>
      <tbody>{E.FIBER.map(f => { const i = E.info(f.pid), d = E.DIM[f.pid] || {};
        return <tr key={f.pid}><td><b>{f.size}</b></td><td className="l">{i.name}<div className="pn">{i.pn}</div></td><td className="n">{d.length_mm ? d.length_mm + 'mm' : '–'}</td><td className="l">{GUIDE[f.size] || '–'}</td></tr>; })}</tbody></table>
    <table className="ct" style={{ marginTop: 18 }}><thead><tr><th>{T("アーム")}</th><th>{T("全長")}</th><th>{T("有効長")}</th></tr></thead>
      <tbody>{arms.map(a => <tr key={a.id}><td className="l">{E.info(a.id).name}<div className="pn">{a.id}</div></td><td className="n">{a.d.length_mm ? a.d.length_mm + 'mm' : '–'}</td><td className="n">{a.d.effective_mm ? a.d.effective_mm + 'mm' : '–'}</td></tr>)}</tbody></table>
    <p className="pop-n">{T("ケーブルは、ハウジングの光出力口からストロボまでの距離（アームの有効長の合計＋余裕）より長いものを選んでください。目安は実際の取り回しで変わります。")}</p>
  </>;
}
function SizeChart({ kind, onClose }) {
  React.useEffect(() => {const f = (e) => e.key === 'Escape' && onClose();addEventListener('keydown', f);return () => removeEventListener('keydown', f);}, []);
  const FL = E.FLOATS.map((id) => E.info(id));
  return (
    <div className="pop" onClick={onClose}>
      <div className="pop-b" onClick={(e) => e.stopPropagation()}>
        <button className="cls" onClick={onClose} aria-label={T("閉じる")}>×</button>
        <h3><span>{T("サイズチャート")}</span></h3>
        {kind === 'fiber' ? <FiberChart /> : <FloatChart FL={FL} />}
      </div>
    </div>);

}

function Drawer({ title, onClose, footer, children, back = T("コンポーネント") }) {
  React.useEffect(() => {const f = (e) => e.key === 'Escape' && onClose();addEventListener('keydown', f);return () => removeEventListener('keydown', f);}, []);
  return (
    <aside className="dw" role="dialog" aria-label={title}>
      <div className="dw-top"><button onClick={onClose}>‹ {back}</button><button className="dw-x" onClick={onClose} aria-label={T("閉じる")} title={T("閉じる")}>×</button></div>
      <div className="dw-t">{title}</div>
      <div className="dw-b">{children}</div>
      <div className="dw-f">{footer}</div>
    </aside>);

}

/* 左右対称スイッチ（ストロボ・ライト・アーム共通） */
function SymSwitch({ st, set }) {
  return <div className="sym"><Toggle checked={st.sym} onChange={(v) => set(E.setSym(st, v))}>{T("左右対称")}</Toggle><span className="pn">{T("ONのときは右と左に同じものを付けます")}</span></div>;
}

Object.assign(window, { uwTrack, uwTrackCounts, fmt, yen, gTxt, useCountUp, Num, Step, Toggle, Chips, PopCtx, PName, ProductPop, Card, SizeChart, Drawer, SymSwitch });