/* global React, ReactDOM, Header, LoginScreen, WelcomeScreen, PanelScreen, ModuleScreen, ChatScreen, AdminScreen, AnnouncementsScreen, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakColor, LangProvider */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "density": "cozy",
  "tone": "utility",
  "accent": ["#0082C3","#003D7A","#E8F4FB"]
}/*EDITMODE-END*/;

const ACCENT_PALETTES = [
  ["#0082C3","#003D7A","#E8F4FB"], // Decathlon
  ["#4F46E5","#3730A3","#EEF2FF"], // Indigo
  ["#0F766E","#134E4A","#ECFDF5"], // Forest
  ["#1F2937","#0B1220","#F1F5F9"], // Graphite
  ["#C2410C","#7C2D12","#FFF7ED"], // Ember
];

const STORAGE_KEY = 'dec_onb_session';

function useApplyTweaks(t) {
  useEffect(() => {
    const r = document.documentElement;
    r.setAttribute('data-density', t.density);
    r.setAttribute('data-tone', t.tone);
    const [a, ad, a50] = Array.isArray(t.accent) ? t.accent : ACCENT_PALETTES[0];
    r.style.setProperty('--blue', a);
    r.style.setProperty('--blue-dark', ad);
    r.style.setProperty('--blue-50', a50);
  }, [t.density, t.tone, t.accent]);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useApplyTweaks(t);
  const [user, setUser] = useState(null);
  const [authLoading, setAuthLoading] = useState(true);

  const [screen, setScreen] = useState(() => {
    const h = window.location.hash.replace('#', '');
    return h || 'welcome';
  });

  // Sesja: jeśli localStorage ma kod, próbujemy zalogować przez API.
  useEffect(() => {
    let cancelled = false;
    const restore = async () => {
      try {
        const raw = localStorage.getItem(STORAGE_KEY);
        if (!raw) return;
        const code = JSON.parse(raw);
        const res = await fetch('/api/login', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ code }),
        });
        if (cancelled) return;
        if (!res.ok) {
          // Kod nieaktualny — wyczyść.
          localStorage.removeItem(STORAGE_KEY);
          return;
        }
        const u = await res.json();
        setUser(u);
      } catch {
        // Brak połączenia — nie blokujemy, zostaje ekran logowania.
      } finally {
        if (!cancelled) setAuthLoading(false);
      }
    };
    restore();
    return () => { cancelled = true; };
  }, []);

  const go = (s) => {
    setScreen(s);
    window.location.hash = s;
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const onLogin = (u) => {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(u.code));
    setUser(u);
    const start = u.role === 'admin' ? 'admin' : 'welcome';
    setScreen(start);
    window.location.hash = start;
  };

  const onLogout = () => {
    localStorage.removeItem(STORAGE_KEY);
    setUser(null);
    setScreen('welcome');
    window.location.hash = '';
  };

  useEffect(() => {
    const onHash = () => {
      const h = window.location.hash.replace('#', '');
      if (h) setScreen(h);
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const tweaksUI = (
    <TweaksPanel>
      <TweakSection title="Density" subtitle="Spacing scale across cards & rows">
        <TweakRadio value={t.density} onChange={v => setTweak('density', v)}
          options={[{value:'compact',label:'Compact'},{value:'cozy',label:'Cozy'},{value:'spacious',label:'Spacious'}]} />
      </TweakSection>
      <TweakSection title="Tone" subtitle="Visual personality of the surface">
        <TweakRadio value={t.tone} onChange={v => setTweak('tone', v)}
          options={[{value:'utility',label:'Utility'},{value:'friendly',label:'Friendly'},{value:'industrial',label:'Industrial'}]} />
      </TweakSection>
      <TweakSection title="Accent palette" subtitle="Header, primary actions, active states">
        <TweakColor value={t.accent} onChange={v => setTweak('accent', v)} options={ACCENT_PALETTES} />
      </TweakSection>
    </TweaksPanel>
  );

  // Podczas pierwszego odświeżenia sesji (z localStorage) pokazujemy pusty layout.
  if (authLoading) {
    return (
      <div className="app">
        <Header screen="" go={() => {}} user={null} onLogout={onLogout} />
        <main className="main"></main>
        {tweaksUI}
      </div>
    );
  }

  if (!user) {
    return (
      <div className="app">
        <Header screen="" go={() => {}} user={null} onLogout={onLogout} />
        <main className="main"><LoginScreen onLogin={onLogin} /></main>
        {tweaksUI}
      </div>
    );
  }

  const isAdmin = user.role === 'admin';
  const activeScreen = isAdmin ? 'admin' : (['welcome','panel','module','chat','announcements'].includes(screen) ? screen : 'welcome');

  return (
    <div className="app">
      <Header screen={activeScreen} go={go} user={user} onLogout={onLogout} />
      <main className="main" key={activeScreen}>
        {isAdmin && <AdminScreen user={user} />}
        {!isAdmin && activeScreen === 'welcome' && <WelcomeScreen go={go} user={user} />}
        {!isAdmin && activeScreen === 'panel' && <PanelScreen go={go} user={user} />}
        {!isAdmin && activeScreen === 'announcements' && <AnnouncementsScreen />}
        {!isAdmin && activeScreen === 'module' && <ModuleScreen go={go} user={user} />}
        {!isAdmin && activeScreen === 'chat' && <ChatScreen go={go} user={user} />}
      </main>
      {tweaksUI}
    </div>
  );
}

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