/* global React, ReactDOM, IOSDevice */
const { useState, useEffect, useMemo } = React;

// ---------- Demo intro overlay ----------
function DemoIntro({ onDismiss }) {
  return (
    <div className="sw-demo-overlay" role="dialog" aria-modal="true">
      <div className="sw-demo-card">
        <div className="badge"><Heart size={12}/> PRIVATE CONCEPT DEMO</div>
        <h3>Q-S × Southwest × <em>Ape</em></h3>
        <p>What you're about to walk through is the consumer-side journey we'd put in front of a Southwest-target consumer holding a co-branded Ape Water can. Single linear flow, ~60 to 75 seconds, prize-led.</p>
        <ul>
          <li>Locked to an iPhone GUI — that's how the COO will see it in the wild.</li>
          <li>All offers, prizes, and product names are <b>illustrative</b> — concept demo only.</li>
          <li>Right pane (desktop): the live Salesforce-ready record being built per session.</li>
        </ul>
        <div style={{display:'flex', gap:10, flexWrap:'wrap'}}>
          <button className="sw-btn" onClick={onDismiss}>Walk me through it <ArrowRight /></button>
          <button className="sw-btn outline-dark" onClick={onDismiss}>Skip</button>
        </div>
      </div>
    </div>
  );
}

// ---------- Compliance footer (lighter per Section 13) ----------
function Compliance({ minimal }) {
  if (minimal) {
    return <footer className="sw-compliance minimal">Concept demo · illustrative</footer>;
  }
  return (
    <footer className="sw-compliance">
      <div><b>Concept demo · Illustrative only · Not a Southwest offer.</b> All product names, fares, prizes, and reward values shown are illustrative and not bookable.</div>
      <div>SMS opt-in is TCPA-compliant. Reply STOP to opt out.</div>
    </footer>
  );
}

