const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#00AEEF",
  "showStats": true
} /*EDITMODE-END*/;

const won = (n) => n.toLocaleString('ko-KR');
const L = () => window.CL_I18N[window.__lang] || window.CL_I18N.ko;
const slug = (s) => s.replace(/[^a-z0-9]+/gi, '-').replace(/^-|-$/g, '').toLowerCase();
const colorSrc = (hex) => "data:image/svg+xml;utf8," + encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><rect width='8' height='8' fill='" + hex + "'/></svg>");
// 관리자 가격 오버라이드
const ovk = (...a) => a.join('|');
const ov = (k, def) => window.CLP ? window.CLP.val(k, def) : def;
const ARROW = <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6" /></svg>;
// 업로드 제품 사진 (cl_data.js 의 CL_IMG_SRC 가 uploads/ + NFD + encodeURI 처리)
const slotImg = (id) => window.CL_IMG_SRC ? window.CL_IMG_SRC(id) : undefined;

const PREMIUM_PICK = { ko: '프리미엄 추천', en: 'Premium pick', ja: 'プレミアム推奨', zh: '高端推荐' };
const SKILL_LEG = { ko: '능력치 막대', en: 'Performance', ja: '性能バー', zh: '性能条' };

// max-price index within a list (가장 비싼 = 프리미엄 = 골드)
function maxPriceIdx(items, getP) {
  let best = -1,bv = -1;
  items.forEach((it, i) => {const v = getP(it);if (v > bv) {bv = v;best = i;}});
  return best;
}
const cardPrice = (it) => Math.max(...(it.p || []).map((v) => typeof v === 'number' ? v : 0), 0);

/* ---------------- Language switch ---------------- */
function LangSwitch({ lang, setLang }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    if (!open) return;
    const h = (e) => {if (ref.current && !ref.current.contains(e.target)) setOpen(false);};
    document.addEventListener('mousedown', h);
    return () => document.removeEventListener('mousedown', h);
  }, [open]);
  const cur = window.CL_LANGS.find((l) => l.id === lang) || window.CL_LANGS[0];
  return (
    <div className={"cmp-lang" + (open ? " open" : "")} ref={ref}>
      <button className="cmp-lang-trigger" onClick={() => setOpen((o) => !o)}>
        <svg className="cmp-lang-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" /></svg>
        <span className="cmp-lang-cur">{cur.cur}</span>
        <svg className="cmp-lang-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="m6 9 6 6 6-6" /></svg>
      </button>
      <ul className="cmp-lang-menu" role="listbox">
        {window.CL_LANGS.map((l) =>
        <li key={l.id} className={"cmp-lang-opt" + (l.id === lang ? " on" : "")}
        onClick={() => {setLang(l.id);setOpen(false);}}>
            <span className="cmp-lang-flag">{l.flag}</span>
            <span className="cmp-lang-name">{l.native}</span>
          </li>
        )}
      </ul>
    </div>);

}

/* ---------------- Header ---------------- */
const TAB_IDS = ['cycle', 'daily', 'cont', 'near', 'rgp', 'color'];
function Header({ tab, setTab, lang, setLang }) {
  const t = L();
  return (
    <header className="clc-top">
      <div className="clc-brand">
        <a className="clc-logolink" href="index.html" title="처음으로">
          <img className="clc-logo" src="assets/cight_logo_teal.png" alt="Cight"
          onError={(e) => {e.target.src = 'assets/cight_logo.png';}} />
        </a>
        <div className="clc-titles">
          <div className="clc-kicker">{t.kicker}</div>
          <h1 className="clc-title">{t.title}</h1>
        </div>
      </div>
      <nav className="clc-tiers" role="tablist">
        {TAB_IDS.map((id) =>
        <button key={id} className={"clc-tier" + (id === tab ? " on" : "")}
        onClick={() => setTab(id)} role="tab" aria-selected={id === tab}>
            <b style={{ fontWeight: 800 }}>{t.tabs[id][0]}</b>
            <span>{t.tabs[id][1]}</span>
          </button>
        )}
      </nav>
      <div className="clc-top-r">
        <LangSwitch lang={lang} setLang={setLang} />
      </div>
    </header>);

}

/* ---------------- Skill bars ---------------- */
const STAT_KEYS = ['eye', 'dry', 'fit', 'clarity'];
function SkillBars({ stats }) {
  const t = L();
  return (
    <div className="clc-skill">
      {STAT_KEYS.map((k, i) =>
      <div className="clc-srow" key={k}>
          <span className="clc-slab">{t.stat[k]}</span>
          <span className="clc-sbar">
            {[0, 1, 2, 3, 4].map((n) => <i key={n} className={n < stats[i] ? "on" : ""} />)}
          </span>
        </div>
      )}
    </div>);

}

