// TopBar.jsx — Comesa header + category tabs + search + price/cata toggles

const TopBar = ({
  category, onCategory, categories, counts,
  showPrices, onTogglePrices,
  showCata, onToggleCata,
  esComercial,
  selectionMode, onToggleSelectionMode,
  showMenu, onMenu, vw = 1440,
  search, onSearch,
}) => {
  const narrow = vw < 1280;   // move category nav to its own row
  const compact = vw < 720;   // stack tighter, allow wrapping

  const navEl = (
    <nav style={{
      display: 'flex', alignItems: 'center',
      justifyContent: narrow ? 'flex-start' : 'center',
      gap: 4,
      flex: narrow ? 'none' : 1,
      overflowX: 'auto', maxWidth: '100%',
    }} aria-label="Categorías">
      {categories.map(c => {
        const active = category === c;
        const n = counts[c] || 0;
        return (
          <button
            key={c}
            onClick={() => onCategory(c)}
            style={{
              position: 'relative',
              background: 'transparent',
              border: 0,
              padding: narrow ? '10px 14px' : '14px 18px',
              fontFamily: 'Sora', fontWeight: active ? 600 : 500, fontSize: 12,
              letterSpacing: '0.18em', textTransform: 'uppercase',
              color: active ? '#FFFFFF' : '#565555',
              cursor: 'pointer', whiteSpace: 'nowrap',
              transition: 'color 180ms cubic-bezier(0.4,0,0.2,1)',
            }}
            onMouseEnter={(e) => { if (!active) e.currentTarget.style.color = '#EFEDED'; }}
            onMouseLeave={(e) => { if (!active) e.currentTarget.style.color = '#565555'; }}
          >
            <span>{c}</span>
            <sup style={{
              marginLeft: 6,
              fontFamily: 'Sora', fontWeight: 500, fontSize: 9,
              letterSpacing: '0.02em',
              color: active ? '#B50D21' : '#565555',
              top: '-0.4em',
            }}>{n}</sup>
            {active && (
              <span style={{
                position: 'absolute', left: narrow ? 14 : 18, right: narrow ? 14 : 18, bottom: 4,
                height: 1.5, background: 'var(--comesa-red)',
              }}/>
            )}
          </button>
        );
      })}
    </nav>
  );

  return (
    <header style={{
      background: '#0F0F0F',
      borderBottom: '1px solid #2A2A28',
      padding: narrow ? '12px 20px 0' : '14px 32px',
      display: 'flex', flexDirection: 'column',
      gap: narrow ? 4 : 0,
      zIndex: 10,
    }}>
      {/* Top row */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: compact ? 12 : 24,
        flexWrap: compact ? 'wrap' : 'nowrap',
      }}>
        {/* Menu button (tablet / mobile) */}
        {showMenu &&
        <button
          onClick={onMenu}
          aria-label="Abrir bodegas"
          title="Bodegas"
          style={{
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            width: 42, height: 42, flexShrink: 0,
            background: '#1D1D1B', border: '1px solid #3A3A38',
            color: '#EFEDED', cursor: 'pointer',
          }}
          onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#4A4A48'; }}
          onMouseLeave={(e) => { e.currentTarget.style.borderColor = '#3A3A38'; }}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
        </button>
        }

        {/* Brand block */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, flexShrink: 0 }}>
          <img src={(window.__resources && window.__resources.logoMain) || "assets/logo-imagotipo-blanco.png"} alt="Comesa Canarias"
            style={{ height: compact ? 42 : 56, display: 'block' }} />
          {!compact &&
          <div style={{
            paddingLeft: 16, borderLeft: '1px solid #2A2A28',
          }}>
            <div style={{
              fontFamily: 'Sora', fontWeight: 500, fontSize: 10,
              letterSpacing: '0.26em', textTransform: 'uppercase',
              color: '#565555',
            }}>Catálogo</div>
            <div style={{
              fontFamily: 'Sora', fontWeight: 600, fontSize: 14,
              letterSpacing: '0.02em',
              color: '#FFFFFF',
              display: 'inline-flex', alignItems: 'baseline', gap: 6,
            }}>
              <span style={{ fontFamily: 'Estrela, Sora', fontStyle: 'italic', fontWeight: 400, fontSize: 44, lineHeight: 1, color: '#B50D21' }}>Vinos</span> 2026
            </div>
          </div>
          }
        </div>

        {/* Category tabs (inline only when wide) */}
        {!narrow && navEl}

        {/* Right cluster: search + toggles */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 12,
          marginLeft: narrow ? 'auto' : 0,
          flex: compact ? '1 1 100%' : 'none',
          flexWrap: 'wrap', justifyContent: 'flex-end',
        }}>
          {/* Search */}
          <div style={{
            display: 'flex', alignItems: 'center', gap: 8,
            background: '#1D1D1B', border: '1px solid #3A3A38',
            padding: '8px 12px',
            width: compact ? '100%' : 220, minWidth: 150,
            flex: compact ? '1 1 100%' : 'none',
            transition: 'border-color 180ms',
          }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#B7B6B6" strokeWidth="2">
              <circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/>
            </svg>
            <input
              type="text"
              value={search}
              onChange={(e) => onSearch(e.target.value)}
              placeholder="Buscar vino, variedad, D.O…"
              style={{
                flex: 1, minWidth: 0, background: 'transparent', border: 0, outline: 'none',
                color: '#FFFFFF',
                fontFamily: 'Sora', fontWeight: 300, fontSize: 13,
              }}
            />
            {search && (
              <button onClick={() => onSearch('')} style={{
                background: 'transparent', border: 0, color: '#B7B6B6',
                cursor: 'pointer', padding: 0, lineHeight: 0,
              }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 6l12 12M18 6l-12 12"/></svg>
              </button>
            )}
          </div>

          {/* Herramientas comerciales: precios, cata y modo selección. Una visita
              sin sesión no las ve, y tampoco recibe los precios del servidor. */}
          {esComercial && <>
          <HeaderToggle
            on={showPrices}
            onChange={onTogglePrices}
            labelOn="Precios"
            labelOff="Precios"
            title={showPrices ? 'Ocultar precios' : 'Mostrar precios'} />
          <HeaderToggle
            on={showCata}
            onChange={onToggleCata}
            labelOn="Cata"
            labelOff="Cata"
            title={showCata ? 'Ocultar notas de cata' : 'Mostrar notas de cata'} />
          <HeaderToggle
            on={selectionMode}
            onChange={onToggleSelectionMode}
            labelOn="Modo selección"
            labelOff="Modo selección"
            title={selectionMode ? 'Desactivar modo selección' : 'Activar modo selección'} />
          </>}

          <AccesoLink esComercial={esComercial} />
        </div>
      </div>

      {/* Category tabs row (tablet / mobile) */}
      {narrow && navEl}
    </header>
  );
};