// ---------- Viewport detection ----------
function useViewportMode() {
  const [mode, setMode] = useState(() => (typeof window !== 'undefined' && window.innerWidth >= 900) ? 'desktop' : 'mobile');
  useEffect(() => {
    const onResize = () => setMode(window.innerWidth >= 900 ? 'desktop' : 'mobile');
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
  return mode;
}

// ---------- Presentation shell ----------
function PresentationShell({ mode, children, overlay }) {
  if (mode === 'mobile') {
    return <div className="sw-app">{children}</div>;
  }
  return (
    <div className="sw-desktop">
      <div className="sw-desktop-main">
        <div className="sw-desktop-header">
          <div className="sw-desktop-mark">
            <span className="dot">A</span>
            Ape <span className="x">×</span> <span style={{color:'#7DA9E5'}}>Southwest</span>
            <span className="heart" style={{marginLeft:6}}>♥</span>
          </div>
          <div className="sw-desktop-tag"><span className="blink"></span> Live concept demo · iPhone preview</div>
        </div>
        <div className="sw-phone-wrap">
          <IOSDevice width={390} height={820} dark={false}>
            <div className="sw-stage in-device">{children}</div>
          </IOSDevice>
        </div>
        <div className="sw-phone-caption">Same artifact a consumer sees after scanning the can. Right pane: the live Salesforce-ready record we'd build per session.</div>
      </div>
      <div className="sw-overlay-wrap">{overlay}</div>
    </div>
  );
}

// ---------- App ----------
function App() {
  const [intro, setIntro] = useState(true);
  const [screen, setScreen] = useState('hero');
  const [qIndex, setQIndex] = useState(0);
  const [answers, setAnswers] = useState({});
  const [capture, setCapture] = useState({});
  const [advisorClicked, setAdvisorClicked] = useState(false);
  const [sharedForBonus, setSharedForBonus] = useState(false);
  const [conversionPath, setConversionPath] = useState(null);
  const mode = useViewportMode();

  const FLOWS = window.SW_FLOWS;
  const active = useMemo(() => FLOWS.activeQuestions(answers), [answers]);
  const totalSteps = active.length + 1; // +1 for capture
  const currentRaw = active[qIndex];
  const currentQ = currentRaw ? FLOWS.resolveQuestion(currentRaw, answers) : null;
  const currentVal = currentQ ? answers[currentQ.field] : undefined;

  const journeyState = useMemo(() => {
    if (screen === 'hero')        return null;
    if (screen === 'capture')     return 'CONTACT';
    if (screen === 'celebrate')   return 'ENTERED';
    if (screen === 'advisor')     return 'ADVISOR';
    if (screen === 'capstone')    return 'ROUTED';
    return currentRaw?.stateKey || null;
  }, [screen, currentRaw]);

  const progress = useMemo(() => {
    if (screen === 'hero') return 0;
    if (screen === 'flow') return (qIndex + 1) / totalSteps;
    if (screen === 'capture') return totalSteps / totalSteps;
    return 1;
  }, [screen, qIndex, totalSteps]);

  const stepLabel = useMemo(() => {
    if (screen === 'hero') return 'Start';
    if (screen === 'flow') return `${qIndex + 1} / ${totalSteps}`;
    if (screen === 'capture') return `${totalSteps} / ${totalSteps}`;
    if (screen === 'celebrate') return 'Entered';
    if (screen === 'advisor') return 'Advisor';
    return 'Routed';
  }, [screen, qIndex, totalSteps]);

  const recs = useMemo(() => window.SW_RECS.match(null, answers), [answers]);

  const start = () => { setScreen('flow'); setQIndex(0); };
  const setAnswer = (field, val) => setAnswers(prev => ({...prev, [field]: val}));

  const next = () => {
    if (qIndex < active.length - 1) {
      setQIndex(qIndex + 1);
    } else {
      setScreen('capture');
    }
    window.scrollTo(0,0);
  };
  const back = () => {
    if (screen === 'flow') {
      if (qIndex > 0) setQIndex(qIndex - 1);
      else setScreen('hero');
    } else if (screen === 'capture') {
      setScreen('flow');
      setQIndex(active.length - 1);
    } else if (screen === 'advisor') {
      setScreen('celebrate');
    }
    window.scrollTo(0,0);
  };
  const restart = () => {
    setScreen('hero'); setAnswers({}); setCapture({}); setQIndex(0);
    setAdvisorClicked(false); setSharedForBonus(false); setConversionPath(null);
    window.scrollTo(0,0);
  };

  const stage = (
    <>
      <TopBar progress={progress} stepLabel={stepLabel} intent={null} />
      {screen === 'hero' && <HeroScreen onStart={start} />}
      {screen === 'flow' && currentQ && (
        <QuestionRunner
          key={currentQ.id} q={currentQ} value={currentVal}
          onChange={(v) => setAnswer(currentQ.field, v)}
          onNext={next} onBack={back}
          onSkip={() => { next(); }}
          stepLabel={stepLabel}
        />
      )}
      {screen === 'capture' && (
        <CaptureScreen value={capture} onChange={setCapture}
          onNext={() => { setScreen('celebrate'); window.scrollTo(0,0); }} onBack={back} />
      )}
      {screen === 'celebrate' && (
        <CelebrationScreen
          answers={answers} capture={capture}
          onAdvisor={() => { setAdvisorClicked(true); setScreen('advisor'); window.scrollTo(0,0); }}
          onShare={() => setSharedForBonus(true)}
          onCapstone={() => { setScreen('capstone'); window.scrollTo(0,0); }}
          onRestart={restart}
        />
      )}
      {screen === 'advisor' && (
        <AdvisorScreen
          answers={answers} capture={capture}
          onBack={() => { setScreen('celebrate'); window.scrollTo(0,0); }}
          onCapstone={() => { setScreen('capstone'); window.scrollTo(0,0); }}
        />
      )}
      {screen === 'capstone' && (
        <CapstoneScreen answers={answers} capture={capture} onRestart={restart} />
      )}
      <Compliance minimal={screen !== 'capture' && screen !== 'hero'} />
    </>
  );

  const overlay = (
    <BuyerOverlay
      answers={answers} capture={capture} screen={screen}
      qIndex={qIndex}
      journeyState={journeyState}
      advisorClicked={advisorClicked}
      sharedForBonus={sharedForBonus}
      conversionPath={conversionPath}
      recs={(screen === 'celebrate' || screen === 'advisor' || screen === 'capstone') ? recs : []}
    />
  );

  return (
    <>
      {intro && <DemoIntro onDismiss={() => setIntro(false)} />}
      <PresentationShell mode={mode} overlay={overlay}>{stage}</PresentationShell>
    </>
  );
}

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