/* ---------------- Price cell ---------------- */
function PriceCell({ label, value, note }) {
  const t = L();
  let body;
  if (value === 'soon') body = <span className="clc-pval soon">{t.soon}</span>;else
  if (value == null) body = <span className="clc-pval" style={{ color: 'var(--ink3)' }}>–</span>;else
  body = <span className="clc-pval num">{won(value)}<i>원</i></span>;
  const off = value == null;
  return (
    <div className={"clc-pcell" + (off ? " off" : "")}>
      <span className="clc-pidx">{label}</span>
      {body}
      {note && !off && value !== 'soon' && <span className="clc-pnote">{note}</span>}
    </div>);

}

/* ---------------- Product card (daily / cont) ---------------- */
function ProductCard({ item, packs, badge, showStats, slotId, gold, pkey }) {
  return (
    <div className={"clc-card" + (gold ? " gold" : "")}>
      <div className="clc-photo">
        <image-slot id={slotId} src={slotImg(slotId)} placeholder={item.brand} fit="contain" shape="rounded" radius="9"></image-slot>
      </div>
      <div className="clc-cb">
        <div className="clc-chead">
          <span className="clc-cname">{item.brand}</span>
          {badge && <span className={"clc-badge " + badge.cls}>{badge.text}</span>}
        </div>
        {showStats && <SkillBars stats={item.stats} />}
        <div className="clc-prices" style={{ '--pc': 2 }}>
          <PriceCell label={packs[0]} value={ov(pkey + '|0', item.p[0])} note={item.trial} />
          <PriceCell label={packs[1]} value={ov(pkey + '|1', item.p[1])} note={item.note12} />
        </div>
      </div>
    </div>);

}

function MatrixTab({ data, mode, showStats, tabId }) {
  const t = L();
  return (
    <div className="clc-body">
      {data.sections.map((sec) => {
        const gi = maxPriceIdx(sec.items, cardPrice);
        return (
          <section className="clc-sec" key={sec.id}>
            <div className="clc-sec-h">
              <span className="clc-sec-tag">{t.sec[sec.id]}</span>
              <span className="clc-sec-rule" />
            </div>
            <div className="clc-grid" style={{ '--cols': sec.items.length }}>
              {sec.items.map((it, i) => {
                const badge = mode === 'tier' ?
                { cls: it.tier, text: t.tier[it.tier] } :
                { cls: 'cycle', text: t.cycle[it.cycle] };
                return <ProductCard key={it.brand + i} item={it} packs={it.packs || data.packs}
                badge={badge} showStats={showStats} gold={i === gi}
                pkey={ovk(tabId, sec.id, it.brand)}
                slotId={"cl-" + tabId + "-" + sec.id + "-" + slug(it.brand)} />;
              })}
            </div>
          </section>);

      })}
    </div>);

}

