// HimLocal — Mobile v2.2 Cafes + Address selector + Customize sheet

const { useState: useStateMC, useMemo: useMemoMC } = React;
const MCafeIcon = window.HomeIcon;

// ─── Mobile cafes list ──────────────────────────────────
function MobileCafesList({ data, onBack, onOpenCafe }) {
  return (
    <div className="app-cafelist">
      <button onClick={onBack} style={{position:'absolute',top:60,left:14,width:36,height:36,borderRadius:'50%',background:'var(--bg-paper)',border:'1px solid var(--border-1)',cursor:'pointer',color:'var(--slate-700)',zIndex:5}}>←</button>
      <div className="app-cafelist__head" style={{paddingTop:62}}>
        <h1 className="app-cafelist__t">Cafés &amp; <em>kitchens.</em></h1>
        <div className="app-cafelist__sub">Order in, take away, or sit down. Every café runs on HimLocal.</div>
      </div>
      {data.cafes.map(c => (
        <button key={c.id} className="app-cafe-card" onClick={() => onOpenCafe(c.id)}>
          <div className="app-cafe-card__bg" style={{ backgroundImage:`url(${c.img})` }}/>
          <div className="app-cafe-card__scrim"/>
          <div className="app-cafe-card__chips">
            {c.modes.map(m => <span key={m} className="app-cafe-card__chip">{m === 'dinein' ? 'Dine-in' : m === 'takeaway' ? 'Takeaway' : 'Delivery'}</span>)}
          </div>
          <div className="app-cafe-card__name">{c.name}</div>
          <div className="app-cafe-card__loc">{c.loc}</div>
        </button>
      ))}
    </div>
  );
}
window.MobileCafesList = MobileCafesList;

