/* Admin — app shell */

function parseHash() {
  const raw = (location.hash || '').replace('#', '') || 'dashboard';
  const [route, param] = raw.split('/');
  return { route, param };
}

function AdminApp() {
  const [session, setSession] = React.useState(undefined); // undefined = checking, null = logged out
  const [{ route, param }, setRouteState] = React.useState(parseHash);
  React.useEffect(() => { applyTheme({ theme: 'brand', heading: 'round', roundness: 22, cardStyle: 'soft' }); }, []);

  React.useEffect(() => {
    window.supabaseClient.auth.getSession().then(({ data }) => setSession(data.session));
    const { data: sub } = window.supabaseClient.auth.onAuthStateChange((_event, s) => setSession(s));
    return () => sub.subscription.unsubscribe();
  }, []);

  const go = (r, p) => {
    const hash = p !== undefined ? r + '/' + p : r;
    setRouteState({ route: r, param: p });
    location.hash = hash;
  };
  React.useEffect(() => {
    const onHash = () => setRouteState(parseHash());
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  if (session === undefined) {
    return <div style={{ minHeight: '100vh', display: 'grid', placeItems: 'center', color: 'var(--muted)' }}>불러오는 중…</div>;
  }
  if (!session || session.user.app_metadata?.role !== 'admin') {
    if (session) window.supabaseClient.auth.signOut();
    return <LoginScreen />;
  }

  let Screen;
  if (route === 'materials') Screen = () => <ContentListScreen typeFilter="수업지원자료" title="수업지원자료 관리" sub="STEP1·STEP2 수업 콘텐츠를 등록하고 관리합니다." go={go} />;
  else if (route === 'family') Screen = () => <ContentListScreen typeFilter="확장수업" title="확장수업 관리" sub="가정에서 이어가는 확장수업 콘텐츠를 관리합니다." go={go} />;
  else if (route === 'upload') Screen = () => <UploadScreen go={go} />;
  else if (route === 'downloads-list') Screen = () => <DownloadsListScreen go={go} />;
  else if (route === 'downloads') Screen = () => <ContentDownloadsScreen contentId={Number(param)} go={go} />;
  else if (route === 'members') Screen = () => <MembersScreen go={go} />;
  else Screen = () => <DashboardScreen go={go} />;

  return (
    <div className="admin-shell admin-body">
      <AdminSidebar route={route} go={go} email={session.user.email} onLogout={() => window.supabaseClient.auth.signOut()} />
      <main className="admin-main"><Screen /></main>
    </div>
  );
}

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