const { useState } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "#00AEEF",
  "density": "regular",
  "showFeatures": false,
  "showKr": true
}/*EDITMODE-END*/;

const won = (n) => n.toLocaleString('ko-KR');

function fmtPrice(v){
  if (v === 0) return { txt:"무상제공", free:true };
  if (v == null) return { txt:"–", none:true };
  return { txt: won(v) };
}

/* ---------- Header ---------- */
function Header({ tier, setTier }){
  return (
    <header className="hd">
      <div className="hd-brand">
        <img className="hd-logo" src={(window.__resources && window.__resources.logo) || "assets/cight_logo.png"} alt="Cight" />
        <div className="hd-titles">
          <div className="hd-kicker">SINGLE VISION LENS</div>
          <h1 className="hd-title">단초점렌즈 가격표</h1>
        </div>
      </div>
      <nav className="tabs" role="tablist" aria-label="가격대">
        {window.TIERS.map(t => (
          <button key={t.id}
            className={"tab" + (t.id===tier ? " on":"")}
            onClick={()=>setTier(t.id)} role="tab" aria-selected={t.id===tier}>
            <span className="tab-l">{t.label}</span>
            <span className="tab-d">{t.desc}</span>
          </button>
        ))}
      </nav>
    </header>
  );
}

/* ---------- Guide pillars ---------- */
function Pillars(){
  return (
    <section className="pillars">
      {window.PILLARS.map(p => (
        <div className="pillar" key={p.n}>
          <span className="pillar-n">{p.n}</span>
          <div className="pillar-body">
            <h3 className="pillar-t">{p.t}</h3>
            <p className="pillar-d">{p.d}</p>
            <span className="pillar-k">{p.k}</span>
          </div>
        </div>
      ))}
    </section>
  );
}

/* ---------- Price cards ---------- */
function PriceLadder({ prices }){
  const order = [2,1,0]; // 1.74 → 1.67 → 1.60
  return (
    <div className="ladder">
      {order.map(i => {
        const f = fmtPrice(prices[i]);
        const idx = window.INDICES[i];
        return (
          <div className={"lrow"+(f.none?" off":"")+(i===2?" hi":"")} key={i}>
            <span className="lidx"><b className="num">{idx.v}</b><em>{idx.note}</em></span>
            <span className={"lprice"+(f.free?" free":"")}>
              {f.txt}{!f.free && !f.none && <i className="won">원</i>}
            </span>
          </div>
        );
      })}
    </div>
  );
}

function ProductCard({ row, showFeatures, showKr }){
  const p = window.PRODUCTS[row.k] || { name:row.k, kr:"", feat:[] };
  return (
    <div className="pcard">
      <div className="pcard-top">
        <span className="pcard-icon" dangerouslySetInnerHTML={{__html: (window.PRODUCT_ICONS||{})[row.k] || ''}} />
        <div className="pcard-head">
          <span className="pn-name">{p.name}{row.star && <sup className="star">*</sup>}</span>
          {showKr && <span className="pn-kr">{p.kr}</span>}
        </div>
      </div>
      {showFeatures && (
        <ul className="pn-feat">
          {p.feat.map((f,i)=><li key={i}>{f}</li>)}
        </ul>
      )}
      <PriceLadder prices={row.p} />
    </div>
  );
}

function Matrix({ tier, showFeatures, showKr }){
  const groups = window.TABLES[tier] || [];
  return (
    <section className="matrix-cards">
      {groups.map(g => {
        const m = window.STEP_META[g.step] || {};
        return (
          <div className="step-sec" key={g.step} style={{flex: ({3:1.2}[g.step] || 1)}}>
            <div className="step-rail">
              <span className="step-chip">{m.label}</span>
              <span className="step-name">{m.name}</span>
              <span className="step-note">{m.note}</span>
            </div>
            <div className="card-grid">
              {g.rows.map((row,i) => {
                // 정가(row.p) 위에 가격 정책(할인율·지정가) 실시간 적용 → 표시가
                const shown = (window.CightPricing)
                  ? { ...row, p: window.CightPricing.apply(row.p, { tier, step: g.step, key: row.k }) }
                  : row;
                return (
                  <ProductCard key={row.k+i} row={shown}
                    showFeatures={showFeatures} showKr={showKr} />
                );
              })}
            </div>
          </div>
        );
      })}
    </section>
  );
}

