// proto-app.jsx — Router + App entry + Tweaks

const PROTO_DEFAULTS = /*EDITMODE-BEGIN*/{
  "corners": "rounded"
}/*EDITMODE-END*/;

function App() {
  const hash = useHash();
  const route = parseRoute(hash);
  const [t, setTweak] = useTweaks(PROTO_DEFAULTS);

  // Apply corner tweak via CSS vars on document body
  React.useEffect(() => {
    document.body.setAttribute('data-corners', t.corners);
    if (t.corners === 'sharp') {
      document.documentElement.style.setProperty('--r-card', '0px');
      document.documentElement.style.setProperty('--r-sm',   '0px');
    } else if (t.corners === 'pixel') {
      document.documentElement.style.setProperty('--r-card', '0px');
      document.documentElement.style.setProperty('--r-sm',   '0px');
    } else { // rounded
      document.documentElement.style.setProperty('--r-card', '14px');
      document.documentElement.style.setProperty('--r-sm',   '8px');
    }
  }, [t.corners]);

  return (
    <React.Fragment>
      <div className="shell">
        <TopNav route={route} />
        <main key={hash}>
          <RouteView route={route} />
        </main>
        <PageFoot />
      </div>

      <ToastHost />

      <TweaksPanel title="Tweaks">
        <TweakSection label="카드 모서리">
          <TweakRadio
            value={t.corners}
            options={[
              { value: 'sharp',   label: '각진' },
              { value: 'rounded', label: '둥근' },
              { value: 'pixel',   label: '픽셀' },
            ]}
            onChange={(v) => setTweak('corners', v)}
          />
        </TweakSection>
        <TweakSection label="데이터">
          <TweakButton label="게시판 초기화"
            onClick={() => { if (confirm('게시판 데모 데이터를 초기화할까요?')) { resetPosts(); location.reload(); } }} />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

function RouteView({ route }) {
  const [head, ...rest] = route;
  switch (head) {
    case undefined: return <HomePage />;
    case 'study':    return <StudyPage />;
    case 'project':  return <ProjectPage />;
    case 'board':
      if (rest.length === 0) return <BoardListPage />;
      if (rest[0] === 'new') return <BoardWritePage />;
      return <BoardDetailPage id={rest[0]} />;
    default:
      return <NotFound />;
  }
}

function NotFound() {
  return (
    <div className="fade-in">
      <div className="page-h">
        <h1>없는 페이지예요</h1>
        <p className="lead">주소가 잘못됐을 수 있어요.</p>
        <div style={{ marginTop: 16 }}>
          <a className="btn" href="#/">← 홈으로</a>
        </div>
      </div>
    </div>
  );
}

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