// Club 1519 — Panel Staff · chrome: Login, Rail lateral, Topbar
const { useState: c15UseState } = React;

function C15Logo({ size = 26, color = 'currentColor' }) {
  const I = window.C15Icons;
  return (
    <div className="c15-logo" style={{ color }}>
      <I.Columna size={size} />
      <div className="c15-logo-wm">
        <b>CLUB<br />1519</b>
      </div>
    </div>
  );
}

function C15Badge({ tone = 'neutral', children }) {
  return <span className={'c15-badge ' + tone}>{children}</span>;
}

/* ---------- Login Staff ---------- */
function C15StaffLogin({ onEnter }) {
  const [correo, setCorreo] = c15UseState('alan@club1519.mx');
  const [pass, setPass] = c15UseState('••••••••');
  return (
    <div className="c15s-login">
      <div className="c15s-login-box">
        <C15Logo size={34} color="var(--gold)" />
        <div className="c15s-login-kick">Panel staff · acceso privado</div>
        <h1>El club, en un<br />solo lugar.</h1>
        <p>Membresías, eventos, proveedores y patrocinios — la operación completa de Club 1519.</p>

        <div className="c15s-field">
          <span>Correo</span>
          <input value={correo} onChange={e => setCorreo(e.target.value)} />
        </div>
        <div className="c15s-field">
          <span>Contraseña</span>
          <input type="password" value={pass} onChange={e => setPass(e.target.value)} />
        </div>
        <button className="c15-btn primary lg" onClick={onEnter}>Entrar al panel</button>
        <div className="c15s-login-foot">
          <span>Acceso restringido · equipo Club 1519</span>
          <span className="c15-sig">bankō</span>
        </div>
      </div>
    </div>
  );
}

/* ---------- Rail lateral ---------- */
function C15StaffRail({ active, onNav, onLogout }) {
  const I = window.C15Icons;
  const pendientes = window.C15_PIPELINE.filter(p => p.etapa === 'Nueva solicitud' || p.etapa === 'En revisión').length;
  const items = [
    { id: 'panel', label: 'Panel', icon: 'Panel' },
    { id: 'socios', label: 'Socios y membresías', icon: 'Membresia', count: pendientes },
    { id: 'eventos', label: 'Eventos y ponencias', icon: 'Eventos' },
    { id: 'proveedores', label: 'Proveedores y ventas', icon: 'Proveedores' },
    { id: 'marcas', label: 'Marcas patrocinadoras', icon: 'Marcas' },
    { id: 'comunicacion', label: 'Comunicación', icon: 'Comunicados' },
    { id: 'reportes', label: 'Reportes', icon: 'Reportes' },
  ];
  return (
    <aside className="c15s-rail">
      <div className="c15s-rail-brand">
        <C15Logo size={26} color="var(--gold)" />
      </div>
      <div className="c15s-navlabel">Operación</div>
      <nav className="c15s-nav">
        {items.map(it => {
          const Ico = I[it.icon];
          return (
            <button key={it.id} className={'c15s-navitem' + (active === it.id ? ' on' : '')} onClick={() => onNav(it.id)}>
              <Ico size={18} />
              <span className="lbl">{it.label}</span>
              {!!it.count && <span className="c15s-navcount">{it.count}</span>}
            </button>
          );
        })}
      </nav>
      <div className="c15s-rail-foot">
        <div className="c15s-userbox">
          <span className="c15s-avatar">{window.C15_ME.short}</span>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="u-name">{window.C15_ME.nombre}</div>
            <div className="u-role">Administración</div>
          </div>
          <button className="c15s-railbtn" onClick={onLogout} title="Salir"><I.Salir size={16} /></button>
        </div>
        <div className="c15s-signature"><span className="c15-sig">bankō</span></div>
      </div>
    </aside>
  );
}

/* ---------- Topbar ---------- */
function C15StaffTopbar({ title, subtitle }) {
  const I = window.C15Icons;
  return (
    <header className="c15s-top">
      <div className="c15s-top-title">
        <h1>{title}</h1>
        {subtitle && <span>{subtitle}</span>}
      </div>
      <div className="c15s-top-actions">
        <div className="c15s-field-search"><I.Buscar size={16} /><input placeholder="Buscar…" readOnly /></div>
        <button className="c15s-icobtn"><I.Campana size={17} /><span className="dot" /></button>
      </div>
    </header>
  );
}

Object.assign(window, { C15Logo, C15Badge, C15StaffLogin, C15StaffRail, C15StaffTopbar });