// Order / Kasir page — split: menu picker (left) + cart panel (right)
const { useState: useStateO, useMemo: useMemoO } = React;

function OrderPage({ pushToast }) {
  // Two modes: list of active orders + new order builder
  const [mode, setMode] = useStateO('builder'); // 'builder' | 'list'
  const [activeCat, setActiveCat] = useStateO('all');
  const [search, setSearch] = useStateO('');
  const [cart, setCart] = useStateO([
    // Pre-populated demo cart
    { sku: 'CFE-CTL', qty: 1, note: 'Less sweet' },
    { sku: 'CFE-LAT', qty: 2 },
    { sku: 'MAI-NAY', qty: 1 },
    { sku: 'SNK-FRY', qty: 1 },
  ]);
  const [tableSel, setTableSel] = useStateO('T04');
  const [guests, setGuests] = useStateO(2);
  const [tender, setTender] = useStateO('qris');
  const [discount, setDiscount] = useStateO(0);

  const filtered = useMemoO(() => {
    return MENU.filter(m => {
      if (activeCat !== 'all' && m.cat !== activeCat) return false;
      if (search && !m.name.toLowerCase().includes(search.toLowerCase()) && !m.sku.toLowerCase().includes(search.toLowerCase())) return false;
      return true;
    });
  }, [activeCat, search]);

  const addToCart = (sku) => {
    setCart(prev => {
      const idx = prev.findIndex(c => c.sku === sku);
      if (idx >= 0) {
        const copy = [...prev];
        copy[idx] = { ...copy[idx], qty: copy[idx].qty + 1 };
        return copy;
      }
      return [...prev, { sku, qty: 1 }];
    });
    pushToast({ msg: `${MENU_BY_SKU[sku].name} ditambahkan`, type: 'success' });
  };
  const setQty = (sku, q) => {
    if (q <= 0) setCart(prev => prev.filter(c => c.sku !== sku));
    else setCart(prev => prev.map(c => c.sku === sku ? { ...c, qty: q } : c));
  };

  const subtotal = cart.reduce((s, c) => s + (MENU_BY_SKU[c.sku]?.price || 0) * c.qty, 0);
  const tax = Math.round(subtotal * 0.10);  // PB1 10%
  const service = Math.round(subtotal * 0.05); // service 5%
  const total = subtotal + tax + service - discount;

  if (mode === 'list') {
    return (
      <>
        <PageHeader
          eyebrow="Kasir · Hari ini"
          title="Daftar Order"
          subtitle="Pilih order untuk lihat detail, edit, atau proses pembayaran. Klik 'Order Baru' untuk buka order baru."
          actions={<>
            <Btn icon="filter">Filter</Btn>
            <Btn tone="primary" icon="plus" onClick={() => setMode('builder')}>Order Baru</Btn>
          </>}
        />

        <div className="filter-bar">
          <input className="filter-search" placeholder="Cari order ID, meja, kasir…" />
          <select>
            <option>Semua status</option>
            <option>Open</option>
            <option>Preparing</option>
            <option>Served</option>
          </select>
          <select>
            <option>Semua zona</option>
            <option>Indoor</option>
            <option>Outdoor</option>
            <option>Bar</option>
          </select>
          <span className="muted text-sm" style={{marginLeft:'auto'}}>{ORDERS.length} order aktif · {SALES_TODAY.length} sudah closed hari ini</span>
        </div>

        <div className="grid-2 mb-6" style={{gridTemplateColumns:'repeat(auto-fill, minmax(380px, 1fr))'}}>
          {ORDERS.map(o => <OrderTicket key={o.id} order={o} onClick={() => pushToast({msg:`Buka detail ${o.id}`})} />)}
        </div>

        <Card>
          <div className="card-header">
            <h3 className="card-title">Sudah Closed Hari Ini ({SALES_TODAY.length})</h3>
          </div>
          <div className="card-body flush">
            <div className="table-wrap">
              <table className="table">
                <thead>
                  <tr>
                    <th>Order ID</th>
                    <th>Meja</th>
                    <th className="num">Items</th>
                    <th className="num">Total</th>
                    <th>Bayar</th>
                    <th>Closed</th>
                    <th>Kasir</th>
                  </tr>
                </thead>
                <tbody>
                  {SALES_TODAY.map(s => (
                    <tr key={s.id}>
                      <td className="mono" style={{fontSize:12.5}}>{s.id}</td>
                      <td>{s.table}</td>
                      <td className="num mono">{s.items}</td>
                      <td className="num mono" style={{fontWeight:600}}>{rupiah(s.total, {sym:true})}</td>
                      <td><StatusPill status={s.method} /></td>
                      <td className="mono">{s.closedAt}</td>
                      <td className="muted">{s.kasir}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </Card>
      </>
    );
  }

  return (
    <>
      <PageHeader
        eyebrow={`Kasir · ${ROLES.kasir.name} · ${SHIFT}`}
        title="Order Baru"
        subtitle="Pilih meja, tambah item, kirim ke dapur/bar. Pembayaran dapat di-split atau di-hold sampai tamu siap pulang."
        actions={<>
          <Btn icon="list" onClick={() => setMode('list')}>Daftar Order</Btn>
        </>}
      />

      {/* Order context bar */}
      <Card className="mb-4">
        <div className="card-body" style={{padding:'14px 18px', display:'flex', gap:18, flexWrap:'wrap', alignItems:'center'}}>
          <div className="row gap-2">
            <Icon name="map" size={16} />
            <span className="muted text-sm">Meja:</span>
            <select className="select" style={{width:'auto', minWidth:120, height:34}} value={tableSel} onChange={e => setTableSel(e.target.value)}>
              <option value="">— pilih —</option>
              {TABLES.filter(t => t.status === 'available').map(t => (
                <option key={t.id} value={t.id}>{t.label} · {t.zone} · {t.seats} seats</option>
              ))}
              <option disabled>──────────</option>
              <option value="T-O">T-O · Take-away</option>
            </select>
          </div>
          <div className="row gap-2">
            <Icon name="users" size={16} />
            <span className="muted text-sm">Tamu:</span>
            <input className="input" style={{width:60, height:34, textAlign:'center'}} type="number" min={1} value={guests} onChange={e => setGuests(+e.target.value)} />
          </div>
          <div className="row gap-2">
            <Icon name="user" size={16} />
            <span className="muted text-sm">Kasir:</span>
            <span style={{fontWeight:500}}>{ROLES.kasir.name}</span>
          </div>
          <div className="row gap-2" style={{marginLeft:'auto'}}>
            <span className="badge accent dot">Order baru</span>
            <span className="muted text-sm mono">{NOW_HHMM}</span>
          </div>
        </div>
      </Card>

      <div className="order-shell">
        {/* Menu picker */}
        <div>
          <div className="menu-search">
            <Icon name="search" size={18} className="muted" />
            <input value={search} onChange={e => setSearch(e.target.value)} placeholder="Cari menu (nama, SKU)…" />
            {search && <button className="btn ghost sm" onClick={() => setSearch('')}>Clear</button>}
          </div>

          <div className="menu-cat-tabs">
            {KATEGORI.map(c => (
              <button key={c.id}
                      className={'menu-cat-tab' + (activeCat === c.id ? ' active' : '')}
                      onClick={() => setActiveCat(c.id)}>
                {c.id !== 'all' && <Icon name={c.station === 'kitchen' ? 'chefHat' : 'coffee'} size={13} />}
                {c.label}
                <span style={{opacity:0.6, fontSize:11}}>
                  {c.id === 'all' ? MENU.length : MENU.filter(m => m.cat === c.id).length}
                </span>
              </button>
            ))}
          </div>

          <div className="menu-grid">
            {filtered.map(m => (
              <button key={m.sku} className="menu-tile" onClick={() => addToCart(m.sku)}>
                {m.signature && <span className="menu-tile-tag signature">SIG</span>}
                {!m.signature && m.popular && <span className="menu-tile-tag">POP</span>}
                <div className="menu-tile-thumb">
                  <Icon name={m.station === 'kitchen' ? 'utensils' : 'coffee'} size={32} />
                </div>
                <div className="menu-tile-name">{m.name}</div>
                <div className="menu-tile-price">{rupiah(m.price, {sym:true})}</div>
              </button>
            ))}
          </div>

          {filtered.length === 0 && (
            <div className="empty">Tidak ada menu cocok dengan filter</div>
          )}
        </div>

        {/* Cart panel */}
        <div className="cart-panel">
          <div className="cart-header">
            <div>
              <div className="cart-header-title">Cart · {tableSel || '—'}</div>
              <div className="muted text-sm" style={{marginTop:2}}>{cart.length} jenis · {cart.reduce((s,c)=>s+c.qty,0)} item</div>
            </div>
            {cart.length > 0 && (
              <button className="btn ghost sm" onClick={() => setCart([])}>
                <Icon name="trash" size={13} /> Clear
              </button>
            )}
          </div>

          <div className="cart-items">
            {cart.length === 0 && (
              <div className="empty">Cart kosong.<br/><span className="muted text-sm">Pilih menu di kiri untuk menambahkan</span></div>
            )}
            {cart.map(c => {
              const m = MENU_BY_SKU[c.sku];
              if (!m) return null;
              return (
                <div key={c.sku} className="cart-item">
                  <div>
                    <div className="cart-item-name">{m.name}</div>
                    <div className="cart-item-qty">
                      <button className="qty-btn" onClick={() => setQty(c.sku, c.qty - 1)}>−</button>
                      <span className="mono" style={{minWidth:18, textAlign:'center', fontWeight:600}}>{c.qty}</span>
                      <button className="qty-btn" onClick={() => setQty(c.sku, c.qty + 1)}>+</button>
                      <span className="muted" style={{marginLeft:6}}>× {rupiah(m.price, {sym:true})}</span>
                    </div>
                  </div>
                  <div className="cart-item-price">{rupiah(m.price * c.qty, {sym:true})}</div>
                  {c.note && <div className="cart-item-note">📝 {c.note}</div>}
                </div>
              );
            })}
          </div>

          <div className="cart-summary">
            <div className="cart-row"><span>Subtotal</span><span className="mono">{rupiah(subtotal, {sym:true})}</span></div>
            <div className="cart-row"><span>PB1 (10%)</span><span className="mono">{rupiah(tax, {sym:true})}</span></div>
            <div className="cart-row"><span>Service (5%)</span><span className="mono">{rupiah(service, {sym:true})}</span></div>
            {discount > 0 && <div className="cart-row" style={{color:'hsl(var(--success))'}}><span>Diskon</span><span className="mono">−{rupiah(discount, {sym:true})}</span></div>}
            <div className="cart-row total"><span>Total</span><span className="mono">{rupiah(total, {sym:true})}</span></div>

            <div className="tender-grid">
              <button className={'tender' + (tender === 'cash' ? ' active' : '')} onClick={() => setTender('cash')}>
                <Icon name="dollar" size={18} />
                <span className="tender-label">Cash</span>
              </button>
              <button className={'tender' + (tender === 'qris' ? ' active' : '')} onClick={() => setTender('qris')}>
                <Icon name="qrCode" size={18} />
                <span className="tender-label">QRIS</span>
              </button>
              <button className={'tender' + (tender === 'edc' ? ' active' : '')} onClick={() => setTender('edc')}>
                <Icon name="creditCard" size={18} />
                <span className="tender-label">Kartu</span>
              </button>
              <button className={'tender' + (tender === 'split' ? ' active' : '')} onClick={() => setTender('split')}>
                <Icon name="shuffle" size={18} />
                <span className="tender-label">Split</span>
              </button>
            </div>
          </div>

          <div className="cart-actions">
            <Btn tone="secondary" icon="save" onClick={() => pushToast({msg:'Order disimpan (hold)'})}>Hold</Btn>
            <Btn tone="primary" icon="check" disabled={cart.length === 0}
                 onClick={() => pushToast({msg:`Order ${tableSel} dikirim ke ${cart.some(c=>MENU_BY_SKU[c.sku]?.station==='kitchen')?'dapur':''}${cart.some(c=>MENU_BY_SKU[c.sku]?.station==='bar')?' bar':''}`, type:'success'})}>
              Kirim ({cart.reduce((s,c)=>s+c.qty,0)})
            </Btn>
          </div>
        </div>
      </div>
    </>
  );
}

window.OrderPage = OrderPage;