// WeaveStudy — App shell + router + tweaks

const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "campVariant": "A",
  "parodyIntensity": "medium"
}/*EDITMODE-END*/;

function App() {
  const [route, setRoute] = useStateApp({ name: "camp" });

  const [t, setTweak] = (typeof useTweaks === "function")
    ? useTweaks(TWEAK_DEFAULTS)
    : [TWEAK_DEFAULTS, () => {}];

  useEffectApp(() => {
    window.scrollTo({ top: 0, behavior: "instant" });
  }, [route.name, route.id]);

  const navigate = (r) => setRoute(r);
  const isAlignment = route.name === "alignment";

  return (
    <div className="app-shell" data-screen-label={routeLabel(route)}>
      {!isAlignment && <Header route={route} navigate={navigate} parodyIntensity={t.parodyIntensity} />}

      {route.name === "camp" && <Camp navigate={navigate} variant={t.campVariant} parodyIntensity={t.parodyIntensity} />}
      {route.name === "origins" && <Origins navigate={navigate} />}
      {route.name === "character" && <CharacterSheet id={route.id} navigate={navigate} />}
      {route.name === "campaigns" && <Campaigns navigate={navigate} />}
      {route.name === "campaign" && <CampaignDetail id={route.id} navigate={navigate} />}
      {route.name === "library" && <Library navigate={navigate} />}
      {route.name === "qna" && <Qna navigate={navigate} />}
      {route.name === "alignment" && <AlignmentHall navigate={navigate} />}

      {!isAlignment && <Footer navigate={navigate} />}

      {typeof TweaksPanel === "function" && (
        <TweaksPanel title="Tweaks">
          <TweakSection label="메인 페이지 시안" />
          <TweakRadio
            label="시안 선택"
            value={t.campVariant}
            options={[
              { value: "A", label: "A 클래식" },
              { value: "B", label: "B 분할" },
              { value: "C", label: "C 다크" }
            ]}
            onChange={(v) => setTweak("campVariant", v)}
          />
          <div style={{ fontSize: 11, color: "#9aa", padding: "0 2px 8px", lineHeight: 1.5 }}>
            A: 메가스터디 클래식 — 풀밴드 히어로<br />
            B: 시원스쿨 분할 — 좌우 분할 + 스택형<br />
            C: 다크 프리미엄 — 야간 캠프
          </div>

          <TweakSection label="패러디 강도" />
          <TweakRadio
            label="강도"
            value={t.parodyIntensity}
            options={[
              { value: "subtle", label: "은은" },
              { value: "medium", label: "중간" },
              { value: "full", label: "풀" }
            ]}
            onChange={(v) => setTweak("parodyIntensity", v)}
          />

          <TweakSection label="페이지 이동" />
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6, padding: "0 2px 8px" }}>
            <TweakBtn onClick={() => navigate({ name: "camp" })}>캠프</TweakBtn>
            <TweakBtn onClick={() => navigate({ name: "origins" })}>오리진</TweakBtn>
            <TweakBtn onClick={() => navigate({ name: "character", id: "besty" })}>베스티 시트</TweakBtn>
            <TweakBtn onClick={() => navigate({ name: "campaign", id: "bg3-main" })}>본편 캠페인</TweakBtn>
            <TweakBtn onClick={() => navigate({ name: "library" })}>자료실</TweakBtn>
            <TweakBtn onClick={() => navigate({ name: "qna" })}>위더스</TweakBtn>
          </div>
          <TweakBtn full highlight onClick={() => navigate({ name: "alignment" })}>★ 성향 정렬소 (히든)</TweakBtn>
          <div style={{ fontSize: 11, color: "#9aa", padding: "8px 2px 0", lineHeight: 1.5 }}>
            정식 경로: 푸터 우하단의 D20 주사위 클릭 → 내츄럴 20 (3번 안에 자동 성공).
          </div>
        </TweaksPanel>
      )}
    </div>
  );
}

function TweakBtn({ children, onClick, highlight, full }) {
  return (
    <button onClick={onClick} style={{
      padding: "8px 12px",
      background: highlight ? "var(--weave-violet)" : "rgba(255,255,255,0.06)",
      color: highlight ? "white" : "rgba(255,255,255,0.85)",
      borderRadius: 8,
      fontSize: 12, fontWeight: 700,
      textAlign: "center",
      gridColumn: full ? "1 / -1" : "auto",
      width: full ? "100%" : "auto",
      border: highlight ? "none" : "1px solid rgba(255,255,255,0.1)"
    }}>{children}</button>
  );
}

function routeLabel(r) {
  const map = {
    camp: "01 캠프 (메인)",
    origins: "02 오리진 라인업",
    character: `03 캐릭터 시트 · ${r.id || ""}`,
    campaigns: "04 캠페인 리스트",
    campaign: `05 캠페인 · ${r.id || ""}`,
    library: "06 자나사의 만물 가이드",
    qna: "07 위더스에게 묻기",
    alignment: "★ 성향 정렬소 (히든)"
  };
  return map[r.name] || r.name;
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);