// Avokado Bar — v3 Admin Paneli (Admin Paneli.dc.html referansına piksel uyumlu)
// Erişim: /?panel=menu-admin — window.AvbAdminV3
// Auth: mevcut Firebase e-posta+şifre + users/{uid}.role === 'admin'
// Yayın modeli: değişiklikler taslakta tutulur; "Kaydet & yayınla" menu_config/main'e yazar.
(function(){
const { useState, useEffect, useRef } = React;
const O = window.AvbOrd;
const U = window.AvbOrdUI;
const { INK, CREAM, GREEN, OLIVE, HAIR, HAIR2 } = U;

const CAPS = { fontSize:11, fontWeight:600, letterSpacing:'0.08em', textTransform:'uppercase', color:'#808080', marginBottom:5 };
const INPUT = { height:38, padding:'0 12px', borderRadius:10, border:'1px solid ' + HAIR2, fontSize:14, color:INK, outline:'none', boxSizing:'border-box', background:'#FFFFFF' };

function upDownBtn(onClick, label, glyph){
  return (
    <button onClick={onClick} aria-label={label}
      style={{ width:26, height:20, border:'none', background:'rgba(26,26,26,0.05)', borderRadius:6, cursor:'pointer', color:OLIVE, fontSize:11, lineHeight:1 }}>
      {glyph}
    </button>
  );
}

function AdminInner({ onLogout }){
  const { menu, live, exists } = O.useMenuConfig();
  const orders = O.useOrders({ limit: 500 });
  const [draft, setDraft] = useState(null);
  const [dirty, setDirty] = useState(false);
  const [saved, setSaved] = useState(false);
  const [tab, setTab] = useState('orders');
  const [q, setQ] = useState('');
  const [catFilter, setCatFilter] = useState('all');
  const [editId, setEditId] = useState(null);
  const [orderRange, setOrderRange] = useState('today');
  const [orderStatus, setOrderStatus] = useState('all');
  const [orderSel, setOrderSel] = useState(null);
  const [upBusy, setUpBusy] = useState(null);   // yüklenen ürünün id'si
  const [upNote, setUpNote] = useState(null);   // { ok, text }
  const [syncStep, setSyncStep] = useState(null);  // 'adisyo' | 'merge'
  const [syncOut, setSyncOut] = useState(null);    // { report, stats, warn }

  /* Adisyo → Firestore menu → v3 taslağı */
  const syncFromAdisyo = async () => {
    if (syncStep) return;
    let warn = null, stats = null;
    setSyncOut(null); setSyncStep('adisyo');
    try { const r = await O.runAdisyoSync(); stats = r && r.stats; }
    catch(e){ warn = 'Adisyo çağrısı başarısız (' + ((e && e.message) || 'bilinmiyor') + ') — Firestore\'daki mevcut veriyle devam edildi.'; }
    setSyncStep('merge');
    try {
      const source = await O.fetchSourceMenu();
      const { merged, report } = O.mergeAdisyo(draft, source);
      setDraft(merged); setDirty(true); setSaved(false);
      setSyncOut({ report, stats, warn });
    } catch(e){
      showToast('Menü okunamadı: ' + ((e && e.message) || 'bağlantı hatası'), true);
    }
    setSyncStep(null);
  };
  const [toastEl, showToast] = U.useToast();
  const savedT = useRef(null);

  // Canlı menü geldiğinde taslağı doldur (kirli değilken canlıyı takip et)
  useEffect(() => {
    if (!dirty) setDraft(O.deepClone(menu));
  }, [menu, live]);

  // Başka ürüne geçince yükleme bildirimi kalmasın
  useEffect(() => { setUpNote(null); }, [editId]);

  // Kaydedilmemiş değişiklik uyarısı
  useEffect(() => {
    const h = (e) => { if (dirty) { e.preventDefault(); e.returnValue = ''; } };
    window.addEventListener('beforeunload', h);
    return () => window.removeEventListener('beforeunload', h);
  }, [dirty]);

  const mut = (fn) => {
    setDraft(d => {
      const nd = O.deepClone(d);
      fn(nd);
      return nd;
    });
    setDirty(true); setSaved(false);
  };

  const publish = async () => {
    // exists === false → menü henüz Firestore'da yok; kirli olmasa da yayınla,
    // yoksa uygulama gömülü taban veriyle kalır ve canlı güncellenmez.
    if (!draft || (!dirty && exists !== false)) return;
    try {
      await O.publishMenu(draft);
      setDirty(false); setSaved(true);
      clearTimeout(savedT.current);
      savedT.current = setTimeout(() => setSaved(false), 2000);
    } catch(e){
      showToast('Yayınlanamadı: ' + (e && e.message || 'bağlantı hatası'), true);
    }
  };
  const resetAll = () => {
    if (!window.confirm('Menü varsayılan içeriğe dönecek (taslak olarak). Yayınlamak için "Kaydet & yayınla" gerekir. Devam edilsin mi?')) return;
    setDraft(O.defaults());
    setDirty(true); setSaved(false); setEditId(null);
  };

  const patchOrder = async (id, p) => {
    try { await O.patchOrder(id, p); }
    catch(e){ showToast('İşlem başarısız — bağlantıyı kontrol edin', true); }
  };

  const d = draft;
  if (!d) {
    return <div style={{ minHeight:'100dvh', display:'flex', alignItems:'center', justifyContent:'center', color:'#808080', fontSize:14, background:CREAM }}>Yükleniyor…</div>;
  }
  const B = d.badges || {}, ALG = d.allergens || {};
  const cats = d.categories.slice().sort((a,b) => a.sort - b.sort);

  const tabs = [
    { id:'orders', label:'Siparişler' },
    { id:'items', label:'Ürünler' },
    { id:'cats', label:'Kategoriler' },
    { id:'extras', label:'Ekstralar' },
    { id:'tags', label:'Rozetler & Alerjenler' },
    { id:'places', label:'Mekan & Masalar' },
    { id:'welcome', label:'Karşılama' },
  ];

  /* ════ SİPARİŞLER ════ */
  let ordersEl = null;
  if (tab === 'orders') {
    const dayStart = new Date(); dayStart.setHours(0,0,0,0);
    const todayT = dayStart.getTime();
    const ranges = [
      { id:'today', label:'Bugün', from: todayT, to: Infinity },
      { id:'yesterday', label:'Dün', from: todayT - 864e5, to: todayT },
      { id:'week', label:'Son 7 gün', from: todayT - 6*864e5, to: Infinity },
      { id:'all', label:'Tümü', from: 0, to: Infinity },
    ];
    const range = ranges.find(r => r.id === orderRange) || ranges[0];
    const inRange = orders.filter(o => o.createdAt >= range.from && o.createdAt < range.to);
    const filtered = inRange.filter(o => orderStatus === 'all' || o.status === orderStatus).sort((a,b) => b.createdAt - a.createdAt);
    const valid = inRange.filter(o => o.status !== 'cancelled');
    const revenue = valid.reduce((s,o) => s + o.total, 0);
    const stats = [
      { label:'Sipariş', value: String(valid.length) },
      { label:'Ciro', value: O.fmt(revenue) },
      { label:'Ortalama sepet', value: valid.length ? O.fmt(revenue / valid.length) : '—' },
      { label:'İptal', value: String(inRange.length - valid.length) },
    ];
    const statusDefs = [['all','Tüm durumlar'],['pending','Bekliyor'],['confirmed','Onaylandı'],['printed','Yazdırıldı'],['delivered','Teslim edildi'],['cancelled','İptal']];
    ordersEl = (
      <>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(150px, 1fr))', gap:10, marginBottom:16 }}>
          {stats.map(st => (
            <div key={st.label} style={{ background:'#FFFFFF', borderRadius:16, padding:'14px 16px', boxShadow:'0 1px 0 rgba(0,0,0,0.04)' }}>
              <div style={{ fontSize:11, fontWeight:600, letterSpacing:'0.08em', textTransform:'uppercase', color:'#808080' }}>{st.label}</div>
              <div style={{ fontSize:22, fontWeight:800, color:INK, marginTop:4, fontVariantNumeric:'tabular-nums' }}>{st.value}</div>
            </div>
          ))}
        </div>
        <div style={{ display:'flex', gap:8, marginBottom:14, flexWrap:'wrap', alignItems:'center' }}>
          {ranges.map(r => {
            const on = r.id === orderRange;
            return (
              <button key={r.id} onClick={() => { setOrderRange(r.id); setOrderSel(null); }}
                style={{ height:34, padding:'0 14px', borderRadius:999, border:'1px solid ' + (on ? INK : HAIR2), background: on ? INK : '#FFFFFF', color: on ? GREEN : '#3D3D3D', fontSize:13, fontWeight:600, cursor:'pointer' }}>
                {r.label}
              </button>
            );
          })}
          <select value={orderStatus} onChange={e => { setOrderStatus(e.target.value); setOrderSel(null); }}
            style={{ height:36, padding:'0 12px', borderRadius:12, border:'1px solid ' + HAIR2, background:'#FFFFFF', fontSize:13, color:INK, cursor:'pointer', marginLeft:'auto' }}>
            {statusDefs.map(([id, label]) => <option key={id} value={id}>{label}</option>)}
          </select>
        </div>
        {filtered.length === 0 && (
          <div style={{ background:'#FFFFFF', borderRadius:16, padding:'32px 24px', textAlign:'center', color:'#808080', fontSize:14 }}>Bu aralıkta sipariş yok.</div>
        )}
        <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
          {filtered.map(o => {
            const st = O.statusMeta(o.status);
            return (
              <div key={o.id} onClick={() => setOrderSel(o.id)} className="avb3-hover-card"
                style={{ background:'#FFFFFF', borderRadius:14, padding:'12px 16px', display:'flex', alignItems:'center', gap:14, cursor:'pointer', boxShadow:'0 1px 0 rgba(0,0,0,0.04)', flexWrap:'wrap' }}>
                <span style={{ fontSize:15, fontWeight:800, color:INK, fontVariantNumeric:'tabular-nums', width:56 }}>#{o.no}</span>
                <span style={{ fontSize:12.5, color:'#808080', width:88, fontVariantNumeric:'tabular-nums' }}>{O.fmtWhen(o.createdAt)}</span>
                <span style={{ fontSize:12.5, fontWeight:600, color:OLIVE, width:140 }}>{O.tableLabel(d, o.tableId, 'Masasız / Gel-al')}</span>
                <span style={{ flex:1, minWidth:160, fontSize:13, color:'#808080', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{O.orderSummary(o)}</span>
                <span style={{ padding:'4px 10px', borderRadius:999, background:st.bg, color:st.fg, fontSize:11, fontWeight:700, flexShrink:0 }}>{st.label}</span>
                <span style={{ fontSize:15, fontWeight:700, color:INK, fontVariantNumeric:'tabular-nums', width:64, textAlign:'right' }}>{O.fmt(o.total)}</span>
              </div>
            );
          })}
        </div>
      </>
    );
  }

  /* ── Sipariş detay çekmecesi ── */
  let orderDrawer = null;
  const oSel = orderSel && orders.find(x => x.id === orderSel);
  if (oSel) {
    const o = oSel;
    const st = O.statusMeta(o.status);
    const timeline = [
      ['Oluşturuldu', o.createdAt], ['Onaylandı', o.confirmedAt], ['Yazdırıldı', o.printedAt],
      ['Teslim edildi', o.deliveredAt], ['İptal edildi', o.cancelledAt],
      ['Düzeltildi' + (o.revisedBy ? ' · ' + o.revisedBy : ''), o.revisedAt],
    ].filter(x => x[1]);
    orderDrawer = (
      <U.Drawer onClose={() => setOrderSel(null)} width="min(440px, 100%)">
        <div style={{ position:'sticky', top:0, background:'rgba(245,240,232,0.94)', backdropFilter:'blur(8px)', padding:'16px 20px', display:'flex', alignItems:'center', justifyContent:'space-between', borderBottom:'1px solid ' + HAIR, zIndex:2 }}>
          <div style={{ display:'flex', alignItems:'center', gap:10 }}>
            <div style={{ fontSize:18, fontWeight:800, color:INK, fontVariantNumeric:'tabular-nums' }}>#{o.no}</div>
            <span style={{ padding:'4px 10px', borderRadius:999, background:st.bg, color:st.fg, fontSize:11, fontWeight:700 }}>{st.label}</span>
          </div>
          <U.CloseX onClick={() => setOrderSel(null)} />
        </div>
        <div style={{ padding:'18px 20px 96px', display:'flex', flexDirection:'column', gap:16 }}>
          <div style={{ fontSize:13.5, fontWeight:700, color:OLIVE }}>{O.tableLabel(d, o.tableId, 'Masasız / Gel-al')}</div>
          <div style={{ background:'#FFFFFF', borderRadius:14, overflow:'hidden' }}>
            {(o.lines || []).map((l, i) => {
              const sm = O.stationMeta(O.lineStation(d, l));
              return (
              <div key={i} style={{ display:'flex', gap:10, padding:'12px 14px', borderTop: i === 0 ? 'none' : '1px solid rgba(26,26,26,0.06)', alignItems:'flex-start' }}>
                <span style={{ minWidth:28, height:24, borderRadius:8, background:'rgba(208,228,18,0.3)', color:'#3D4408', fontSize:13, fontWeight:800, display:'inline-flex', alignItems:'center', justifyContent:'center', fontVariantNumeric:'tabular-nums' }}>{l.qty}×</span>
                <div style={{ flex:1, minWidth:0 }}>
                  <div style={{ display:'flex', alignItems:'center', gap:7, flexWrap:'wrap' }}>
                    <span style={{ fontSize:14.5, fontWeight:600, color:INK }}>{l.name}</span>
                    <span style={{ padding:'2px 8px', borderRadius:999, background:sm.bg, color:sm.fg, fontSize:10.5, fontWeight:700, letterSpacing:'0.04em' }}>{sm.caps}</span>
                  </div>
                  {l.extras && l.extras.length > 0 && <div style={{ fontSize:12, color:'#808080', marginTop:3, lineHeight:1.4 }}>{l.extras.join(' · ')}</div>}
                  {l.note && <div style={{ fontSize:12, color:'#D4851C', fontWeight:600, marginTop:3, lineHeight:1.4 }}>Not: {l.note}</div>}
                </div>
                <div style={{ fontSize:13.5, fontWeight:700, color:INK, fontVariantNumeric:'tabular-nums' }}>{O.fmt(l.total)}</div>
              </div>
              );
            })}
          </div>
          {o.note && (
            <div style={{ padding:'10px 12px', borderRadius:12, background:'rgba(212,133,28,0.1)', color:'#D4851C', fontSize:13, fontWeight:600, lineHeight:1.5 }}>
              Sipariş notu: {o.note}
            </div>
          )}
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
            <span style={{ fontSize:13, color:'#808080', fontWeight:500 }}>Toplam</span>
            <span style={{ fontSize:20, fontWeight:800, color:INK, fontVariantNumeric:'tabular-nums' }}>{O.fmt(o.total)}</span>
          </div>
          {o.createdBy === 'waiter' && (
            <div style={{ fontSize:12.5, color:'#808080' }}>Garson girişi{o.staffName ? ' · ' + o.staffName : ''}</div>
          )}
          <div>
            <div style={{ ...CAPS, marginBottom:8 }}>Zaman çizelgesi</div>
            <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
              {timeline.map(([label, when]) => (
                <div key={label} style={{ display:'flex', alignItems:'center', gap:10 }}>
                  <span style={{ width:7, height:7, borderRadius:99, background:'#A8B80F', flexShrink:0 }} />
                  <span style={{ flex:1, fontSize:13, fontWeight:600, color:'#3D3D3D' }}>{label}</span>
                  <span style={{ fontSize:12.5, color:'#808080', fontVariantNumeric:'tabular-nums' }}>{O.fmtWhen(when)}</span>
                </div>
              ))}
            </div>
          </div>
          <div style={{ display:'flex', flexDirection:'column', gap:8, marginTop:4 }}>
            {(o.status === 'confirmed' || o.status === 'printed') && (
              <button onClick={() => patchOrder(o.id, { status:'delivered', deliveredAt: Date.now() })} className="avb3-hover-olive"
                style={{ height:46, border:'none', borderRadius:12, background:OLIVE, color:GREEN, fontSize:14, fontWeight:700, cursor:'pointer' }}>
                Teslim edildi olarak işaretle
              </button>
            )}
            {o.status !== 'delivered' && o.status !== 'cancelled' && (
              <button onClick={() => patchOrder(o.id, { status:'cancelled', cancelledAt: Date.now() })}
                style={{ height:46, border:'none', borderRadius:12, background:'rgba(192,58,43,0.1)', color:'#C03A2B', fontSize:14, fontWeight:700, cursor:'pointer' }}>
                Siparişi iptal et
              </button>
            )}
            {o.status === 'cancelled' && (
              <button onClick={() => patchOrder(o.id, { status:'pending', cancelledAt: null })}
                style={{ height:46, border:'1px solid ' + HAIR2, borderRadius:12, background:'#FFFFFF', color:INK, fontSize:14, fontWeight:600, cursor:'pointer' }}>
                Yeniden aç (Bekliyor)
              </button>
            )}
          </div>
        </div>
      </U.Drawer>
    );
  }

  /* ════ ÜRÜNLER ════ */
  let itemsEl = null;
  if (tab === 'items') {
    const qq = q.trim().toLocaleLowerCase('tr');
    const items = d.items.filter(it => {
      if (catFilter !== 'all' && it.cat !== catFilter) return false;
      if (qq && !((it.tr.n + ' ' + (it.en && it.en.n || '')).toLocaleLowerCase('tr').includes(qq))) return false;
      return true;
    });
    const swapItem = (catId, itemId, dir) => mut(dd => {
      const list = dd.items.filter(i => i.cat === catId).sort((a,b) => a.sort - b.sort);
      list.forEach((x, ix) => { x.sort = ix + 1; });
      const i = list.findIndex(x => x.id === itemId), j = i + dir;
      if (j < 0 || j >= list.length) return;
      const t = list[i].sort; list[i].sort = list[j].sort; list[j].sort = t;
    });
    const sections = cats.map(c => {
      const secItems = items.filter(i => i.cat === c.id).sort((a,b) => a.sort - b.sort);
      if (!secItems.length) return null;
      return { c, secItems };
    }).filter(Boolean);
    itemsEl = (
      <>
        <div style={{ display:'flex', gap:10, marginBottom:16, flexWrap:'wrap', alignItems:'center' }}>
          <input value={q} onChange={e => setQ(e.target.value)} placeholder="Ürün ara…"
            style={{ ...INPUT, flex:1, minWidth:180, height:40, padding:'0 14px', borderRadius:12 }} />
          <select value={catFilter} onChange={e => setCatFilter(e.target.value)}
            style={{ ...INPUT, height:40, borderRadius:12, cursor:'pointer' }}>
            <option value="all">Tüm kategoriler</option>
            {cats.map(c => <option key={c.id} value={c.id}>{c.tr}</option>)}
          </select>
          <button onClick={() => {
            const id = 'item_' + Date.now().toString(36);
            const cat = catFilter !== 'all' ? catFilter : (cats[0] && cats[0].id);
            if (!cat) { showToast('Önce bir kategori ekleyin', true); return; }
            mut(dd => dd.items.push({
              id, cat, sort: 99, price: 0, photo: null, tone: 'green', allergens: [], badges: [],
              station: O.defaultStation(cat), soldOut: false, hidden: false, staffHidden: false, extras: [],
              tr: { n:'Yeni ürün', d:'' }, en: { n:'New item', d:'' },
            }));
            setEditId(id);
          }} className="avb3-press"
            style={{ height:40, padding:'0 16px', borderRadius:12, border:'none', background:GREEN, color:INK, fontSize:13.5, fontWeight:700, cursor:'pointer' }}>
            + Yeni ürün
          </button>
          <button onClick={syncFromAdisyo} disabled={!!syncStep} className="avb3-press avb3-hover-olive"
            style={{ height:40, padding:'0 16px', borderRadius:12, border:'none', background: syncStep ? 'rgba(26,26,26,0.08)' : OLIVE, color: syncStep ? '#808080' : GREEN, fontSize:13.5, fontWeight:700, cursor: syncStep ? 'default' : 'pointer', display:'flex', alignItems:'center', gap:7 }}>
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke={syncStep ? '#808080' : GREEN} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12a9 9 0 1 1-3-6.7" /><path d="M21 4v5h-5" /></svg>
            {syncStep === 'adisyo' ? 'Adisyo okunuyor…' : syncStep === 'merge' ? 'Menüye işleniyor…' : 'Adisyo ile eşle'}
          </button>
        </div>
        {sections.length === 0 && (
          <div style={{ background:'#FFFFFF', borderRadius:16, padding:'32px 24px', textAlign:'center', color:'#808080', fontSize:14 }}>Ürün bulunamadı.</div>
        )}
        {sections.map(({ c, secItems }) => (
          <div key={c.id} style={{ marginBottom:22 }}>
            <div style={{ display:'flex', alignItems:'baseline', gap:8, margin:'0 2px 10px' }}>
              <div style={{ fontSize:12, fontWeight:600, letterSpacing:'0.08em', textTransform:'uppercase', color:'#808080' }}>{c.tr}</div>
              <div style={{ flex:1, height:1, background:HAIR, alignSelf:'center' }} />
              <div style={{ fontSize:12, fontWeight:500, color:'#B3B3B3', fontVariantNumeric:'tabular-nums' }}>{secItems.length} ürün</div>
            </div>
            <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
              {secItems.map(it => {
                const tone = O.TONES[it.tone] || ['#EEE','#CCC'];
                return (
                  <div key={it.id} onClick={() => setEditId(it.id)} className="avb3-hover-card"
                    style={{ background:'#FFFFFF', borderRadius:14, padding:'10px 14px', display:'flex', alignItems:'center', gap:12, cursor:'pointer', opacity: it.staffHidden ? 0.45 : (it.hidden ? 0.72 : 1), boxShadow:'0 1px 0 rgba(0,0,0,0.04)' }}>
                    <div style={{ display:'flex', flexDirection:'column', gap:2, flexShrink:0 }}>
                      {upDownBtn((e) => { e.stopPropagation(); swapItem(c.id, it.id, -1); }, 'Yukarı', '▲')}
                      {upDownBtn((e) => { e.stopPropagation(); swapItem(c.id, it.id, 1); }, 'Aşağı', '▼')}
                    </div>
                    {it.photo ? (
                      <div style={{ width:44, height:44, borderRadius:10, backgroundImage:'url("' + it.photo + '")', backgroundSize:'cover', backgroundPosition:'center', flexShrink:0 }} />
                    ) : (
                      <div style={{ width:44, height:44, borderRadius:10, background:'linear-gradient(145deg,' + tone[0] + ',' + tone[1] + ')', display:'flex', alignItems:'center', justifyContent:'center', fontSize:15, fontWeight:800, color:'rgba(26,26,26,0.35)', flexShrink:0 }}>{(it.tr.n || '?').charAt(0)}</div>
                    )}
                    <div style={{ flex:1, minWidth:0 }}>
                      <div style={{ fontSize:14.5, fontWeight:600, color:INK, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{it.tr.n}</div>
                      <div style={{ fontSize:12, color:'#808080', marginTop:1, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{it.tr.d || '—'}</div>
                    </div>
                    <div style={{ display:'flex', gap:5, flexShrink:0, alignItems:'center' }}>
                      {(() => {
                        const sid = it.station || O.defaultStation(it.cat);
                        const sm = O.stationMeta(sid);
                        return (
                          <button onClick={(e) => { e.stopPropagation(); mut(dd => { const t = dd.items.find(i => i.id === it.id); t.station = sid === 'mutfak' ? 'bar' : 'mutfak'; }); }}
                            title="İstasyonu değiştir"
                            style={{ padding:'3px 10px', borderRadius:999, border:'1px solid ' + sm.fg + '33', background:sm.bg, color:sm.fg, fontSize:11, fontWeight:700, cursor:'pointer' }}>
                            {sm.label}
                          </button>
                        );
                      })()}
                      {it.soldOut && <span style={{ padding:'3px 9px', borderRadius:999, background:'rgba(192,58,43,0.1)', color:'#C03A2B', fontSize:11, fontWeight:700 }}>Tükendi</span>}
                      {O.visMeta(O.visOf(it)).chip && (
                        <span style={{ padding:'3px 9px', borderRadius:999, background: it.staffHidden ? 'rgba(26,26,26,0.85)' : 'rgba(46,90,138,0.12)', color: it.staffHidden ? CREAM : '#2E5A8A', fontSize:11, fontWeight:700 }}>
                          {O.visMeta(O.visOf(it)).chip}
                        </span>
                      )}
                    </div>
                    <div style={{ fontSize:14.5, fontWeight:700, color:INK, fontVariantNumeric:'tabular-nums', flexShrink:0, width:64, textAlign:'right' }}>{O.fmt(it.price)}</div>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#B3B3B3" strokeWidth="2" strokeLinecap="round"><path d="M9 6l6 6-6 6" /></svg>
                  </div>
                );
              })}
            </div>
          </div>
        ))}
      </>
    );
  }

  /* ── Ürün düzenleme çekmecesi ── */
  let editDrawer = null;
  const editIt = editId && d.items.find(i => i.id === editId);
  if (editIt) {
    const it = editIt;
    const set = (fn) => mut(dd => fn(dd.items.find(i => i.id === it.id)));
    const chip = (label, on, colors, toggle) => (
      <button key={label} onClick={toggle}
        style={{ height:32, padding:'0 13px', borderRadius:999, border:'1px solid ' + (on ? colors.border : HAIR2), background: on ? colors.bg : '#FFFFFF', color: on ? colors.fg : '#808080', fontSize:12.5, fontWeight:600, cursor:'pointer' }}>
        {label}
      </button>
    );
    editDrawer = (
      <U.Drawer onClose={() => setEditId(null)}>
        <div style={{ position:'sticky', top:0, background:'rgba(245,240,232,0.94)', backdropFilter:'blur(8px)', padding:'16px 20px', display:'flex', alignItems:'center', justifyContent:'space-between', borderBottom:'1px solid ' + HAIR, zIndex:2 }}>
          <div style={{ fontSize:17, fontWeight:700, color:INK }}>Ürünü düzenle</div>
          <U.CloseX onClick={() => setEditId(null)} />
        </div>
        <div style={{ padding:'18px 20px 96px', display:'flex', flexDirection:'column', gap:14 }}>
          <div>
            <div style={{ display:'flex', gap:14, alignItems:'flex-start' }}>
              {it.photo ? (
                <img src={it.photo} alt="" style={{ width:76, height:76, borderRadius:14, objectFit:'cover', flexShrink:0, background:'rgba(26,26,26,0.05)' }} />
              ) : (
                <div style={{ width:76, height:76, borderRadius:14, background:'rgba(26,26,26,0.05)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#B3B3B3" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="8.5" cy="8.5" r="1.5" /><path d="M21 15l-5-5L5 21" /></svg>
                </div>
              )}
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ display:'flex', gap:8, marginBottom:8 }}>
                  <button onClick={() => { const el = document.getElementById('avb-photo-input'); if (el) el.click(); }}
                    disabled={!!upBusy} className="avb3-press"
                    style={{ flex:1, height:38, borderRadius:10, border:'none', background: upBusy ? 'rgba(26,26,26,0.08)' : GREEN, color: upBusy ? '#808080' : INK, fontSize:13, fontWeight:700, cursor: upBusy ? 'default' : 'pointer', display:'flex', alignItems:'center', justifyContent:'center', gap:7 }}>
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke={upBusy ? '#808080' : INK} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 16V4" /><path d="M7 9l5-5 5 5" /><path d="M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3" /></svg>
                    {upBusy ? 'Yükleniyor…' : 'Görsel yükle'}
                  </button>
                  {it.photo && !upBusy && (
                    <button onClick={() => set(x => { x.photo = null; })}
                      style={{ height:38, padding:'0 12px', borderRadius:10, border:'1px solid ' + HAIR2, background:'#FFFFFF', color:'#C03A2B', fontSize:12.5, fontWeight:600, cursor:'pointer' }}>
                      Kaldır
                    </button>
                  )}
                </div>
                <input id="avb-photo-input" type="file" accept="image/*" style={{ display:'none' }}
                  onChange={async (e) => {
                    const f = e.target.files && e.target.files[0];
                    e.target.value = '';
                    if (!f) return;
                    setUpBusy(it.id); setUpNote(null);
                    try {
                      const r = await O.uploadItemImage(it.id, f);
                      set(x => { x.photo = r.url; });
                      setUpNote({ ok:true, text: Math.round(r.before/1024) + ' KB → ' + Math.round(r.after/1024) + ' KB · ' + r.w + '×' + r.h });
                    } catch(err){
                      setUpNote({ ok:false, text: (err && err.message) || 'Yüklenemedi' });
                    }
                    setUpBusy(null);
                  }} />
                <div style={CAPS}>veya adres yazın</div>
                <input value={it.photo || ''} onChange={e => set(x => { x.photo = e.target.value || null; })} placeholder="/photos/menu/… veya https://…"
                  style={{ ...INPUT, width:'100%', fontSize:12.5 }} />
              </div>
            </div>
            {upNote && (
              <div style={{ marginTop:8, fontSize:12, fontWeight:600, color: upNote.ok ? '#2E8A4A' : '#C03A2B', lineHeight:1.5 }}>
                {upNote.ok ? 'Yüklendi · ' : ''}{upNote.text}
              </div>
            )}
            <div style={{ marginTop:8, padding:'10px 12px', borderRadius:10, background:'rgba(208,228,18,0.18)', fontSize:12, color:'#3D4408', lineHeight:1.6 }}>
              <b>Önerilen ölçü: 900 × 675 px</b> (yatay, 4:3) — en az 600 × 450 px.<br />
              Menü listesinde kare, ürün detayında geniş kırpılır; ürünü ortada bırakın.
              Uzun kenar otomatik 900px'e iner ve WebP'e çevrilir — 10 MB'lık fotoğraf yükleseniz de menü hızlı kalır.
            </div>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:10 }}>
            <div>
              <div style={CAPS}>Ad (TR)</div>
              <input value={it.tr.n} onChange={e => set(x => { x.tr.n = e.target.value; })} style={{ ...INPUT, width:'100%', height:40, fontWeight:600 }} />
            </div>
            <div>
              <div style={CAPS}>Ad (EN)</div>
              <input value={it.en.n} onChange={e => set(x => { x.en.n = e.target.value; })} style={{ ...INPUT, width:'100%', height:40 }} />
            </div>
          </div>
          <div>
            <div style={CAPS}>Açıklama (TR)</div>
            <textarea value={it.tr.d} onChange={e => set(x => { x.tr.d = e.target.value; })} rows={2}
              style={{ ...INPUT, width:'100%', height:'auto', padding:'10px 12px', fontSize:13.5, resize:'vertical', lineHeight:1.5 }} />
          </div>
          <div>
            <div style={CAPS}>Açıklama (EN)</div>
            <textarea value={it.en.d} onChange={e => set(x => { x.en.d = e.target.value; })} rows={2}
              style={{ ...INPUT, width:'100%', height:'auto', padding:'10px 12px', fontSize:13.5, resize:'vertical', lineHeight:1.5 }} />
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:10 }}>
            <div>
              <div style={CAPS}>Fiyat (₺)</div>
              <input value={it.price} onChange={e => set(x => { x.price = Number(e.target.value) || 0; })} type="number"
                style={{ ...INPUT, width:'100%', height:40, fontSize:15, fontWeight:700, fontVariantNumeric:'tabular-nums' }} />
            </div>
            <div>
              <div style={CAPS}>Kategori</div>
              <select value={it.cat} onChange={e => set(x => { x.cat = e.target.value; })}
                style={{ ...INPUT, width:'100%', height:40, fontSize:13.5, cursor:'pointer' }}>
                {cats.map(c => <option key={c.id} value={c.id}>{c.tr}</option>)}
              </select>
            </div>
          </div>
          <div>
            <div style={{ ...CAPS, marginBottom:7 }}>Hazırlayan istasyon</div>
            <div style={{ display:'flex', gap:8 }}>
              {O.STATION_IDS.map(sid => {
                const sm = O.stationMeta(sid);
                const on = (it.station || O.defaultStation(it.cat)) === sid;
                return (
                  <button key={sid} onClick={() => set(x => { x.station = sid; })}
                    style={{ flex:1, height:44, borderRadius:12, border:'1px solid ' + (on ? sm.fg : HAIR2), background: on ? sm.bg : '#FFFFFF', color: on ? sm.fg : '#808080', fontSize:13.5, fontWeight:700, cursor:'pointer' }}>
                    {sm.label}
                  </button>
                );
              })}
            </div>
            <div style={{ fontSize:11.5, color:'#B3B3B3', marginTop:6, lineHeight:1.5 }}>Bu ürünün çıktısı seçilen istasyona düşer. Bir siparişte hem mutfak hem bar ürünü varsa iki ayrı fiş basılır.</div>
          </div>
          <div>
            <div style={{ ...CAPS, marginBottom:7 }}>Rozetler</div>
            <div style={{ display:'flex', gap:6, flexWrap:'wrap' }}>
              {Object.keys(B).map(k => chip((B[k] || {}).tr || k, (it.badges || []).includes(k),
                { bg:'rgba(208,228,18,0.35)', fg:'#3D4408', border:'rgba(168,184,15,0.7)' },
                () => set(x => { const on = (x.badges || []).includes(k); x.badges = on ? x.badges.filter(b => b !== k) : [...(x.badges || []), k]; })))}
            </div>
          </div>
          <div>
            <div style={{ ...CAPS, marginBottom:7 }}>Alerjenler</div>
            <div style={{ display:'flex', gap:6, flexWrap:'wrap' }}>
              {Object.keys(ALG).map(k => chip(ALG[k].tr, (it.allergens || []).includes(k),
                { bg:'rgba(192,58,43,0.12)', fg:'#C03A2B', border:'rgba(192,58,43,0.4)' },
                () => set(x => { const on = (x.allergens || []).includes(k); x.allergens = on ? x.allergens.filter(b => b !== k) : [...(x.allergens || []), k]; })))}
            </div>
          </div>
          <div>
            <div style={{ ...CAPS, marginBottom:7 }}>Ekstra grupları</div>
            <div style={{ background:'#FFFFFF', borderRadius:14, overflow:'hidden' }}>
              {Object.values(d.extraGroups).map((g, i) => {
                const on = (it.extras || []).includes(g.id);
                return (
                  <div key={g.id} onClick={() => set(x => { x.extras = on ? x.extras.filter(e => e !== g.id) : [...(x.extras || []), g.id]; })} className="avb3-hover-faint"
                    style={{ display:'flex', alignItems:'center', gap:12, padding:'11px 14px', cursor:'pointer', borderTop: i === 0 ? 'none' : '1px solid rgba(26,26,26,0.06)' }}>
                    <span style={{ width:19, height:19, borderRadius:6, border:'2px solid ' + (on ? '#A8B80F' : 'rgba(26,26,26,0.25)'), background: on ? GREEN : 'transparent', display:'inline-flex', alignItems:'center', justifyContent:'center', flexShrink:0, boxSizing:'border-box' }}>
                      {on && <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke={INK} strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 12.5l5 5L20 6.5" /></svg>}
                    </span>
                    <span style={{ flex:1, fontSize:14, fontWeight:500, color:INK }}>{g.tr}</span>
                    <span style={{ fontSize:12, color:'#B3B3B3' }}>{(g.options || []).length} seçenek</span>
                  </div>
                );
              })}
            </div>
          </div>
          <div>
            <div style={{ ...CAPS, marginBottom:7 }}>Görünürlük</div>
            <div style={{ display:'flex', gap:6 }}>
              {O.VISIBILITY.map(v => {
                const on = O.visOf(it) === v.id;
                return (
                  <button key={v.id} onClick={() => set(x => O.setVis(x, v.id))}
                    style={{ flex:1, height:44, borderRadius:12, border:'1px solid ' + (on ? INK : HAIR2), background: on ? INK : '#FFFFFF', color: on ? GREEN : '#808080', fontSize:13, fontWeight:700, cursor:'pointer', padding:'0 6px' }}>
                    {v.label}
                  </button>
                );
              })}
            </div>
            <div style={{ fontSize:11.5, color:'#B3B3B3', marginTop:6, lineHeight:1.5 }}>{O.visMeta(O.visOf(it)).note}</div>
          </div>
          <button onClick={() => set(x => { x.soldOut = !x.soldOut; })}
            style={{ height:44, borderRadius:12, border:'1px solid ' + (it.soldOut ? 'rgba(192,58,43,0.4)' : HAIR2), background: it.soldOut ? 'rgba(192,58,43,0.12)' : '#FFFFFF', color: it.soldOut ? '#C03A2B' : '#3D3D3D', fontSize:13.5, fontWeight:600, cursor:'pointer' }}>
            {it.soldOut ? 'Bugün tükendi ✓' : 'Tükendi işaretle'}
          </button>
          <button onClick={() => {
            if (!window.confirm('"' + it.tr.n + '" silinsin mi?')) return;
            mut(dd => { dd.items = dd.items.filter(i => i.id !== it.id); });
            setEditId(null);
          }} style={{ height:44, borderRadius:12, border:'none', background:'rgba(192,58,43,0.1)', color:'#C03A2B', fontSize:13.5, fontWeight:700, cursor:'pointer' }}>
            Ürünü sil
          </button>
        </div>
      </U.Drawer>
    );
  }

  /* ════ KATEGORİLER ════ */
  let catsEl = null;
  if (tab === 'cats') {
    catsEl = (
      <>
        <div style={{ display:'flex', justifyContent:'flex-end', marginBottom:14 }}>
          <button onClick={() => mut(dd => dd.categories.push({
            id:'cat_' + Date.now().toString(36), sort: Math.max(0, ...dd.categories.map(c => c.sort)) + 1,
            hidden:false, tr:'Yeni kategori', en:'New category',
          }))} className="avb3-press"
            style={{ height:40, padding:'0 16px', borderRadius:12, border:'none', background:GREEN, color:INK, fontSize:13.5, fontWeight:700, cursor:'pointer' }}>+ Kategori</button>
        </div>
        <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
          {cats.map(c => {
            const count = d.items.filter(i => i.cat === c.id).length;
            const swap = (dir) => mut(dd => {
              const sorted = dd.categories.slice().sort((a,b) => a.sort - b.sort);
              const i = sorted.findIndex(x => x.id === c.id), j = i + dir;
              if (j < 0 || j >= sorted.length) return;
              const a = sorted[i].sort; sorted[i].sort = sorted[j].sort; sorted[j].sort = a;
            });
            const setC = (fn) => mut(dd => fn(dd.categories.find(x => x.id === c.id)));
            return (
              <div key={c.id} style={{ background:'#FFFFFF', borderRadius:14, padding:'10px 14px', display:'flex', alignItems:'center', gap:10, flexWrap:'wrap', opacity: c.hidden ? 0.55 : 1, boxShadow:'0 1px 0 rgba(0,0,0,0.04)' }}>
                <div style={{ display:'flex', flexDirection:'column', gap:2 }}>
                  {upDownBtn(() => swap(-1), 'Yukarı', '▲')}
                  {upDownBtn(() => swap(1), 'Aşağı', '▼')}
                </div>
                <input value={c.tr} onChange={e => setC(x => { x.tr = e.target.value; })} style={{ ...INPUT, flex:1, minWidth:140, fontWeight:600 }} />
                <input value={c.en} onChange={e => setC(x => { x.en = e.target.value; })} placeholder="EN" style={{ ...INPUT, flex:1, minWidth:120, color:'#3D3D3D' }} />
                <span style={{ fontSize:12, color:'#B3B3B3', fontVariantNumeric:'tabular-nums', width:52 }}>{count} ürün</span>
                <select value={O.visOf(c)} onChange={e => setC(x => O.setVis(x, e.target.value))} title="Görünürlük"
                  style={{ ...INPUT, height:32, fontSize:12.5, cursor:'pointer', width:132,
                    background: c.staffHidden ? 'rgba(26,26,26,0.85)' : (c.hidden ? 'rgba(46,90,138,0.12)' : 'rgba(208,228,18,0.25)'),
                    color: c.staffHidden ? CREAM : (c.hidden ? '#2E5A8A' : '#5C6410'), fontWeight:600, borderColor:'transparent' }}>
                  {O.VISIBILITY.map(v => <option key={v.id} value={v.id} style={{ color:INK, background:'#FFFFFF' }}>{v.label}</option>)}
                </select>
                <button onClick={() => { if (!count) mut(dd => { dd.categories = dd.categories.filter(x => x.id !== c.id); }); }} disabled={count > 0}
                  style={{ height:32, padding:'0 12px', borderRadius:999, border:'none', background: count > 0 ? 'rgba(26,26,26,0.04)' : 'rgba(192,58,43,0.1)', color: count > 0 ? '#B3B3B3' : '#C03A2B', fontSize:12, fontWeight:600, cursor: count > 0 ? 'not-allowed' : 'pointer' }}>
                  Sil
                </button>
              </div>
            );
          })}
        </div>
        <div style={{ fontSize:12, color:'#B3B3B3', marginTop:12 }}>İçinde ürün olan kategoriler silinemez — önce ürünleri taşıyın.</div>
      </>
    );
  }

  /* ════ EKSTRALAR ════ */
  let extrasEl = null;
  if (tab === 'extras') {
    extrasEl = (
      <>
        <div style={{ display:'flex', justifyContent:'flex-end', marginBottom:14 }}>
          <button onClick={() => mut(dd => {
            const id = 'grp_' + Date.now().toString(36);
            dd.extraGroups[id] = { id, tr:'Yeni grup', en:'New group', type:'multiple', options:[] };
          })} className="avb3-press"
            style={{ height:40, padding:'0 16px', borderRadius:12, border:'none', background:GREEN, color:INK, fontSize:13.5, fontWeight:700, cursor:'pointer' }}>+ Yeni grup</button>
        </div>
        <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
          {Object.values(d.extraGroups).map(g => {
            const setG = (fn) => mut(dd => fn(dd.extraGroups[g.id]));
            const usage = d.items.filter(i => (i.extras || []).includes(g.id)).length;
            return (
              <div key={g.id} style={{ background:'#FFFFFF', borderRadius:20, padding:16, boxShadow:'0 1px 0 rgba(0,0,0,0.04)' }}>
                <div style={{ display:'flex', gap:10, alignItems:'center', flexWrap:'wrap', marginBottom:12 }}>
                  <input value={g.tr} onChange={e => setG(x => { x.tr = e.target.value; })} style={{ ...INPUT, flex:1, minWidth:150, height:40, fontSize:15, fontWeight:700 }} />
                  <input value={g.en} onChange={e => setG(x => { x.en = e.target.value; })} placeholder="EN" style={{ ...INPUT, flex:1, minWidth:130, height:40, color:'#3D3D3D' }} />
                  <select value={g.type} onChange={e => setG(x => { x.type = e.target.value; })} style={{ ...INPUT, height:40, fontSize:13, cursor:'pointer' }}>
                    <option value="single">Tek seçim</option>
                    <option value="multiple">Çoklu seçim</option>
                  </select>
                  <span style={{ fontSize:12, color:'#B3B3B3' }}>{usage} üründe kullanılıyor</span>
                  <button onClick={() => {
                    if (!window.confirm('"' + g.tr + '" grubu silinsin mi? Kullanan ürünlerden de kaldırılacak.')) return;
                    mut(dd => {
                      delete dd.extraGroups[g.id];
                      dd.items.forEach(i => { i.extras = (i.extras || []).filter(e => e !== g.id); });
                    });
                  }} style={{ height:32, padding:'0 12px', borderRadius:999, border:'none', background:'rgba(192,58,43,0.1)', color:'#C03A2B', fontSize:12, fontWeight:600, cursor:'pointer' }}>
                    Grubu sil
                  </button>
                </div>
                <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
                  {(g.options || []).map((o, oi) => (
                    <div key={o.id || oi} style={{ display:'flex', gap:8, alignItems:'center', flexWrap:'wrap' }}>
                      <input value={o.tr} onChange={e => setG(x => { x.options[oi].tr = e.target.value; })} style={{ ...INPUT, flex:2, minWidth:140, height:36, fontSize:13.5 }} />
                      <input value={o.en} onChange={e => setG(x => { x.options[oi].en = e.target.value; })} placeholder="EN" style={{ ...INPUT, flex:2, minWidth:120, height:36, fontSize:13.5, color:'#3D3D3D' }} />
                      <div style={{ display:'flex', alignItems:'center', gap:4 }}>
                        <span style={{ fontSize:13, color:'#808080' }}>+₺</span>
                        <input value={o.delta} onChange={e => setG(x => { x.options[oi].delta = Number(e.target.value) || 0; })} type="number"
                          style={{ ...INPUT, width:70, height:36, fontSize:13.5, fontWeight:600, fontVariantNumeric:'tabular-nums' }} />
                      </div>
                      <button onClick={() => setG(x => x.options.splice(oi, 1))} aria-label="Seçeneği sil"
                        style={{ width:32, height:32, borderRadius:999, border:'none', background:'rgba(26,26,26,0.05)', color:'#808080', fontSize:14, cursor:'pointer' }}>×</button>
                    </div>
                  ))}
                  <button onClick={() => setG(x => x.options.push({ id:'mo_' + Date.now().toString(36), tr:'Yeni seçenek', en:'New option', delta:0 }))}
                    style={{ alignSelf:'flex-start', height:32, padding:'0 12px', borderRadius:999, border:'1px dashed rgba(26,26,26,0.2)', background:'none', color:OLIVE, fontSize:12.5, fontWeight:600, cursor:'pointer', marginTop:4 }}>
                    + Seçenek
                  </button>
                </div>
              </div>
            );
          })}
        </div>
      </>
    );
  }

  /* ════ ROZETLER & ALERJENLER ════ */
  let tagsEl = null;
  if (tab === 'tags') {
    const tagCard = (title, kind, addLabel, note, colorNote) => {
      const dict = kind === 'badges' ? B : ALG;
      const field = kind === 'badges' ? 'badges' : 'allergens';
      return (
        <div style={{ background:'#FFFFFF', borderRadius:20, padding:16, boxShadow:'0 1px 0 rgba(0,0,0,0.04)' }}>
          <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:4 }}>
            <div style={{ fontSize:15, fontWeight:700, color:INK }}>{title}</div>
            <button onClick={() => mut(dd => { dd[kind][(kind === 'badges' ? 'b_' : 'a_') + Date.now().toString(36)] = { tr: kind === 'badges' ? 'Yeni rozet' : 'Yeni alerjen', en: kind === 'badges' ? 'New badge' : 'New allergen' }; })}
              style={{ height:32, padding:'0 12px', borderRadius:999, border:'none', background:GREEN, color:INK, fontSize:12.5, fontWeight:700, cursor:'pointer' }}>{addLabel}</button>
          </div>
          <div style={{ fontSize:12, color:'#B3B3B3', marginBottom:12 }}>{note}</div>
          <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
            {Object.entries(dict).map(([k, v]) => {
              const usage = d.items.filter(i => ((i[field]) || []).includes(k)).length;
              return (
                <div key={k} style={{ display:'flex', gap:8, alignItems:'center', flexWrap:'wrap' }}>
                  <input value={v.tr} onChange={e => mut(dd => { dd[kind][k].tr = e.target.value; })} style={{ ...INPUT, flex:2, minWidth:110, height:36, fontSize:13.5 }} />
                  <input value={v.en} onChange={e => mut(dd => { dd[kind][k].en = e.target.value; })} placeholder="EN" style={{ ...INPUT, flex:2, minWidth:100, height:36, fontSize:13.5, color:'#3D3D3D' }} />
                  <span style={{ fontSize:11.5, color:'#B3B3B3', width:64, textAlign:'right', fontVariantNumeric:'tabular-nums' }}>{usage} üründe</span>
                  <button onClick={() => {
                    const warn = kind === 'badges' && (k === 'pop' || k === 'new')
                      ? '"' + v.tr + '" fotoğraf rozeti olarak kullanılıyor. Silinirse foto rozetleri kaybolur. '
                      : '';
                    if (!window.confirm(warn + '"' + v.tr + '" silinsin mi? Tüm ürünlerden temizlenecek.')) return;
                    mut(dd => {
                      delete dd[kind][k];
                      dd.items.forEach(i => { i[field] = (i[field] || []).filter(x => x !== k); });
                    });
                  }} aria-label="Sil" style={{ width:32, height:32, borderRadius:999, border:'none', background:'rgba(26,26,26,0.05)', color:'#808080', fontSize:14, cursor:'pointer' }}>×</button>
                </div>
              );
            })}
          </div>
        </div>
      );
    };
    tagsEl = (
      <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(320px, 1fr))', gap:16, alignItems:'start' }}>
        {tagCard('Rozetler', 'badges', '+ Rozet', 'Popüler/Yeni fotoğraf üzerinde, diğerleri diyet etiketi + filtre olarak görünür.')}
        {tagCard('Alerjenler', 'allergens', '+ Alerjen', 'Ürün detayında "İçerir:" satırında listelenir.')}
      </div>
    );
  }

  /* ════ MEKAN & MASALAR ════ */
  let placesEl = null;
  if (tab === 'places') {
    placesEl = (
      <>
        <div style={{ display:'flex', justifyContent:'flex-end', marginBottom:14 }}>
          <button onClick={() => mut(dd => { dd.areas.push({ id:'area_' + Date.now().toString(36), tr:'Yeni mekan', en:'New area' }); })} className="avb3-press"
            style={{ height:40, padding:'0 16px', borderRadius:12, border:'none', background:GREEN, color:INK, fontSize:13.5, fontWeight:700, cursor:'pointer' }}>+ Yeni mekan</button>
        </div>
        <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
          {(d.areas || []).map(a => {
            const areaTables = (d.tables || []).filter(t => t.area === a.id);
            return (
              <div key={a.id} style={{ background:'#FFFFFF', borderRadius:20, padding:16, boxShadow:'0 1px 0 rgba(0,0,0,0.04)' }}>
                <div style={{ display:'flex', gap:10, alignItems:'center', flexWrap:'wrap', marginBottom:12 }}>
                  <input value={a.tr} onChange={e => mut(dd => { dd.areas.find(x => x.id === a.id).tr = e.target.value; })} style={{ ...INPUT, flex:1, minWidth:150, height:40, fontSize:15, fontWeight:700 }} />
                  <input value={a.en || ''} onChange={e => mut(dd => { dd.areas.find(x => x.id === a.id).en = e.target.value; })} placeholder="EN" style={{ ...INPUT, flex:1, minWidth:130, height:40, color:'#3D3D3D' }} />
                  <button onClick={() => mut(dd => {
                    const n = dd.tables.filter(t => t.area === a.id).length + 1;
                    dd.tables.push({ id: a.id + '_' + Date.now().toString(36), area: a.id, label: String(n), cap: 2 });
                  })} style={{ height:34, padding:'0 13px', borderRadius:999, border:'none', background:GREEN, color:INK, fontSize:12.5, fontWeight:700, cursor:'pointer' }}>+ Masa</button>
                  <button onClick={() => { if (!areaTables.length) mut(dd => { dd.areas = dd.areas.filter(x => x.id !== a.id); }); }} disabled={areaTables.length > 0}
                    style={{ height:34, padding:'0 13px', borderRadius:999, border:'none', background: areaTables.length ? 'rgba(26,26,26,0.04)' : 'rgba(192,58,43,0.1)', color: areaTables.length ? '#B3B3B3' : '#C03A2B', fontSize:12.5, fontWeight:600, cursor: areaTables.length ? 'not-allowed' : 'pointer' }}>
                    Mekanı sil
                  </button>
                </div>
                <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(190px, 1fr))', gap:8 }}>
                  {areaTables.map(t => (
                    <div key={t.id} style={{ display:'flex', gap:6, alignItems:'center', background:CREAM, borderRadius:12, padding:'8px 10px' }}>
                      <span style={{ fontSize:12, fontWeight:600, color:'#808080' }}>Masa</span>
                      <input value={t.label} onChange={e => mut(dd => { dd.tables.find(x => x.id === t.id).label = e.target.value; })}
                        style={{ ...INPUT, width:44, height:32, padding:'0 8px', fontSize:13.5, fontWeight:700, textAlign:'center' }} />
                      <input value={t.cap} onChange={e => mut(dd => { dd.tables.find(x => x.id === t.id).cap = Number(e.target.value) || 1; })} type="number" title="Kapasite"
                        style={{ ...INPUT, width:48, height:32, padding:'0 8px', fontSize:13.5, textAlign:'center' }} />
                      <span style={{ fontSize:11, color:'#B3B3B3' }}>kişi</span>
                      <button onClick={() => mut(dd => { dd.tables = dd.tables.filter(x => x.id !== t.id); })} aria-label="Masayı sil"
                        style={{ marginLeft:'auto', width:28, height:28, borderRadius:999, border:'none', background:'rgba(26,26,26,0.05)', color:'#808080', fontSize:13, cursor:'pointer' }}>×</button>
                    </div>
                  ))}
                </div>
                <div style={{ fontSize:12, color:'#B3B3B3', marginTop:10 }}>Garson panelindeki masa listesi buradan beslenir.</div>
              </div>
            );
          })}
        </div>
      </>
    );
  }

  /* ════ KARŞILAMA ════ */
  let welcomeEl = null;
  if (tab === 'welcome') {
    const ob = O.onboardingOf(d);
    const sq = ob.shape === 'square';
    const setOb = (patch) => mut(dd => { dd.onboarding = { ...O.onboardingOf(dd), ...patch }; });
    const box = sq
      ? { width:200, height:200, borderRadius:20, margin:'0 auto' }
      : { width:'100%', height:132, borderRadius:16 };
    const visual = ob.image
      ? <img src={ob.image} alt="" style={{ ...box, objectFit:'cover', display:'block', background:'rgba(26,26,26,0.05)' }} />
      : <div style={{ ...box, backgroundColor:GREEN, backgroundImage:'url("/Brand/Logo/logo-yellow.png")', backgroundSize:'contain', backgroundRepeat:'no-repeat', backgroundPosition:'center' }} />;
    welcomeEl = (
      <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(300px, 1fr))', gap:16, alignItems:'start' }}>
        <div style={{ background:'#FFFFFF', borderRadius:20, padding:18, boxShadow:'0 1px 0 rgba(0,0,0,0.04)' }}>
          <div style={{ fontSize:15, fontWeight:700, color:INK, marginBottom:4 }}>Karşılama görseli</div>
          <div style={{ fontSize:12.5, color:'#B3B3B3', marginBottom:14, lineHeight:1.5 }}>
            Müşteri menüyü ilk açtığında çıkan ekranın üst görseli. Boş bırakırsanız marka logosu yeşil zeminde görünür.
          </div>

          <div style={{ ...CAPS, marginBottom:7 }}>Biçim</div>
          <div style={{ display:'flex', gap:6, marginBottom:16 }}>
            {O.ONBOARD_SHAPES.map(s => {
              const on = ob.shape === s.id;
              return (
                <button key={s.id} onClick={() => setOb({ shape: s.id })}
                  style={{ flex:1, height:44, borderRadius:12, border:'1px solid ' + (on ? INK : HAIR2), background: on ? INK : '#FFFFFF', color: on ? GREEN : '#808080', fontSize:13.5, fontWeight:700, cursor:'pointer' }}>
                  {s.label}
                </button>
              );
            })}
          </div>

          <div style={{ display:'flex', gap:8, marginBottom:10 }}>
            <button onClick={() => { const el = document.getElementById('avb-ob-input'); if (el) el.click(); }}
              disabled={!!upBusy} className="avb3-press"
              style={{ flex:1, height:40, borderRadius:10, border:'none', background: upBusy ? 'rgba(26,26,26,0.08)' : GREEN, color: upBusy ? '#808080' : INK, fontSize:13.5, fontWeight:700, cursor: upBusy ? 'default' : 'pointer', display:'flex', alignItems:'center', justifyContent:'center', gap:7 }}>
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke={upBusy ? '#808080' : INK} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 16V4" /><path d="M7 9l5-5 5 5" /><path d="M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3" /></svg>
              {upBusy ? 'Yükleniyor…' : 'Görsel yükle'}
            </button>
            {ob.image && !upBusy && (
              <button onClick={() => setOb({ image: null })}
                style={{ height:40, padding:'0 14px', borderRadius:10, border:'1px solid ' + HAIR2, background:'#FFFFFF', color:'#C03A2B', fontSize:12.5, fontWeight:600, cursor:'pointer' }}>
                Logoya dön
              </button>
            )}
          </div>
          <input id="avb-ob-input" type="file" accept="image/*" style={{ display:'none' }}
            onChange={async (e) => {
              const f = e.target.files && e.target.files[0];
              e.target.value = '';
              if (!f) return;
              setUpBusy('onboarding'); setUpNote(null);
              try {
                const r = await O.uploadItemImage('onboarding', f);
                setOb({ image: r.url });
                setUpNote({ ok:true, text: Math.round(r.before/1024) + ' KB → ' + Math.round(r.after/1024) + ' KB · ' + r.w + '×' + r.h });
              } catch(err){
                setUpNote({ ok:false, text: (err && err.message) || 'Yüklenemedi' });
              }
              setUpBusy(null);
            }} />

          <div style={CAPS}>veya adres yazın</div>
          <input value={ob.image || ''} onChange={e => setOb({ image: e.target.value || null })} placeholder="/photos/… veya https://…"
            style={{ ...INPUT, width:'100%', fontSize:12.5 }} />
          {upNote && (
            <div style={{ marginTop:8, fontSize:12, fontWeight:600, color: upNote.ok ? '#2E8A4A' : '#C03A2B', lineHeight:1.5 }}>
              {upNote.ok ? 'Yüklendi · ' : ''}{upNote.text}
            </div>
          )}
          <div style={{ marginTop:10, padding:'10px 12px', borderRadius:10, background:'rgba(208,228,18,0.18)', fontSize:12, color:'#3D4408', lineHeight:1.6 }}>
            <b>Önerilen ölçü: {sq ? '900 × 900 px' : '900 × 340 px'}</b>{sq ? ' (kare, 1:1)' : ' (yatay, ~2,6:1)'}<br />
            En az {sq ? '600 × 600' : '700 × 265'} px olsun. Daha büyüğünü yükleyebilirsiniz —
            uzun kenar otomatik 900px'e iner ve WebP'e çevrilir.
          </div>
        </div>

        {/* Müşterinin göreceği hâli — gerçek bileşenlerle */}
        <div style={{ background:'rgba(26,26,26,0.05)', borderRadius:20, padding:18 }}>
          <div style={{ ...CAPS, marginBottom:10 }}>Müşteri ekranı önizleme</div>
          <div style={{ maxWidth:340, margin:'0 auto', background:CREAM, borderRadius:'24px 24px 0 0', padding:'22px 18px 20px', textAlign:'center', boxShadow:'0 -8px 28px rgba(40,40,30,0.1)' }}>
            {visual}
            <div style={{ fontSize:10.5, fontWeight:600, letterSpacing:'0.08em', textTransform:'uppercase', color:'#808080', margin:'14px 0 7px' }}>DİL · LANGUAGE</div>
            <div style={{ display:'flex', justifyContent:'center', gap:7, marginBottom:14 }}>
              <span style={{ height:34, padding:'0 16px', borderRadius:999, background:INK, color:GREEN, fontSize:13, fontWeight:600, display:'inline-flex', alignItems:'center' }}>Türkçe</span>
              <span style={{ height:34, padding:'0 16px', borderRadius:999, border:'1px solid ' + HAIR2, background:'#FFFFFF', color:'#3D3D3D', fontSize:13, fontWeight:600, display:'inline-flex', alignItems:'center' }}>English</span>
            </div>
            <div style={{ fontSize:17.5, fontWeight:700, color:INK }}>Siparişinizi kendiniz oluşturabilirsiniz</div>
            <div style={{ fontSize:12.5, color:'#3D3D3D', lineHeight:1.55, marginTop:7 }}>Ürünleri seçin, siparişi tamamlayın — çıkan QR kodu garsonunuza gösterin.</div>
            <div style={{ display:'flex', flexDirection:'column', gap:7, marginTop:16 }}>
              <span style={{ height:44, borderRadius:12, background:OLIVE, color:GREEN, fontSize:13.5, fontWeight:700, display:'flex', alignItems:'center', justifyContent:'center' }}>Kendim sipariş oluşturacağım</span>
              <span style={{ height:44, borderRadius:12, border:'1px solid ' + HAIR2, background:'#FFFFFF', color:INK, fontSize:13.5, fontWeight:600, display:'flex', alignItems:'center', justifyContent:'center' }}>Sadece menüye bakacağım</span>
            </div>
          </div>
        </div>
      </div>
    );
  }

  const needsFirstPublish = exists === false;
  const saveLabel = saved ? 'Yayınlandı ✓' : (dirty ? 'Kaydet & yayınla' : (needsFirstPublish ? 'Menüyü yayınla' : 'Yayında'));
  const saveBg = saved ? '#2E8A4A' : ((dirty || needsFirstPublish) ? GREEN : 'rgba(26,26,26,0.08)');
  const saveFg = saved ? '#FFFFFF' : ((dirty || needsFirstPublish) ? INK : '#808080');

  return (
    <div className="avb3-screen" style={{ minHeight:'100dvh', background:CREAM, display:'flex', flexDirection:'column', position:'relative' }}>
      <div style={{ position:'sticky', top:0, zIndex:8, background:'rgba(245,240,232,0.9)', backdropFilter:'blur(12px)', borderBottom:'1px solid ' + HAIR }}>
        <div style={{ maxWidth:1100, margin:'0 auto', padding:'14px 20px 10px', display:'flex', alignItems:'center', justifyContent:'space-between', gap:12, flexWrap:'wrap' }}>
          <div style={{ display:'flex', alignItems:'center', gap:12 }}>
            <U.Wordmark />
            <U.RoleBadge label="MENÜ YÖNETİMİ" olive />
          </div>
          <div style={{ display:'flex', alignItems:'center', gap:8, flexWrap:'wrap' }}>
            <a href="/" target="_blank" rel="noopener"
              style={{ height:38, padding:'0 14px', borderRadius:12, border:'1px solid ' + HAIR2, background:'#FFFFFF', fontSize:13, fontWeight:600, color:INK, textDecoration:'none', display:'inline-flex', alignItems:'center' }}>
              Menüyü görüntüle
            </a>
            <button onClick={resetAll}
              style={{ height:38, padding:'0 14px', borderRadius:12, border:'1px solid ' + HAIR2, background:'transparent', fontSize:13, fontWeight:600, color:'#808080', cursor:'pointer' }}>
              Varsayılana dön
            </button>
            <button onClick={publish} className="avb3-press"
              style={{ height:38, padding:'0 18px', borderRadius:12, border:'none', background:saveBg, color:saveFg, fontSize:13.5, fontWeight:700, cursor:'pointer', transition:'background 180ms' }}>
              {saveLabel}
            </button>
            <button onClick={onLogout}
              style={{ height:38, padding:'0 14px', borderRadius:12, border:'1px solid ' + HAIR2, background:'transparent', fontSize:13, fontWeight:600, color:'#808080', cursor:'pointer' }}>
              Çıkış
            </button>
          </div>
        </div>
        <div className="avb3-noscroll" style={{ maxWidth:1100, margin:'0 auto', padding:'0 20px 12px', display:'flex', gap:8, overflowX:'auto' }}>
          <U.PillTabs tabs={tabs} active={tab} onChange={(id) => { setTab(id); setEditId(null); setOrderSel(null); }} />
        </div>
      </div>

      <div style={{ flex:1, maxWidth:1100, width:'100%', margin:'0 auto', padding:20, paddingBottom:96, boxSizing:'border-box' }}>
        {ordersEl}
        {itemsEl}
        {catsEl}
        {extrasEl}
        {tagsEl}
        {placesEl}
        {welcomeEl}
      </div>

      {orderDrawer}
      {editDrawer}

      {/* Adisyo eşleme sonucu */}
      {syncOut && (() => {
        const r = syncOut.report;
        const list = (title, arr, render) => (arr && arr.length) ? (
          <div>
            <div style={{ ...CAPS, marginBottom:6 }}>{title} ({arr.length})</div>
            <div style={{ background:'#FFFFFF', borderRadius:12, padding:'8px 12px', display:'flex', flexDirection:'column', gap:5 }}>
              {arr.slice(0, 40).map((x, i) => <div key={i} style={{ fontSize:13, color:'#3D3D3D', lineHeight:1.5 }}>{render(x)}</div>)}
              {arr.length > 40 && <div style={{ fontSize:12, color:'#B3B3B3' }}>… ve {arr.length - 40} tane daha</div>}
            </div>
          </div>
        ) : null;
        const hicFark = !r.added.length && !r.priceChanged.length && !r.renamed.length &&
                        !r.extraPrices.length && !r.extraGroups.length && !r.extraLinks && !r.catsAdded.length && !(r.catsRenamed||[]).length && !(r.moved||[]).length;
        return (
          <U.Drawer onClose={() => setSyncOut(null)} width="min(480px, 100%)">
            <div style={{ position:'sticky', top:0, background:'rgba(245,240,232,0.94)', backdropFilter:'blur(8px)', padding:'16px 20px', display:'flex', alignItems:'center', justifyContent:'space-between', borderBottom:'1px solid ' + HAIR, zIndex:2 }}>
              <div style={{ fontSize:17, fontWeight:700, color:INK }}>Adisyo eşleme sonucu</div>
              <U.CloseX onClick={() => setSyncOut(null)} />
            </div>
            <div style={{ padding:'18px 20px 96px', display:'flex', flexDirection:'column', gap:14 }}>
              {syncOut.warn && (
                <div style={{ padding:'10px 12px', borderRadius:12, background:'rgba(212,133,28,0.12)', color:'#B36F14', fontSize:12.5, fontWeight:600, lineHeight:1.5 }}>{syncOut.warn}</div>
              )}
              {syncOut.stats && (
                <div style={{ padding:'10px 12px', borderRadius:12, background:'rgba(46,138,74,0.1)', color:'#2E8A4A', fontSize:12.5, fontWeight:600, lineHeight:1.5 }}>
                  Adisyo → Firestore: {syncOut.stats.added} yeni · {syncOut.stats.updated} güncellendi · {syncOut.stats.deactivated} pasif · {syncOut.stats.unchanged} değişmedi
                </div>
              )}
              {hicFark && (
                <div style={{ padding:'14px 12px', borderRadius:12, background:'#FFFFFF', color:'#3D3D3D', fontSize:13.5, fontWeight:600, textAlign:'center' }}>
                  Menü Adisyo ile birebir aynı — değişiklik yok.
                </div>
              )}
              {list('Yeni ürün', r.added, x => x.name + ' · ' + O.fmt(x.price))}
              {list('Fiyat değişti', r.priceChanged, x => x.name + ' · ' + O.fmt(x.from) + ' → ' + O.fmt(x.to))}
              {list('Adı değişti', r.renamed, x => x.from + ' → ' + x.to)}
              {list('Ekstra fiyatı değişti', r.extraPrices, x => x.group + ' · ' + x.option + ' · +' + O.fmt(x.from) + ' → +' + O.fmt(x.to))}
              {list('Ekstra grupları', r.extraGroups, x => x)}
              {list('Yeni kategori', r.catsAdded, x => x)}
              {list('Kategori ad\u0131 de\u011fi\u015fti', r.catsRenamed, x => x)}
              {r.extraLinks > 0 && (
                <div style={{ fontSize:13, color:'#3D3D3D' }}>{r.extraLinks} üründe ekstra grubu bağlantısı güncellendi.</div>
              )}
              {list('Adisyo\'da yok (silinmedi)', r.missing, x => x)}
              {r.remoteImages > 0 && (
                <div style={{ padding:'10px 12px', borderRadius:12, background:'rgba(46,90,138,0.1)', color:'#2E5A8A', fontSize:12.5, fontWeight:600, lineHeight:1.5 }}>
                  {r.remoteImages} yeni ürünün görseli Storage orijinali — büyük olabilir. Ürün kartından yeniden yükleyerek küçültebilirsiniz.
                </div>
              )}
              {!hicFark && (
                <div style={{ fontSize:12, color:'#B3B3B3', lineHeight:1.5 }}>
                  Değişiklikler taslağa işlendi. Canlıya geçmesi için alttaki “Kaydet &amp; yayınla”ya basın.
                  İstasyon, görünürlük, foto ve rozet ayarlarınıza dokunulmadı.
                </div>
              )}
            </div>
          </U.Drawer>
        );
      })()}

      {/* Kaydetme çubuğu — çekmece (zIndex 21) üstünde durur, yoksa ürün
          düzenlerken üst bardaki kaydet butonu görünmez kalıyor. */}
      {exists === false && !dirty && !saved && (
        <div style={{ position:'fixed', left:0, right:0, bottom:0, zIndex:30, background:'rgba(46,90,138,0.97)', backdropFilter:'blur(10px)', WebkitBackdropFilter:'blur(10px)', boxShadow:'0 -8px 28px rgba(20,20,15,0.22)' }}>
          <div style={{ maxWidth:1100, margin:'0 auto', padding:'12px 20px', display:'flex', alignItems:'center', justifyContent:'space-between', gap:12, flexWrap:'wrap' }}>
            <span style={{ color:'#FFFFFF', fontSize:13.5, fontWeight:600, lineHeight:1.5 }}>
              Menü henüz Firestore'a yayınlanmadı — şu an uygulamaya gömülü taban veri kullanılıyor.
              Yayınlayın ki değişiklikler anında canlıya yansısın.
            </span>
            <button onClick={publish} className="avb3-press"
              style={{ height:40, padding:'0 20px', borderRadius:12, border:'none', background:GREEN, color:INK, fontSize:14, fontWeight:700, cursor:'pointer', flexShrink:0 }}>
              Menüyü yayınla
            </button>
          </div>
        </div>
      )}
      {(dirty || saved) && (
        <div style={{ position:'fixed', left:0, right:0, bottom:0, zIndex:30, background: saved ? '#2E8A4A' : 'rgba(26,26,26,0.97)', backdropFilter:'blur(10px)', WebkitBackdropFilter:'blur(10px)', boxShadow:'0 -8px 28px rgba(20,20,15,0.22)', animation:'avb3SheetUp 220ms cubic-bezier(0.2,0.8,0.2,1)' }}>
          <div style={{ maxWidth:1100, margin:'0 auto', padding:'12px 20px', display:'flex', alignItems:'center', justifyContent:'space-between', gap:12, flexWrap:'wrap' }}>
            <span style={{ color: saved ? '#FFFFFF' : CREAM, fontSize:13.5, fontWeight:600 }}>
              {saved ? 'Yayınlandı — müşteri menüsü ve garson paneli güncellendi' : 'Kaydedilmemiş değişiklikler var'}
            </span>
            {!saved && (
              <div style={{ display:'flex', gap:8 }}>
                <button onClick={() => {
                  if (!window.confirm('Kaydedilmemiş tüm değişiklikler geri alınacak. Devam edilsin mi?')) return;
                  setDraft(O.deepClone(menu)); setDirty(false); setEditId(null);
                }}
                  style={{ height:40, padding:'0 16px', borderRadius:12, border:'1px solid rgba(245,240,232,0.3)', background:'transparent', color:CREAM, fontSize:13.5, fontWeight:600, cursor:'pointer' }}>
                  Vazgeç
                </button>
                <button onClick={publish} className="avb3-press"
                  style={{ height:40, padding:'0 20px', borderRadius:12, border:'none', background:GREEN, color:INK, fontSize:14, fontWeight:700, cursor:'pointer' }}>
                  Kaydet &amp; yayınla
                </button>
              </div>
            )}
          </div>
        </div>
      )}
      {toastEl}
    </div>
  );
}

function AdminV3(){
  const authState = O.useStaffAuth(['admin']);
  return (
    <U.StaffGate authState={authState} badge="MENÜ YÖNETİMİ" title="Menü yönetimine giriş">
      <AdminInner onLogout={authState.logout} />
    </U.StaffGate>
  );
}

window.AvbAdminV3 = AdminV3;
})();