/* ── Zafa — app shell: routing, state, RTL, tweaks ──────────────────── */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "homeLayout": "feed",
  "primary": "#F6B0C6",
  "displayFont": "Playfair Display",
  "cardRadius": 22
} /*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // ── deep-link (for the hosted presentation page) ──
  const D = (() => {
    let raw = '';try {raw = decodeURIComponent((location.hash || '').replace(/^#/, ''));} catch (e) {}
    const [side, screen] = raw.split('/');return { side: side || '', screen: screen || '' };
  })();
  const vInit = (() => {
    if (D.side !== 'v') return {};
    const s = D.screen;
    if (['become', 'verify', 'account', 'business', 'plan'].includes(s)) return { phase: s };
    if (['dashboard', 'services', 'messages', 'editor', 'sub', 'analytics'].includes(s)) return { phase: 'app', vtab: s === 'dashboard' ? 'dash' : s };
    return {};
  })();

  const [lang, setLangState] = React.useState(() => localStorage.getItem('zafa_lang') || 'en');
  const setLang = (l) => {setLangState(l);localStorage.setItem('zafa_lang', l);};
  const rtl = lang === 'ar';
  const tr = (k) => T[k] ? T[k][lang] || T[k].en : k;

  // auth flow: onboarding → role → phone → otp → setup → app
  const [authed, setAuthed] = React.useState(() => D.side === 'c' && !['onboarding', 'role', 'phone', 'otp', 'setup'].includes(D.screen));
  const [step, setStep] = React.useState(() => D.side === 'c' && ['onboarding', 'role', 'phone', 'otp', 'setup'].includes(D.screen) ? D.screen : 'onboarding');
  const [role, setRole] = React.useState('customer');
  const [phone, setPhone] = React.useState('+971 50 123 4567');
  const [vendorMode, setVendorMode] = React.useState(() => D.side === 'v');

  const [tab, setTabState] = React.useState(() => D.side === 'c' && ['home', 'search', 'wishlist', 'ai', 'profile'].includes(D.screen) ? D.screen : 'home');
  const [stack, setStack] = React.useState(() => {
    if (D.side !== 'c') return [];
    const s = D.screen;
    if (s === 'vendor') return [{ name: 'vendor', id: 'v1' }];
    if (s === 'category') return [{ name: 'category', id: 'flowers' }];
    if (s === 'postadform') return [{ name: 'postad' }, { name: 'postadform' }];
    if (s === 'myproduct') return [{ name: 'myproducts' }, { name: 'myproduct', id: 'mp1' }];
    if (['postad', 'account', 'notifications', 'payments', 'privacy', 'help', 'marketplace', 'myproducts'].includes(s)) return [{ name: s }];
    return [];
  });
  const setTab = (id) => {setStack([]);setTabState(id);};
  const push = (route) => setStack((s) => [...s, route]);
  const pop = () => setStack((s) => s.slice(0, -1));
  const openVendor = (id) => push({ name: 'vendor', id });

  const [wish, setWish] = React.useState(() => {
    const raw = localStorage.getItem('zafa_wish');
    if (raw == null) return new Set(['v1', 'v6', 'v3']); // seeded collection
    try {return new Set(JSON.parse(raw));} catch {return new Set();}
  });
  const toggleWish = (id) => setWish((prev) => {
    const n = new Set(prev);n.has(id) ? n.delete(id) : n.add(id);
    localStorage.setItem('zafa_wish', JSON.stringify([...n]));return n;
  });

  const ctx = { lang, setLang, t: tr, rtl, tab, setTab, push, pop, openVendor, wish, toggleWish, homeLayout: t.homeLayout, role, enterVendor: () => setVendorMode(true) };
  const cssVars = { '--rose': t.primary, '--rose-press': t.primary, '--serif': `'${t.displayFont}', Georgia, serif`, '--r-md': t.cardRadius + 'px' };

  let content,showTabs = false;
  if (vendorMode) {
    content = <VendorApp onExit={() => setVendorMode(false)} initialPhase={vInit.phase} initialVtab={vInit.vtab} />;
  } else if (!authed) {
    if (step === 'onboarding') content = <Onboarding onDone={() => setStep('role')} />;else
    if (step === 'role') content = <RoleSelect onContinue={(r) => {setRole(r);if (r === 'vendor') {setVendorMode(true);} else {setStep('phone');}}} />;else
    if (step === 'phone') content = <AuthPhone onNext={(p) => {setPhone(p);setStep('otp');}} onBack={() => setStep('role')} />;else
    if (step === 'otp') content = <AuthOTP phone={phone} onVerified={() => setStep('setup')} onBack={() => setStep('phone')} />;else
    content = <ProfileSetup onDone={() => setAuthed(true)} />;
  } else {
    const top = stack[stack.length - 1];
    if (top) {
      const key = top.name + (top.id || '');
      if (top.name === 'vendor') content = <VendorProfile key={key} id={top.id} />;else
      if (top.name === 'category') content = <CategoryListing key={key} catId={top.id} />;else
      if (top.name === 'allcats') content = <AllCategories key={key} />;else
      if (top.name === 'feedlist') content = <FeedList key={key} kind={top.id} />;else
      if (top.name === 'payment') content = <PaymentScreen key={key} id={top.id} />;else
      if (top.name === 'chat') content = <ChatScreen key={key} id={top.id} />;else
      if (top.name === 'postad') content = <PostAdInfo key={key} />;else
      if (top.name === 'postadform') content = <PostAdForm key={key} />;else
      if (top.name === 'account') content = <QuickSettings key={key} />;else
      if (top.name === 'notifications') content = <NotificationsPage key={key} />;else
      if (top.name === 'payments') content = <PaymentMethodsPage key={key} />;else
      if (top.name === 'privacy') content = <PrivacyPage key={key} />;else
      if (top.name === 'help') content = <HelpPage key={key} />;else
      if (top.name === 'marketplace') content = <MarketplaceBrowse key={key} />;else
      if (top.name === 'product') content = <ProductDetail key={key} id={top.id} />;else
      if (top.name === 'myproducts') content = <MyProducts key={key} />;else
      if (top.name === 'myproduct') content = <MyProductDetail key={key} id={top.id} />;
    } else {
      showTabs = true;
      content = tab === 'home' ? <HomeScreen /> :
      tab === 'search' ? <SearchScreen /> :
      tab === 'wishlist' ? <WishlistScreen /> :
      tab === 'ai' ? <AIScreen /> :
      <ProfileScreen />;
    }
  }

  return (
    <ZafaCtx.Provider value={ctx}>
      <div className={`z-app${showTabs ? ' dock-on' : ''}`} dir={rtl ? 'rtl' : 'ltr'} style={{ height: '100%', display: 'flex', flexDirection: 'column', background: 'var(--bg)', position: 'relative', ...cssVars }}>
        {/* top linear gradient band (background only): very soft #F6B0C6 → transparent, blends into white */}
        <div aria-hidden="true" style={{ position: 'absolute', top: 0, insetInlineStart: 0, insetInlineEnd: 0, height: 140, zIndex: 0, pointerEvents: 'none', background: 'linear-gradient(to bottom, rgba(246,176,198,0.08) 0%, rgba(246,176,198,0.03) 45%, rgba(246,176,198,0) 100%)' }} />
        <div style={{ flex: 1, minHeight: 0, paddingTop: 50, display: 'flex', flexDirection: 'column' }}>
          <div style={{ flex: 1, minHeight: 0 }}>{content}</div>
        </div>
        {showTabs && <FloatingDock />}
      </div>

      <TweaksPanel>
        <TweakSection label="Home" />
        <TweakRadio label="Home layout" value={t.homeLayout} options={['feed', 'grid']} onChange={(v) => setTweak('homeLayout', v)} />
        <TweakSection label="Brand" />
        <TweakColor label="Primary / CTA" value={t.primary} options={['#F6B0C6', '#E79AB4', '#D98FA8', '#E8B7A0', '#C9A6C8']} onChange={(v) => setTweak('primary', v)} />
        <TweakSelect label="Display font" value={t.displayFont} options={['Playfair Display', 'Cormorant Garamond', 'Bodoni Moda', 'Fraunces']} onChange={(v) => setTweak('displayFont', v)} />
        <TweakSlider label="Card corners" value={t.cardRadius} min={8} max={28} unit="px" onChange={(v) => setTweak('cardRadius', v)} />
        <TweakSection label="Language" />
        <TweakRadio label="Language / اللغة" value={lang} options={['en', 'ar']} onChange={setLang} />
      </TweaksPanel>
    </ZafaCtx.Provider>);

}

