// app.jsx — Production: full-screen mobile, no iOS frame, Stripe redirect
const { useState: useStateA, useEffect: useEffectA } = React;

const STEPS = ['nome', 'eta', 'foto', 'tema', 'dettagli'];

const DEFAULT_STATE = {
  nome: '',
  eta: null,
  photo: null,
  tema: null,
  data: '',
  ora: '16:30',
  luogo: '',
};

// Read Stripe Payment Link from <meta> so non-devs can change it without touching code
const STRIPE_LINK = document.querySelector('meta[name="stripe-payment-link"]')?.content
  || 'https://buy.stripe.com/test_REPLACE_ME';

function App() {
  const [scene, setScene] = useStateA('welcome');
  const [step, setStep] = useStateA(0);
  const [data, setData] = useStateA({ ...DEFAULT_STATE });
  const [layoutId, setLayoutId] = useStateA('illustrato');
  const [format, setFormat] = useStateA('statico');

  // Persist invite data to localStorage so the /download page can pick it up after Stripe redirect
  const persist = (newData, newLayout, newFormat) => {
    const payload = {
      data: newData ?? data,
      layoutId: newLayout ?? layoutId,
      format: newFormat ?? format,
      ts: Date.now(),
    };
    localStorage.setItem('invitino_invite', JSON.stringify(payload));
  };

  // Restore in-progress invite if user comes back
  useEffectA(() => {
    try {
      const saved = JSON.parse(localStorage.getItem('invitino_invite') || 'null');
      if (saved && saved.data && saved.data.nome && Date.now() - saved.ts < 1000 * 60 * 60 * 24) {
        setData(saved.data);
        setLayoutId(saved.layoutId || 'illustrato');
        setFormat(saved.format || 'statico');
      }
    } catch (e) {}
  }, []);

  const startFlow = () => { setData({ ...DEFAULT_STATE }); setStep(0); setScene('step'); };
  const nextStep = () => { if (step < STEPS.length - 1) setStep(step + 1); else setScene('generating'); };
  const prevStep = () => { if (step > 0) setStep(step - 1); else setScene('welcome'); };
  const onGenerated = () => { setLayoutId('illustrato'); setScene('grid'); };
  const openInvite = (id) => { setLayoutId(id); setScene('preview'); };
  const restart = () => { setData({ ...DEFAULT_STATE }); setStep(0); setScene('welcome'); };

  // Real Stripe redirect
  const goToCheckout = () => {
    persist();
    const url = new URL(STRIPE_LINK);
    // Pass invite ref as Stripe metadata via client_reference_id
    const ref = `${(data.nome || 'invito').toLowerCase().replace(/[^a-z0-9]/g, '')}-${Date.now()}`;
    url.searchParams.set('client_reference_id', ref);
    url.searchParams.set('prefilled_email', data.email || '');
    window.location.href = url.toString();
  };

  let content;
  if (scene === 'welcome') {
    content = <WelcomeScreen onStart={startFlow} />;
  } else if (scene === 'step') {
    const props = { state: data, setState: setData, next: nextStep, back: prevStep, step, totalSteps: STEPS.length };
    if (STEPS[step] === 'nome')     content = <NomeScreen {...props} />;
    else if (STEPS[step] === 'eta') content = <EtaScreen {...props} />;
    else if (STEPS[step] === 'foto')content = <FotoScreen {...props} />;
    else if (STEPS[step] === 'tema')content = <TemaScreen {...props} />;
    else                            content = <DettagliScreen {...props} />;
  } else if (scene === 'generating') {
    content = <GeneratingScreen state={data} onDone={onGenerated} />;
  } else if (scene === 'grid') {
    content = <PreviewGridScreen state={data} setState={setData} back={() => { setStep(STEPS.length - 1); setScene('step'); }} openInvite={openInvite} restart={restart} />;
  } else if (scene === 'preview') {
    content = <InvitePreviewScreen state={data} layoutId={layoutId} format={format} back={() => setScene('grid')} onPay={goToCheckout} onChangeLayout={setLayoutId} onChangeFormat={setFormat} />;
  }

  // Full-viewport stage (no iOS frame). Keeps phone-like max width on tablets/desktop.
  return (
    <div style={{
      width: '100vw',
      minHeight: '100dvh',
      background: 'var(--bg)',
      display: 'flex', justifyContent: 'center',
    }}>
      <div style={{
        width: '100%', maxWidth: 460,
        minHeight: '100dvh',
        background: 'var(--bg)',
        position: 'relative', overflow: 'hidden',
        boxShadow: '0 0 60px rgba(0,0,0,0.06)',
      }}>
        {content}
      </div>
    </div>
  );
}

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