/* global React, ReactDOM, MEMBERS, AuthGate,
   TopBar, Dashboard, TesterScreen, LoggScreen, ProgramScreen,
   TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakSelect, TweakToggle */
const { useState } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "activeMember": null,
  "density": "comfortable",
  "range": "14d",
  "theme": "light"
}/*EDITMODE-END*/;

function App({ session }) {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useState('dash');
  const [programs, setPrograms] = useState(window.INITIAL_PROGRAMS);
  const [loaded, setLoaded] = useState(false);
  const [loadError, setLoadError] = useState(null);
  const activeId = tweaks.activeMember;
  const setActiveId = (id) => setTweak('activeMember', id);

  // Pull all data from Supabase before mounting the app surfaces.
  React.useEffect(() => {
    window.loadAllData()
      .then(summary => {
        console.log('Supabase load:', summary);
        // After auth: default active member to the logged-in user's member.
        // If they later flip the switcher to someone else (desktop power-user
        // mode), respect that choice on subsequent loads.
        const myMemberId = window.MY_MEMBER_ID;
        const currentChoice = tweaks.activeMember;
        if (myMemberId && (!currentChoice || !window.MEMBERS.find(m => m.id === currentChoice))) {
          setTweak('activeMember', myMemberId);
        }
        setLoaded(true);
      })
      .catch(err => { console.error(err); setLoadError(err.message); });
  }, [session?.user?.id]);

  // Apply density via CSS var
  React.useEffect(() => {
    document.body.dataset.density = tweaks.density;
    document.body.dataset.theme = tweaks.theme;
  }, [tweaks.density, tweaks.theme]);

  if (loadError) {
    return (
      <div style={{ padding: 48, maxWidth: 600, margin: '40px auto', fontFamily: 'var(--font-sans)' }}>
        <h2 style={{ margin: 0, fontSize: 22, fontWeight: 500 }}>Kunde inte hämta data</h2>
        <p style={{ color: 'var(--fg-muted)', fontSize: 14, marginTop: 10 }}>
          Något gick fel när appen försökte ladda från databasen:
        </p>
        <pre style={{ background: 'var(--ink-25)', border: '1px solid var(--border)', borderRadius: 4, padding: 14, fontSize: 12, overflow: 'auto' }}>
          {loadError}
        </pre>
      </div>
    );
  }

  if (!loaded) {
    return (
      <div style={{ padding: 48, maxWidth: 600, margin: '120px auto', textAlign: 'center', fontFamily: 'var(--font-sans)', color: 'var(--fg-muted)' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--fg-subtle)', marginBottom: 8 }}>
          Familjeträning
        </div>
        Laddar…
      </div>
    );
  }

  return (
    <div data-surface={tweaks.theme === 'dark' ? 'inverse' : undefined} style={{ minHeight: '100vh', background: 'var(--bg)', color: 'var(--fg)' }}>
      <TopBar activeId={activeId} setActiveId={setActiveId} route={route} setRoute={setRoute} tweaks={tweaks} />

      {route === 'dash'    && <div data-screen-label="Översikt"><Dashboard memberId={activeId} setRoute={setRoute} tweaks={tweaks} programs={programs} /></div>}
      {route === 'tester'  && <div data-screen-label="Tester"><TesterScreen memberId={activeId} tweaks={tweaks} /></div>}
      {route === 'logg'    && <div data-screen-label="Träningslogg"><LoggScreen memberId={activeId} tweaks={tweaks} programs={programs} /></div>}
      {route === 'program' && <div data-screen-label="Program"><ProgramScreen memberId={activeId} tweaks={tweaks} programs={programs} setPrograms={setPrograms} /></div>}

      <Tweaks tweaks={tweaks} setTweak={setTweak} session={session} />
    </div>
  );
}

function Tweaks({ tweaks, setTweak, session }) {
  const email = session?.user?.email;
  const onLogout = async () => {
    if (!confirm('Logga ut?')) return;
    await window.sb.auth.signOut();
  };
  return (
    <TweaksPanel>
      <TweakSection title="Aktiv familjemedlem">
        <TweakSelect
          value={tweaks.activeMember}
          onChange={v => setTweak('activeMember', v)}
          options={MEMBERS.map(m => ({ value: m.id, label: `${m.name} · ${m.role}` }))}
        />
      </TweakSection>
      <TweakSection title="Översiktsperiod">
        <TweakRadio
          value={tweaks.range}
          onChange={v => setTweak('range', v)}
          options={[
            { value: '14d', label: '14 dagar' },
            { value: 'month', label: 'Månad' },
          ]}
        />
      </TweakSection>
      <TweakSection title="Densitet">
        <TweakRadio
          value={tweaks.density}
          onChange={v => setTweak('density', v)}
          options={[
            { value: 'comfortable', label: 'Bekväm' },
            { value: 'compact', label: 'Tät' },
          ]}
        />
      </TweakSection>
      <TweakSection title="Yta">
        <TweakRadio
          value={tweaks.theme}
          onChange={v => setTweak('theme', v)}
          options={[
            { value: 'light', label: 'Ljus' },
            { value: 'dark', label: 'Mörk' },
          ]}
        />
      </TweakSection>
      <TweakSection title="Konto">
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-muted)', marginBottom: 8, wordBreak: 'break-all' }}>
          {email || '—'}
        </div>
        <button
          onClick={onLogout}
          style={{
            fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 500,
            padding: '6px 12px', borderRadius: 4,
            border: '1px solid var(--border-strong)',
            background: 'var(--bg-raised)', color: 'var(--fg)',
            cursor: 'pointer',
          }}
        >Logga ut</button>
      </TweakSection>
    </TweaksPanel>
  );
}

// Find the existing <Tweaks> render call inside App and pass session to it.
// (Done by replacing the call site below.)

ReactDOM.createRoot(document.getElementById('root')).render(
  <AuthGate>
    {(session) => <App session={session} />}
  </AuthGate>
);