// ─── Mobile cafe detail ──────────────────────────────────
function MobileCafeDetail({ data, cafe, cart, mode, onBack, onMode, onAdd, onQty, onCheckout, onOpenCart }) {
  const [customizing, setCustomizing] = useStateMC(null);
  const [activeSect, setActiveSect] = useStateMC(cafe?.menu?.[0]?.section);
  const c = cafe;
  if (!c) return null;

  const quickAdd = (item) => {
    const hasOpts = (item.variants && item.variants.length > 0) || (item.addons && item.addons.length > 0);
    if (hasOpts) { setCustomizing(item); return; }
    onAdd(item, { unitPrice:item.price, qty:1, customLabel:'' });
  };
  const itemQty = (id) => cart.filter(l => l.itemId === id && !l.customLabel).reduce((s, l) => s + l.qty, 0);
  const itemLineId = (id) => cart.find(l => l.itemId === id && !l.customLabel)?.lineId;
  const scrollToSect = (name) => {
    setActiveSect(name);
    const el = document.getElementById('app-cafe-sect-' + name.replace(/\s+/g, '-'));
    if (el) el.scrollIntoView({ behavior:'smooth', block:'start' });
  };

  const subtotal = cart.reduce((s, l) => s + l.unitPrice * l.qty, 0);
  return (
    <div className="app-cafepage">
      <div className="app-cafepage__scroll">
        <div className="app-cafepage__hero" style={{ backgroundImage:`url(${c.img})` }}>
          <div className="app-cafepage__scrim"/>
          <button className="app-cafepage__back" onClick={onBack}>←</button>
          <div className="app-cafepage__hero-copy">
            <h1 className="app-cafepage__hero-title">{c.name}</h1>
            <div className="app-cafepage__hero-meta">{c.loc} · {c.hours}</div>
          </div>
        </div>
        <div className="app-cafepage__modes">
          {['dinein','takeaway','delivery'].map(m => {
            const avail = c.modes.includes(m);
            return (
              <button key={m} className={`app-cafepage__mode ${mode === m ? 'is-on' : ''}`} onClick={() => avail && onMode(m)} disabled={!avail}>
                {m === 'dinein' ? 'Dine-in' : m === 'takeaway' ? 'Takeaway' : 'Delivery'}
              </button>
            );
          })}
        </div>
        <div className="app-cafepage__story">{c.story}</div>

        {/* Sticky category nav */}
        <div className="app-cafepage__catnav">
          {c.menu.map(sect => (
            <button key={sect.section}
              className={`app-cafepage__catchip ${activeSect === sect.section ? 'is-on' : ''}`}
              onClick={() => scrollToSect(sect.section)}>
              {sect.section} <span style={{opacity:.6}}>· {sect.items.length}</span>
            </button>
          ))}
        </div>

        {c.menu.map(sect => (
          <div key={sect.section} id={'app-cafe-sect-' + sect.section.replace(/\s+/g, '-')} className="app-cafepage__sect">
            <h2 className="app-cafepage__sect-t">{sect.section}</h2>
            {sect.items.map(it => {
              const hasOpts = (it.variants && it.variants.length > 0) || (it.addons && it.addons.length > 0);
              const qty = itemQty(it.id);
              const lineId = itemLineId(it.id);
              return (
                <div key={it.id} className="app-cafepage__item" onClick={() => hasOpts ? setCustomizing(it) : null}>
                  <div className="app-cafepage__item-body">
                    <div className="app-cafepage__item-name">{it.name}{hasOpts && <span style={{font:'600 8.5px var(--font-body)',letterSpacing:'.14em',textTransform:'uppercase',color:'var(--fg-3)',marginLeft:8,padding:'2px 6px',background:'var(--bone-100)',borderRadius:4,verticalAlign:'middle'}}>Customize</span>}</div>
                    <div className="app-cafepage__item-desc">{it.desc}</div>
                    <div className="app-cafepage__item-price">₹{it.price.toLocaleString()}</div>
                  </div>
                  <div className="app-cafepage__item-img" style={{ backgroundImage:`url(${it.img})` }}>
                    {!hasOpts && qty > 0 ? (
                      <div className="app-cafepage__qty-badge" onClick={e => e.stopPropagation()}>
                        <button onClick={() => onQty(lineId, -1)}>−</button>
                        <span>{qty}</span>
                        <button onClick={() => onQty(lineId, 1)}>+</button>
                      </div>
                    ) : (
                      <button className="app-cafepage__item-add" onClick={e => { e.stopPropagation(); quickAdd(it); }}>+</button>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
        ))}
      </div>

      {cart.length > 0 && (
        <button className="app-cafepage__check" onClick={onOpenCart}>
          <span className="app-cafepage__check-count">{cart.reduce((s, l) => s + l.qty, 0)}</span>
          <div className="app-cafepage__check-body">
            <div className="app-cafepage__check-l1">View order · ₹{subtotal.toLocaleString()}</div>
            <div className="app-cafepage__check-l2">{mode === 'dinein' ? 'Dine-in' : mode === 'takeaway' ? 'Takeaway' : 'Delivery'} · {cart.length} {cart.length === 1 ? 'item' : 'items'}</div>
          </div>
          <span className="app-cafepage__check-arrow">→</span>
        </button>
      )}

      {customizing && (
        <div style={{position:'absolute',inset:0,background:'rgba(14,26,36,.55)',zIndex:94}} onClick={() => setCustomizing(null)}>
          <MobileItemCustomize item={customizing}
            onClose={() => setCustomizing(null)}
            onAdd={(detail) => { onAdd(customizing, detail); setCustomizing(null); }}/>
        </div>
      )}
    </div>
  );
}
window.MobileCafeDetail = MobileCafeDetail;

// ─── Mobile item customize sheet ─────────────────────────
function MobileItemCustomize({ item, onClose, onAdd }) {
  const variants = item.variants || [];
  const addons = item.addons || [];
  const [variantIdx, setVariantIdx] = useStateMC(variants.length > 0 ? 0 : -1);
  const [addOnPicks, setAddOnPicks] = useStateMC([]);
  const [qty, setQty] = useStateMC(1);
  const unit = item.price + (variantIdx >= 0 ? (variants[variantIdx]?.price || 0) : 0) + addOnPicks.reduce((s, i) => s + (addons[i]?.price || 0), 0);
  const total = unit * qty;
  const toggleAddon = (i) => setAddOnPicks(p => p.includes(i) ? p.filter(x => x !== i) : [...p, i]);
  const submit = () => {
    const parts = [];
    if (variantIdx >= 0 && variants[variantIdx]) parts.push(variants[variantIdx].name);
    addOnPicks.forEach(i => parts.push('+ ' + addons[i].name));
    onAdd({ unitPrice:unit, qty, customLabel:parts.join(' · ') });
  };
  return (
    <div className="app-cust" onClick={e => e.stopPropagation()}>
      <div className="app-cust__img" style={{ backgroundImage:`url(${item.img})` }}/>
      <div className="app-cust__body">
        <h2 className="app-cust__title">{item.name}</h2>
        <div className="app-cust__desc">{item.desc}</div>
        {variants.length > 0 && (
          <div className="app-cust__group">
            <div className="app-cust__group-l">Choose one</div>
            {variants.map((v, i) => (
              <button key={i} className={`app-cust__opt ${variantIdx === i ? 'is-on' : ''}`} onClick={() => setVariantIdx(i)}>
                {v.name}<span>{v.price > 0 ? `+₹${v.price}` : 'Included'}</span>
              </button>
            ))}
          </div>
        )}
        {addons.length > 0 && (
          <div className="app-cust__group">
            <div className="app-cust__group-l">Add ons</div>
            {addons.map((a, i) => (
              <button key={i} className={`app-cust__opt ${addOnPicks.includes(i) ? 'is-on' : ''}`} onClick={() => toggleAddon(i)}>
                {a.name}<span>+₹{a.price}</span>
              </button>
            ))}
          </div>
        )}
      </div>
      <div className="app-cust__foot">
        <div className="app-cust__qty">
          <button onClick={() => setQty(q => Math.max(1, q - 1))}>−</button>
          <span>{qty}</span>
          <button onClick={() => setQty(q => q + 1)}>+</button>
        </div>
        <button className="app-cust__add" onClick={submit}>Add · ₹{total.toLocaleString()}</button>
      </div>
    </div>
  );
}
window.MobileItemCustomize = MobileItemCustomize;

// ─── Mobile cafe order summary (full screen) ──────────
function MobileCafeOrder({ data, cafe, cart, mode, onBack, onQty, onCheckout }) {
  const cartLines = cart.map(l => ({ ...l, item:findItemM(cafe, l.itemId) })).filter(l => l.item);
  const subtotal = cartLines.reduce((s, l) => s + l.unitPrice * l.qty, 0);
  const delivery = mode === 'delivery' ? 40 : 0;
  const tax = Math.round(subtotal * 0.05);
  const total = subtotal + delivery + tax;
  const [orderNote, setOrderNote] = useStateMC('');
  return (
    <div style={{position:'absolute',inset:0,background:'var(--bg-page)',display:'flex',flexDirection:'column'}}>
      <div style={{padding:'56px 16px 12px',background:'var(--bg-paper)',borderBottom:'1px solid var(--border-1)',display:'flex',alignItems:'center',gap:10}}>
        <button onClick={onBack} style={{width:36,height:36,borderRadius:'50%',background:'var(--bone-100)',border:'1px solid var(--border-1)',cursor:'pointer',color:'var(--slate-700)'}}>←</button>
        <div style={{flex:1}}>
          <div style={{font:'600 9.5px var(--font-body)',letterSpacing:'.16em',textTransform:'uppercase',color:'var(--fg-3)'}}>Your order · {mode === 'dinein' ? 'Dine-in' : mode === 'takeaway' ? 'Takeaway' : 'Delivery'}</div>
          <div style={{fontFamily:'var(--font-display)',fontSize:18,fontWeight:500,letterSpacing:'-.014em',color:'var(--slate-700)'}}>{cafe?.name}</div>
        </div>
      </div>
      <div style={{flex:1,overflowY:'auto',padding:'14px 16px',paddingBottom:140}}>
        {cartLines.map(l => (
          <div key={l.lineId} style={{display:'flex',gap:10,padding:'12px 0',borderBottom:'1px solid var(--border-1)'}}>
            <div style={{width:54,height:54,backgroundImage:`url(${l.item.img})`,backgroundSize:'cover',backgroundPosition:'center',borderRadius:8,flexShrink:0}}/>
            <div style={{flex:1,minWidth:0}}>
              <div style={{font:'600 13.5px var(--font-body)',color:'var(--slate-700)'}}>{l.item.name}</div>
              {l.customLabel && <div style={{font:'400 11px var(--font-body)',color:'var(--fg-3)',marginTop:2}}>{l.customLabel}</div>}
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginTop:8}}>
                <span style={{font:'500 13px var(--font-mono)',color:'var(--slate-700)'}}>₹{(l.unitPrice * l.qty).toLocaleString()}</span>
                <span style={{display:'inline-flex',background:'var(--bone-100)',border:'1px solid var(--border-1)',borderRadius:999}}>
                  <button onClick={() => onQty(l.lineId, -1)} style={{width:24,height:24,background:0,border:0,cursor:'pointer',color:'var(--slate-700)'}}>−</button>
                  <span style={{padding:'0 8px',font:'600 11.5px var(--font-mono)',lineHeight:'24px',minWidth:18,textAlign:'center',color:'var(--slate-700)'}}>{l.qty}</span>
                  <button onClick={() => onQty(l.lineId, 1)} style={{width:24,height:24,background:0,border:0,cursor:'pointer',color:'var(--slate-700)'}}>+</button>
                </span>
              </div>
            </div>
          </div>
        ))}
      </div>
      <div style={{padding:'14px 16px 24px',borderTop:'1px solid var(--border-1)',background:'var(--bg-paper)'}}>
        <div style={{padding:'10px 12px',background:'var(--bone-100)',border:'1px solid var(--border-1)',borderRadius:10,marginBottom:12}}>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',font:'600 10px var(--font-body)',letterSpacing:'.14em',textTransform:'uppercase',color:'var(--fg-2)',marginBottom:5}}>
            Special instructions
            <span style={{font:'500 9.5px var(--font-body)',padding:'2px 6px',borderRadius:999,background:'rgba(31,59,87,.08)',color:'var(--fg-3)',letterSpacing:'.04em',textTransform:'none'}}>Optional</span>
          </div>
          <textarea
            value={orderNote} maxLength={200}
            onChange={e => setOrderNote(e.target.value)}
            placeholder="Allergies, less spicy, no onion…"
            style={{width:'100%',minHeight:48,padding:'7px 9px',borderRadius:7,background:'white',border:'1px solid var(--border-2)',font:'400 12.5px var(--font-body)',color:'var(--fg-1)',resize:'vertical'}}/>
          <div style={{font:'400 10.5px var(--font-body)',color:'var(--fg-3)',marginTop:4}}>{orderNote.length}/200 · Sent to the kitchen.</div>
        </div>
        <div style={{display:'flex',justifyContent:'space-between',padding:'3px 0',font:'400 13px var(--font-body)',color:'var(--fg-2)'}}><span>Subtotal</span><span style={{fontFamily:'var(--font-mono)'}}>₹{subtotal.toLocaleString()}</span></div>
        {mode === 'delivery' && <div style={{display:'flex',justifyContent:'space-between',padding:'3px 0',font:'400 13px var(--font-body)',color:'var(--fg-2)'}}><span>Delivery</span><span style={{fontFamily:'var(--font-mono)'}}>₹{delivery}</span></div>}
        <div style={{display:'flex',justifyContent:'space-between',padding:'3px 0',font:'400 13px var(--font-body)',color:'var(--fg-2)'}}><span>GST (5%)</span><span style={{fontFamily:'var(--font-mono)'}}>₹{tax.toLocaleString()}</span></div>
        <div style={{display:'flex',justifyContent:'space-between',padding:'8px 0 0',borderTop:'1px dashed var(--border-1)',marginTop:6,font:'600 14px var(--font-body)',color:'var(--slate-700)'}}><span>Total</span><span style={{fontFamily:'var(--font-mono)'}}>₹{total.toLocaleString()}</span></div>
        <button style={{marginTop:12,width:'100%',height:48,borderRadius:12,background:'var(--grad-cta-book)',border:0,color:'white',font:'700 13.5px var(--font-body)',cursor:'pointer',boxShadow:'0 6px 16px rgba(11,218,81,.28)'}}
          onClick={() => onCheckout({ subtotal, delivery, tax, total, mode, note:orderNote.trim() || undefined })}>
          {mode === 'delivery' ? 'Set delivery address →' : mode === 'takeaway' ? 'Pick up at café →' : 'Place order at table →'}
        </button>
      </div>
    </div>
  );
}
function findItemM(cafe, id) { for (const s of cafe.menu) for (const it of s.items) if (it.id === id) return it; return null; }
window.MobileCafeOrder = MobileCafeOrder;

// ─── Mobile address selector ──────────────────────────
function MobileAddressSelector({ addresses, title, ctaLabel = 'Continue', onPick, onAdd, onClose }) {
  const [pick, setPick] = useStateMC(addresses.find(a => a.isDefault)?.id || addresses[0]?.id);
  return (
    <div style={{position:'absolute',inset:0,background:'rgba(14,26,36,.55)',zIndex:88}} onClick={onClose}>
      <div className="app-addr-sheet" onClick={e => e.stopPropagation()}>
        <div className="app-addr-sheet__handle"/>
        <div className="app-addr-sheet__lbl">{title || 'Select address'}</div>
        <h2 className="app-addr-sheet__t">Where do we <em>deliver?</em></h2>
        <div className="app-addr-sheet__s">Pick a saved address, or add a new one.</div>
        {addresses.map(a => (
          <div key={a.id} className={`app-addr ${pick === a.id ? 'is-on' : ''}`} onClick={() => setPick(a.id)}>
            <div className="app-addr__radio"/>
            <div className="app-addr__body">
              <div className="app-addr__label">
                <span>{a.label}</span>
                {a.isDefault && <span className="app-addr__label-tag">Default</span>}
              </div>
              <div className="app-addr__name">{a.name}</div>
              <div className="app-addr__line">{a.line1}{a.line2 ? `, ${a.line2}` : ''} · {a.city} {a.pincode}</div>
              <div className="app-addr__phone">{a.phone}</div>
            </div>
          </div>
        ))}
        <button className="app-addr__add" onClick={() => onAdd && onAdd()}>+ Add new address</button>
        <div className="app-addr-sheet__actions">
          <button className="app-addr-sheet__cancel" onClick={onClose}>Cancel</button>
          <button className="app-addr-sheet__submit" disabled={!pick} onClick={() => onPick(pick)}>{ctaLabel} →</button>
        </div>
      </div>
    </div>
  );
}
window.MobileAddressSelector = MobileAddressSelector;

// ─── Mobile playback bar (over map) ────────────────────
function MobilePlayBar({ stops, currentIdx, playing, onPlay, onPause, onPrev, onNext, onClose }) {
  if (!stops || stops.length === 0) return null;
  const cur = stops[currentIdx];
  return (
    <div style={{position:'absolute',top:104,left:14,right:14,zIndex:18,display:'flex',gap:8,alignItems:'center',padding:'8px 10px',background:'rgba(255,255,255,.96)',backdropFilter:'blur(14px)',border:'1px solid rgba(31,59,87,.10)',borderRadius:999,boxShadow:'0 6px 18px rgba(14,26,36,.16)'}}>
      <button onClick={onPrev} disabled={currentIdx === 0} style={{width:30,height:30,borderRadius:'50%',background:0,border:0,cursor:currentIdx===0?'not-allowed':'pointer',opacity:currentIdx===0?.4:1,color:'var(--slate-700)',fontSize:14}}>‹</button>
      <button onClick={playing ? onPause : onPlay} style={{width:34,height:34,borderRadius:'50%',background:'var(--slate-700)',color:'white',border:0,cursor:'pointer',font:'600 13px var(--font-body)'}}>{playing ? '❚❚' : '▶'}</button>
      <button onClick={onNext} disabled={currentIdx >= stops.length - 1} style={{width:30,height:30,borderRadius:'50%',background:0,border:0,cursor:currentIdx >= stops.length - 1?'not-allowed':'pointer',opacity:currentIdx >= stops.length - 1?.4:1,color:'var(--slate-700)',fontSize:14}}>›</button>
      <div style={{flex:1,font:'600 11px var(--font-body)',color:'var(--slate-700)',letterSpacing:'.02em',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}><strong style={{fontFamily:'var(--font-mono)'}}>{currentIdx + 1}/{stops.length}</strong> · {cur?.name}</div>
      <button onClick={onClose} style={{width:26,height:26,borderRadius:'50%',background:'var(--bone-100)',border:0,cursor:'pointer',color:'var(--slate-700)',fontSize:13}}>×</button>
    </div>
  );
}
window.MobilePlayBar = MobilePlayBar;