/* Cadenas San Gabriel — panel de administración. Comparte CSGStore con la página pública. */
const { useState, useEffect, useRef } = React;
const auth = window.CSGAuth;

/* ── Pantalla de login ── */
function LoginScreen(){
  const [email,setEmail]=useState('');
  const [pass,setPass]=useState('');
  const [err,setErr]=useState('');
  const [loading,setLoading]=useState(false);

  const login = async e => {
    e.preventDefault();
    setErr(''); setLoading(true);
    try {
      await auth.signInWithEmailAndPassword(email, pass);
    } catch(ex) {
      const msgs = {
        'auth/invalid-credential':'Correo o contraseña incorrectos.',
        'auth/user-not-found':'Correo o contraseña incorrectos.',
        'auth/wrong-password':'Correo o contraseña incorrectos.',
        'auth/too-many-requests':'Demasiados intentos. Espera unos minutos.',
        'auth/invalid-email':'Formato de correo inválido.',
      };
      setErr(msgs[ex.code] || 'Error al iniciar sesión.');
    } finally { setLoading(false); }
  };

  return (
    <div style={{minHeight:'100vh',display:'flex',alignItems:'center',justifyContent:'center',background:'var(--bg)',padding:24}}>
      <div style={{background:'var(--surf)',border:'1px solid var(--line)',borderRadius:20,width:'100%',maxWidth:380,boxShadow:'0 24px 60px -20px rgba(22,33,46,.22)'}}>
        <div style={{padding:'28px 30px 22px',borderBottom:'1px solid var(--line)'}}>
          <div className="brand" style={{marginBottom:18,gap:10,display:'flex',alignItems:'center'}}>
            <span className="mk" style={{width:28,height:28,borderRadius:7,background:'var(--ink)',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
              <span style={{width:11,height:11,border:'2.4px solid #fff',borderRadius:3,display:'block',transform:'rotate(45deg)'}}></span>
            </span>
            <span style={{fontFamily:"'Archivo',sans-serif",fontWeight:700,fontSize:15}}>CADENAS SAN GABRIEL</span>
          </div>
          <div style={{fontFamily:"'Archivo',sans-serif",fontWeight:700,fontSize:22}}>Acceso al panel</div>
          <div style={{fontSize:13.5,color:'var(--muted)',marginTop:5}}>Solo para administradores.</div>
        </div>
        <form onSubmit={login} style={{padding:'24px 30px 28px'}}>
          <div className="field">
            <label>Correo</label>
            <input type="email" value={email} onChange={e=>setEmail(e.target.value)} required autoFocus placeholder="admin@ejemplo.com"/>
          </div>
          <div className="field">
            <label>Contraseña</label>
            <input type="password" value={pass} onChange={e=>setPass(e.target.value)} required placeholder="••••••••"/>
          </div>
          {err && <div style={{background:'#FBE7E7',border:'1px solid #EBCFCF',borderRadius:10,padding:'10px 14px',fontSize:13.5,color:'#8A2A2A',marginBottom:16}}>{err}</div>}
          <button type="submit" className="btn btn-pri confirm" disabled={loading}>
            {loading ? 'Entrando…' : 'Ingresar'}
          </button>
        </form>
      </div>
    </div>
  );
}

/* ── Auth gate: decide qué renderizar ── */
function AuthGate(){
  const [user,setUser]=useState(undefined);
  useEffect(()=>auth.onAuthStateChanged(u=>setUser(u)),[]);
  if(user===undefined) return <div style={{minHeight:'100vh',display:'flex',alignItems:'center',justifyContent:'center',color:'var(--muted)',fontSize:14}}>Cargando…</div>;
  if(!user) return <LoginScreen/>;
  return <Admin user={user}/>;
}
const S = window.CSGStore;
const clp = S.clp;
const ESTADO_LABEL = {reservada:'RESERVADA', retirada:'RETIRADA', devuelta:'DEVUELTA', cancelada:'CANCELADA', no_show:'NO LLEGÓ'};

function useStore(){
  const [,force]=useState(0);
  useEffect(()=>S.subscribe(()=>force(x=>x+1)),[]);
  const meta = S.getMeta();
  return { meta, groups:S.getGroups(), reservations:S.getReservations(), gk:Object.keys(meta) };
}

function statusOf(n, active){
  if(!active) return ['st-off','Inactivo'];
  if(n===0) return ['st-out','Agotado'];
  if(n<=6) return ['st-low','Stock bajo'];
  return ['st-ok','Disponible'];
}

function TextInput({value, onCommit, placeholder, style}){
  const [v,setV]=useState(value);
  useEffect(()=>{setV(value);},[value]);
  return (
    <input value={v} placeholder={placeholder}
      style={{width:'100%',border:'1px solid var(--line)',borderRadius:8,padding:'7px 10px',fontSize:13.5,fontFamily:'inherit',color:'var(--ink)',background:'#FAFBFC',...style}}
      onChange={e=>setV(e.target.value)}
      onBlur={()=>{ if(v.trim()!==String(value)) onCommit(v.trim()); }}
      onKeyDown={e=>{if(e.key==='Enter')e.target.blur();}}/>
  );
}

const OPC = S.OPCIONES;
const selStyle = {width:'100%',border:'1px solid var(--line)',borderRadius:10,padding:'12px 14px',fontSize:15,fontFamily:'inherit',color:'var(--ink)',background:'#FAFBFC'};

function Select({label, value, options, onChange, placeholder}){
  return (
    <div className="field">
      <label>{label}</label>
      <select value={value||''} onChange={e=>onChange(e.target.value)} style={selStyle}>
        <option value="">{placeholder||'— elegir —'}</option>
        {options.map(o=><option key={o} value={o}>{o}</option>)}
      </select>
    </div>
  );
}

// Modal unificado: crea (id null) o edita un grupo, con todo el detalle técnico.
function GroupModal({id, meta, cfg, onClose}){
  const isEdit = id!=null;
  const [f,setF]=useState(()=>Object.assign(
    {name:'',range:'',model:'',perfil:'',patron:'',grosor:'',traccion:'',material:'',tensor:'',holgura:'',instalacion:'',anchoMin:'',anchoMax:'',aroMin:'',aroMax:''}, meta||{}));
  const [c,setC]=useState(()=>Object.assign({price:0,garantia:30000,stock:0,active:true}, cfg||{}));
  const set=(k,v)=>setF(p=>({...p,[k]:v}));
  const setc=(k,v)=>setC(p=>({...p,[k]:v}));
  const valid=(f.name||'').trim().length>0;
  const applyPlantilla=(t)=>{ setF(p=>Object.assign({},p,t.meta)); setC(p=>Object.assign({},p,t.cfg)); };
  const save=()=>{
    if(!valid) return;
    const numOrNull = v => (v===''||v==null||isNaN(Number(v))) ? null : Number(v);
    const metaOut={name:f.name.trim(), range:(f.range||'').trim(), model:(f.model||'').trim(),
      perfil:f.perfil, patron:f.patron, grosor:f.grosor, traccion:f.traccion,
      material:f.material, tensor:f.tensor, holgura:(f.holgura||'').trim(), instalacion:(f.instalacion||'').trim(),
      anchoMin:numOrNull(f.anchoMin), anchoMax:numOrNull(f.anchoMax),
      aroMin:numOrNull(f.aroMin), aroMax:numOrNull(f.aroMax)};
    const cfgOut={price:Number(c.price)||0, garantia:Number(c.garantia)||0, stock:Number(c.stock)||0, active:!!c.active};
    if(isEdit){ S.patchMeta(id, metaOut); S.patchGroup(id, cfgOut); }
    else { S.addGroup(metaOut, cfgOut); }
    onClose();
  };
  const divider = <div style={{borderTop:'1px solid var(--line)',margin:'6px 0 16px'}}></div>;
  return (
    <div className="overlay" onMouseDown={e=>{if(e.target===e.currentTarget)onClose();}}>
      <div className="modal">
        <div className="mhead"><h3>{isEdit?('Editar '+(f.name||'grupo')):'Nuevo grupo de cadenas'}</h3><button className="mclose" onClick={onClose}>×</button></div>
        <div className="mbody">
          {!isEdit && <div style={{marginBottom:18}}>
            <div className="lab" style={{marginBottom:8}}>Plantilla rápida</div>
            <div style={{display:'flex',gap:8,flexWrap:'wrap'}}>
              {S.PLANTILLAS.map(t=>(
                <button key={t.label} className="btn btn-gh" style={{padding:'8px 12px',fontSize:13}} onClick={()=>applyPlantilla(t)}>{t.label}</button>
              ))}
            </div>
          </div>}

          <div className="field"><label>Nombre del grupo *</label><input value={f.name} onChange={e=>set('name',e.target.value)} placeholder="Ej. Grupo 16" autoFocus/></div>
          <div className="field"><label>Categoría y medidas</label><input value={f.range} onChange={e=>set('range',e.target.value)} placeholder="Ej. SUV · 235/55–245/60 R18"/></div>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
            <div className="field"><label>Ancho mín. (mm)</label><input type="number" min="0" value={f.anchoMin} onChange={e=>set('anchoMin',e.target.value)} placeholder="Ej. 226"/></div>
            <div className="field"><label>Ancho máx. (mm)</label><input type="number" min="0" value={f.anchoMax} onChange={e=>set('anchoMax',e.target.value)} placeholder="Ej. 235"/></div>
            <div className="field"><label>Aro mín. (R__)</label><input type="number" min="10" max="24" value={f.aroMin} onChange={e=>set('aroMin',e.target.value)} placeholder="Ej. 17"/></div>
            <div className="field"><label>Aro máx. (R__)</label><input type="number" min="10" max="24" value={f.aroMax} onChange={e=>set('aroMax',e.target.value)} placeholder="Ej. 17"/></div>
          </div>
          <div className="fhintc" style={{marginTop:-6,marginBottom:14}}>El buscador usa el ancho <b>y</b> el aro para recomendar este grupo. Dentro de un mismo aro, los rangos de ancho de cada grupo no deben solaparse.</div>
          <div className="field"><label>Modelo de cadena</label><input value={f.model} onChange={e=>set('model',e.target.value)} placeholder="Ej. 4×4 traba 16 mm"/></div>

          {divider}
          <div className="lab" style={{marginBottom:10}}>Detalle técnico de instalación</div>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
            <Select label="Perfil (holgura)"     value={f.perfil}   options={OPC.perfil}   onChange={v=>set('perfil',v)}   placeholder="Bajo / Alto"/>
            <Select label="Patrón / malla"       value={f.patron}   options={OPC.patron}   onChange={v=>set('patron',v)}/>
            <Select label="Grosor del eslabón"   value={f.grosor}   options={OPC.grosor}   onChange={v=>set('grosor',v)}/>
            <Select label="Eje de montaje"       value={f.traccion} options={OPC.traccion} onChange={v=>set('traccion',v)}/>
            <Select label="Material"             value={f.material} options={OPC.material} onChange={v=>set('material',v)}/>
            <Select label="Tensor"               value={f.tensor}   options={OPC.tensor}   onChange={v=>set('tensor',v)}/>
          </div>
          <div className="field"><label>Holgura mínima libre</label><input value={f.holgura} onChange={e=>set('holgura',e.target.value)} placeholder="Ej. ≥ 12 mm"/></div>
          <div className="field"><label>Notas de instalación</label>
            <textarea value={f.instalacion} onChange={e=>set('instalacion',e.target.value)} rows={3}
              placeholder="Pasos y precauciones de montaje…"
              style={{...selStyle, fontSize:14.5, resize:'vertical', lineHeight:1.45}}/>
          </div>

          {divider}
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
            <div className="field"><label>Precio / día ($)</label><input type="number" min="0" value={c.price} onChange={e=>setc('price',Number(e.target.value))}/></div>
            <div className="field"><label>Garantía ($)</label><input type="number" min="0" value={c.garantia} onChange={e=>setc('garantia',Number(e.target.value))}/></div>
            <div className="field"><label>Stock</label><input type="number" min="0" value={c.stock} onChange={e=>setc('stock',Number(e.target.value))}/></div>
            <div className="field"><label>Publicado</label>
              <div style={{display:'flex',alignItems:'center',gap:10,paddingTop:6}}>
                <button type="button" className={"tg"+(c.active?" on":"")} onClick={()=>setc('active',!c.active)}></button>
                <span style={{fontSize:13.5,color:'var(--muted)'}}>{c.active?'Visible en la web':'Oculto'}</span>
              </div>
            </div>
          </div>
        </div>
        <div className="mfoot">
          <button className="btn btn-pri confirm" onClick={save} disabled={!valid}>{isEdit?'Guardar cambios':'Agregar grupo'}</button>
        </div>
      </div>
    </div>
  );
}

function PriceInput({value, onCommit, prefix}){
  const [v,setV]=useState(value);
  useEffect(()=>{setV(value);},[value]);
  return (
    <div className="priceinp">
      <span>{prefix}</span>
      <input value={v} inputMode="numeric"
        onChange={e=>setV(e.target.value.replace(/[^\d]/g,''))}
        onBlur={()=>{const n=parseInt(v||'0',10); onCommit(isNaN(n)?0:n);}}
        onKeyDown={e=>{if(e.key==='Enter')e.target.blur();}}/>
    </div>
  );
}

function Stepper({n, onSet}){
  const cls = n===0?'num out':n<=6?'num low':'num';
  return (
    <div className="stepper">
      <button onClick={()=>onSet(Math.max(0,n-1))} disabled={n<=0}>−</button>
      <div className={cls}>{n}</div>
      <button onClick={()=>onSet(n+1)}>+</button>
    </div>
  );
}

function Summary({groups, reservations, gk}){
  const activos = gk.filter(g=>groups[g] && groups[g].active);
  const totalStock = activos.reduce((a,g)=>a+groups[g].stock,0);
  const activeRes = reservations.filter(r=>r.estado==='reservada'||r.estado==='retirada');
  // Ingreso REALIZADO: solo arriendos que efectivamente se retiraron o devolvieron.
  const ingreso = reservations.filter(r=>r.estado==='retirada'||r.estado==='devuelta').reduce((a,r)=>a+(r.precioDia||0)*(r.dias||0),0);
  const noShows = reservations.filter(r=>r.estado==='no_show').length;
  return (
    <div className="cards">
      <div className="card"><div className="k"><span className="dot"></span>Unidades disponibles</div><div className="v">{totalStock}<small>cadenas</small></div></div>
      <div className="card"><div className="k">Grupos activos</div><div className="v">{activos.length}<small>/ {gk.length}</small></div></div>
      <div className="card"><div className="k">Reservas activas</div><div className="v">{activeRes.length}{noShows>0 && <small>· {noShows} no-show</small>}</div></div>
      <div className="card"><div className="k">Ingreso realizado</div><div className="v">{clp(ingreso)}</div></div>
    </div>
  );
}

// Resumen compacto del detalle técnico (se muestra bajo el modelo en la tabla).
function SpecTags({m}){
  const banda = (m.anchoMin!=null&&m.anchoMax!=null) ? `${m.anchoMin}–${m.anchoMax} mm` : null;
  const aros  = (m.aroMin!=null&&m.aroMax!=null) ? (m.aroMin===m.aroMax?`R${m.aroMin}`:`R${m.aroMin}–R${m.aroMax}`) : null;
  const calce = (banda||aros) ? [banda,aros].filter(Boolean).join(' · ') : null;
  const tags=[calce, m.perfil&&('Perfil '+m.perfil), m.patron, m.grosor, m.traccion, m.holgura&&('Holgura '+m.holgura)].filter(Boolean);
  if(!tags.length) return null;
  return (
    <div style={{display:'flex',flexWrap:'wrap',gap:5,marginTop:6}}>
      {tags.map((t,i)=>(
        <span key={i} style={{fontSize:11,fontWeight:600,color:'#3A4856',background:'#EEF3F8',border:'1px solid var(--line)',borderRadius:6,padding:'2px 7px'}}>{t}</span>
      ))}
    </div>
  );
}

function InventoryTab({meta, groups, gk}){
  const [modal,setModal]=useState(null);  // 'new' | {id} | null
  const delGroup = g => {
    if(confirm(`¿Eliminar "${meta[g]?.name || 'Grupo '+g}"? Esta acción no se puede deshacer.`)) S.removeGroup(g);
  };
  return (
    <>
    {modal==='new' && <GroupModal onClose={()=>setModal(null)}/>}
    {modal && modal.id!=null && <GroupModal id={modal.id} meta={meta[modal.id]} cfg={groups[modal.id]} onClose={()=>setModal(null)}/>}
    <div className="panel">
      <div className="ptitle">
        <div><h3>Inventario de cadenas</h3><div className="sub">Edición rápida en la tabla, o <b>Detalle</b> para abrir la ficha técnica completa (perfil, patrón, grosor, tracción…).</div></div>
        <div style={{display:'flex',gap:10}}>
          <button className="btn btn-gh" onClick={()=>setModal('new')}>+ Nuevo grupo</button>
          <button className="btn btn-gh" onClick={()=>{if(confirm('Actualiza las bandas de calce (ancho/aro) de los grupos 8–15 sin tocar precio, stock ni garantía. ¿Continuar?')) S.updateBands();}}>Actualizar calce</button>
          <button className="btn btn-gh" onClick={()=>{if(confirm('¿Restablecer todo a los valores de fábrica? Se borrarán grupos personalizados y reservas.')) S.resetAll();}}>Restablecer</button>
        </div>
      </div>
      <div className="scroll">
      <table>
        <thead><tr>
          <th>Grupo</th><th>Modelo y ficha técnica</th><th>Precio / día</th><th>Garantía</th><th>Stock</th><th>Estado</th><th>Publicar</th><th></th>
        </tr></thead>
        <tbody>
          {gk.map(g=>{
            const m=meta[g]||{}, c=groups[g]||{};
            const [scls,slabel]=statusOf(c.stock,c.active);
            return (
              <tr key={g} className={c.active?'':'off'}>
                <td style={{minWidth:150}}>
                  <TextInput value={m.name||''} placeholder="Nombre" onCommit={v=>S.patchMeta(g,{name:v})}/>
                  <TextInput value={m.range||''} placeholder="Categoría · medidas" style={{marginTop:6,fontSize:12.5,color:'var(--muted)'}} onCommit={v=>S.patchMeta(g,{range:v})}/>
                </td>
                <td style={{minWidth:230}}>
                  <TextInput value={m.model||''} placeholder="Ej. Rombo 9 mm" onCommit={v=>S.patchMeta(g,{model:v})}/>
                  <SpecTags m={m}/>
                </td>
                <td><PriceInput prefix="$" value={c.price||0} onCommit={v=>S.patchGroup(g,{price:v})}/></td>
                <td><PriceInput prefix="$" value={c.garantia||0} onCommit={v=>S.patchGroup(g,{garantia:v})}/></td>
                <td><Stepper n={c.stock||0} onSet={v=>S.patchGroup(g,{stock:v})}/></td>
                <td><span className={"statetag "+scls}>{c.active && <span className="dot" style={{background:'currentColor'}}></span>}{slabel}</span></td>
                <td><button className={"tg"+(c.active?" on":"")} onClick={()=>S.patchGroup(g,{active:!c.active})} title={c.active?'Visible en la web':'Oculto'}></button></td>
                <td>
                  <div style={{display:'flex',gap:6,alignItems:'center'}}>
                    <button className="mini" onClick={()=>setModal({id:g})} title="Editar ficha técnica completa">⚙ Detalle</button>
                    <button onClick={()=>delGroup(g)} title="Eliminar grupo"
                      style={{background:'none',border:'none',color:'#B23B3B',fontSize:18,cursor:'pointer',padding:'4px 8px',borderRadius:7,lineHeight:1}}
                      onMouseEnter={e=>e.target.style.background='#FBE7E7'}
                      onMouseLeave={e=>e.target.style.background='none'}>×</button>
                  </div>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
      </div>
    </div>
    </>
  );
}

function fmtTs(ts){
  const d=new Date(ts); const mes=['ene','feb','mar','abr','may','jun','jul','ago','sep','oct','nov','dic'];
  return `${d.getDate()} ${mes[d.getMonth()]} · ${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`;
}

function ReservationsTab({reservations, meta}){
  const setEstado=(r, estado)=>{
    // El servidor decide el reingreso de stock según la transición (idempotente).
    S.setReservationState(r.id, estado).catch(err=>{
      if(err && err.message==='transicion-invalida') return; // ya cambió en otra pestaña
      alert('No se pudo actualizar la reserva. Revisa tu conexión e inténtalo de nuevo.');
    });
  };
  if(reservations.length===0){
    return (
      <div className="panel"><div className="empty">
        <div className="ic">🗓️</div>
        <p>Aún no hay reservas. Las reservas confirmadas en la página pública aparecerán aquí.</p>
        <a className="btn btn-pri" style={{display:'inline-block',marginTop:16,textDecoration:'none'}} href="/">Abrir página pública →</a>
      </div></div>
    );
  }
  return (
    <div className="panel">
      <div className="ptitle"><div><h3>Reservas</h3><div className="sub">Gestiona el ciclo de cada arriendo: reservada → retirada → devuelta.</div></div></div>
      <div className="scroll">
      <table>
        <thead><tr><th>Código</th><th>Cliente</th><th>Cadena</th><th>Viaje</th><th>Total</th><th>Estado</th><th>Acciones</th></tr></thead>
        <tbody>
          {reservations.map(r=>{
            // Preferimos la copia guardada al reservar; si no, el grupo actual.
            const m={name: r.groupName || (meta[r.group]&&meta[r.group].name) || ('Grupo '+r.group),
                     model: r.groupModel || (meta[r.group]&&meta[r.group].model) || ''};
            return (
              <tr key={r.id||r.code}>
                <td><div className="code">{r.code}</div><div className="grange">{fmtTs(r.ts)}</div></td>
                <td><div className="cust">{r.nombre}<div className="sub">{r.rut||'—'}</div><div className="sub">{r.patente} · {r.fono}</div></div></td>
                <td><div className="gmodel">{m.name}</div><div className="grange">{m.model}</div></td>
                <td><div className="gmodel">{r.dia}</div><div className="grange">Retiro {r.hora||'—'} · {r.dias} {r.dias===1?'día':'días'}</div></td>
                <td><div className="gname" style={{fontSize:14}}>{clp(r.total)}</div><div className="grange">{clp(r.precioDia)}/día + gar.</div></td>
                <td><span className={"res-estado e-"+r.estado}>{ESTADO_LABEL[r.estado]}</span></td>
                <td><div className="acts">
                  {r.estado==='reservada' && <>
                    <button className="mini ok" onClick={()=>setEstado(r,'retirada')}>Marcar retirada</button>
                    <button className="mini" onClick={()=>setEstado(r,'no_show')}>No llegó</button>
                    <button className="mini red" onClick={()=>setEstado(r,'cancelada')}>Cancelar</button>
                  </>}
                  {r.estado==='retirada' && <button className="mini ok" onClick={()=>setEstado(r,'devuelta')}>Marcar devuelta</button>}
                  {(r.estado==='devuelta'||r.estado==='cancelada'||r.estado==='no_show') && <span className="grange">Sin acciones</span>}
                </div></td>
              </tr>
            );
          })}
        </tbody>
      </table>
      </div>
    </div>
  );
}

function Admin({user}){
  const {meta, groups, reservations, gk}=useStore();
  const [tab,setTab]=useState('inv');
  const seeded=useRef(false);
  // Primera vez: si Firestore está vacío, sembramos el inventario de fábrica.
  useEffect(()=>{
    if(!seeded.current && S.groupsLoaded() && gk.length===0){
      seeded.current=true;
      S.seedDefaults();
    }
  },[gk.length]);
  const activeRes = reservations.filter(r=>r.estado==='reservada'||r.estado==='retirada').length;
  return (<>
    <div className="top"><div className="wrap">
      <div className="brand"><span className="mk"></span>CADENAS SAN GABRIEL <span className="tag">// Panel</span></div>
      <div className="right">
        <a className="link" href="/">↗ Ver sitio público</a>
        <span style={{color:'#8FA3B6',fontSize:13}}>{user.email}</span>
        <button className="btn" style={{background:'transparent',border:'1px solid #3A4F62',color:'#AFC0D0',fontSize:13,padding:'6px 14px'}} onClick={()=>auth.signOut()}>Cerrar sesión</button>
      </div>
    </div></div>

    <div className="tabs"><div className="wrap">
      <button className={"tab"+(tab==='inv'?" on":"")} onClick={()=>setTab('inv')}>Inventario</button>
      <button className={"tab"+(tab==='res'?" on":"")} onClick={()=>setTab('res')}>Reservas{activeRes>0 && <span className="c">{activeRes}</span>}</button>
    </div></div>

    <div className="page"><div className="wrap">
      <div className="phead">
        <div>
          <h1 className="disp">{tab==='inv'?'Inventario':'Reservas'}</h1>
          <p>{tab==='inv'?'Define qué grupos de cadena ofreces y cuántas unidades tienes disponibles.':'Todas las reservas confirmadas desde la página pública, en tiempo real.'}</p>
        </div>
      </div>
      <Summary groups={groups} reservations={reservations} gk={gk}/>
      {tab==='inv' ? <InventoryTab meta={meta} groups={groups} gk={gk}/> : <ReservationsTab reservations={reservations} meta={meta}/>}
    </div></div>
  </>);
}

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