// Main app — orchestrates funnel state machine

const useMobile = () => {
  const [m, setM] = React.useState(window.innerWidth < 768);
  React.useEffect(() => {
    const fn = () => setM(window.innerWidth < 768);
    window.addEventListener('resize', fn);
    return () => window.removeEventListener('resize', fn);
  }, []);
  return m;
};

const STAGES = ['home', 'gender', 'quiz', 'match', 'samples', 'checkout'];
const stageNum = (s) => STAGES.indexOf(s) + 1;

const TWEAKS_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "bone",
  "displayFont": "Cormorant Garamond",
  "navStyle": "stepper",
  "showLogoOnNav": true,
  "samplePrice": 480
}/*EDITMODE-END*/;

const PALETTES = {
  bone:      { bg: '#F4EFE8', tintMuted: '#E8E0D5', ink: '#2A2420', muted: '#7A6E60', accent: '#6B1F2A', line: '#2A24201A', navBg: 'rgba(244,239,232,0.85)' },
  sand:      { bg: '#EFE5D3', tintMuted: '#E2D6BE', ink: '#3A2E1A', muted: '#7A6A4A', accent: '#8B3A1F', line: '#3A2E1A1A', navBg: 'rgba(239,229,211,0.85)' },
  porcelain: { bg: '#F7F4EE', tintMuted: '#EAE6DD', ink: '#1A1614', muted: '#6B5F50', accent: '#6B1F2A', line: '#1A16141A', navBg: 'rgba(247,244,238,0.85)' },
  ink:       { bg: '#1A1614', tintMuted: '#2A2420', ink: '#F4EFE8', muted: '#9A8E80', accent: '#D67A4A', line: '#F4EFE822', navBg: 'rgba(26,22,20,0.85)' },
};

// Loading screen while products fetch
const LoadingScreen = ({ theme }) => (
  <div style={{
    minHeight: '100vh', background: theme.bg,
    display: 'flex', flexDirection: 'column',
    alignItems: 'center', justifyContent: 'center', gap: 24
  }}>
    <Logo size={64} variant="gold" tagline />
    <div style={{ fontFamily: '"Montserrat", sans-serif', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: theme.muted }}>
      Loading collection…
    </div>
  </div>
);

