/* App.jsx — root, two iPhone frames side by side */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "preset": "rings",
  "intensity": 1.0,
  "accent": "#D9531E",
  "reducedMotion": false,
  "leftDark": false,
  "rightDark": true,
  "leftScreen": "map",
  "rightScreen": "vendor"
}/*EDITMODE-END*/;

function Phone({ label, dark, screen, vendorId, setScreen, setVendorId, preset, intensity, reducedMotion, frameId }) {
  const vendor = vendorId ? VENDORS.find(v => v.id === vendorId) : null;

  // Order flow state — per-phone so the two phones run independent scenarios.
  const [cart, setCart] = React.useState({});
  const [slot, setSlot] = React.useState(null);

  // When user navigates back to map, clear cart so each session is fresh
  React.useEffect(() => {
    if (screen === 'map') { setCart({}); setSlot(null); }
  }, [screen]);

  const isOrder = screen && screen.startsWith('order-');

  return (
    <div className={dark ? 'dark phone-wrap' : 'phone-wrap'}>
      <div className="phone-label">{label}</div>
      <IOSDevice width={390} height={844} dark={dark}>
        <div style={{ position: 'relative', height: '100%', overflow: 'hidden' }}>
          {/* Map screen always rendered as base */}
          <MapScreen
            dark={dark}
            vendors={VENDORS}
            preset={preset}
            reducedMotion={reducedMotion}
            intensity={intensity}
            selectedId={(screen === 'vendor' || isOrder) ? vendorId : null}
            onSelectVendor={(id) => { setVendorId(id); setScreen('vendor'); }}
          />

          {/* Vendor screen overlays when active. Unmounted during order flow
              so order screens own the device frame cleanly. */}
          {screen === 'vendor' && vendor && (
            <VendorScreen
              vendor={vendor}
              onClose={() => setScreen('map')}
              onPlaceOrder={() => {
                const count = Object.values(cart).reduce((a,b)=>a+b,0);
                setScreen(count > 0 ? 'order-pickup' : 'order-menu');
              }}
              cart={cart}
              setCart={setCart}
              dark={dark}
              preset={preset}
              reducedMotion={reducedMotion}
              intensity={intensity}
              frameId={frameId}
            />
          )}

          {/* Order flow — full-screen overlays */}
          {screen === 'order-menu' && vendor && (
            <OrderItemPicker
              vendor={vendor} cart={cart} setCart={setCart}
              onBack={() => setScreen('vendor')}
              onNext={() => setScreen('order-pickup')}
              dark={dark}
            />
          )}
          {screen === 'order-pickup' && vendor && (
            <OrderPickup
              vendor={vendor} slot={slot} setSlot={setSlot}
              onBack={() => setScreen(Object.values(cart).reduce((a,b)=>a+b,0) > 0 ? 'vendor' : 'order-menu')}
              onNext={() => setScreen('order-confirm')}
              dark={dark}
            />
          )}
          {screen === 'order-confirm' && vendor && (
            <OrderConfirm
              vendor={vendor} cart={cart} slot={slot}
              onBack={() => setScreen('order-pickup')}
              onPlace={() => setScreen('order-ready')}
              dark={dark}
            />
          )}
          {screen === 'order-ready' && vendor && (
            <OrderReady
              vendor={vendor} cart={cart} slot={slot}
              onClose={() => { setScreen('vendor'); }}
              onMap={() => setScreen('map')}
              dark={dark}
              preset={preset} reducedMotion={reducedMotion} intensity={intensity}
            />
          )}
        </div>
      </IOSDevice>
    </div>
  );
}

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

  // Two phones with independent state
  const [leftScreen,   setLeftScreen]   = React.useState(tweak.leftScreen);
  const [leftVendor,   setLeftVendor]   = React.useState('saltgrass');
  const [rightScreen,  setRightScreen]  = React.useState(tweak.rightScreen);
  const [rightVendor,  setRightVendor]  = React.useState('saltgrass');

  // Sync default screen choice from tweaks (one-way: tweak panel resets)
  React.useEffect(() => { setLeftScreen(tweak.leftScreen); }, [tweak.leftScreen]);
  React.useEffect(() => { setRightScreen(tweak.rightScreen); }, [tweak.rightScreen]);

  // Apply accent globally
  React.useEffect(() => {
    document.documentElement.style.setProperty('--accent', tweak.accent);
    document.documentElement.style.setProperty('--halo-inner', tweak.accent);
  }, [tweak.accent]);

  React.useEffect(() => {
    document.documentElement.classList.toggle('reduced-motion', tweak.reducedMotion);
  }, [tweak.reducedMotion]);

  return (
    <div>
      <header className="stage-header">
        <div className="stage-wordmark">
          <span className="dot"/>
          <span>WTF</span>
          <span className="tag">Where Foodies Find Food</span>
        </div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9.5, letterSpacing: '0.10em', textTransform: 'uppercase', color: 'rgba(242,235,221,0.32)', marginTop: 2 }}>v0 · Map + Vendor + Order flow</div>
      </header>

      <main className="stage">
        <Phone
          label="Light · Map (home)"
          dark={tweak.leftDark}
          screen={leftScreen}
          vendorId={leftVendor}
          setScreen={setLeftScreen}
          setVendorId={setLeftVendor}
          preset={tweak.preset}
          intensity={tweak.intensity}
          reducedMotion={tweak.reducedMotion}
          frameId="L"
        />
        <Phone
          label="Dark · Vendor detail (Saltgrass Tacos)"
          dark={tweak.rightDark}
          screen={rightScreen}
          vendorId={rightVendor}
          setScreen={setRightScreen}
          setVendorId={setRightVendor}
          preset={tweak.preset}
          intensity={tweak.intensity}
          reducedMotion={tweak.reducedMotion}
          frameId="R"
        />
      </main>

      <div className="stage-footer">
        <div className="note">No paid placement · cluster-by-brightest · presence, never absence</div>
      </div>

      <Tweaks t={t} />
    </div>
  );
}