/* ── Stage: scale device to viewport (or full-bleed in embed mode) ── */
function Stage() {
  const embed = typeof location !== 'undefined' && /[?&]embed\b/.test(location.search);
  const stat = typeof location !== 'undefined' && /[?&]static\b/.test(location.search);
  const [scale, setScale] = React.useState(1);
  React.useEffect(() => {
    if (embed) return;
    const fit = () => setScale(Math.min(1, (window.innerWidth - 32) / 402, (window.innerHeight - 32) / 874));
    fit();window.addEventListener('resize', fit);return () => window.removeEventListener('resize', fit);
  }, [embed]);
  if (embed) {
    // full-bleed app filling the iframe — no device bezel, no letterbox
    return <React.Fragment>
      <style>{'::-webkit-scrollbar{width:0!important;height:0!important;display:none!important} *{scrollbar-width:none!important;-ms-overflow-style:none!important}' + (stat ? ' .z-scroll{overflow:hidden!important}' : '')}</style>
      <div style={{ width: '100vw', height: '100vh', overflow: 'hidden', background: '#fff' }}><App /></div>
    </React.Fragment>;
  }
  return (
    <div style={{ minHeight: '100vh', width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#ECE7E3', padding: 16, boxSizing: 'border-box' }}>
      <div style={{ transform: `scale(${scale})`, transformOrigin: 'center center' }}>
        <IOSDevice><App /></IOSDevice>
      </div>
    </div>);

}

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