/* global React, ReactDOM, Icon, RouteCtx, Sidebar, TopBar, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle, TweakSelect, TweakButton, ScreenLanding, ScreenBinding, ScreenDashboard, ScreenRelics, ScreenStaticRoster, ScreenRaidNight, ScreenLoot, ScreenFC, ScreenSettings */

const { useState: useStateApp, useEffect: useEffectApp, useMemo: useMemoApp } = React;

// EDITMODE block for persistence
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "syncState": "ok",
  "staticEmpty": false,
  "fflogsImported": true,
  "initialScreen": "dashboard"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // initial screen from hash, or tweak default, or dashboard
  const hashScreen = () => {
    const h = (window.location.hash || '').replace('#', '');
    return h || t.initialScreen || 'dashboard';
  };
  const [screen, setScreen] = useStateApp(hashScreen);

  useEffectApp(() => {
    const onHash = () => setScreen(hashScreen());
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const go = (s) => {
    window.location.hash = s;
    setScreen(s);
  };

  const route = useMemoApp(() => ({ screen, go }), [screen]);

  // theme
  useEffectApp(() => {
    document.documentElement.classList.toggle('theme-light', t.theme === 'light');
    document.documentElement.classList.toggle('theme-dark', t.theme !== 'light');
  }, [t.theme]);

  const character = { name: 'Aerith Nightsong', world: 'Sargatanas', dc: 'Aether' };

  // Some screens have no shell (landing, binding)
  const noShell = screen === 'landing' || screen === 'binding';

  const screenEl = (() => {
    switch (screen) {
      case 'landing':   return <ScreenLanding />;
      case 'binding':   return <ScreenBinding />;
      case 'dashboard': return <ScreenDashboard />;
      case 'collections': return <ScreenPlaceholder title="Collections" sub="Coming up after the hero screens — mounts/minions/achievements grid." />;
      case 'relics':    return <ScreenRelics />;
      case 'static':    return <ScreenStaticRoster empty={t.staticEmpty} />;
      case 'raidnight': return <ScreenRaidNight imported={t.fflogsImported} />;
      case 'loot':      return <ScreenLoot />;
      case 'fc':        return <ScreenFC />;
      case 'settings':  return <ScreenSettings />;
      default:          return <ScreenDashboard />;
    }
  })();

  return (
    <RouteCtx.Provider value={route}>
      <div className={`app ${noShell ? 'no-shell' : ''}`}>
        {!noShell && <Sidebar character={character} />}
        {noShell ? (
          screenEl
        ) : (
          <div className="main">
            <TopBar
              syncState={t.syncState}
              theme={t.theme}
              onToggleTheme={() => setTweak('theme', t.theme === 'light' ? 'dark' : 'light')}
            />
            <div className="content">
              {screenEl}
            </div>
          </div>
        )}
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Theme">
          <TweakRadio
            label="Mode" value={t.theme}
            options={[{ value: 'dark', label: 'Dark' }, { value: 'light', label: 'Light' }]}
            onChange={(v) => setTweak('theme', v)}
          />
        </TweakSection>

        <TweakSection title="Screen states">
          <TweakSelect
            label="Sync chip" value={t.syncState}
            options={[
              { value: 'ok', label: 'Synced' },
              { value: 'syncing', label: 'Syncing…' },
              { value: 'failed', label: 'Sync failed' },
            ]}
            onChange={(v) => setTweak('syncState', v)}
          />
          <TweakToggle
            label="Static — empty state"
            checked={t.staticEmpty}
            onChange={(v) => setTweak('staticEmpty', v)}
          />
          <TweakToggle
            label="Raid night — post-import state"
            checked={t.fflogsImported}
            onChange={(v) => setTweak('fflogsImported', v)}
          />
        </TweakSection>

        <TweakSection title="Jump to screen">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
            {[
              ['landing', '1 · Landing'],
              ['binding', '2 · Binding'],
              ['dashboard', '3 · Dashboard'],
              ['relics', '4 · Relics'],
              ['static', '5 · Static'],
              ['raidnight', '6 · Raid night'],
              ['loot', '7 · Loot'],
              ['fc', '8 · FC'],
              ['settings', '9 · Settings'],
            ].map(([id, label]) => (
              <button
                key={id}
                onClick={() => go(id)}
                style={{
                  padding: '7px 10px',
                  fontSize: 12,
                  background: screen === id ? 'var(--primary-bg, #2a2a3a)' : 'var(--bg-elev, #161623)',
                  border: '1px solid var(--border-soft, #2a2a3a)',
                  borderRadius: 6,
                  color: screen === id ? 'var(--primary-hi, #b7a8ff)' : 'var(--text, #ddd)',
                  cursor: 'pointer',
                  fontFamily: 'inherit',
                  textAlign: 'left',
                }}
              >
                {label}
              </button>
            ))}
          </div>
        </TweakSection>
      </TweaksPanel>
    </RouteCtx.Provider>
  );
}

function ScreenPlaceholder({ title, sub }) {
  return (
    <div>
      <div className="page-h">
        <div>
          <h1 className="page-h-title">{title}</h1>
          <div className="page-h-sub">{sub}</div>
        </div>
      </div>
      <div className="card" style={{ padding: 60, textAlign: 'center' }}>
        <div className="muted" style={{ fontSize: 13 }}>This screen is part of the broader product but not in this round of mockups.</div>
      </div>
    </div>
  );
}

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