function Tweaks({ t }) {
  const [tweak, setTweak] = t;
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Halo language">
        <TweakRadio
          label="Preset"
          value={tweak.preset}
          options={['rings', 'soft', 'dashed']}
          onChange={(v) => setTweak('preset', v)}
        />
        <TweakSlider
          label="Halo intensity"
          value={tweak.intensity}
          min={0.4} max={1.4} step={0.05}
          onChange={(v) => setTweak('intensity', v)}
        />
        <TweakColor
          label="Accent / ember"
          value={tweak.accent}
          options={['#D9531E', '#E8430F', '#C2682E', '#8B2A05', '#A24A2A']}
          onChange={(v) => setTweak('accent', v)}
        />
        <TweakToggle
          label="Reduced motion"
          value={tweak.reducedMotion}
          onChange={(v) => setTweak('reducedMotion', v)}
        />
      </TweakSection>

      <TweakSection label="Phones">
        <TweakRadio
          label="Left phone"
          value={tweak.leftDark ? 'dark' : 'light'}
          options={['light', 'dark']}
          onChange={(v) => setTweak('leftDark', v === 'dark')}
        />
        <TweakSelect
          label="Left screen"
          value={tweak.leftScreen}
          options={['map', 'vendor', 'order-menu', 'order-pickup', 'order-confirm', 'order-ready']}
          onChange={(v) => setTweak('leftScreen', v)}
        />
        <TweakRadio
          label="Right phone"
          value={tweak.rightDark ? 'dark' : 'light'}
          options={['light', 'dark']}
          onChange={(v) => setTweak('rightDark', v === 'dark')}
        />
        <TweakSelect
          label="Right screen"
          value={tweak.rightScreen}
          options={['map', 'vendor', 'order-menu', 'order-pickup', 'order-confirm', 'order-ready']}
          onChange={(v) => setTweak('rightScreen', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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