// กับข้าวคุณแม่ — main app: state, routing, tweaks panel.

const { useState: useStateApp, useEffect: useEffectApp, useMemo: useMemoApp } = React;
const tA = (l, k) => window.tt(l, k);

// Defaults that survive on disk via tweaks panel persistence.
const APP_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "th",
  "layout": "grid",
  "tableNo": 7
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = window.useTweaks(APP_DEFAULTS);
  const lang = tweaks.lang;
  const layout = tweaks.layout;
  const tableNo = tweaks.tableNo;

  // screens stack: 'welcome' → 'main' (which is one of tab views)
  // overlays: itemDetail, checkout, status, receipt
  const [screen, setScreen] = useStateApp('welcome');
  const [tab, setTab] = useStateApp('menu');
  const [cart, setCart] = useStateApp([]);
  const [openItem, setOpenItem] = useStateApp(null);
  const [overlay, setOverlay] = useStateApp(null); // 'checkout' | 'status' | 'receipt'
  const [activeOrder, setActiveOrder] = useStateApp(null);
  const [sessionOrders, setSessionOrders] = useStateApp([]);

  const cartCount = cart.reduce((s, l) => s + l.qty, 0);
  const subtotal = cart.reduce((s, l) => s + l.total, 0);

  // ── handlers ─────────────────────────────────────────────────
  const handleAddToCart = (line) => {
    setCart(c => [...c, line]);
    setOpenItem(null);
  };

  const handleCheckout = (total) => {
    setOverlay('checkout');
  };

  const handleConfirmOrder = async (method = 'qr') => {
    // normalize cart → storage format {name, qty, price}
    const items = cart.map(l => ({ name: l.name, qty: l.qty, price: l.total }));
    let orderId = 'A-' + String(Math.floor(Math.random() * 900) + 100);
    try {
      const res = await fetch('/api/orders', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ tableNo, items, total: subtotal, paymentMethod: method }),
      });
      const data = await res.json();
      if (data.id) orderId = data.id;
    } catch (_) { /* offline fallback: ใช้ local ID */ }
    const order = { id: orderId, cart, total: subtotal, paymentMethod: method, ts: Date.now() };
    setActiveOrder(order);
    setSessionOrders(s => [order, ...s]);
    setCart([]);
    setOverlay('status');
  };

  // ── render ───────────────────────────────────────────────────
  const renderMainTab = () => {
    if (tab === 'menu') return (
      <window.MenuScreen
        lang={lang}
        layout={layout}
        setLayout={(L) => setTweak('layout', L)}
        onOpenItem={setOpenItem}
        tableNo={tableNo}
      />
    );
    if (tab === 'cart') return (
      <window.CartScreen
        lang={lang}
        cart={cart}
        setCart={setCart}
        onCheckout={handleCheckout}
        onBrowse={() => setTab('menu')}
        tableNo={tableNo}
      />
    );
    if (tab === 'order') {
      if (activeOrder) return (
        <window.OrderStatusScreen
          lang={lang}
          order={activeOrder}
          tableNo={tableNo}
          onReceipt={() => setOverlay('receipt')}
          onMore={() => setTab('menu')}
        />
      );
      return <EmptyOrder lang={lang} onBrowse={() => setTab('menu')} />;
    }
    if (tab === 'history') return (
      <window.HistoryScreen lang={lang} sessionOrders={sessionOrders} tableNo={tableNo} />
    );
    return null;
  };

  const isMobile = window.matchMedia('(max-width: 480px)').matches;

  const appShell = (
    <div style={{ position: 'absolute', inset: 0, background: 'var(--cream-50)' }}>
      {screen === 'welcome' && (
        <window.WelcomeScreen
          lang={lang}
          tableNo={tableNo}
          onStart={() => setScreen('main')}
        />
      )}
      {screen === 'main' && (
        <>
          {renderMainTab()}
          <window.BottomNav tab={tab} setTab={setTab} cartCount={cartCount} lang={lang} />
        </>
      )}

      {/* overlays */}
      {openItem && (
        <window.ItemDetail
          item={openItem}
          lang={lang}
          onClose={() => setOpenItem(null)}
          onAdd={handleAddToCart}
        />
      )}
      {overlay === 'checkout' && (
        <div style={{ position: 'absolute', inset: 0, zIndex: 90 }} className="fade-in">
          <window.CheckoutScreen
            lang={lang}
            cart={cart}
            total={subtotal}
            tableNo={tableNo}
            onBack={() => setOverlay(null)}
            onConfirm={(method) => handleConfirmOrder(method)}
          />
        </div>
      )}
      {overlay === 'status' && activeOrder && (
        <div style={{ position: 'absolute', inset: 0, zIndex: 90 }} className="fade-in">
          <window.OrderStatusScreen
            lang={lang}
            order={activeOrder}
            tableNo={tableNo}
            onReceipt={() => setOverlay('receipt')}
            onMore={() => { setOverlay(null); setTab('menu'); }}
          />
          <button onClick={() => { setOverlay(null); setTab('order'); }} className="press" style={{
            position: 'absolute', top: 56, right: 18, zIndex: 95,
            padding: '6px 12px', borderRadius: 999,
            background: 'rgba(255,252,245,0.9)',
            border: '1px solid var(--cream-200)',
            fontSize: 12, fontWeight: 500, color: 'var(--brown-700)',
          }}>{lang === 'th' ? 'ย่อ' : 'Hide'}</button>
        </div>
      )}
      {overlay === 'receipt' && activeOrder && (
        <div style={{ position: 'absolute', inset: 0, zIndex: 95 }} className="fade-in">
          <window.ReceiptScreen
            lang={lang}
            order={activeOrder}
            tableNo={tableNo}
            onBack={() => setOverlay('status')}
          />
        </div>
      )}
    </div>
  );

  return (
    <div style={{ position: 'relative' }}>
      {isMobile ? (
        /* มือถือจริง: fullscreen ไม่มีกรอบ */
        <div style={{
          width: '100vw', height: '100dvh',
          position: 'relative', overflow: 'hidden',
        }}>
          {appShell}
        </div>
      ) : (
        /* Desktop preview: กรอบ iOS จำลอง */
        <window.IOSDevice width={402} height={874}>
          {appShell}
        </window.IOSDevice>
      )}

      {/* Tweaks panel เฉพาะ desktop */}
      {!isMobile && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection label={lang === 'th' ? 'การแสดงผล' : 'Display'}>
            <window.TweakRadio
              label={lang === 'th' ? 'ภาษา · Language' : 'Language · ภาษา'}
              value={lang}
              onChange={(v) => setTweak('lang', v)}
              options={[{ value: 'th', label: 'ไทย' }, { value: 'en', label: 'English' }]}
            />
            <window.TweakRadio
              label={lang === 'th' ? 'รูปแบบเมนู' : 'Menu layout'}
              value={layout}
              onChange={(v) => setTweak('layout', v)}
              options={[
                { value: 'grid', label: lang === 'th' ? 'ตาราง' : 'Grid' },
                { value: 'list', label: lang === 'th' ? 'รายการ' : 'List' },
              ]}
            />
          </window.TweakSection>
          <window.TweakSection label={lang === 'th' ? 'จำลองสถานการณ์' : 'Simulation'}>
            <window.TweakSlider
              label={lang === 'th' ? 'เลขโต๊ะ' : 'Table no.'}
              value={tableNo}
              min={1} max={24} step={1}
              onChange={(v) => setTweak('tableNo', v)}
            />
            <window.TweakButton
              label={lang === 'th' ? '↺ เริ่มใหม่ตั้งแต่หน้า Welcome' : '↺ Restart from welcome'}
              onClick={() => { setScreen('welcome'); setTab('menu'); setCart([]); setOverlay(null); setActiveOrder(null); }}
            />
            <window.TweakButton
              label={lang === 'th' ? '→ ข้ามไปหน้าเมนู' : '→ Skip to menu'}
              secondary
              onClick={() => { setScreen('main'); setTab('menu'); }}
            />
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </div>
  );
}

