/* global React, ReactDOM, TFApi,
   ScreenOnboarding, ScreenTeamSelect, ScreenHome,
   ScreenSyncing, ScreenFlash */
const { useState, useEffect, useRef } = React;

const ONBOARDED_KEY = 'teamspark.onboarded.v1';
const ONBOARDED_KEY_OLD = 'teamflag.onboarded.v1';
function readOnboarded() {
  try {
    if (localStorage.getItem(ONBOARDED_KEY) === '1') return true;
    if (localStorage.getItem(ONBOARDED_KEY_OLD) === '1') {
      localStorage.setItem(ONBOARDED_KEY, '1');
      localStorage.removeItem(ONBOARDED_KEY_OLD);
      return true;
    }
  } catch {}
  return false;
}
function writeOnboarded() { try { localStorage.setItem(ONBOARDED_KEY, '1'); } catch {} }

// Catch render errors so a crashed screen doesn't show a blank page.
class ErrorBoundary extends React.Component {
  constructor(p) { super(p); this.state = { error: null }; }
  static getDerivedStateFromError(e) { return { error: e }; }
  componentDidCatch(error, info) {
    console.error('[Team Spark] Render error:', error, info);
  }
  render() {
    if (this.state.error) {
      return (
        <div className="phone-inner" style={{
          background: 'var(--bg)', display: 'grid', placeItems: 'center',
          padding: 24,
        }}>
          <div style={{ maxWidth: 320 }}>
            <div className="display" style={{ fontSize: 28, color: 'var(--danger)', marginBottom: 12 }}>
              SCREEN ERROR
            </div>
            <pre style={{
              fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-2)',
              background: 'var(--bg-2)', padding: 12, borderRadius: 10,
              whiteSpace: 'pre-wrap', wordBreak: 'break-word',
              border: '1px solid var(--line)',
            }}>
              {String(this.state.error?.message || this.state.error)}
            </pre>
            <button onClick={() => {
              try { localStorage.clear(); } catch {}
              window.location.reload();
            }} style={{
              marginTop: 16, padding: '12px 20px',
              background: 'var(--ink)', color: '#111', borderRadius: 12,
              fontWeight: 700,
            }}>
              Clear Data & Reload
            </button>
          </div>
        </div>
      );
    }
    return this.props.children;
  }
}

function App() {
  // route: 'boot' | 'onboarding' | 'team-select' | 'home' | 'syncing' | 'flash' | 'error'
  const [route, setRoute] = useState('boot');
  const [teamId, setTeamIdState] = useState(null);
  const [bootError, setBootError] = useState(null);
  const [syncOffset, setSyncOffset] = useState(0);

  // Boot: load teams + restore selected team
  useEffect(() => {
    (async () => {
      try {
        await window.TFApi.loadTeams();
      } catch (e) {
        setBootError('Could not connect: ' + e.message);
        setRoute('error');
        return;
      }
      const onboarded = readOnboarded();
      const savedId = window.TFApi.getTeamId();
      // Validate the saved id against loaded teams (in case the team list changed).
      const validId = savedId && window.findTeam(savedId) ? savedId : null;
      setTeamIdState(validId);
      if (!onboarded) {
        setRoute('onboarding');
      } else if (!validId) {
        setRoute('team-select');
      } else {
        setRoute('home');
      }
    })();
  }, []);

  // Cross-fade key
  const [transKey, setTransKey] = useState(0);
  const lastRoute = useRef(route);
  useEffect(() => {
    if (lastRoute.current !== route) {
      lastRoute.current = route;
      setTransKey((k) => k + 1);
    }
  }, [route]);

  const finishOnboarding = () => {
    writeOnboarded();
    setRoute(teamId ? 'home' : 'team-select');
  };

  const onTeamPicked = (id) => {
    window.TFApi.setTeamId(id);
    setTeamIdState(id);
    setRoute('home');
  };

  const onStart = () => setRoute('syncing');
  const onSyncReady = (result) => {
    setSyncOffset(result.offset);
    setRoute('flash');
  };
  const onSyncFail = (msg) => {
    alert('Sync failed: ' + msg + '\nPlease check your network connection and try again.');
    setRoute('home');
  };
  const onExitFlash = () => setRoute('home');

  const onChangeTeam = () => setRoute('team-select');

  let screen;
  if (route === 'boot') {
    screen = (
      <div className="phone-inner" style={{
        background: 'var(--bg)', display: 'grid', placeItems: 'center',
      }}>
        <div className="mono" style={{ color: 'var(--ink-3)', fontSize: 12, letterSpacing: '0.3em' }}>
          LOADING…
        </div>
      </div>
    );
  } else if (route === 'error') {
    screen = (
      <div className="phone-inner" style={{
        background: 'var(--bg)', display: 'grid', placeItems: 'center',
        padding: 24, textAlign: 'center',
      }}>
        <div>
          <div className="display" style={{ fontSize: 32, marginBottom: 12, color: 'var(--danger)' }}>
            CONNECTION ERROR
          </div>
          <div style={{ color: 'var(--ink-2)', fontSize: 14, marginBottom: 20 }}>{bootError}</div>
          <button onClick={() => window.location.reload()} style={{
            padding: '12px 24px', background: 'var(--ink)', color: '#111',
            borderRadius: 12, fontWeight: 700,
          }}>
            Try Again
          </button>
        </div>
      </div>
    );
  } else if (route === 'onboarding') {
    screen = <ScreenOnboarding onDone={finishOnboarding} />;
  } else if (route === 'team-select') {
    screen = (
      <ScreenTeamSelect
        initialTeamId={teamId}
        onDone={onTeamPicked}
        onBack={teamId ? () => setRoute('home') : null}
      />
    );
  } else if (route === 'home') {
    screen = (
      <ScreenHome
        teamId={teamId}
        onStart={onStart}
        onChangeTeam={onChangeTeam}
      />
    );
  } else if (route === 'syncing') {
    screen = (
      <ScreenSyncing
        team={teamId ? window.findTeam(teamId) : null}
        onReady={onSyncReady}
        onFail={onSyncFail}
      />
    );
  } else if (route === 'flash') {
    screen = (
      <ScreenFlash
        team={teamId ? window.findTeam(teamId) : null}
        initialOffset={syncOffset}
        onExit={onExitFlash}
      />
    );
  }

  return (
    <div id="stage">
      <div className="phone" data-screen-label={route}>
        <div key={transKey} className="fade-in" style={{ position: 'absolute', inset: 0 }}>
          <ErrorBoundary>{screen}</ErrorBoundary>
        </div>
      </div>
      <div className="viewport-hint">
        TEAM SPARK · v0.1
      </div>
    </div>
  );
}

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