/* ---------------- Near ---------------- */
function NearTab({ data, showStats }) {
  const t = L();
  const gi = maxPriceIdx(data.items, (it) => it.price);
  return (
    <div className="clc-body">
      <div className="clc-near" style={{ '--ncols': data.items.length }}>
        {data.items.map((it, i) =>
        <div className={"clc-card" + (i === gi ? " gold" : "")} key={i}>
            <div className="clc-photo">
              <image-slot id={"cl-near-" + slug(it.brand)} src={slotImg("cl-near-" + slug(it.brand))} placeholder={it.brand} fit="contain" shape="rounded" radius="11"></image-slot>
            </div>
            <div className="clc-cb">
              <div className="clc-chead">
                <span className="clc-cname">{it.brand}</span>
                <span className="clc-badge cycle">{t.cycle[it.cycle]}</span>
              </div>
              {showStats && <SkillBars stats={it.stats} />}
              <div className="clc-prices">
                <div className="clc-pcell">
                  <span className="clc-pidx">{data.pack}</span>
                  <span className="clc-pval num">{won(ov(ovk('near', it.brand), it.price))}<i>원</i></span>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>);

}

/* ---------------- RGP ---------------- */
const RGP_AX = ['oxy', 'wet', 'astig', 'fit'];
function RgpSkill({ stats }) {
  const t = L();
  return (
    <div className="clc-rskill">
      {RGP_AX.map((k, j) =>
      <div className="clc-rsrow" key={k}>
          <span className="clc-rslab">{t.rgpax[k]}</span>
          <span className="clc-rsbar">{[0, 1, 2, 3, 4].map((n) => <i key={n} className={n < stats[j] ? "on" : ""} />)}</span>
        </div>
      )}
    </div>);

}
function RgpCard({ item, lang, slotId, gold, pkey }) {
  const t = L();
  const price = ov(pkey, item.price);
  return (
    <div className={"clc-rcard" + (gold ? " gold" : "")}>
      <div className="clc-rphoto">
        <image-slot id={slotId} src={slotImg(slotId)} placeholder={item.brand} fit="contain" shape="rounded" radius="9"></image-slot>
      </div>
      <div className="clc-rtop">
        <span className="clc-rname">{item.brand}</span>
        {item.dk && <span className="clc-dk">{t.dk} <b>{item.dk}</b></span>}
      </div>
      {item.stats && <RgpSkill stats={item.stats} />}
      <div className="clc-rprice"><span className="num">{won(price)}</span><i>원</i></div>
    </div>);

}
function RgpTab({ data, lang }) {
  const t = L();
  return (
    <div className="clc-body">
      <div className="clc-rgp">
        {data.sections.map((sec) => {
          const gi = sec.id === 'high' ? maxPriceIdx(sec.items, (it) => it.price) : -1;
          return (
            <section className={"clc-rgp-sec fill"} key={sec.id}>
              <div className="clc-sec-h">
                <span className="clc-sec-tag">{t.sec[sec.id]}</span>
                <span className="clc-sec-rule" />
              </div>
              <div className="clc-rgp-cards">
                {sec.items.map((it, i) =>
                <RgpCard key={i} item={it} lang={lang} gold={i === gi}
                pkey={ovk('rgp', sec.id, it.brand)}
                slotId={"cl-rgp-" + sec.id + "-" + slug(it.brand)} />
                )}
              </div>
            </section>);

        })}
        <section className="clc-rgp-sec clc-rgp-post">
          <div className="clc-sec-h">
            <span className="clc-sec-tag" style={{ background: 'var(--ink3)' }}>{t.sec.post}</span>
            <span className="clc-sec-rule" />
          </div>
          <div className="clc-rgp-cards">
            <div className="clc-rcard">
              <div className="clc-rphoto">
                <image-slot id="cl-rgp-post" src={slotImg('cl-rgp-post')} placeholder={data.post.brand} fit="contain" shape="rounded" radius="9"></image-slot>
              </div>
              <div className="clc-rpostbody">
                <span className="clc-rname">{data.post.brand}</span>
                <p className="clc-rsub">{data.post.sub[lang] || data.post.sub.ko}</p>
              </div>
              {data.post.stats && <RgpSkill stats={data.post.stats} />}
              <div className="clc-rprice"><span className="num">{won(ov('rgp|post', data.post.price))}</span><i>원</i></div>
            </div>
          </div>
        </section>
      </div>
    </div>);

}

/* ---------------- Color ---------------- */
function ColorTab({ data, lang }) {
  const t = L();
  return (
    <div className="clc-body">
      <div className="clc-color">
        <p className="clc-color-note">{t.colorNote}</p>
        <div className="clc-color-groups">
          {data.groups.map((g, gi) => {
            const p30 = ov(ovk('color', gi, 'p30'), g.p30);
            const p90 = g.p90 != null ? ov(ovk('color', gi, 'p90'), g.p90) : null;
            const pAstig = g.pAstig != null ? ov(ovk('color', gi, 'pAstig'), g.pAstig) : null;
            return (
              <div className="clc-cgroup" key={gi}>
              <div className="clc-cgroup-cards">
                {g.items.map((it, i) =>
                  <div className="clc-ccard" key={i}>
                    <image-slot className="clc-csw" style={{ width: '46px', height: '46px' }}
                    id={"cl-color-" + slug(it.brand)} src={slotImg("cl-color-" + slug(it.brand)) || colorSrc(it.sw)} shape="circle" fit="cover" placeholder={it.brand}></image-slot>
                    <div className="clc-cbody2">
                      <span className="clc-cbrand">{it.brand}{it.astig && <em className="clc-castig">{t.astigBadge}</em>}</span>
                      <span className="clc-cdim">{t.iris} {it.iris} · {t.pupil} {it.pupil}<i>mm</i></span>
                    </div>
                  </div>
                  )}
              </div>
              <div className="clc-cgprice">
                <span className="clc-cgp"><b>30P</b><span className="num">{won(p30)}</span></span>
                {p90 && <span className="clc-cgp"><b>90P</b><span className="num">{won(p90)}</span></span>}
                {pAstig && <span className="clc-cgp astig"><b>{t.astigBadge}</b><span className="num">{won(pAstig)}</span></span>}
              </div>
            </div>);

          })}
        </div>
      </div>
    </div>);

}

/* ---------------- Wear-cycle guide (첫 화면) ---------------- */
const CYC_ICON = {
  day1: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="4" /><path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M19.1 4.9 17 7M7 17l-2.1 2.1" /></svg>,
  wk2: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3.5" y="5" width="17" height="16" rx="2.5" /><path d="M3.5 9.5h17M8 3v4M16 3v4" /><path d="M7.5 13.5h3M7.5 17h3M13.5 13.5h3" /></svg>,
  mon1: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12a9 9 0 1 1-2.64-6.36" /><path d="M21 4v5h-5" /></svg>
};
function CycleTab({ lang, setTab }) {
  const t = L();
  const ax = ['eye', 'dry', 'conv', 'econ'];
  const G = window.CL_DATA.cycleGuide;
  return (
    <div className="clc-body">
      <div className="clc-cyc">
        <div className="clc-cyc-intro">
          <span className="clc-cyc-kicker">{t.cycFreq}</span>
          <h2 className="clc-cyc-q" style={{ width: "663px" }}>{t.cycleNote}</h2>
        </div>
        <div className="clc-cyc-grid">
          {G.map((c, idx) =>
          <button className="clc-cyccard" key={c.key} onClick={() => setTab(c.tab)}>
              <span className="clc-cyc-step">{idx + 1}</span>
              <div className="clc-cyc-top">
                <span className="clc-cyc-ic">{CYC_ICON[c.key]}</span>
                <div className="clc-cyc-h">
                  <span className="clc-cyc-freq">{c.freq[lang] || c.freq.ko}</span>
                  <span className="clc-cyc-name">{c.name[lang] || c.name.ko}</span>
                </div>
              </div>
              <div className="clc-cyc-panel">
                <span className="clc-cyc-panel-h">{t.cycFit}</span>
                <div className="clc-skill cyc">
                  {ax.map((k, j) =>
                <div className="clc-srow" key={k}>
                      <span className="clc-slab">{t.cycax[k]}</span>
                      <span className="clc-sbar">{[0, 1, 2, 3, 4].map((n) => <i key={n} className={n < c.stats[j] ? "on" : ""} />)}</span>
                    </div>
                )}
                </div>
              </div>
              <div className="clc-cyc-foot">
                <p className="clc-cyc-rec">{c.rec[lang] || c.rec.ko}</p>
                <span className="clc-cyc-go">{t.tabs[c.tab][0]} {ARROW}</span>
              </div>
            </button>
          )}
        </div>
      </div>
    </div>);

}

/* ---------------- Footer ---------------- */
function Footer({ lang }) {
  const t = L();
  return (
    <footer className="clc-foot">
      <div className="clc-legend">
        <span className="clc-leg"><i className="gold" />{PREMIUM_PICK[lang] || PREMIUM_PICK.ko}</span>
        <span className="clc-leg"><i />{SKILL_LEG[lang] || SKILL_LEG.ko}</span>
      </div>
      <span className="clc-foot-r">{t.unit}</span>
    </footer>);

}

/* ---------------- Fit / scale ---------------- */
function useFit(ref) {
  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);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);
  }, []);
}