function EmptyOrder({ lang, onBrowse }) {
  return (
    <div style={{ position: 'absolute', inset: 0, background: 'var(--cream-50)', display: 'flex', flexDirection: 'column' }}>
      <window.AppHeader title={tA(lang, 'status_title')} />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '0 28px', textAlign: 'center' }}>
        <div style={{
          width: 110, height: 110, borderRadius: '50%',
          background: 'var(--cream-100)', color: 'var(--brown-300)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          marginBottom: 16,
        }}>
          <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M5 4h11l4 4v12H5z"/><path d="M16 4v4h4"/>
          </svg>
        </div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700, color: 'var(--brown-900)' }}>
          {lang === 'th' ? 'ยังไม่มีออเดอร์ที่กำลังดำเนินการ' : 'No active order'}
        </div>
        <div style={{ fontSize: 13, color: 'var(--brown-500)', marginTop: 6 }}>
          {lang === 'th' ? 'สั่งอาหารก่อน แล้วสถานะจะมาแสดงที่นี่' : 'Place an order to see its status here.'}
        </div>
        <button onClick={onBrowse} className="press" style={{
          marginTop: 18, padding: '12px 20px',
          background: 'var(--terra)', color: 'white', borderRadius: 14,
          fontWeight: 600, fontSize: 14,
        }}>{tA(lang, 'cart_browse')}</button>
      </div>
    </div>
  );
}

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