/* =============================================================
   Cight 전문·부가 렌즈 가격표 — 단일 용도 페이지 앱
   하나의 카테고리만 렌더링하고, 상단 탭은 다른 용도 페이지로
   이동하는 링크로 동작한다. window.SPEC_PAGE_ID 로 페이지 결정.
   데이터(spec_data.js) + compare/styles.css + spec_extra.css 공유.
   ============================================================= */
const SPEC_LANG0 = (() => { try {
  const p = new URLSearchParams(location.search).get('lang');
  const v = (p || localStorage.getItem('cight_lang') || 'ko');
  return ['ko', 'en', 'ja', 'zh'].includes(v) ? v : 'ko';
} catch (e) { return 'ko'; } })();
const sTr = (v, lang) => (v && typeof v === 'object' && !Array.isArray(v)) ? (v[lang] != null ? v[lang] : v.ko) : (v || '');
const sWon = (n) => (n == null ? '–' : n.toLocaleString('ko-KR'));
const SPEC_LOGO = () => (window.__resources && window.__resources.logo_teal) || 'assets/cight_logo_teal.png';
const specRef = (id) => (window.__resources && window.__resources['ref_' + id]) || ('spec/refs/' + id + '.jpg');

/* 용도별 페이지 ↔ 파일명 매핑 (같은 폴더에 위치) */
const SPEC_PAGE_FILES = {
  office:     'Cight 사무용·업무용 렌즈 가격표.html',
  glare:      'Cight 눈부심·운전 렌즈 가격표.html',
  focus:      'Cight 초점정렬 렌즈 가격표.html',
  kids:       'Cight 어린이 근시 렌즈 가격표.html',
  ultralight: 'Cight 초경량·방탄 렌즈 가격표.html',
  fitting:    'Cight 안경 피팅 가격표.html',
};

function SPEC_Lightbox({ imgs, i, setI, onClose }) {
  React.useEffect(() => {
    if (i == null) return;
    const k = (e) => {
      if (e.key === 'Escape') onClose();
      else if (e.key === 'ArrowRight') setI((i + 1) % imgs.length);
      else if (e.key === 'ArrowLeft') setI((i - 1 + imgs.length) % imgs.length);
    };
    window.addEventListener('keydown', k); return () => window.removeEventListener('keydown', k);
  }, [i]);
  if (i == null) return null;
  return (
    <div className="spec-lb" onClick={onClose}>
      <button className="spec-lb-x" onClick={onClose} aria-label="close">✕</button>
      <button className="spec-lb-nav prev" onClick={(e) => { e.stopPropagation(); setI((i - 1 + imgs.length) % imgs.length); }} aria-label="prev">‹</button>
      <img className="spec-lb-img" src={specRef(imgs[i])} alt="" onClick={(e) => e.stopPropagation()} />
      <button className="spec-lb-nav next" onClick={(e) => { e.stopPropagation(); setI((i + 1) % imgs.length); }} aria-label="next">›</button>
      <span className="spec-lb-count">{(i + 1) + ' / ' + imgs.length}</span>
    </div>
  );
}

function SPEC_Rail({ refs, lang }) {
  const [i, setI] = React.useState(null);
  if (!refs || !refs.length) return null;
  return (
    <div className="spec-rail">
      <span className="spec-rail-lab">{sTr(window.SPEC_UI.refLab, lang)}</span>
      <div className="spec-rail-thumbs">
        {refs.map((r, k) => (
          <button className="spec-thumb" key={k} onClick={() => setI(k)}><img src={specRef(r)} alt="" loading="lazy" /></button>
        ))}
      </div>
      <SPEC_Lightbox imgs={refs} i={i} setI={setI} onClose={() => setI(null)} />
    </div>
  );
}

