/* 모모, 테리 — App: routing + theme + tweaks */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "brand",
  "heading": "round",
  "roundness": 22,
  "cardStyle": "soft"
}/*EDITMODE-END*/;

const THEME_ORDER = ['brand', 'mint', 'coral', 'grape'];
const THEME_PALETTES = {
  brand: ['#56abe6', '#357fc4', '#82c247'],
  mint:  ['#5fbf86', '#3f9c66', '#f0b94a'],
  coral: ['#f0826a', '#d65f48', '#f6c560'],
  grape: ['#7c5cc4', '#5e3fa6', '#f5a8c8'],
};
const PALETTE_TO_KEY = Object.fromEntries(THEME_ORDER.map((k) => [THEME_PALETTES[k].join(','), k]));

const HEADING_FONTS = {
  round: "'Jua', 'Pretendard', sans-serif",
  clean: "'Pretendard', system-ui, sans-serif",
};

function applyTheme(t) {
  const th = THEMES[t.theme] || THEMES.brand;
  const r = document.documentElement.style;
  r.setProperty('--primary', th.primary);
  r.setProperty('--primary-strong', th.strong);
  r.setProperty('--primary-soft', th.soft);
  r.setProperty('--primary-tint', th.tint);
  r.setProperty('--primary-tint-2', th.tint2);
  r.setProperty('--accent', th.accent);
  r.setProperty('--bg', th.bg);
  r.setProperty('--ink', th.ink);
  r.setProperty('--muted', th.muted);
  r.setProperty('--line', th.line);
  r.setProperty('--heading-font', HEADING_FONTS[t.heading] || HEADING_FONTS.round);
  r.setProperty('--radius', t.roundness + 'px');
  r.setProperty('--radius-sm', Math.max(8, t.roundness - 8) + 'px');
  r.setProperty('--radius-lg', (t.roundness + 8) + 'px');
  if (t.cardStyle === 'flat') {
    r.setProperty('--shadow-sm', '0 0 0 1.5px ' + th.line);
    r.setProperty('--shadow-md', '0 0 0 1.5px ' + th.soft);
    r.setProperty('--shadow-lg', '0 0 0 2px ' + th.soft);
  } else {
    r.setProperty('--shadow-sm', '0 2px 10px rgba(60,40,100,0.06)');
    r.setProperty('--shadow-md', '0 10px 30px rgba(70,45,120,0.10)');
    r.setProperty('--shadow-lg', '0 20px 50px rgba(70,45,120,0.16)');
  }
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = React.useState(() => {
    return (location.hash || '').replace('#', '') || 'home';
  });
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [session, setSession] = React.useState(undefined); // undefined = checking, null = logged out

  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();
  }, []);

  React.useEffect(() => { applyTheme(t); }, [t.theme, t.heading, t.roundness, t.cardStyle]);

  const go = React.useCallback((r) => {
    setRoute(r);
    setMenuOpen(false);
    location.hash = r;
    window.scrollTo({ top: 0, behavior: 'instant' in document.documentElement.style ? 'instant' : 'auto' });
  }, []);

  React.useEffect(() => {
    const onHash = () => setRoute((location.hash || '').replace('#', '') || 'home');
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  let Screen;
  if (route === 'materials') Screen = MaterialsScreen;
  else if (route === 'family') Screen = FamilyScreen;
  else if (route === 'about') Screen = AboutScreen;
  else Screen = HomeScreen;

  const needsAuth = route === 'materials' || route === 'family';
  React.useEffect(() => {
    if (route === 'login' && session) go('home');
  }, [route, session, go]);

  if (route === 'login' || needsAuth) {
    if (session === undefined) {
      return <div style={{ minHeight: '100vh', display: 'grid', placeItems: 'center', color: 'var(--muted)' }}>불러오는 중…</div>;
    }
    if (!session) {
      return <SiteLoginScreen />;
    }
  }

  return (
    <div className="app">
      <Header route={route} go={go} onBurger={() => setMenuOpen((v) => !v)}
              onLogout={session ? () => window.supabaseClient.auth.signOut() : undefined} />
      <MobileNav open={menuOpen} route={route} go={go}
                 onLogout={session ? () => window.supabaseClient.auth.signOut() : undefined} />
      <Screen go={go} />
      <Footer go={go} />

      <TweaksPanel>
        <TweakSection label="색상 테마" />
        <TweakColor label="팔레트" value={THEME_PALETTES[t.theme]}
          options={THEME_ORDER.map((k) => THEME_PALETTES[k])}
          onChange={(v) => setTweak('theme', PALETTE_TO_KEY[v.join(',')] || 'brand')} />

        <TweakSection label="분위기" />
        <TweakRadio label="제목 글꼴" value={t.heading}
          options={['round', 'clean']}
          onChange={(v) => setTweak('heading', v)} />
        <TweakSlider label="모서리 둥글기" value={t.roundness} min={8} max={32} step={2} unit="px"
          onChange={(v) => setTweak('roundness', v)} />
        <TweakRadio label="카드 스타일" value={t.cardStyle}
          options={['soft', 'flat']}
          onChange={(v) => setTweak('cardStyle', v)} />
      </TweaksPanel>
    </div>
  );
}

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