// Entrada y salida del equipo comercial. Discreto a propósito: el catálogo
// público es la cara de Comesa y esto es una puerta de servicio.
const AccesoLink = ({ esComercial }) => (
  <a
    href={esComercial ? 'admin/?salir=1' : 'admin/'}
    title={esComercial ? 'Cerrar la sesión comercial' : 'Acceso del equipo comercial'}
    style={{
      display: 'flex', alignItems: 'center', gap: 7, flexShrink: 0,
      background: 'transparent', border: '1px solid #2A2A28',
      padding: '8px 12px', textDecoration: 'none',
      fontFamily: 'Sora', fontWeight: 600, fontSize: 10,
      letterSpacing: '0.14em', textTransform: 'uppercase',
      color: esComercial ? '#B7B6B6' : '#565555', whiteSpace: 'nowrap',
      transition: 'color 180ms, border-color 180ms',
    }}
    onMouseEnter={(e) => { e.currentTarget.style.color = '#FFFFFF'; e.currentTarget.style.borderColor = '#4A4A48'; }}
    onMouseLeave={(e) => { e.currentTarget.style.color = esComercial ? '#B7B6B6' : '#565555'; e.currentTarget.style.borderColor = '#2A2A28'; }}>
    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      {esComercial
        ? <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9" />
        : <><rect x="4" y="11" width="16" height="10" rx="1" /><path d="M8 11V7a4 4 0 0 1 8 0v4" /></>}
    </svg>
    {esComercial ? 'Salir' : 'Acceso comercial'}
  </a>
);

