// SelectionBar.jsx — floating bottom bar shown when >=1 wine is selected.
// Cart-like summary + actions: Ver selección · Vaciar · Generar PDF

const SelectionBar = ({ count, onView, onClear, onGenerate }) => {
  if (!count) return null;
  return (
    <div style={{
      position: 'fixed', left: '50%', bottom: 24, transform: 'translateX(-50%)',
      zIndex: 80, width: 'min(720px, calc(100vw - 48px))',
      display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap', justifyContent: 'flex-end',
      background: '#0F0F0F', border: '1px solid #3A3A38',
      boxShadow: '0 24px 56px -8px rgba(0,0,0,0.6)',
      padding: '12px 12px 12px 20px',
      animation: 'selbarIn 260ms cubic-bezier(0.2,0,0,1)',
    }}>
      {/* Count */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, flex: 1, minWidth: 0 }}>
        <span style={{
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          minWidth: 30, height: 30, padding: '0 8px',
          background: 'var(--comesa-red)', color: '#fff',
          fontFamily: 'Sora', fontWeight: 600, fontSize: 14,
        }}>{count}</span>
        <div style={{ minWidth: 0 }}>
          <div style={{
            fontFamily: 'Sora', fontWeight: 600, fontSize: 13, color: '#FFFFFF',
            whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
          }}>{count === 1 ? '1 producto seleccionado' : `${count} productos seleccionados`}</div>
          <div style={{
            fontFamily: 'Sora', fontWeight: 300, fontSize: 11, color: '#B7B6B6', marginTop: 1,
          }}>Catálogo personalizado</div>
        </div>
      </div>

      {/* Actions */}
      <button
        onClick={onClear}
        title="Vaciar selección"
        style={ghostBtn}
        onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#4A4A48'; e.currentTarget.style.color = '#fff'; }}
        onMouseLeave={(e) => { e.currentTarget.style.borderColor = '#3A3A38'; e.currentTarget.style.color = '#B7B6B6'; }}>
        Vaciar
      </button>
      <button
        onClick={onView}
        style={secondaryBtn}
        onMouseEnter={(e) => { e.currentTarget.style.background = '#2A2A28'; }}
        onMouseLeave={(e) => { e.currentTarget.style.background = '#1D1D1B'; }}>
        Ver selección
      </button>
      <button
        onClick={onGenerate}
        style={primaryBtn}
        onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--accent-hover)'; }}
        onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--comesa-red)'; }}>
        Generar PDF
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
      </button>

      <style>{`@keyframes selbarIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }`}</style>
    </div>
  );
};

const ghostBtn = {
  background: 'transparent', border: '1px solid #3A3A38', color: '#B7B6B6',
  fontFamily: 'Sora', fontWeight: 600, fontSize: 11,
  letterSpacing: '0.10em', textTransform: 'uppercase',
  padding: '11px 14px', cursor: 'pointer',
  transition: 'color 160ms, border-color 160ms',
};
const secondaryBtn = {
  background: '#1D1D1B', border: '1px solid #3A3A38', color: '#EFEDED',
  fontFamily: 'Sora', fontWeight: 600, fontSize: 11,
  letterSpacing: '0.10em', textTransform: 'uppercase',
  padding: '11px 16px', cursor: 'pointer',
  transition: 'background-color 160ms',
};
const primaryBtn = {
  background: 'var(--comesa-red)', border: '1px solid var(--comesa-red)', color: '#fff',
  fontFamily: 'Sora', fontWeight: 600, fontSize: 11,
  letterSpacing: '0.10em', textTransform: 'uppercase',
  padding: '11px 18px', cursor: 'pointer',
  display: 'inline-flex', alignItems: 'center', gap: 8,
  transition: 'background-color 160ms',
};

window.SelectionBar = SelectionBar;