function SPEC_LangSwitch({ lang, setLang }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  const cur = window.SPEC_LANGS.find(l => l.id === lang) || window.SPEC_LANGS[0];
  React.useEffect(() => {
    if (!open) return;
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    document.addEventListener('mousedown', onDoc); document.addEventListener('keydown', onKey);
    return () => { document.removeEventListener('mousedown', onDoc); document.removeEventListener('keydown', onKey); };
  }, [open]);
  return (
    <div className={"cmp-lang" + (open ? " open" : "")} ref={ref}>
      <button type="button" className="cmp-lang-trigger" aria-haspopup="listbox" aria-expanded={open} onClick={() => setOpen(o => !o)}>
        <svg className="cmp-lang-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" aria-hidden="true"><circle cx="12" cy="12" r="9" /><path d="M3 12h18" /><path d="M12 3c2.6 2.4 4 5.6 4 9s-1.4 6.6-4 9c-2.6-2.4-4-5.6-4-9s1.4-6.6 4-9z" /></svg>
        <span className="cmp-lang-flag">{cur.flag}</span><span className="cmp-lang-cur">{cur.native}</span>
        <svg className="cmp-lang-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6" /></svg>
      </button>
      {open && (
        <ul className="cmp-lang-menu" role="listbox">
          {window.SPEC_LANGS.map(l => (
            <li key={l.id} role="option" aria-selected={lang === l.id} className={"cmp-lang-opt" + (lang === l.id ? " on" : "")} onClick={() => { setLang(l.id); setOpen(false); }}>
              <span className="cmp-lang-flag">{l.flag}</span><span className="cmp-lang-name">{l.native}</span>
              {lang === l.id && <svg className="cmp-lang-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M5 12l5 5L20 7" /></svg>}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

function SPEC_PriceCol({ col, idx, tierId, lang, premium, group, axes, onImgClick }) {
  const U = window.SPEC_UI;
  const prices = (col.prices && col.prices[tierId]) || [];
  return (
    <div className={"cmp-col spec-col" + (premium ? " premium" : "")}>
      <div className="cmp-chd spec-chd">
        {col.step != null ? <span className="spec-step">STEP {col.step}</span> : null}
        {group ? <span className="spec-group">{group}</span> : null}
        <span className="spec-name">{col.name}</span>
        {col.kr ? <span className="spec-kr">{sTr(col.kr, lang)}</span> : null}
      </div>
      {(col.stats && axes) ? (
        <div className="spec-stats">
          {axes.map((ax, ai) => (
            <div className="spec-stat-row" key={ai}>
              <span className="spec-stat-lb">{sTr(ax, lang)}</span>
              <span className="spec-pips" aria-hidden="true">
                {[0, 1, 2, 3, 4].map(n => (
                  <i key={n} className={"spec-pip" + (n < col.stats[ai] ? " on" : "")} />
                ))}
              </span>
            </div>
          ))}
        </div>
      ) : null}
      {col.img ? (
        <button type="button" className="spec-colimg" onClick={() => onImgClick && onImgClick(col.img)}>
          <img src={specRef(col.img)} alt="" loading="lazy" />
          {col.imgCap ? <span className="spec-colimg-cap">{sTr(col.imgCap, lang)}</span> : null}
        </button>
      ) : null}
      <div className="spec-body">
        <div className="spec-feat">{sTr(col.feat, lang)}</div>
        <div className="spec-prices">
          {idx.map((ix, i) => {
            const v = prices[i];
            return (
              <div className={"spec-prow" + (v == null ? " off" : "")} key={i}>
                <span className="spec-pidx">{ix}</span>
                <span className="spec-pval">{v == null ? '–' : sWon(v)}</span>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

function SPEC_Lens({ cat, lang }) {
  const U = window.SPEC_UI;
  const multi = cat.tiers.length > 1;
  const [tier, setTier] = React.useState(cat.tiers[0].id);
  const [lb, setLb] = React.useState(null);
  React.useEffect(() => { setTier(cat.tiers[0].id); }, [cat.id]);
  const allCols = cat.cols.map(c => ({ c, group: null }))
    .concat(cat.extra ? cat.extra.cols.map(c => ({ c, group: sTr(cat.extra.label, lang) })) : []);
  const colImgs = allCols.map(o => o.c.img).filter(Boolean);
  const openImg = (id) => setLb(colImgs.indexOf(id));
  const maxStep = Math.max(0, ...cat.cols.map(c => c.step || 0));
  return (
    <React.Fragment>
      <div className="cmp-prog spec-prog">
        {multi ? (
          <span className="spec-tiers">
            {cat.tiers.map(t => (
              <button key={t.id} className={"spec-tier" + (tier === t.id ? " on" : "")} onClick={() => setTier(t.id)}>{sTr(t.label, lang)}</button>
            ))}
          </span>
        ) : <span className="cmp-prog-l on">{sTr(U.progUp, lang)}</span>}
        <span className="cmp-stair" aria-hidden="true">
          <i style={{ height: '100%', opacity: 1 }} /><i style={{ height: '78%', opacity: .82 }} /><i style={{ height: '58%', opacity: .64 }} /><i style={{ height: '40%', opacity: .46 }} /><i style={{ height: '26%', opacity: .3 }} />
        </span>
        <span className="cmp-prog-t">{sTr(U.progT, lang)}</span>
        <span className="cmp-prog-l r">{sTr(U.progEco, lang)}</span>
      </div>
      {(cat.verifyTier || cat.note) && (
        <div className="spec-subnote">
          {cat.verifyTier ? <span className="spec-verify">⚠ {sTr(U.verifyTier, lang)}</span> : null}
          {cat.note ? <span>{sTr(cat.note, lang)}</span> : null}
        </div>
      )}
      <div className="cmp-cols spec-cols">
        {allCols.map((o, i) => (
          <SPEC_PriceCol key={i} col={o.c} idx={cat.idx} tierId={tier} lang={lang} premium={o.c.step >= 5 && !o.group} group={o.group} axes={cat.axes} onImgClick={openImg} />
        ))}
      </div>
      {colImgs.length
        ? <SPEC_Lightbox imgs={colImgs} i={lb} setI={setLb} onClose={() => setLb(null)} />
        : <SPEC_Rail refs={cat.refs} lang={lang} />}
      <div className="cmp-foot spec-foot">
        <span className="cmp-foot-l">{cat.option ? (<React.Fragment><b>{sTr(U.optionLab, lang)}</b> · {cat.option}</React.Fragment>) : sTr(cat.sub, lang)}</span>
        <span className="cmp-foot-r">{sTr(U.progT, lang)}</span>
      </div>
    </React.Fragment>
  );
}

function SPEC_Fitting({ data, lang }) {
  const [i, setI] = React.useState(null);
  return (
    <div className="spec-fit">
      <div className="spec-fit-head">
        <h2>{sTr(data.title, lang)}</h2>
        <p>{sTr(data.desc, lang)}</p>
      </div>
      <div className="spec-fit-groups">
        {data.groups.map((g, gi) => (
          <div className="spec-fit-group" key={gi}>
            <div className="spec-fit-glabel">{sTr(g.name, lang)}</div>
            <div className="spec-fit-list">
              {g.items.map((it, i) => (
                <div className="spec-fit-card" key={i}>
                  <div className="spec-fit-n">{sTr(it.n, lang)}</div>
                  {it.sub ? <div className="spec-fit-sub">{sTr(it.sub, lang)}</div> : null}
                  <div className="spec-fit-p">{it.p}<small> {sTr(window.SPEC_UI.won, lang)}</small></div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
      {data.refs && data.refs.length ? (
        <div className="spec-fit-gallery">
          <div className="spec-fit-glabel">{sTr(window.SPEC_UI.refLab, lang)}</div>
          <div className="spec-fit-gallery-grid">
            {data.refs.map((r, k) => (
              <button className="spec-gthumb" key={k} onClick={() => setI(k)}><img src={specRef(r)} alt="" loading="lazy" /></button>
            ))}
          </div>
        </div>
      ) : null}
      <SPEC_Lightbox imgs={data.refs || []} i={i} setI={setI} onClose={() => setI(null)} />
    </div>
  );
}

/* 상단 용도 네비게이션 — 다른 페이지로 이동하는 링크 */
function SPEC_Nav({ pages, curId, lang }) {
  const href = (id) => {
    const f = SPEC_PAGE_FILES[id];
    return f ? (encodeURI(f) + '?lang=' + lang) : '#';
  };
  return (
    <nav className="cmp-tiers spec-tabs" aria-label="용도별 가격표">
      {pages.map(p => (
        <a key={p.id} href={href(p.id)} className={"cmp-tier" + (p.id === curId ? " on" : "")} aria-current={p.id === curId ? 'page' : undefined}>
          {sTr(p.tab, lang)}<span>{sTr(p.sub, lang)}</span>
        </a>
      ))}
    </nav>
  );
}

function SPEC_Page() {
  const U = window.SPEC_UI;
  const [lang, setLangS] = React.useState(SPEC_LANG0);
  const setLang = (l) => { setLangS(l); try { localStorage.setItem('cight_lang', l); } catch (e) {} };

  const pages = window.SPEC_CATS.concat([{ id: 'fitting', tab: window.SPEC_FITTING.tab, sub: window.SPEC_FITTING.sub, fitting: true }]);
  const pageId = window.SPEC_PAGE_ID || 'office';
  const cur = pages.find(p => p.id === pageId) || pages[0];
  const isFitting = !!cur.fitting;

  React.useEffect(() => {
    document.title = 'Cight · ' + sTr(cur.tab, lang) + ' 가격표';
  }, [lang]);

  return (
    <div className="cmp-app spec-app">
      <div className="cmp-top">
        <div className="cmp-brand">
          <img className="cmp-logo" src={SPEC_LOGO()} alt="Cight" />
          <div>
            <div className="cmp-kicker">{sTr(U.kicker, lang)}</div>
            <div className="cmp-title">{sTr(cur.tab, lang)} · <span className="cmp-name">{sTr(cur.sub, lang)}</span></div>
          </div>
        </div>
        <div className="cmp-top-r">
          <SPEC_LangSwitch lang={lang} setLang={setLang} />
        </div>
      </div>
      {isFitting ? <SPEC_Fitting data={window.SPEC_FITTING} lang={lang} /> : <SPEC_Lens cat={cur} lang={lang} />}
    </div>
  );
}

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