// app.jsx — Liberty Shoe Drive (Option 2 — Checkpoint QR) journey host

const SCREENS = [
  { id: 'landing',     stage: 1, label: 'Draw them in' },
  { id: 'scanstart',   stage: 2, label: 'Scan in' },
  { id: 'register',    stage: 2, label: 'Register' },
  { id: 'checkpoints', stage: 3, label: 'Checkpoints' },
  { id: 'results',     stage: 4, label: 'Reveal' },
  { id: 'share',       stage: 5, label: 'Share' },
  { id: 'done',        stage: 5, label: 'Done' },
];

const STAGES = [
  { n: 1, title: 'Draw them in' },
  { n: 2, title: 'Scan in & register' },
  { n: 3, title: 'Walk & scan' },
  { n: 4, title: 'Scan out & reveal' },
  { n: 5, title: 'Share the impact' },
];

// representative scan set for deep-links / jumping past the walk:
// A, C, F  →  legs A-B, B-C, C-D, D-E, E-F  = 2.34 km = 2 pairs
const DEMO_SCANS = [0, 2, 5];

function App() {
  const [screen, setScreen] = React.useState('landing');
  const [form, setForm] = React.useState({ name: '', email: '', consent: false });
  const [scanned, setScanned] = React.useState([]); // station indices scanned

  const go = (s) => setScreen(s);
  const scanStation = (idx) =>
    setScanned(prev => (prev.includes(idx) ? prev : [...prev, idx]));

  const reset = () => {
    setScreen('landing');
    setForm({ name: '', email: '', consent: false });
    setScanned([]);
  };

  const jumpTo = (id) => {
    const needsForm = ['register', 'checkpoints', 'results', 'share', 'done'].includes(id);
    if (needsForm && (!form.name || !form.email || !form.consent)) {
      setForm({ name: form.name || 'Lerato M.', email: form.email || 'lerato@example.com', consent: true });
    }
    if (id === 'checkpoints') {
      // arrive checked-in at the start line, ready to scan the rest
      setScanned(prev => (prev.length ? prev : [0]));
    }
    if (['results', 'share', 'done'].includes(id)) {
      setScanned(prev => (prev.length >= 2 ? prev : DEMO_SCANS));
    }
    setScreen(id);
  };

  const renderScreen = () => {
    switch (screen) {
      case 'landing':
        return <LandingScreen onNext={() => go('scanstart')}/>;
      case 'scanstart':
        return <ScanStartScreen
          onDetected={(idx) => { scanStation(idx); go('register'); }}
          onBack={() => go('landing')}/>;
      case 'register':
        return <RegisterScreen form={form} setForm={setForm}
          onNext={() => { scanStation(0); go('checkpoints'); }}
          onBack={() => go('scanstart')}/>;
      case 'checkpoints':
        return <CheckpointsScreen
          scanned={scanned} onScan={scanStation} form={form}
          onFinish={() => go('results')} onBack={() => go('register')}/>;
      case 'results':
        return <ResultsScreen scanned={scanned} form={form}
          onShare={() => go('share')} onDone={() => go('done')}/>;
      case 'share':
        return <ShareScreen scanned={scanned} form={form}
          onDone={() => go('done')} onBack={() => go('results')}/>;
      case 'done':
        return <DoneScreen scanned={scanned} form={form} onRestart={reset}/>;
      default:
        return null;
    }
  };

  // optional deep-link: /?s=results jumps straight to a screen (prefilled)
  React.useEffect(() => {
    const s = new URLSearchParams(location.search).get('s');
    if (s && SCREENS.some(x => x.id === s) && s !== 'landing') jumpTo(s);
  }, []);

  const currentStage = SCREENS.find(s => s.id === screen)?.stage || 1;
  const currentLabel = SCREENS.find(s => s.id === screen)?.label || '';

  return (
    <div className="page" data-screen-label={`${screen}`}>
      <div className="page-header">
        <div className="brand-mark">
          <img src="/assets/liberty-mark-navy.png?v=3" alt="" width="26" height="26" style={{ display: 'block', objectFit: 'contain' }}/>
          <img src="/assets/liberty-word-navy.png?v=3" alt="Liberty" style={{ height: 15, width: 'auto', display: 'block' }}/>
          <span className="lockup-tag">Shoe Drive · Checkpoint QR Demo</span>
        </div>
        <div className="meta">
          Stage {currentStage} of 5<br/>
          <span style={{ color: 'rgba(11, 31, 68, 0.45)' }}>{currentLabel}</span>
        </div>
      </div>

      <div className="stage-rail" role="tablist" aria-label="Journey stages">
        {STAGES.map(s => {
          const isActive = s.n === currentStage;
          const firstScreen = SCREENS.find(sc => sc.stage === s.n)?.id;
          return (
            <button key={s.n} className={isActive ? 'active' : ''} onClick={() => jumpTo(firstScreen)} role="tab" aria-selected={isActive}>
              <span className="num">0{s.n}</span><span>{s.title}</span>
            </button>
          );
        })}
      </div>

      <div style={{ position: 'relative' }}>
        <IOSDevice width={390} height={844} dark={true}>
          {renderScreen()}
        </IOSDevice>
      </div>
    </div>
  );
}

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