const App = () => {
  const [t, setTweak] = useTweaks(TWEAKS_DEFAULTS);
  const isMobile = useMobile();
  const palette = PALETTES[t.palette] || PALETTES.bone;
  const theme = { ...palette, mobile: isMobile };

  const [ready, setReady] = React.useState(false);
  const [loadError, setLoadError] = React.useState(null);

  // Load products from API on mount
  React.useEffect(() => {
    loadScents()
      .then(() => setReady(true))
      .catch(e => setLoadError(e.message));
  }, []);

  const [stage, setStage] = React.useState('home');
  const [gender, setGender] = React.useState(null);
  const [discoveryGender, setDiscoveryGender] = React.useState(null);
  const [answers, setAnswers] = React.useState({});
  const [match, setMatch] = React.useState(null);
  const [bottle, setBottle] = React.useState(null);
  const [samples, setSamples] = React.useState([]);
  const [subscribe, setSubscribe] = React.useState(false);
  const [subscribeScent, setSubscribeScent] = React.useState(null);

  const toggleSample = (id) => {
    setSamples(prev => {
      if (prev.includes(id)) return prev.filter(x => x !== id);
      if (prev.length >= 2) return prev;
      return [...prev, id];
    });
  };

  const reset = () => {
    setStage('home'); setGender(null); setAnswers({}); setMatch(null);
    setBottle(null); setSamples([]); setSubscribe(false); setSubscribeScent(null);
  };

  const onAnswer = (k, v) => {
    const next = { ...answers, [k]: v };
    setAnswers(next);
    if (next.mood && next.moment && next.instinct) {
      setTimeout(() => {
        const m = findMatch(gender, next);
        setMatch(m);
        setBottle(m.id);
        setSubscribeScent(m.id);
        setStage('match');
      }, 300);
    }
  };

  React.useEffect(() => {
    document.body.style.background = theme.bg;
  }, [theme.bg]);

  if (loadError) {
    return (
      <div style={{ minHeight: '100vh', background: theme.bg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div style={{ textAlign: 'center', padding: 40 }}>
          <Logo size={48} variant="gold" tagline />
          <p style={{ fontFamily: '"Montserrat", sans-serif', color: theme.muted, marginTop: 24 }}>
            Could not connect to the MOYA catalogue. Please try again later.
          </p>
          <button onClick={() => { setLoadError(null); loadScents().then(() => setReady(true)).catch(e => setLoadError(e.message)); }}
            style={{ marginTop: 16, fontFamily: '"Montserrat", sans-serif', background: 'none', border: `1px solid ${theme.ink}`, padding: '10px 24px', cursor: 'pointer', color: theme.ink }}>
            Retry
          </button>
        </div>
      </div>
    );
  }

  if (!ready) return <LoadingScreen theme={theme} />;

  return (
    <div style={{ background: theme.bg, color: theme.ink, minHeight: '100vh' }} data-screen-label={`MOYA · ${stage}`}>
      <NavBar stage={stageNum(stage)} totalStages={STAGES.length} onLogo={reset} theme={theme} />
      <Progress stage={stageNum(stage)} totalStages={STAGES.length} theme={theme} />

      {stage === 'home'               && <HomeScreen theme={theme} onStart={() => setStage('gender')} onDiscovery={() => setStage('discovery')} onContact={() => setStage('contact')} />}
      {stage === 'discovery'          && <DiscoveryScreen theme={theme} gender={discoveryGender} onSetGender={setDiscoveryGender} onCheckout={() => setStage('discovery-checkout')} onBack={() => setStage('home')} />}
      {stage === 'discovery-checkout' && discoveryGender && <CheckoutScreen theme={theme} mode="discovery" discoveryGender={discoveryGender} onComplete={reset} onBack={() => setStage('discovery')} />}
      {stage === 'contact'            && <ContactScreen theme={theme} onBack={() => setStage('home')} onHome={reset} />}
      {stage === 'gender'             && <GenderScreen theme={theme} onPick={(g) => { setGender(g); setStage('quiz'); }} />}
      {stage === 'quiz'               && <QuizScreen theme={theme} gender={gender} answers={answers} onAnswer={onAnswer} onBack={() => setStage('gender')} />}
      {stage === 'match'              && match && <MatchScreen theme={theme} scent={match} onContinue={() => setStage('samples')} onBrowse={() => setStage('samples')} />}
      {stage === 'samples'            && match && (
        <SamplesScreen theme={theme} gender={gender} match={match}
          bottle={bottle} samples={samples}
          subscribe={subscribe} subscribeScent={subscribeScent}
          onSetBottle={setBottle}
          onToggleSample={toggleSample}
          onSetSubscribe={setSubscribe}
          onSetSubscribeScent={setSubscribeScent}
          onCheckout={() => setStage('checkout')} onBack={() => setStage('match')} />
      )}
      {stage === 'checkout' && bottle && samples.length === 1 && (
        <CheckoutScreen theme={theme}
          bottle={bottle} samples={samples}
          subscribe={subscribe} subscribeScent={subscribeScent}
          onComplete={reset} onBack={() => setStage('samples')} />
      )}

      <TweaksPanel title="Tweaks">
        <TweakSection title="Palette">
          <TweakRadio value={t.palette} onChange={(v) => setTweak('palette', v)}
            options={[
              { value: 'bone', label: 'Bone' },
              { value: 'sand', label: 'Sand' },
              { value: 'porcelain', label: 'Porcelain' },
              { value: 'ink', label: 'Ink (dark)' },
            ]} />
        </TweakSection>
        <TweakSection title="Jump to stage">
          <TweakSelect value={stage} onChange={setStage} options={STAGES.map(s => ({ value: s, label: s }))} />
          <TweakButton onClick={reset}>Reset journey</TweakButton>
        </TweakSection>
        <TweakSection title="Quick simulate">
          <TweakButton onClick={() => {
            setGender('her');
            setAnswers({ mood: 'Soft & romantic', moment: 'Everyday — work, errands, life', instinct: 'Something light and airy' });
            setMatch(SCENTS['cape-dusk']);
            setStage('match');
          }}>Match: Cape Dusk</TweakButton>
          <TweakButton onClick={() => {
            setGender('him');
            setAnswers({ mood: 'Bold & magnetic', moment: 'Nights out & special occasions', instinct: 'Something dark and complex' });
            setMatch(SCENTS['midnight-safari']);
            setStage('match');
          }}>Match: Midnight Safari</TweakButton>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
};

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