/* ---------------- App ---------------- */
const LANG0 = (() => {try {
    const p = new URLSearchParams(location.search).get('lang');
    const v = p || localStorage.getItem('cight_lang') || 'ko';
    return window.CL_I18N[v] ? v : 'ko';
  } catch (e) {return 'ko';}})();

function App() {
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [tab, setTab] = useState('cycle');
  const [lang, setLangS] = useState(LANG0);
  const canvasRef = useRef(null);
  useFit(canvasRef);
  window.__lang = lang;

  const setLang = (l) => {
    setLangS(l);window.__lang = l;
    try {localStorage.setItem('cight_lang', l);
      const u = new URL(location.href);u.searchParams.set('lang', l);
      history.replaceState(null, '', u);
    } catch (e) {}
    document.documentElement.lang = l;
  };
  useEffect(() => {document.documentElement.lang = lang;}, []);

  const D = window.CL_DATA;
  const accents = ["#00AEEF", "#0F9D58", "#5B57D6", "#E8A33D"];

  return (
    <div className="stage" style={{ "--accent": tw.accent }}>
      <div className="canvas" ref={canvasRef} data-tab={tab}>
        <Header tab={tab} setTab={setTab} lang={lang} setLang={setLang} />
        {tab === 'daily' && <MatrixTab data={D.daily} mode="tier" showStats={tw.showStats} tabId="daily" />}
        {tab === 'cont' && <MatrixTab data={D.cont} mode="cycle" showStats={tw.showStats} tabId="cont" />}
        {tab === 'near' && <NearTab data={D.near} showStats={tw.showStats} />}
        {tab === 'rgp' && <RgpTab data={D.rgp} lang={lang} />}
        {tab === 'color' && <ColorTab data={D.color} lang={lang} />}
        {tab === 'cycle' && <CycleTab lang={lang} setTab={setTab} />}
        <Footer lang={lang} />
      </div>

      <TweaksPanel>
        <TweakSection label="표시" />
        <TweakColor label="액센트" value={tw.accent} options={accents}
        onChange={(v) => setTweak('accent', v)} />
        <TweakToggle label="능력치 막대 표시" value={tw.showStats}
        onChange={(v) => setTweak('showStats', v)} />
      </TweaksPanel>
    </div>);

}

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