/* ---------- Addons + footer (compact, single row) ---------- */
function Footer(){
  return (
    <footer className="ft">
      <div className="ft-addons">
        <span className="ft-h">추가 옵션</span>
        {window.ADDONS.map((a,i)=>(
          <span className="addon" key={i}>
            <b>{a.t}</b><em>{a.d}</em><i>{a.p}</i>
          </span>
        ))}
      </div>
      <div className="ft-meta">
        <span className="ft-star">{window.FOOTNOTE_STAR}</span>
        <span>※ 단위: 원 · 좌·우 동일 도수 1조(2매) 기준</span>
      </div>
    </footer>
  );
}

/* ---------- App ----------
   고정 캔버스(폭 1920)를 두 기준 해상도에 맞춰 채운다:
   · 풀HD 24" 1920×1080(16:9) → 캔버스 1920×1080, 정확히 채움
   · 아이패드 프로 12.9" 1366×1024(4:3) → 캔버스 1920×1440, 정확히 채움
   폭은 1920 고정(px 타이포 보정 유지) · 높이만 1080~1440 사이에서 화면 비율에 맞춰 늘림.
   범위를 벗어난(초광각/세로) 화면은 레터박스로 안전 처리, 가격은 절대 잘리지 않음. */
function useFit(ref){
  React.useEffect(()=>{
    const el = ref.current; if(!el) return;
    const W = 1920, H_MIN = 1080, H_MAX = 1440;
    const fit = () => {
      const sW = window.innerWidth / W;
      let H, s;
      const hAtWidth = window.innerHeight / sW;   // 폭에 맞췄을 때 채워지는 캔버스 높이
      if (hAtWidth >= H_MIN) {
        H = Math.min(H_MAX, hAtWidth);            // 16:9~4:3 구간은 화면을 정확히 채움
        s = sW;
      } else {
        H = H_MIN;                                // 너무 납작한 화면 → 높이에 맞추고 좌우 레터박스
        s = window.innerHeight / H_MIN;
      }
      el.style.width = W + 'px';
      el.style.height = Math.round(H) + 'px';
      el.style.transform = `translate(-50%,-50%) scale(${s})`;
    };
    fit();
    window.addEventListener('resize', fit);
    return () => window.removeEventListener('resize', fit);
  },[]);
}

function App(){
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [tier, setTier] = useState("LENS");
  const canvasRef = React.useRef(null);
  useFit(canvasRef);

  // 가격 정책 실시간 반영: 가격관리 페이지(다른 탭)나 이 탭에서 정책이 바뀌면 다시 그린다.
  const [, bumpPolicy] = React.useReducer((x) => x + 1, 0);
  React.useEffect(() => {
    const onChange = (e) => { if (!e || !e.key || e.key === "cight_pricing") bumpPolicy(); };
    window.addEventListener("storage", onChange);          // 다른 탭에서 localStorage 변경
    window.addEventListener("cight-pricing-change", bumpPolicy); // 같은 탭 저장 신호
    return () => {
      window.removeEventListener("storage", onChange);
      window.removeEventListener("cight-pricing-change", bumpPolicy);
    };
  }, []);

  const accents = ["#00AEEF","#A8724F","#9A8156","#8B8D8E"];

  return (
    <div className={"stage theme-"+t.theme+" density-"+t.density}
         style={{ "--accent": t.accent, "--accent-ink": "#fff" }}>
      <div className="canvas" ref={canvasRef}>
        <Header tier={tier} setTier={setTier} />
        <Matrix tier={tier} showFeatures={t.showFeatures} showKr={t.showKr} />
        <Footer />
      </div>

      <a className="xnav" href="Cight 렌즈 선택 가이드.html">렌즈 선택 가이드 <span>→</span></a>

      <TweaksPanel>
        <TweakSection label="테마" />
        <TweakRadio label="모드" value={t.theme} options={['light','dark']}
          onChange={(v)=>setTweak('theme', v)} />
        <TweakColor label="액센트" value={t.accent} options={accents}
          onChange={(v)=>setTweak('accent', v)} />
        <TweakSection label="표시" />
        <TweakRadio label="밀도" value={t.density} options={['compact','regular','comfy']}
          onChange={(v)=>setTweak('density', v)} />
        <TweakToggle label="제품 특징 표시" value={t.showFeatures}
          onChange={(v)=>setTweak('showFeatures', v)} />
        <TweakToggle label="한글 설명 표시" value={t.showKr}
          onChange={(v)=>setTweak('showKr', v)} />
      </TweaksPanel>
    </div>
  );
}

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