const { useState: useStateOr, useMemo: useMemoOr, useEffect: useEffectOr } = React;

const STATUS_META = {
  pending:    { label: "Pending",    chip: "warn" },
  processing: { label: "Processing", chip: "warn" },
  confirmed:  { label: "Confirmed",  chip: "info" },
  shipped:    { label: "Shipped",    chip: "accent" },
  delivered:  { label: "Delivered",  chip: "pos" },
  cancelled:  { label: "Cancelled",  chip: "neg" },
};

const OrdersPage = () => {
  const D = window.PipalData;
  const I = window.Icons;
  const sb = window.supabaseClient;

  const [orders, setOrders] = useStateOr([]);
  const [loading, setLoading] = useStateOr(true);
  const [tab, setTab] = useStateOr("all");
  const [search, setSearch] = useStateOr("");
  const [selId, setSelId] = useStateOr(null);
  const [page, setPage] = useStateOr(0);
  const PAGE_SIZE = 50;

  // ── fetch ─────────────────────────────────────────────────────────────────

  useEffectOr(() => {
    if (!sb) return;
    setLoading(true);

    sb.from("orders")
      .select("id, order_number, order_status, payment_status, payment_method, total_amount, subtotal, tax_amount, shipping_amount, delivery_fee, discount_amount, platform_fee_amount, seller_payout_amount, driver_payout_amount, created_at, buyer_id, store_id, buyer_notes, seller_notes, delivery_instructions")
      .order("created_at", { ascending: false })
      .limit(200)
      .then(async ({ data: ordersData, error }) => {
        if (error || !ordersData) { setLoading(false); return; }

        const buyerIds  = [...new Set(ordersData.map(o => o.buyer_id).filter(Boolean))];
        const storeIds  = [...new Set(ordersData.map(o => o.store_id).filter(Boolean))];
        const orderIds  = ordersData.map(o => o.id);

        const [profilesRes, storesRes, itemsRes, deliveriesRes] = await Promise.all([
          sb.from("user_profiles").select("id, display_name, username, phone").in("id", buyerIds),
          sb.from("stores").select("id, name, logo_url, phone").in("id", storeIds),
          sb.from("order_items").select("id, order_id, product_id, quantity, unit_price, total_price, product_snapshot").in("order_id", orderIds),
          sb.from("deliveries").select("id, order_id, driver_id, status, assigned_at, is_flash, estimated_arrival").in("order_id", orderIds),
        ]);

        const driverIds = [...new Set((deliveriesRes.data || []).map(d => d.driver_id).filter(Boolean))];
        const driversRes = driverIds.length > 0
          ? await sb.from("user_profiles").select("id, display_name, username, phone").in("id", driverIds)
          : { data: [] };

        const profilesMap  = (profilesRes.data  || []).reduce((m, p) => { m[p.id] = p; return m; }, {});
        const storesMap    = (storesRes.data     || []).reduce((m, s) => { m[s.id] = s; return m; }, {});
        const driversMap   = (driversRes.data    || []).reduce((m, d) => { m[d.id] = d; return m; }, {});
        const itemsByOrder = (itemsRes.data      || []).reduce((m, i) => { (m[i.order_id] = m[i.order_id] || []).push(i); return m; }, {});
        const delivByOrder = (deliveriesRes.data || []).reduce((m, d) => { m[d.order_id] = d; return m; }, {});

        const enriched = ordersData.map(o => ({
          ...o,
          buyer:    profilesMap[o.buyer_id]  || null,
          store:    storesMap[o.store_id]    || null,
          items:    itemsByOrder[o.id]       || [],
          delivery: delivByOrder[o.id]       || null,
          driver:   delivByOrder[o.id]?.driver_id ? driversMap[delivByOrder[o.id].driver_id] : null,
        }));

        setOrders(enriched);
        if (enriched.length > 0) setSelId(enriched[0].id);
        setLoading(false);
      });
  }, []);

  // ── derived ───────────────────────────────────────────────────────────────

  const stats = useMemoOr(() => ({
    all:       orders.length,
    pending:   orders.filter(o => o.order_status === "pending").length,
    processing:orders.filter(o => o.order_status === "processing").length,
    shipped:   orders.filter(o => o.order_status === "shipped").length,
    delivered: orders.filter(o => o.order_status === "delivered").length,
    issues:    orders.filter(o => o.order_status === "cancelled" || o.payment_status === "failed" || o.payment_status === "refunded").length,
  }), [orders]);

  const tabs = [
    { id: "all",        name: "All",        ct: stats.all },
    { id: "pending",    name: "Pending",    ct: stats.pending },
    { id: "processing", name: "Processing", ct: stats.processing },
    { id: "shipped",    name: "Shipped",    ct: stats.shipped },
    { id: "delivered",  name: "Delivered",  ct: stats.delivered },
    { id: "issues",     name: "Issues",     ct: stats.issues },
  ];

  const filtered = useMemoOr(() => {
    let list = orders;
    if (tab === "issues") {
      list = list.filter(o => o.order_status === "cancelled" || o.payment_status === "failed" || o.payment_status === "refunded");
    } else if (tab !== "all") {
      list = list.filter(o => o.order_status === tab);
    }
    if (search.trim()) {
      const q = search.toLowerCase();
      list = list.filter(o =>
        (o.order_number || "").toLowerCase().includes(q) ||
        (o.buyer?.display_name || "").toLowerCase().includes(q) ||
        (o.buyer?.username || "").toLowerCase().includes(q) ||
        (o.store?.name || "").toLowerCase().includes(q)
      );
    }
    return list;
  }, [orders, tab, search]);

  const paginated = filtered.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);
  const sel = orders.find(o => o.id === selId) || null;

  const todayOrders = useMemoOr(() => {
    const today = new Date(); today.setHours(0,0,0,0);
    return orders.filter(o => new Date(o.created_at) >= today);
  }, [orders]);

  const todayRevenue = todayOrders.reduce((s, o) => s + Number(o.total_amount || 0), 0);
  const inFlight = orders.filter(o => ["pending","processing","shipped"].includes(o.order_status)).length;
  const cancelRate = orders.length > 0 ? (orders.filter(o => o.order_status === "cancelled").length / orders.length * 100) : 0;

  // ── render ────────────────────────────────────────────────────────────────

  return (
    <div className="page" data-screen-label="03 Orders">
      <div className="page-h">
        <div>
          <div className="ts">{loading ? "Loading…" : `${orders.length} orders loaded · live`}</div>
          <h1>Orders</h1>
        </div>
        <div className="acts">
          <button className="btn"><I.download size={12}/>Export CSV</button>
        </div>
      </div>

      {/* KPI strip */}
      <div className="kpi-grid" style={{gridTemplateColumns:"repeat(4,1fr)"}}>
        <div className="kpi">
          <div className="lbl">Orders today</div>
          <div className="val">{loading ? "—" : todayOrders.length.toLocaleString()}</div>
          <div className="sub"><span className="muted">{D.compactCurrency(todayRevenue)} GMV</span></div>
        </div>
        <div className="kpi">
          <div className="lbl">In flight</div>
          <div className="val">{loading ? "—" : inFlight}</div>
          <div className="sub"><span className="chip warn dot">{stats.pending} pending</span></div>
        </div>
        <div className="kpi">
          <div className="lbl">Delivered</div>
          <div className="val">{loading ? "—" : stats.delivered}</div>
          <div className="sub"><span className="muted">of {orders.length} total</span></div>
        </div>
        <div className="kpi">
          <div className="lbl">Cancel rate</div>
          <div className="val">{loading ? "—" : cancelRate.toFixed(1)}<span className="unit">%</span></div>
          <div className="sub"><span className="muted">{stats.issues} issues</span></div>
        </div>
      </div>

      {/* Tabs */}
      <div style={{marginTop:14}} className="ftabs">
        {tabs.map(t => (
          <div key={t.id} className={"ftab"+(tab===t.id?" active":"")} onClick={()=>{ setTab(t.id); setPage(0); }}>
            {t.name} <span className="ct">{t.ct}</span>
          </div>
        ))}
      </div>

      <div className="mob-stack" style={{display:"grid", gridTemplateColumns:"1fr 380px", gap:14, marginTop:14, height:"calc(100vh - 360px)", minHeight:480}}>

        {/* ── Left: order table ── */}
        <div className="panel" style={{display:"flex", flexDirection:"column", overflow:"hidden"}}>
          <div className="panel-h">
            <span>{filtered.length} orders</span>
            <div className="right" style={{position:"relative"}}>
              <I.search size={12} style={{position:"absolute", left:10, top:"50%", transform:"translateY(-50%)", color:"var(--ink-4)", pointerEvents:"none"}}/>
              <input
                value={search}
                onChange={e => { setSearch(e.target.value); setPage(0); }}
                placeholder="Search by order, buyer, store…"
                style={{
                  paddingLeft:28, paddingRight:10, height:26, width:240,
                  background:"var(--surface-2)", border:"1px solid var(--hairline)",
                  borderRadius:5, fontSize:12, color:"var(--ink)", outline:"none",
                  fontFamily:"var(--font-sans)"
                }}
              />
            </div>
          </div>
          <div className="t-wrap" style={{overflow:"auto", flex:1}}>
            {loading ? (
              <div style={{padding:32, textAlign:"center", color:"var(--ink-3)", fontSize:12}}>Loading orders…</div>
            ) : (
              <table className="t">
                <thead>
                  <tr>
                    <th>Order</th>
                    <th>Buyer</th>
                    <th>Store</th>
                    <th>Status</th>
                    <th>Payment</th>
                    <th style={{textAlign:"right"}}>Items</th>
                    <th style={{textAlign:"right", whiteSpace:"nowrap"}}>Total</th>
                    <th style={{whiteSpace:"nowrap"}}>Date</th>
                  </tr>
                </thead>
                <tbody>
                  {paginated.map(o => {
                    const st = STATUS_META[o.order_status] || { label: o.order_status, chip: "warn" };
                    const paidChip = o.payment_status === "paid" ? "pos" : o.payment_status === "failed" ? "neg" : "warn";
                    const date = new Date(o.created_at);
                    const dateStr = date.toLocaleDateString("en-US", {month:"short", day:"numeric"});
                    return (
                      <tr key={o.id} onClick={()=>setSelId(o.id)} style={{cursor:"pointer", background: selId===o.id ? "var(--surface-2)" : undefined}}>
                        <td><span className="id" style={{color:"var(--ink)", whiteSpace:"nowrap"}}>{o.order_number || o.id.slice(0,8).toUpperCase()}</span></td>
                        <td style={{whiteSpace:"nowrap"}}>{o.buyer?.display_name || o.buyer?.username || "—"}</td>
                        <td className="muted" style={{whiteSpace:"nowrap"}}>{o.store?.name || "—"}</td>
                        <td><span className={"chip dot " + st.chip}>{st.label}</span></td>
                        <td><span className={"chip dot " + paidChip}>{o.payment_status || "—"}</span></td>
                        <td className="num" style={{textAlign:"right"}}>{o.items.length}</td>
                        <td className="num" style={{textAlign:"right", whiteSpace:"nowrap", color:"var(--ink)"}}>{D.compactCurrency(Number(o.total_amount||0))}</td>
                        <td className="muted" style={{whiteSpace:"nowrap", fontSize:11, fontFamily:"var(--font-mono)"}}>{dateStr}</td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            )}
          </div>
          <div style={{padding:"8px 14px", borderTop:"1px solid var(--hairline)", display:"flex", justifyContent:"space-between", alignItems:"center"}}>
            <span className="muted" style={{fontSize:11, fontFamily:"var(--font-mono)"}}>
              {filtered.length === 0 ? "No orders" : `Showing ${page*PAGE_SIZE+1}–${Math.min((page+1)*PAGE_SIZE, filtered.length)} of ${filtered.length}`}
            </span>
            <div className="row gap-2">
              <button className="btn ghost" style={{height:24}} disabled={page===0} onClick={()=>setPage(p=>p-1)}>Prev</button>
              <button className="btn ghost" style={{height:24}} disabled={(page+1)*PAGE_SIZE>=filtered.length} onClick={()=>setPage(p=>p+1)}>Next</button>
            </div>
          </div>
        </div>

        {/* ── Right: order detail ── */}
        <div className="panel" style={{display:"flex", flexDirection:"column", overflow:"hidden"}}>
          {!sel ? (
            <div style={{flex:1, display:"flex", alignItems:"center", justifyContent:"center", color:"var(--ink-3)", fontSize:12}}>
              Select an order
            </div>
          ) : (
            <OrderDetail order={sel} D={D} I={I} sb={sb} onStatusChange={(id, status) => {
              setOrders(prev => prev.map(o => o.id === id ? {...o, order_status: status} : o));
            }}/>
          )}
        </div>
      </div>
    </div>
  );
};

// ── Order detail panel ─────────────────────────────────────────────────────────

const OrderDetail = ({ order: o, D, I, sb, onStatusChange }) => {
  const st = STATUS_META[o.order_status] || { label: o.order_status, chip: "warn" };
  const date = new Date(o.created_at).toLocaleString("en-US", {month:"short", day:"numeric", hour:"2-digit", minute:"2-digit"});

  const handleStatusUpdate = async (newStatus) => {
    if (!confirm(`Change status to "${newStatus}"?`)) return;
    const { error } = await sb.from("orders").update({ order_status: newStatus, updated_at: new Date().toISOString() }).eq("id", o.id);
    if (!error) onStatusChange(o.id, newStatus);
  };

  const subtotal = o.items.reduce((s, i) => s + Number(i.total_price || 0), 0);

  return (
    <>
      <div className="panel-h">
        <span className="id" style={{color:"var(--ink)"}}>{o.order_number || o.id.slice(0,8).toUpperCase()}</span>
        <div className="right">
          <span className={"chip dot " + st.chip}>{st.label}</span>
          <I.more size={14} className="muted"/>
        </div>
      </div>

      <div style={{padding:"14px", borderBottom:"1px solid var(--hairline)"}}>
        <div style={{fontSize:20, fontWeight:550, letterSpacing:"-0.01em"}}>{D.compactCurrency(Number(o.total_amount||0))}</div>
        <div className="muted" style={{fontSize:11.5, marginTop:2, fontFamily:"var(--font-mono)"}}>{date} · {o.payment_status || "—"}{o.delivery?.is_flash ? " · Flash" : ""}</div>
      </div>

      <div style={{flex:1, overflow:"auto"}}>

        <Section title="Timeline">
          <OrderTimeline status={o.order_status}/>
        </Section>

        <Section title="Buyer">
          {o.buyer ? (
            <div className="row gap-3">
              <div className="avatar" style={{width:30, height:30, fontSize:11}}>
                {(o.buyer.display_name || o.buyer.username || "?")[0].toUpperCase()}
              </div>
              <div>
                <div style={{fontWeight:500, color:"var(--ink)"}}>{o.buyer.display_name || o.buyer.username}</div>
                <div className="muted" style={{fontSize:11, fontFamily:"var(--font-mono)"}}>{o.buyer.phone || o.buyer.username || "—"}</div>
              </div>
            </div>
          ) : <div className="muted" style={{fontSize:12}}>—</div>}
        </Section>

        <Section title="Store">
          {o.store ? (
            <div className="row gap-3">
              {o.store.logo_url
                ? <img src={o.store.logo_url} style={{width:30, height:30, borderRadius:4, objectFit:"cover"}}/>
                : <div style={{width:30,height:30,borderRadius:4,background:"var(--surface-3)",display:"grid",placeItems:"center",fontSize:11,fontWeight:600,color:"var(--ink-3)"}}>{o.store.name[0]}</div>
              }
              <div>
                <div style={{fontWeight:500, color:"var(--ink)"}}>{o.store.name}</div>
                {o.store.phone && <div className="muted" style={{fontSize:11, fontFamily:"var(--font-mono)"}}>{o.store.phone}</div>}
              </div>
            </div>
          ) : <div className="muted" style={{fontSize:12}}>—</div>}
        </Section>

        {o.driver && (
          <Section title="Driver">
            <div className="row gap-3">
              <div className="avatar" style={{width:30, height:30, fontSize:11}}>
                {(o.driver.display_name || o.driver.username || "?")[0].toUpperCase()}
              </div>
              <div>
                <div style={{fontWeight:500, color:"var(--ink)"}}>{o.driver.display_name || o.driver.username}</div>
                {o.driver.phone && <div className="muted" style={{fontSize:11, fontFamily:"var(--font-mono)"}}>{o.driver.phone}</div>}
              </div>
            </div>
          </Section>
        )}

        <Section title={`Items (${o.items.length})`}>
          {o.items.length === 0
            ? <div className="muted" style={{fontSize:12}}>No items</div>
            : o.items.map((item, idx) => {
              const name = item.product_snapshot?.name || "—";
              return (
                <div key={item.id || idx} style={{display:"grid", gridTemplateColumns:"1fr auto auto", gap:10, padding:"5px 0", alignItems:"baseline", borderBottom: idx < o.items.length-1 ? "1px solid var(--hairline)" : "none"}}>
                  <div style={{fontSize:12.5, whiteSpace:"nowrap", overflow:"hidden", textOverflow:"ellipsis"}}>{name}</div>
                  <div className="num muted" style={{fontSize:11.5, whiteSpace:"nowrap"}}>×{item.quantity}</div>
                  <div className="num" style={{fontSize:12, fontWeight:500, whiteSpace:"nowrap"}}>{D.compactCurrency(Number(item.total_price||0))}</div>
                </div>
              );
            })
          }
        </Section>

        <Section title="Receipt">
          <ReceiptBlock label="Customer paid">
            <Row k="Subtotal"    v={D.currency(Number(o.subtotal||0))}/>
            {Number(o.tax_amount||0)      > 0 && <Row k="Tax"          v={D.currency(Number(o.tax_amount))}/>}
            {Number(o.shipping_amount||0) > 0 && <Row k="Shipping fee" v={D.currency(Number(o.shipping_amount))}/>}
            {Number(o.delivery_fee||0)    > 0 && <Row k="Delivery fee" v={D.currency(Number(o.delivery_fee))}/>}
            {Number(o.discount_amount||0) > 0 && <Row k="Discount"     v={`−${D.currency(Number(o.discount_amount))}`} neg/>}
            <div style={{margin:"6px 0", borderTop:"1px solid var(--hairline)"}}/>
            <Row k="Order total" v={D.currency(Number(o.total_amount||0))} bold/>
            <div style={{marginTop:8, display:"grid", gridTemplateColumns:"1fr 1fr", gap:6}}>
              <MiniCard label="Method" value={o.payment_method || "—"} capitalize/>
              <MiniCard label="Status" value={o.payment_status || "pending"} capitalize
                dot={o.payment_status==="paid" ? "var(--pos)" : o.payment_status==="failed" ? "var(--neg)" : "var(--warn)"}/>
            </div>
          </ReceiptBlock>

          {Number(o.seller_payout_amount||0) > 0 && (
            <ReceiptBlock label="Seller receives">
              <Row k="Product revenue"  v={D.currency(Number(o.subtotal||0))}/>
              <Row k="Platform fee"     v={`−${D.currency(Number(o.platform_fee_amount||0))}`} neg/>
              <div style={{margin:"6px 0", borderTop:"1px solid var(--hairline)"}}/>
              <Row k="Seller payout"    v={D.currency(Number(o.seller_payout_amount))} bold/>
            </ReceiptBlock>
          )}

          {Number(o.driver_payout_amount||0) > 0 && (
            <ReceiptBlock label="Driver receives">
              <Row k="Base fee"        v={D.currency(Number(o.driver_payout_amount))}/>
              <div style={{margin:"6px 0", borderTop:"1px solid var(--hairline)"}}/>
              <Row k="Driver earnings" v={D.currency(Number(o.driver_payout_amount))} bold/>
            </ReceiptBlock>
          )}

          {Number(o.platform_fee_amount||0) > 0 && (
            <ReceiptBlock label="Platform net">
              <Row k="Commission collected" v={D.currency(Number(o.platform_fee_amount))}/>
              {Number(o.shipping_amount||0) > 0 && <Row k="Delivery fee charged" v={D.currency(Number(o.shipping_amount))}/>}
              {Number(o.driver_payout_amount||0) > 0 && <Row k="Driver cost" v={`−${D.currency(Number(o.driver_payout_amount))}`} neg/>}
              <div style={{margin:"6px 0", borderTop:"1px solid var(--hairline)"}}/>
              <Row k="Platform net"
                v={D.currency(Number(o.platform_fee_amount) + Number(o.shipping_amount||0) - Number(o.driver_payout_amount||0))}
                bold/>
            </ReceiptBlock>
          )}
        </Section>

        {(o.buyer_notes || o.seller_notes || o.delivery_instructions) && (
          <Section title="Notes">
            {o.buyer_notes           && <NoteBlock label="Buyer"    text={o.buyer_notes}/>}
            {o.seller_notes          && <NoteBlock label="Seller"   text={o.seller_notes}/>}
            {o.delivery_instructions && <NoteBlock label="Delivery" text={o.delivery_instructions}/>}
          </Section>
        )}
      </div>

      {/* Actions */}
      <div style={{padding:"10px 14px", borderTop:"1px solid var(--hairline)", display:"flex", gap:6, flexWrap:"wrap"}}>
        {o.order_status === "pending" && (
          <button className="btn grow" onClick={() => handleStatusUpdate("processing")}><I.check size={11}/>Confirm</button>
        )}
        {o.order_status === "processing" && (
          <button className="btn grow" onClick={() => handleStatusUpdate("shipped")}><I.truck size={11}/>Mark shipped</button>
        )}
        {o.order_status === "shipped" && (
          <button className="btn primary grow" onClick={() => handleStatusUpdate("delivered")}><I.check size={11}/>Mark delivered</button>
        )}
        {!["delivered","cancelled"].includes(o.order_status) && (
          <button className="btn grow" style={{color:"var(--neg)"}} onClick={() => handleStatusUpdate("cancelled")}><I.x size={11}/>Cancel</button>
        )}
      </div>
    </>
  );
};

// ── Timeline ───────────────────────────────────────────────────────────────────

const OrderTimeline = ({ status }) => {
  const steps = [
    { k: "pending",    label: "Placed" },
    { k: "processing", label: "Processing" },
    { k: "shipped",    label: "Shipped" },
    { k: "delivered",  label: "Delivered" },
  ];
  const order = steps.map(s => s.k);
  const reached = status === "cancelled"
    ? order.indexOf("pending")
    : order.indexOf(status);

  return (
    <div style={{display:"grid", gridTemplateColumns:"24px 1fr", rowGap:0}}>
      {steps.map((s, i) => {
        const done = i <= reached;
        const cur  = i === reached && status !== "cancelled";
        return (
          <React.Fragment key={s.k}>
            <div style={{position:"relative", display:"flex", justifyContent:"center", padding:"4px 0"}}>
              <div style={{
                width: cur?14:10, height: cur?14:10, borderRadius:"50%", marginTop:4,
                background: done ? "var(--accent)" : "var(--surface-2)",
                border: done ? "none" : "1px solid var(--hairline-2)",
              }}/>
              {i < steps.length-1 && <div style={{position:"absolute", top:18, bottom:-4, width:1, background: i < reached ? "var(--accent)" : "var(--hairline)"}}/>}
            </div>
            <div style={{padding:"4px 0 12px"}}>
              <div style={{fontSize:12.5, color: done?"var(--ink)":"var(--ink-3)", fontWeight: cur?550:400}}>{s.label}</div>
            </div>
          </React.Fragment>
        );
      })}
      {status === "cancelled" && (
        <React.Fragment>
          <div style={{display:"flex", justifyContent:"center", padding:"4px 0"}}>
            <div style={{width:10, height:10, borderRadius:"50%", marginTop:4, background:"var(--neg)"}}/>
          </div>
          <div style={{padding:"4px 0"}}>
            <div style={{fontSize:12.5, color:"var(--neg)", fontWeight:550}}>Cancelled</div>
          </div>
        </React.Fragment>
      )}
    </div>
  );
};

// ── Helpers ────────────────────────────────────────────────────────────────────

const Section = ({title, children}) => (
  <div style={{padding:"14px", borderBottom:"1px solid var(--hairline)"}}>
    <div style={{fontFamily:"var(--font-mono)", fontSize:10, color:"var(--ink-3)", letterSpacing:"0.06em", textTransform:"uppercase", marginBottom:8}}>{title}</div>
    {children}
  </div>
);

const Row = ({k, v, bold, muted, neg}) => (
  <div style={{display:"flex", justifyContent:"space-between", padding:"3px 0"}}>
    <span style={{fontSize:12.5, color: muted?"var(--ink-3)":neg?"var(--neg)":"var(--ink-2)"}}>{k}</span>
    <span className="num" style={{fontSize:12.5, fontWeight: bold?600:500, color: muted?"var(--ink-3)":neg?"var(--neg)":"var(--ink)", whiteSpace:"nowrap"}}>{v}</span>
  </div>
);

const NoteBlock = ({label, text}) => (
  <div style={{marginBottom:8, padding:"8px 10px", borderRadius:5, background:"var(--surface-2)", border:"1px solid var(--hairline)"}}>
    <div style={{fontSize:9.5, fontFamily:"var(--font-mono)", color:"var(--ink-3)", textTransform:"uppercase", letterSpacing:"0.06em", marginBottom:4}}>{label}</div>
    <div style={{fontSize:12.5, color:"var(--ink)"}}>{text}</div>
  </div>
);

const ReceiptBlock = ({label, children}) => (
  <div style={{marginBottom:10, borderRadius:6, border:"1px solid var(--hairline)", overflow:"hidden"}}>
    <div style={{padding:"6px 10px", background:"var(--surface-2)", borderBottom:"1px solid var(--hairline)", fontSize:9.5, fontFamily:"var(--font-mono)", color:"var(--ink-3)", textTransform:"uppercase", letterSpacing:"0.06em"}}>{label}</div>
    <div style={{padding:"10px 10px 8px"}}>{children}</div>
  </div>
);

const MiniCard = ({label, value, dot, capitalize}) => (
  <div style={{background:"var(--surface-2)", borderRadius:5, padding:"8px 10px", border:"1px solid var(--hairline)"}}>
    <div style={{fontSize:9.5, fontFamily:"var(--font-mono)", color:"var(--ink-3)", textTransform:"uppercase", letterSpacing:"0.06em", marginBottom:3}}>{label}</div>
    <div style={{display:"flex", alignItems:"center", gap:5, fontSize:12.5, fontWeight:500, color:"var(--ink)", textTransform: capitalize?"capitalize":undefined}}>
      {dot && <span style={{width:6, height:6, borderRadius:"50%", flexShrink:0, background:dot}}/>}
      {value}
    </div>
  </div>
);

window.OrdersPage = OrdersPage;