const HeaderToggle = ({ on, onChange, labelOn, labelOff, title }) => {
  return (
    <button
      onClick={() => onChange(!on)}
      aria-pressed={on}
      title={title}
      style={{
        display: 'flex', alignItems: 'center', gap: 9,
        background: on ? 'var(--comesa-red)' : '#1D1D1B',
        border: on ? '1px solid var(--comesa-red)' : '1px solid #3A3A38',
        padding: '8px 12px',
        cursor: 'pointer',
        transition: 'background-color 180ms cubic-bezier(0.4,0,0.2,1), border-color 180ms',
      }}
      onMouseEnter={(e) => {
        if (on) e.currentTarget.style.background = 'var(--accent-hover)';
        else { e.currentTarget.style.borderColor = '#4A4A48'; e.currentTarget.style.background = '#2A2A28'; }
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.background = on ? 'var(--comesa-red)' : '#1D1D1B';
        e.currentTarget.style.borderColor = on ? 'var(--comesa-red)' : '#3A3A38';
      }}
    >
      {/* Capsule visual */}
      <div style={{
        width: 30, height: 16,
        background: on ? '#fff' : '#3A3A38',
        borderRadius: 999,
        position: 'relative',
        transition: 'background-color 180ms',
        flexShrink: 0,
      }}>
        <div style={{
          position: 'absolute', top: 2, left: on ? 16 : 2,
          width: 12, height: 12, borderRadius: 999,
          background: on ? 'var(--comesa-red)' : '#565555',
          transition: 'left 180ms cubic-bezier(0.4,0,0.2,1), background-color 180ms',
        }}/>
      </div>
      <span style={{
        fontFamily: 'Sora', fontWeight: 600, fontSize: 10,
        letterSpacing: '0.14em', textTransform: 'uppercase',
        color: on ? '#fff' : '#EFEDED', whiteSpace: 'nowrap',
      }}>{on ? labelOn : labelOff}</span>
    </button>
  );
};

const PriceToggle = ({ on, onChange }) => {
  return (
    <button
      onClick={() => onChange(!on)}
      aria-pressed={on}
      style={{
        display: 'flex', alignItems: 'center', gap: 14,
        background: on ? 'var(--comesa-red)' : '#1D1D1B',
        border: on ? '1px solid var(--comesa-red)' : '1px solid #3A3A38',
        padding: '10px 16px 10px 14px',
        cursor: 'pointer',
        transition: 'background-color 180ms cubic-bezier(0.4,0,0.2,1), border-color 180ms',
      }}
      onMouseEnter={(e) => {
        if (on) e.currentTarget.style.background = 'var(--accent-hover)';
        else { e.currentTarget.style.borderColor = '#4A4A48'; e.currentTarget.style.background = '#2A2A28'; }
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.background = on ? 'var(--comesa-red)' : '#1D1D1B';
        e.currentTarget.style.borderColor = on ? 'var(--comesa-red)' : '#3A3A38';
      }}
    >
      {/* Capsule visual */}
      <div style={{
        width: 36, height: 20,
        background: on ? '#fff' : '#3A3A38',
        borderRadius: 999,
        position: 'relative',
        transition: 'background-color 180ms',
      }}>
        <div style={{
          position: 'absolute', top: 2, left: on ? 18 : 2,
          width: 16, height: 16, borderRadius: 999,
          background: on ? 'var(--comesa-red)' : '#565555',
          transition: 'left 180ms cubic-bezier(0.4,0,0.2,1), background-color 180ms',
        }}/>
      </div>
      <div style={{ textAlign: 'left' }}>
        <div style={{
          fontFamily: 'Sora', fontWeight: 600, fontSize: 11,
          letterSpacing: '0.18em', textTransform: 'uppercase',
          color: on ? '#fff' : '#EFEDED',
        }}>{on ? 'Precios visibles' : 'Precios ocultos'}</div>
        <div style={{
          fontFamily: 'Sora', fontWeight: 300, fontSize: 10,
          color: on ? 'rgba(255,255,255,0.75)' : '#565555', marginTop: 1,
        }}>{on ? 'Mostrando PVP' : 'Modo presentación'}</div>
      </div>
    </button>
  );
};

window.TopBar = TopBar;
window.PriceToggle = PriceToggle;
window.HeaderToggle = HeaderToggle;