// ============ 메인 App ============
const useHashRoute = () => {
  const [hash, setHash] = React.useState(window.location.hash || '#/');
  React.useEffect(() => {
    const on = () => setHash(window.location.hash || '#/');
    window.addEventListener('hashchange', on);
    return () => window.removeEventListener('hashchange', on);
  }, []);
  return [hash, (h) => { window.location.hash = h; }];
};

const useTheme = () => {
  const [theme, setTheme] = React.useState(() => localStorage.getItem('ga_guild_theme') || 'dark');
  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('ga_guild_theme', theme);
  }, [theme]);
  return [theme, () => setTheme(t => t === 'dark' ? 'light' : 'dark')];
};

const Topbar = ({ route, navigate, theme, toggleTheme }) => {
  const pages = [
    ['#/rules',  '규칙'],
    ['#/ranks',  '멤버 랭크'],
    ['#/teams',  '팀 편성'],
    ['#/admin',  '어드민'],
  ];
  return (
    <div className="topbar">
      <div className="brand" onClick={() => navigate('#/')}>
        <img className="brand-mark" src="/static/images/kream-logo.png" alt="KREAM"/>
        <div className="brand-text">
          <div className="brand-name">GUILD MATCH</div>
          <div className="brand-sub">GetAmped · 크림 돈빵</div>
        </div>
      </div>
      <nav className="nav">
        {pages.map(([h, label]) => (
          <a key={h}
             className={route.startsWith(h) ? 'active' : ''}
             onClick={(e) => { e.preventDefault(); navigate(h); }}
             href={h}>{label}</a>
        ))}
      </nav>
      <div className="topbar-actions">
        <button className="theme-toggle" onClick={toggleTheme} title="테마 전환">
          {theme === 'dark' ? (
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/>
            </svg>
          ) : (
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
            </svg>
          )}
        </button>
      </div>
    </div>
  );
};

const LoadingView = () => (
  <div className="center" style={{minHeight: '60vh', color: 'var(--text-mute)'}}>불러오는 중...</div>
);

const ErrorView = ({ message, onRetry }) => (
  <div className="container" style={{textAlign: 'center', paddingTop: 80}}>
    <p style={{color: 'var(--danger)', marginBottom: 16}}>{message}</p>
    <button className="btn primary" onClick={onRetry}>다시 시도</button>
  </div>
);

const App = () => {
  const [route, navigate] = useHashRoute();
  const [theme, toggleTheme] = useTheme();
  const [members, setMembers] = React.useState(null);
  const [loadError, setLoadError] = React.useState(null);
  const [adminAuthed, setAdminAuthed] = React.useState(false);
  const [authChecked, setAuthChecked] = React.useState(false);

  const refreshMembers = React.useCallback(async () => {
    try {
      const data = await Api.getMembers();
      setMembers(data);
      setLoadError(null);
    } catch (err) {
      setLoadError(err.message || '데이터를 불러오지 못했습니다.');
    }
  }, []);

  React.useEffect(() => { refreshMembers(); }, [refreshMembers]);

  React.useEffect(() => {
    Api.session().then(r => setAdminAuthed(!!r.authed)).catch(() => setAdminAuthed(false)).finally(() => setAuthChecked(true));
  }, []);

  const logout = () => {
    setAdminAuthed(false);
    navigate('#/');
  };

  // 랜딩 페이지에서는 상단바 미노출
  const isLanding = route === '#/' || route === '';

  return (
    <div className="app-shell">
      {!isLanding && (
        <Topbar route={route} navigate={navigate} theme={theme} toggleTheme={toggleTheme}/>
      )}
      {isLanding && <LandingPage navigate={navigate}/>}
      {route.startsWith('#/rules') && <RulesPage/>}
      {route.startsWith('#/ranks') && (
        members ? <RanksPage members={members}/> : loadError ? <ErrorView message={loadError} onRetry={refreshMembers}/> : <LoadingView/>
      )}
      {route.startsWith('#/teams') && (
        members ? <TeamsPage members={members}/> : loadError ? <ErrorView message={loadError} onRetry={refreshMembers}/> : <LoadingView/>
      )}
      {route.startsWith('#/admin') && (
        !authChecked ? <LoadingView/> :
        adminAuthed ? (
          members ? (
            <AdminPage members={members} refreshMembers={refreshMembers} onLogout={logout}/>
          ) : loadError ? <ErrorView message={loadError} onRetry={refreshMembers}/> : <LoadingView/>
        ) : (
          <AdminLogin onAuth={() => setAdminAuthed(true)}/>
        )
      )}
    </div>
  );
};

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